From f16c3e69cd5971f9ea13a3e4e59d24584623349b Mon Sep 17 00:00:00 2001 From: PRO X Date: Mon, 11 Dec 2023 23:29:26 -0400 Subject: [PATCH 1/5] Detalles ingresados en el juego --- index.html | 5 +++-- script.js | 4 ++-- styles.css | 3 ++- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index f958181..ebc2880 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,9 @@ + - Document + Tic-Tac-Toe
@@ -22,7 +23,7 @@
- +
\ No newline at end of file diff --git a/script.js b/script.js index f1b332f..d8b764d 100644 --- a/script.js +++ b/script.js @@ -49,9 +49,9 @@ function handleClick(e) { function endGame(draw) { if (draw) { - winningMessageTextElement.innerText = 'Draw!' + winningMessageTextElement.innerText = 'Empate!' } else { - winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!` + winningMessageTextElement.innerText = `${circleTurn ? "O" : "X"} Gana!` } winningMessageElement.classList.add('show') } diff --git a/styles.css b/styles.css index b6b8c1d..cad0f5f 100644 --- a/styles.css +++ b/styles.css @@ -9,6 +9,7 @@ body { margin: 0; + background-color: #c7f9cc; } .board { @@ -109,7 +110,7 @@ body { .board.circle .cell:not(.x):not(.circle):hover::after { width: calc(var(--mark-size) * .7); height: calc(var(--mark-size) * .7); - background-color: white; + background-color: #c7f9cc; } .winning-message { From 61b337322b6873c0a599ece0824e6f81b52a1363 Mon Sep 17 00:00:00 2001 From: PRO X Date: Sat, 24 Feb 2024 09:02:33 +0100 Subject: [PATCH 2/5] Se modifico el script --- script.js | 1 + 1 file changed, 1 insertion(+) diff --git a/script.js b/script.js index d8b764d..4804ef1 100644 --- a/script.js +++ b/script.js @@ -1,3 +1,4 @@ + const X_CLASS = 'x' const CIRCLE_CLASS = 'circle' const WINNING_COMBINATIONS = [ From 7c8899fd880998f1b608db5d8346841e153b0545 Mon Sep 17 00:00:00 2001 From: PRO X Date: Sat, 30 Mar 2024 15:10:03 +0100 Subject: [PATCH 3/5] Se ha limpiado el codigo --- script.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/script.js b/script.js index 4804ef1..909dd3d 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,6 @@ -const X_CLASS = 'x' -const CIRCLE_CLASS = 'circle' +const X_CLASS = "x" +const CIRCLE_CLASS = "circle" const WINNING_COMBINATIONS = [ [0, 1, 2], [3, 4, 5], @@ -11,27 +11,27 @@ const WINNING_COMBINATIONS = [ [0, 4, 8], [2, 4, 6] ] -const cellElements = document.querySelectorAll('[data-cell]') -const board = document.getElementById('board') -const winningMessageElement = document.getElementById('winningMessage') -const restartButton = document.getElementById('restartButton') -const winningMessageTextElement = document.querySelector('[data-winning-message-text]') +const cellElements = document.querySelectorAll("[data-cell]") +const board = document.getElementById("board") +const winningMessageElement = document.getElementById("winningMessage") +const restartButton = document.getElementById("restartButton") +const winningMessageTextElement = document.querySelector("[data-winning-message-text]") let circleTurn startGame() -restartButton.addEventListener('click', startGame) +restartButton.addEventListener("click", startGame) function startGame() { circleTurn = false cellElements.forEach(cell => { cell.classList.remove(X_CLASS) cell.classList.remove(CIRCLE_CLASS) - cell.removeEventListener('click', handleClick) - cell.addEventListener('click', handleClick, { once: true }) + cell.removeEventListener("click", handleClick) + cell.addEventListener("click", handleClick, { once: true }) }) setBoardHoverClass() - winningMessageElement.classList.remove('show') + winningMessageElement.classList.remove("show") } function handleClick(e) { @@ -50,11 +50,11 @@ function handleClick(e) { function endGame(draw) { if (draw) { - winningMessageTextElement.innerText = 'Empate!' + winningMessageTextElement.innerText = "Empate!" } else { winningMessageTextElement.innerText = `${circleTurn ? "O" : "X"} Gana!` } - winningMessageElement.classList.add('show') + winningMessageElement.classList.add("show") } function isDraw() { From e1731c86c432c190bfc1a2d3e4bdf89cd3e3b621 Mon Sep 17 00:00:00 2001 From: PRO X Date: Mon, 10 Jun 2024 22:03:02 +0200 Subject: [PATCH 4/5] Se le agrego un titulo --- index.html | 1 + styles.css | 10 ++++++++++ 2 files changed, 11 insertions(+) diff --git a/index.html b/index.html index ebc2880..0fee425 100644 --- a/index.html +++ b/index.html @@ -10,6 +10,7 @@ Tic-Tac-Toe +

✨ Tic Tac Toe ✨

diff --git a/styles.css b/styles.css index cad0f5f..783398a 100644 --- a/styles.css +++ b/styles.css @@ -7,11 +7,21 @@ --mark-size: calc(var(--cell-size) * .9); } +* { + font-family: monospace; +} + body { margin: 0; background-color: #c7f9cc; } +h1 { + font-size: 80px; + text-align: center; + margin-bottom: -120px; +} + .board { width: 100vw; height: 100vh; From c1a31b32f0c931961ae3a6c186438c79947e9007 Mon Sep 17 00:00:00 2001 From: PRO X Date: Tue, 11 Jun 2024 04:17:34 +0200 Subject: [PATCH 5/5] Create README.md --- README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..f86a926 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +Welcome to the Tic-Tac-Toe game repository! This project implements the classic Tic-Tac-Toe game using JS, HTML and CSS. It is a simple but fun game that can be played between two players.