kagura/ReactLearn
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

TicTacToe: Prettify

Browse source
This commit is contained in:
Kagura 2024-11-22 20:48:06 +08:00
parent 1b465ee07a
commit 943f02a3ad
1 changed files with 35 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
src/TicTacToe.js
View file

@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
function Square({ row, column, value, clickHandler }) {
let buttonClass = ""
switch (value){
switch (value) {
case "X":
buttonClass = "bg-amber-200 "
break;
@ -75,16 +75,16 @@ function Map({ mapSize }) {
}
updateMap(nextMap)
setCurrentMove(currentMove + 1)
let hasWinner = calculateWinner(row, column,nextMap)
let hasWinner = calculateWinner(row, column, nextMap)
if (hasWinner) {
setWinner(nextMap[row][column])
}
if (currentMove + 1 >= mapSize * mapSize && !hasWinner){
if (currentMove + 1 >= mapSize * mapSize && !hasWinner) {
setNoWinner(true)
}
}
function calculateWinner(row, column,map) {
function calculateWinner(row, column, map) {
const who = map[row][column]; // 当前玩家标记
const winNeed = mapSize > ticTacToeMaxMapSize ? 5 : mapSize; // 棋盘大小(>5五子棋)
@ -180,55 +180,55 @@ function getMaxBoardSize() {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
const squareSize = 34;
const otherWidthUse = 48*2;
const otherWidthUse = 48 * 2;
const squaresHorizontally = Math.floor((screenWidth - otherWidthUse) / squareSize);
const squaresVertically = Math.floor(screenHeight / squareSize);
if (squaresHorizontally > 20 && squaresVertically > 20){
if (squaresHorizontally > 20 && squaresVertically > 20) {
return 20
}
return squaresHorizontally < squaresVertically ? squaresHorizontally : squaresVertically;
}
export default function Game(){
export default function Game() {
const location = useLocation();
const params = new URLSearchParams(location.search);
const useSize = params.get('mapSize');
let realSize = parseInt(useSize)
if (isNaN(realSize) || realSize < 3 || realSize > getMaxBoardSize()){
if (isNaN(realSize) || realSize < 3 || realSize > getMaxBoardSize()) {
realSize = 3
}
return(
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-cyan-200 to-pink-200 via-white p-6 sm:p-10">
<div className="w-full max-w-4xl bg-white rounded-xl shadow-xl p-6 sm:p-12 space-y-6">
<Map mapSize={realSize} />
<div className="rounded-xl bg-green-50 shadow-lg flex flex-col items-center sm:space-y-4 p-6 sm:p-8 space-y-3 w-full">
<p>当前最大地图大小： {getMaxBoardSize()}</p>
<form className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center sm:text-center w-full">
<label className="text-lg sm:text-xl bg-green-50 border border-green-200 p-2 sm:p-4 rounded-md w-full sm:w-auto">
地图大小
<input
className="sm:w-20 sm:h-10 mt-2 sm:mt-0 border border-sky-300 rounded-md p-2 w-full"
name="mapSize"
defaultValue={realSize}
type="number"
/>
</label>
<button
type="submit"
className="bg-cyan-300 hover:bg-cyan-400 text-white rounded-md px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-lg mt-4 sm:mt-0"
>
确认
</button>
</form>
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-cyan-200 to-pink-200 via-white p-6 sm:p-10">
<div className="w-full max-w-4xl bg-white rounded-xl shadow-xl p-6 sm:p-12 space-y-6">
<Map mapSize={realSize} />
<div className="rounded-xl bg-green-50 shadow-lg flex flex-col items-center sm:space-y-4 p-6 sm:p-8 space-y-3 w-full">
<p>当前最大地图大小： {getMaxBoardSize()}</p>
<form className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center sm:text-center w-full">
<label className="text-lg sm:text-xl bg-green-50 border border-green-200 p-2 sm:p-4 rounded-md w-full sm:w-auto">
地图大小
<input
className="sm:w-20 sm:h-10 mt-2 sm:mt-0 border border-sky-300 rounded-md p-2 w-full"
name="mapSize"
defaultValue={realSize}
type="number"
/>
</label>
<button
type="submit"
className="bg-cyan-300 hover:bg-cyan-400 text-white rounded-md px-4 py-2 sm:px-6 sm:py-3 text-sm sm:text-lg mt-4 sm:mt-0"
>
确认
</button>
</form>
</div>
</div>
</div>
</div>
</div>
)
}