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

Setup polishing, choose first player, GUI display info, reset buttons

This commit is contained in:
NetMan 2024-01-31 00:06:48 +01:00
parent 9c368eaff7
commit 5e5fda4be5
6 changed files with 182 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
README.md
View File

@ -1,18 +1,21 @@
# odin-tic-tac-toe # odin-tic-tac-toe
## Tic Tac Toe
Tic Tac Toe using IIFE's to prevent unwanted user-forced changes, using addEventListeners
using IIFE to prevent unwanted user-forced changes, using addEventListeners
utilizing pubsub, and splitting functions into parts used by others for code readability :) utilizing pubsub, and splitting functions into parts used by others for code readability :)
## todo: ## todo:
- [ ] "setup screen" on first startup (majorly done) - [X] "setup screen" on startup
- [ ] display points, turn, etc - info in GUI - [X] display points, turn, etc - info in GUI
- [ ] reset everything btn - [X] reset points / everything btn
- [ ] clean code, although most of it is fine and intact, parts from later commits (from creating the form setup screen) are quite a little messy
### nice to haves ("todo" that will probably never be done)
- [ ] 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:
![preview](image.png) ![preview1](image-1.png)
![preview2](image.png)

BIN
image-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
image.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 24 KiB

19
index.html
View File

@ -11,7 +11,24 @@
</head> </head>
<body> <body>
<div id="center-contain"> <div id="center-contain">
<div id="main-game"></div> <div id="main-game"></div>
<div id="info">
<ul>
<li><strong>Players:</strong>
<ul>
<li id="p1info">(player1)</li>
<li id="p2info">(player2)</li>
</ul>
</li>
<li><strong>Turn</strong>:
<ul>
<li id="pturn">player</li>
</ul>
</li>
</ul>
<button id="reset-points">Reset points</button>
<button id="reset-everything">Reset everything</button>
</div>
</div> </div>
</body> </body>

153
script.js
View File

@ -17,18 +17,70 @@
function generateForm() { function generateForm() {
const form = document.createElement("form"); 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}; const title = generateElement(
{element: "h1", id: "title", textContent: "Tic Tac Toe"});
const player1NameLabel = generateElement(
{element: "label", _for: "p1name", textContent: "Player 1 name"});
const player1Name = generateElement(
{element: "input", type: "text", name: "p1name", id: "p1name", required: true});
const player2NameLabel = generateElement(
{element: "label", _for: "p2name", textContent: "Player 2 name"});
const player2Name = generateElement(
{element: "input", type: "text", name: "p2name", id: "p2name", required: true});
const markerInfo = generateElement(
{element: "label", textContent: "Marker for player 1:"});
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 markerX = generateElement(
{element: "input", type: "radio", name: "marker", value: "X", id: "mx"});
const markerXLabel = generateElement(
{element: "label", _for: "mx", textContent: "X"});
const markerInfoAddition = generateElement(
{element: "label", innerText: "\n(other one will go to player 2)"});
const firstInfo = generateElement(
{element: "label", textContent: "Who goes first?"});
const firstPlayer1 = generateElement(
{element: "input", type: "radio", name: "first", value: "1", id: "fp1", checked: true, required: true});
const firstPlayer1Label = generateElement(
{element: "label", _for: "fp1", textContent: "1"});
const firstPlayer2 = generateElement(
{element: "input", type: "radio", name: "first", value: "2", id: "fp2"});
const firstPlayer2Label = generateElement(
{element: "label", _for: "fp2", textContent: "2"});
const submit = generateElement(
{element: "button", type: "submit", textContent: "Save"});
form.append(
title,
player1NameLabel, player1Name,
player2NameLabel, player2Name,
markerInfo,
markerO, markerOLabel,
markerX, markerXLabel,
markerInfoAddition,
document.createElement("br"),
firstInfo,
firstPlayer1, firstPlayer1Label,
firstPlayer2, firstPlayer2Label,
submit,
);
return form;
} }
function addDismissivePopup(popup) { function addDismissivePopup(popup) {
@ -89,18 +141,19 @@
name: vals[1], name: vals[1],
marker: vals[2] == "O" ? "X" : "O", marker: vals[2] == "O" ? "X" : "O",
}, },
}) }, vals[3])
} }
(function popupStartInput() { (function popupStartInput() {
const {popup, popupContent} = generatePopup(false); const {popup, popupContent} = generatePopup(false);
const {form, player1Name, player2Name,markerX,markerO,submit} = generateForm(); const form = generateForm();
popupContent.append(form); popupContent.append(form);
form.addEventListener("submit", function(event) {getFormOutput(event, popup)}); form.addEventListener("submit", function(event) {getFormOutput(event, popup)});
})() })()
const game = function(playersInput) { const game = function(playersInput, first) {
const mainGameDiv = document.querySelector("#main-game"); const mainGameDiv = document.querySelector("#main-game");
const infoDiv = document.querySelector("#info");
let gameboard = new Array(9); let gameboard = new Array(9);
gameboard.fill(null); gameboard.fill(null);
@ -141,6 +194,24 @@
// ----------------- // -----------------
function updateInfo() {
const player1Info = document.querySelector("#p1info");
player1Info.textContent =
`1) ${players.player1.name} (${players.player1.marker}) - ${players.player1.points} points`;
const player2Info = document.querySelector("#p2info");
player2Info.textContent =
`2) ${players.player2.name} (${players.player2.marker}) - ${players.player2.points} points`;
const playerTurnInfo = document.querySelector("#pturn");
playerTurnInfo.textContent =
`${activePlayer.number}) ${activePlayer.player.name} (${activePlayer.player.marker})`;
console.log(activePlayer.number);
}
// -----------------
function popupWin() { function popupWin() {
const {popup, popupContent, dismissBtn} = generatePopup(true); const {popup, popupContent, dismissBtn} = generatePopup(true);
@ -203,10 +274,16 @@
this.player == players.player1 this.player == players.player1
? this.player = players.player2 ? this.player = players.player2
: this.player = players.player1; : this.player = players.player1;
this.player == players.player1
? this.number = 1
: this.number = 2;
}, },
set(player) { set(player) {
if (player instanceof Player) { if (player instanceof Player) {
this.player = player; this.player = player;
this.player == players.player1
? this.number = 1
: this.number = 2;
} else { } else {
throw new Error("No such player exists"); throw new Error("No such player exists");
} }
@ -216,7 +293,6 @@
// ----------------- // -----------------
function changeField(field) { function changeField(field) {
if (gameboard[field] === null) { if (gameboard[field] === null) {
gameboard[field] = activePlayer.player.marker; gameboard[field] = activePlayer.player.marker;
pubsub.publish("fieldChange"); pubsub.publish("fieldChange");
@ -229,14 +305,43 @@
// ----------------- // -----------------
pubsub.subscribe("fieldChange", displayController); function setupButtons() {
pubsub.subscribe("fieldChange", checkWin); const resetPointsBtn = document.querySelector("#reset-points");
pubsub.subscribe("continueGame", () => {activePlayer.change()}); const resetEverythingBtn = document.querySelector("#reset-everything");
pubsub.subscribe("draw", popupDraw);
pubsub.subscribe("winTrue", popupWin); resetPointsBtn.addEventListener("click", () => {
pubsub.subscribe("draw", () => {gameboard.fill(null);}) gameboard.fill(null);
pubsub.subscribe("winTrue", () => {gameboard.fill(null);}) players.player1.points = 0;
displayController(); players.player2.points = 0;
activePlayer.change() updateInfo();
displayController();
})
resetEverythingBtn.addEventListener("click", () => {
if(confirm("For sure?")) {
window.location.reload();
}
})
}
// -----------------
(function initializeLaunch() {
pubsub.subscribe("fieldChange", displayController);
pubsub.subscribe("fieldChange", checkWin);
pubsub.subscribe("continueGame", () => {activePlayer.change(); updateInfo()});;
// pubsub.subscribe("continueGame", );
// pubsub.subscribe("fieldChange", updateInfo);
pubsub.subscribe("draw", popupDraw);
pubsub.subscribe("winTrue", popupWin);
pubsub.subscribe("draw", () => {gameboard.fill(null);})
pubsub.subscribe("winTrue", () => {gameboard.fill(null);})
activePlayer.set(
first == "1" ? players.player1 : players.player2
)
displayController();
updateInfo();
setupButtons();
})();
} }
})() })()

28
style.css
View File

@ -10,6 +10,7 @@ html, body {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column;
min-height: 100dvh; min-height: 100dvh;
} }
@ -73,9 +74,12 @@ html, body {
cursor: pointer; cursor: pointer;
} }
h1#title {
font-size: 2rem;
margin: 0 0 10px 0;
}
form input[type="text"], form button[type="submit"], button {
form input[type="text"], form button[type="submit"] {
padding: 6px; padding: 6px;
font-size: 1rem; font-size: 1rem;
display: block; display: block;
@ -85,6 +89,24 @@ form input[type="text"], form button[type="submit"] {
margin: auto; margin: auto;
} }
form button[type="submit"] { button {
cursor: pointer; cursor: pointer;
}
label:has(+ input[type="text"]) {
font-size: 0.95rem;
display: block;
margin: 2px 0 0 0;
text-transform: uppercase;
font-weight: bold;
}
li li {
margin-left: 15px;
font-size: 1.2rem;
}
li > strong {
font-weight: bold;
font-size: 1.5rem;
} }