Compare commits
2 Commits
edward-shi
...
master
| Author | SHA1 | Date | |
|---|---|---|---|
| 6fe78927c6 | |||
| 69a13f7a7f |
@ -1,149 +1,164 @@
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import "./style.css";
|
||||
import React from 'react';
|
||||
import { useState } from 'react';
|
||||
import './style.css';
|
||||
|
||||
function TicTacToe() {
|
||||
const [gridState, setGridState] = useState(Array(9).fill(0));
|
||||
const [playerState, setPlayerState] = useState(false);
|
||||
const [winState, setWinState] = useState(0);
|
||||
let localWinState = winState;
|
||||
const [gridState, setGridState] = useState(Array(9).fill(0));
|
||||
const [playerState, setPlayerState] = useState(false);
|
||||
const [winState, setWinState] = useState(0);
|
||||
let localWinState = winState;
|
||||
|
||||
function updateGridState(index : number, state : number) {
|
||||
gridState[index] = state;
|
||||
setGridState(gridState);
|
||||
}
|
||||
|
||||
function updateGridState(index: number, state: number) {
|
||||
gridState[index] = state;
|
||||
setGridState(gridState);
|
||||
}
|
||||
function resetGridState() {
|
||||
setGridState(Array(9).fill(0));
|
||||
setPlayerState(false);
|
||||
setWinState(0);
|
||||
}
|
||||
|
||||
function playTurn(index: number) {
|
||||
if (gridState[index]) return;
|
||||
if (winState) return;
|
||||
function playTurn(index : number) {
|
||||
if (winState) {
|
||||
resetGridState()
|
||||
return;
|
||||
}
|
||||
if (gridState[index]) return;
|
||||
|
||||
const newState = playerState ? 2 : 1;
|
||||
updateGridState(index, newState);
|
||||
const newState = playerState ? 2 : 1;
|
||||
updateGridState(index, newState);
|
||||
|
||||
const winner = checkWinCondition();
|
||||
if (winner) {
|
||||
localWinState = winner;
|
||||
setWinState(winner);
|
||||
return;
|
||||
}
|
||||
const winner = checkWinCondition()
|
||||
if (winner) {
|
||||
localWinState = winner;
|
||||
setWinState(winner);
|
||||
return;
|
||||
}
|
||||
|
||||
setPlayerState(!playerState);
|
||||
}
|
||||
setPlayerState(!playerState);
|
||||
}
|
||||
|
||||
function checkWinCondition() : number {
|
||||
|
||||
function checkWinCondition(): number {
|
||||
function getWinningValue(a: number, b: number, c: number) {
|
||||
if (a === b && b === c && a === c) {
|
||||
return a;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
/*
|
||||
* Diagonals
|
||||
*/
|
||||
{
|
||||
const a = gridState[3 * 0 + 0];
|
||||
const b = gridState[3 * 1 + 1];
|
||||
const c = gridState[3 * 2 + 2];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
{
|
||||
const a = gridState[3 * 0 + 2];
|
||||
const b = gridState[3 * 1 + 1];
|
||||
const c = gridState[3 * 2 + 0];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
/*
|
||||
* Rows and Columns
|
||||
*/
|
||||
for (let row = 0; row < 3; row++) {
|
||||
const a = gridState[3 * row + 0];
|
||||
const b = gridState[3 * row + 1];
|
||||
const c = gridState[3 * row + 2];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
function getWinningValue(
|
||||
a : number,
|
||||
b : number,
|
||||
c : number
|
||||
) {
|
||||
if ((a === b) && (b === c) && (a === c)) {
|
||||
return a;
|
||||
}
|
||||
return 0
|
||||
}
|
||||
/*
|
||||
* Diagonals
|
||||
*/
|
||||
{
|
||||
const a = gridState[3 * 0 + 0];
|
||||
const b = gridState[3 * 1 + 1];
|
||||
const c = gridState[3 * 2 + 2];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
{
|
||||
const a = gridState[3 * 0 + 2];
|
||||
const b = gridState[3 * 1 + 1];
|
||||
const c = gridState[3 * 2 + 0];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
/*
|
||||
* Rows and Columns
|
||||
*/
|
||||
for (let row = 0; row < 3; row++) {
|
||||
const a = gridState[3 * row + 0];
|
||||
const b = gridState[3 * row + 1];
|
||||
const c = gridState[3 * row + 2];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
|
||||
for (let column = 0; column < 3; column++) {
|
||||
const a = gridState[3 * 0 + column];
|
||||
const b = gridState[3 * 1 + column];
|
||||
const c = gridState[3 * 2 + column];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
|
||||
for (let column = 0; column < 3; column++) {
|
||||
const a = gridState[3 * 0 + column];
|
||||
const b = gridState[3 * 1 + column];
|
||||
const c = gridState[3 * 2 + column];
|
||||
const winner = getWinningValue(a, b, c);
|
||||
if (winner) return winner;
|
||||
}
|
||||
const isDrawState = () => {
|
||||
for (let i in gridState) {
|
||||
if (!gridState[i]) return false;
|
||||
};
|
||||
return true;
|
||||
}
|
||||
if (isDrawState()) return 3;
|
||||
|
||||
const isDrawState = () => {
|
||||
for (let i in gridState) {
|
||||
if (!gridState[i]) return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
if (isDrawState()) return 3;
|
||||
return 0;
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
let stateString = "";
|
||||
if (localWinState === 3) {
|
||||
stateString = `Game draw.`
|
||||
}
|
||||
else if (localWinState) {
|
||||
stateString = `Player ${getStateChar(localWinState)} wins.`;
|
||||
}
|
||||
else {
|
||||
stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`
|
||||
}
|
||||
|
||||
let stateString = "";
|
||||
if (localWinState === 3) {
|
||||
stateString = `Game draw.`;
|
||||
} else if (localWinState) {
|
||||
stateString = `Player ${getStateChar(localWinState)} wins.`;
|
||||
} else {
|
||||
stateString = `Player ${getStateChar(playerState ? 2 : 1)} turn.`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="TicTacToe">
|
||||
<h1>{stateString}</h1>
|
||||
<div className="TicTacToeGrid">
|
||||
{gridState.map((item, index) => {
|
||||
const getState = () => {
|
||||
return gridState[index];
|
||||
};
|
||||
const callback = () => {
|
||||
playTurn(index);
|
||||
};
|
||||
return <TicTacToeCell state={gridState[index]} onClick={callback} />;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="TicTacToe">
|
||||
<h1>{stateString}</h1>
|
||||
<div className="TicTacToeGrid">
|
||||
{
|
||||
gridState.map((item, index) => {
|
||||
const state = gridState[index];
|
||||
const onClick = () => { playTurn(index) };
|
||||
return (<TicTacToeCell state={state} onClick={onClick}/>);
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface CellProps {
|
||||
state: number;
|
||||
onClick: () => void;
|
||||
state: number;
|
||||
onClick: () => void;
|
||||
}
|
||||
|
||||
function TicTacToeCell({ state, onClick }: CellProps) {
|
||||
return (
|
||||
<div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
|
||||
<p>{getStateChar(state)}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`TicTacToeCell ${getStateClass(state)}`} onClick={onClick}>
|
||||
<p>{getStateChar(state)}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getStateChar(state: number) {
|
||||
switch (state) {
|
||||
case 1:
|
||||
return "O";
|
||||
case 2:
|
||||
return "X";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
function getStateChar(state : number) {
|
||||
switch (state) {
|
||||
case 1:
|
||||
return "O";
|
||||
case 2:
|
||||
return "X";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
function getStateClass(state: number) {
|
||||
switch (state) {
|
||||
case 1:
|
||||
return "CellRed";
|
||||
case 2:
|
||||
return "CellBlue";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
function getStateClass(state : number) {
|
||||
switch (state) {
|
||||
case 1:
|
||||
return "CellRed";
|
||||
case 2:
|
||||
return "CellBlue";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
export default TicTacToe;
|
||||
|
||||
@ -1,12 +1,13 @@
|
||||
.TicTacToe {
|
||||
background-color: #3B3E49;
|
||||
color: #B9B8D6;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.TicTacToeGrid {
|
||||
display: grid;
|
||||
width: 50vh;
|
||||
height: 50vh;
|
||||
min-width: 50vw;
|
||||
min-height: 50vw;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
@ -29,6 +30,7 @@
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 10vw;
|
||||
}
|
||||
|
||||
.CellRed {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user