tod
/
odin-tic-tac-toe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added players setup popup for each page refresh

This commit is contained in:
NetMan 2024-01-30 20:11:05 +01:00
parent a50088947a
commit 9a34360ce4
3 changed files with 123 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -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)

155
script.js
View File

@ -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",
}}
);
}
})()

16
style.css
View File

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