Added players setup popup for each page refresh

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 (majorly done)
-* "setup screen" on first startup
+[ ] display points, turn, etc - info in GUI
-* reset everything btn
+[ ] reset everything btn
-* localstorage or other similar implementation to save progress and players
+[ ] localstorage or other similar implementation to save progress and players
-* edit player settings - name, marker
+[ ] edit player settings - name, marker
 
 # preview:
 ![preview](image.png)

script.js

@@ -1,7 +1,105 @@
 "use strict";
 
-function initiateGame(playersInput) {
+(function() {
-    const game = (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",
-    }}
-);

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;
 }