Last active
February 9, 2022 08:48
-
-
Save lyraddigital/452de5248778c6075c4604130661a42c to your computer and use it in GitHub Desktop.
Gist that contains all the material needed to start working on the React JS version of my Tic Tac Toe game
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#game { | |
background: var(--content-background-color); | |
border-radius: var(--default-border-radius); | |
padding: 3vmin; | |
box-shadow: var(--box-shadow); | |
} | |
h1 { | |
color: var(--primary-color); | |
text-align: center; | |
margin-bottom: 2vmin; | |
font-size: var(--main-title-font-size); | |
} | |
#board { | |
display: grid; | |
grid-template-columns: repeat(3, 20vmin); | |
grid-template-rows: repeat(3, 20vmin); | |
grid-gap: 1vmin; | |
margin: 2vmin 0; | |
} | |
.cell { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 10vmin; | |
font-weight: bold; | |
color: var(--accent-color); | |
background: var(--primary-gradient); | |
border: var(--default-primary-border); | |
border-radius: var(--default-border-radius); | |
outline: none; | |
box-shadow: var(--box-shadow); | |
} | |
.cell:active, .cell:hover, .cell.winner { | |
cursor: pointer; | |
color: var(--content-background-color); | |
background: var(--primary-highlight-gradient); | |
} | |
.cell-content { | |
overflow: hidden; | |
width: 0; | |
height: 0; | |
transition: width var(--selection-animation-duration), height var(--selection-animation-duration); | |
} | |
.cell-content.populated { | |
width: 12vmin; | |
height: 12vmin; | |
} | |
#modal-overlay { | |
display: none; | |
justify-content: center; | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
background: var(--modal-overlay-color); | |
} | |
#game-result-modal { | |
display: grid; | |
grid-row-gap: 76vmin; | |
--modal-items-border-radius: 1vmin; | |
} | |
#result-container { | |
display: flex; | |
align-items: flex-end; | |
} | |
#winner-container { | |
margin-bottom: 4vmin; | |
width: 30vmin; | |
height: 8vmin; | |
font-size: var(--main-title-font-size); | |
font-weight: bold; | |
color: var(--primary-color); | |
background: var(--accent-color); | |
border: var(--default-accent-border); | |
box-shadow: var(--box-shadow); | |
border-radius: var(--modal-items-border-radius); | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
#new-game-container { | |
display: flex; | |
justify-content: center; | |
align-items: flex-start; | |
padding-top: 2.5vmin; | |
} | |
#new-game-container > button { | |
font-size: 3vmin; | |
padding: 1.5vmin; | |
color: var(--accent-color); | |
background: var(--primary-gradient); | |
border: var(--default-primary-border); | |
border-radius: var(--modal-items-border-radius); | |
outline: none; | |
box-shadow: var(--box-shadow); | |
} | |
#new-game-container > button:hover, | |
#new-game-container > button:active { | |
color: var(--content-background-color); | |
cursor: pointer; | |
background: var(--primary-highlight-gradient); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
:root { | |
--background-light-color: #57ebd7; | |
--background-dark-color: #24a88b; | |
--content-background-color: #fff6be; | |
--primary-color: #007340; | |
--primary-brighter: #00a057; | |
--primary-saturated: #05a058; | |
--primary-saturated-brighter: #07cf72; | |
--accent-color: #FD0; | |
--accent-darker: #a79000; | |
--box-shadow-color: rgba(0,0,0,0.75); | |
--modal-overlay-color: rgba(0, 0, 0, 0.3); | |
--main-background-gradient: linear-gradient(to right, var(--background-light-color) 0%, var(--background-dark-color) 100%); | |
--primary-gradient: linear-gradient(to right, var(--primary-color) 0%,var(--primary-saturated) 100%); | |
--primary-highlight-gradient: linear-gradient(to right, var(--primary-brighter) 0%,var(--primary-saturated-brighter) 100%); | |
--box-shadow: 0 1vmin 2vmin -1vmin rgba(0,0,0,0.75); | |
--default-border-radius: 2vmin; | |
--default-primary-border: 0.25vmin solid var(--primary-color); | |
--default-accent-border: 0.25vmin solid var(--accent-darker); | |
--main-title-font-size: 4vmin; | |
--selection-animation-duration: 350ms; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
html, body { | |
height: 100%; | |
} | |
body { | |
display: grid; | |
place-items: center center; | |
background: var(--main-background-gradient); | |
font-family: Arial, Helvetica, sans-serif; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="game"> | |
<h1>Tic Tac Toe</h1> | |
<div id="board"> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
<button class="cell"> | |
<span class="cell-content"></span> | |
</button> | |
</div> | |
</div> | |
<div id="modal-overlay"> | |
<div id="game-result-modal"> | |
<div id="result-container"> | |
<div id="winner-container"> | |
<span></span> | |
</div> | |
</div> | |
<div id="new-game-container"> | |
<button id="new-game-button">Start New Game</button> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const winningMatrix = { | |
0: [[1,2],[3,6],[4,8]], | |
1: [[0,2],[4,7]], | |
2: [[0,1],[5,8],[4,6]], | |
3: [[0,6],[4,5]], | |
4: [[2,6],[3,5],[1,7],[0,8]], | |
5: [[3,4],[2,8]], | |
6: [[7,8],[0,3],[2,4]], | |
7: [[6,8],[1,4]], | |
8: [[6,7],[2,5],[0,4]] | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment