From 9a34360ce42ae7a477f261a6557125020860245c Mon Sep 17 00:00:00 2001 From: NetMan <13informatyka14@gmail.com> Date: Tue, 30 Jan 2024 20:11:05 +0100 Subject: [PATCH] Added players setup popup for each page refresh --- README.md | 10 ++-- script.js | 155 +++++++++++++++++++++++++++++++++++------------------- style.css | 16 ++++++ 3 files changed, 123 insertions(+), 58 deletions(-) diff --git a/README.md b/README.md index c913a2a..133ecf0 100644 --- a/README.md +++ b/README.md @@ -8,11 +8,11 @@ utilizing pubsub, and splitting functions into parts used by others for code rea ## todo: -* display points, turn, etc - info in GUI -* "setup screen" on first startup -* reset everything btn -* localstorage or other similar implementation to save progress and players -* edit player settings - name, marker +[ ] "setup screen" on first startup (majorly done) +[ ] display points, turn, etc - info in GUI +[ ] reset everything btn +[ ] localstorage or other similar implementation to save progress and players +[ ] edit player settings - name, marker # preview: ![preview](image.png) \ No newline at end of file diff --git a/script.js b/script.js index 0363af6..6946791 100644 --- a/script.js +++ b/script.js @@ -1,7 +1,105 @@ "use strict"; -function initiateGame(playersInput) { - const game = (function() { +(function() { + function generateElement(args) { + const elementOutput = document.createElement(args.element); + for (let arg in args) { + if (typeof arg !== "undefined") { + if (arg == "_for") { + elementOutput.setAttribute("for", args[arg]); + } else { + elementOutput[arg] = args[arg]; + } + } + } + return elementOutput; + } + + function generateForm() { + const form = document.createElement("form"); + const player1NameLabel = generateElement({element:"label",_for:"p1name",textContent:"Player 1 name"}); + const player1Name = generateElement({element:"input",type:"text",name:"p1name",placeholder:"p1name",id:"p1name"}); + const markerX = generateElement({element:"input",type:"radio",name:"marker",value:"X",id:"mx"}); + const markerXLabel = generateElement({element:"label",_for:"mx",textContent:"X"}); + const markerO = generateElement({element:"input",type:"radio",name:"marker",value:"O",id:"mo",checked:true,required:true}); + const markerOLabel = generateElement({element:"label",_for:"mo",textContent:"O"}); + const player2NameLabel = generateElement({element:"label",_for:"p2name",textContent:"Player 2 name"}); + const player2Name = generateElement({element:"input",type:"text",name:"p2name",placeholder:"p2name",id:"p2name"}); + const submit = generateElement({element:"button",type:"submit",textContent:"Save"}); + form.append(player1NameLabel, player1Name, player2NameLabel, player2Name,markerO,markerOLabel,markerX,markerXLabel,submit); + + return {form, player1Name, player2Name, markerX, markerXLabel, markerO, markerOLabel, submit}; + } + + function addDismissivePopup(popup) { + function dismissPopup() { + popup.remove(); + } + popup.addEventListener("click", function(event) { + if (this !== event.target) return; + dismissPopup(); + }, false); + function dismissPopupKey(event) { + if (event.key.toLowerCase() == "escape") { + popup.remove(); + document.body.removeEventListener("keydown", dismissPopupKey); + } + } + + const dismissBtn = document.createElement("button"); + dismissBtn.setAttribute("type", "button"); + dismissBtn.classList.add("dismiss-button"); + dismissBtn.textContent = "Dismiss"; + dismissBtn.addEventListener("click", dismissPopup); + document.body.addEventListener("keydown", dismissPopupKey); + + return dismissBtn; + } + + function generatePopup(dismissive) { + const popup = document.createElement("div"); + popup.classList.add("popup"); + const popupContent = document.createElement("div"); + popupContent.classList.add("popup-content"); + popup.append(popupContent); + document.body.append(popup); + + if (dismissive) { + const dismissBtn = addDismissivePopup(popup, popupContent); + return {popup, popupContent, dismissBtn}; + } + return {popup, popupContent}; + } + + function getFormOutput(event, popup) { + event.preventDefault(); + const form = event.target; + const formFetch = new FormData(form); + let vals = []; + for (let value of formFetch.values()) { + vals.push(value); + } + popup.remove(); + game({ + player1: { + name: vals[0], + marker: vals[2], + }, + player2: { + name: vals[1], + marker: vals[2] == "O" ? "X" : "O", + }, + }) + } + + (function popupStartInput() { + const {popup, popupContent} = generatePopup(false); + const {form, player1Name, player2Name,markerX,markerO,submit} = generateForm(); + popupContent.append(form); + form.addEventListener("submit", function(event) {getFormOutput(event, popup)}); + })() + + const game = function(playersInput) { const mainGameDiv = document.querySelector("#main-game"); let gameboard = new Array(9); gameboard.fill(null); @@ -43,45 +141,7 @@ function initiateGame(playersInput) { // ----------------- - function addDismissivePopup(popup, popupContent) { - function dismissPopup() { - popup.remove(); - } - popup.addEventListener("click", function(event) { - if (this !== event.target) return; - dismissPopup(); - }, false); - function dismissPopupKey(event) { - if (event.key.toLowerCase() == "escape") { - popup.remove(); - document.body.removeEventListener("keydown", dismissPopupKey); - } - } - const dismissBtn = document.createElement("button"); - dismissBtn.setAttribute("type", "button"); - dismissBtn.classList.add("dismiss-button"); - dismissBtn.textContent = "Dismiss"; - dismissBtn.addEventListener("click", dismissPopup); - document.body.addEventListener("keydown", dismissPopupKey); - - return dismissBtn; - } - - function generatePopup(dismissive) { - const popup = document.createElement("div"); - popup.classList.add("popup"); - const popupContent = document.createElement("div"); - popupContent.classList.add("popup-content"); - popup.append(popupContent); - document.body.append(popup); - - if (dismissive) { - const dismissBtn = addDismissivePopup(popup, popupContent); - return {popup, popupContent, dismissBtn}; - } - return {popup, popupContent}; - } function popupWin() { const {popup, popupContent, dismissBtn} = generatePopup(true); popupContent.textContent = `${activePlayer.player.name} (${activePlayer.player.marker}) won!`; @@ -178,16 +238,5 @@ function initiateGame(playersInput) { pubsub.subscribe("winTrue", () => {gameboard.fill(null);}) displayController(); activePlayer.change() - })(); -} - -initiateGame( - {player1: { - name: "Oskar", - marker: "O", - }, - player2: { - name: "NetMan", - marker: "X", - }} -); \ No newline at end of file + } +})() \ No newline at end of file diff --git a/style.css b/style.css index 6b4cadd..9fdc44e 100644 --- a/style.css +++ b/style.css @@ -71,4 +71,20 @@ html, body { color: #000; border: 1px solid #000; cursor: pointer; +} + + + +form input[type="text"], form button[type="submit"] { + padding: 6px; + font-size: 1rem; + display: block; + outline: none; + border-radius: 10px; + border: 1px solid #000; + margin: auto; +} + +form button[type="submit"] { + cursor: pointer; } \ No newline at end of file