Download this project and play Tic Tac Toe with your friends! But don't get mad at them 🤣
Although being a simple project, it really helped me grasp plenty of basic concepts about logical programming.
- HTML5
- CSS3
- JavaScript ES6
- React
- Node.js (to build the app)
Below you'll find the logic behind my game 🕹️
- 9 button components are created from an empty
array
using the methodarray.map()
. - The
innerText
property of each button is changed upon clicking on them. This action is only triggered if the button value is empty to prevent overriding. - The process is handled by the function
turnChange
. - There are two buttons available to the user-- one to reset the game and another to reset the score.
⚠️ To accessinnerText
property, I needed to create anodeList
first. However, since JavaScript created it before React could render the components to the page, this triggered an error on first load sincenodeList
was empty. SOLUTION: asynchronous code! A promise is called to create thenodeList
with a 10 milliseconds delay.
The App uses several useState
and one useEffect
to manage the gameplay
- Player turns are handled by
useState
turnState
. - A winner is detected with
useState
winner
. - Draw is detected (no player wins) with
useState
draw
. - Two more
useState
controlX
andO
scores.useEffect
increments player's score by one depending on thewinner
value.
The game relies on conditional CSS rendering to show or hide different elements after the game ends
- Header color changes according to player color-- blue for
O
, orange forX
. Perhaps a Portal 2 reference? 🤔 - Styles change whether one player wins or the game ends in a draw. This displays a text accordingly and hides all elements except the reset button.
turnChange
writes player mark on the board and changes player turn and styles accordingly.checkDraw
checks if the game ends in a draw by changing the state ofdraw
only when all buttons are not empty and there's no winner either.checkwinner
checks if a player won on every turn by checking all possible win combinations in-place.allFunctions
functions wraps all functions that are triggered at once when user a clicks a button.resetGame
resets all values to their initial state.resetScore
resets player score to 0.