Resizing and rename of params
parent
997475e153
commit
26a0a195c2
103
src/App.jsx
103
src/App.jsx
|
|
@ -7,50 +7,49 @@ import {
|
|||
clickHandlerLoadBoard,
|
||||
clickHandlerCopyClipboard,
|
||||
} from "./functions";
|
||||
import { use } from "react";
|
||||
|
||||
const params = {};
|
||||
const self = {};
|
||||
|
||||
export default function App() {
|
||||
const [colorBoard, setColorBoard] = useState(
|
||||
Array.from(Array(6), () => new Array(7).fill("white"))
|
||||
);
|
||||
params.colorBoard = colorBoard;
|
||||
params.setColorBoard = setColorBoard;
|
||||
self.colorBoard = colorBoard;
|
||||
self.setColorBoard = setColorBoard;
|
||||
|
||||
const [outlineBoard, setOutlineBoard] = useState(
|
||||
Array.from(Array(6), () => new Array(7).fill("0px solid black"))
|
||||
);
|
||||
params.outlineBoard = outlineBoard;
|
||||
params.setOutlineBoard = setOutlineBoard;
|
||||
self.outlineBoard = outlineBoard;
|
||||
self.setOutlineBoard = setOutlineBoard;
|
||||
|
||||
const [gameOver, setGameOver] = useState(false);
|
||||
params.gameOver = gameOver;
|
||||
params.setGameOver = setGameOver;
|
||||
self.gameOver = gameOver;
|
||||
self.setGameOver = setGameOver;
|
||||
|
||||
const [currentPlayer, setCurrentPlayer] = useState("red");
|
||||
params.currentPlayer = currentPlayer;
|
||||
params.setCurrentPlayer = setCurrentPlayer;
|
||||
self.currentPlayer = currentPlayer;
|
||||
self.setCurrentPlayer = setCurrentPlayer;
|
||||
|
||||
const [message, setMessage] = useState("");
|
||||
params.message = message;
|
||||
params.setMessage = setMessage;
|
||||
self.message = message;
|
||||
self.setMessage = setMessage;
|
||||
|
||||
const [turns, setTurns] = useState(0);
|
||||
params.turns = turns;
|
||||
params.setTurns = setTurns;
|
||||
self.turns = turns;
|
||||
self.setTurns = setTurns;
|
||||
|
||||
const [menu, setMenu] = useState(true);
|
||||
params.menu = menu;
|
||||
params.setMenu = setMenu;
|
||||
self.menu = menu;
|
||||
self.setMenu = setMenu;
|
||||
|
||||
const [gamemode, setGamemode] = useState(0);
|
||||
params.gamemode = gamemode;
|
||||
params.setGamemode = setGamemode;
|
||||
self.gamemode = gamemode;
|
||||
self.setGamemode = setGamemode;
|
||||
|
||||
const [turnsMem, setTurnsMem] = useState("");
|
||||
params.turnsMem = turnsMem;
|
||||
params.setTurnsMem = setTurnsMem;
|
||||
self.turnsMem = turnsMem;
|
||||
self.setTurnsMem = setTurnsMem;
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -69,9 +68,9 @@ function Field({ row, col, style, disabled }) {
|
|||
const styling = {
|
||||
backgroundColor: !pointer
|
||||
? style.backgroundColor
|
||||
: params.currentPlayer === "red" && row === 0
|
||||
: self.currentPlayer === "red" && row === 0
|
||||
? hoverColor
|
||||
: params.currentPlayer === "yellow" && row === 0 && hoverColor,
|
||||
: self.currentPlayer === "yellow" && row === 0 && hoverColor,
|
||||
cursor: pointer && "pointer",
|
||||
outlineWidth: style.outlineWidth,
|
||||
outlineColor: style.outlineColor,
|
||||
|
|
@ -85,9 +84,9 @@ function Field({ row, col, style, disabled }) {
|
|||
col={col}
|
||||
style={styling}
|
||||
onClick={async () => {
|
||||
await clickHandlerTurn(params, col);
|
||||
if (params.gamemode === 2) {
|
||||
params.currentPlayer === "red"
|
||||
await clickHandlerTurn(self, col);
|
||||
if (self.gamemode === 2) {
|
||||
self.currentPlayer === "red"
|
||||
? setHoverColor("hsla(0, 100%, 80%, 1)")
|
||||
: setHoverColor("hsla(60, 100%, 80%, 1)");
|
||||
}
|
||||
|
|
@ -95,9 +94,9 @@ function Field({ row, col, style, disabled }) {
|
|||
disabled={disabled}
|
||||
onMouseEnter={() => {
|
||||
if (!disabled) {
|
||||
setPointer(!params.gameOver);
|
||||
setPointer(!self.gameOver);
|
||||
}
|
||||
params.currentPlayer === "red"
|
||||
self.currentPlayer === "red"
|
||||
? setHoverColor("hsla(0, 100%, 80%, 1)")
|
||||
: setHoverColor("hsla(60, 100%, 80%, 1)");
|
||||
}}
|
||||
|
|
@ -112,7 +111,7 @@ function Field({ row, col, style, disabled }) {
|
|||
}
|
||||
|
||||
function Board() {
|
||||
const fields = params.colorBoard.map((subarr, row) =>
|
||||
const fields = self.colorBoard.map((subarr, row) =>
|
||||
subarr.map((color, col) => {
|
||||
return (
|
||||
<Field
|
||||
|
|
@ -121,18 +120,18 @@ function Board() {
|
|||
col={col}
|
||||
style={{
|
||||
backgroundColor: color,
|
||||
outlineWidth: params.outlineBoard[row][col].split(" ")[0],
|
||||
outlineColor: params.outlineBoard[row][col].split(" ")[2],
|
||||
outlineStyle: params.outlineBoard[row][col].split(" ")[1],
|
||||
outlineWidth: self.outlineBoard[row][col].split(" ")[0],
|
||||
outlineColor: self.outlineBoard[row][col].split(" ")[2],
|
||||
outlineStyle: self.outlineBoard[row][col].split(" ")[1],
|
||||
}}
|
||||
disabled={row === 0 ? params.gameOver : true}
|
||||
disabled={row === 0 ? self.gameOver : true}
|
||||
/>
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
const displayMem = params.menu ? "none" : "";
|
||||
const displayState = params.gamemode === 1 ? "none" : "";
|
||||
const displayMem = self.menu ? "none" : "";
|
||||
const displayState = self.gamemode === 1 ? "none" : "";
|
||||
|
||||
return (
|
||||
<div className="board-outer" style={{ display: displayMem }}>
|
||||
|
|
@ -154,8 +153,8 @@ function Restart() {
|
|||
<button
|
||||
className="inner-button"
|
||||
id="restart"
|
||||
hidden={!params.gameOver}
|
||||
onClick={() => clickHandlerRestart(params)}
|
||||
hidden={!self.gameOver}
|
||||
onClick={() => clickHandlerRestart(self)}
|
||||
>
|
||||
↺
|
||||
</button>
|
||||
|
|
@ -164,7 +163,7 @@ function Restart() {
|
|||
|
||||
function Return() {
|
||||
return (
|
||||
<button className="inner-button" onClick={() => clickHandlerReturn(params)}>
|
||||
<button className="inner-button" onClick={() => clickHandlerReturn(self)}>
|
||||
menu
|
||||
</button>
|
||||
);
|
||||
|
|
@ -172,17 +171,17 @@ function Return() {
|
|||
|
||||
function Gamemode() {
|
||||
return (
|
||||
<div className="gamemode-div" hidden={!params.menu}>
|
||||
<div className="gamemode-div" hidden={!self.menu}>
|
||||
<button
|
||||
className="gamemode-button"
|
||||
onClick={() => clickHandlerGamemode(params, 1)}
|
||||
onClick={() => clickHandlerGamemode(self, 1)}
|
||||
>
|
||||
singleplayer
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
className="gamemode-button"
|
||||
onClick={() => clickHandlerGamemode(params, 2)}
|
||||
onClick={() => clickHandlerGamemode(self, 2)}
|
||||
>
|
||||
multiplayer
|
||||
</button>
|
||||
|
|
@ -191,16 +190,16 @@ function Gamemode() {
|
|||
}
|
||||
|
||||
function Message() {
|
||||
const displayMem = params.menu ? "none" : "";
|
||||
const displayMem = self.menu ? "none" : "";
|
||||
return (
|
||||
<p className="message" style={{ display: displayMem }}>
|
||||
{params.message}
|
||||
{self.message}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
function Heading() {
|
||||
const displayMem = !params.menu ? "none" : "";
|
||||
const displayMem = !self.menu ? "none" : "";
|
||||
return (
|
||||
<h1 className="heading" style={{ display: displayMem }}>
|
||||
CONNECT4
|
||||
|
|
@ -210,14 +209,16 @@ function Heading() {
|
|||
|
||||
function BoardState({ display }) {
|
||||
const [boardDecimal, setBoardDecimal] = useState("");
|
||||
params.boardDecimal = boardDecimal;
|
||||
params.setBoardDecimal = setBoardDecimal;
|
||||
self.boardDecimal = boardDecimal;
|
||||
self.setBoardDecimal = setBoardDecimal;
|
||||
|
||||
const [inputDecimal, setInputDecimal] = useState("");
|
||||
params.setInputDecimal = setInputDecimal;
|
||||
self.inputDecimal = inputDecimal;
|
||||
self.setInputDecimal = setInputDecimal;
|
||||
|
||||
const [showCopy, setShowCopy] = useState(false);
|
||||
params.setShowCopy = setShowCopy;
|
||||
self.showCopy = showCopy;
|
||||
self.setShowCopy = setShowCopy;
|
||||
|
||||
return (
|
||||
<div style={{ display: display }}>
|
||||
|
|
@ -226,7 +227,7 @@ function BoardState({ display }) {
|
|||
<button
|
||||
className="inner-button"
|
||||
onClick={() => {
|
||||
clickHandlerCopyClipboard(params);
|
||||
clickHandlerCopyClipboard(self);
|
||||
}}
|
||||
>
|
||||
state
|
||||
|
|
@ -237,14 +238,14 @@ function BoardState({ display }) {
|
|||
id="1"
|
||||
type="text"
|
||||
readOnly={true}
|
||||
value={showCopy ? "copied to clipboard!" : boardDecimal}
|
||||
value={self.showCopy ? "copied to clipboard!" : self.boardDecimal}
|
||||
/>
|
||||
</div>
|
||||
<div className="board-state">
|
||||
<div className="field-div">
|
||||
<button
|
||||
className="inner-button"
|
||||
onClick={() => clickHandlerLoadBoard(params, inputDecimal)}
|
||||
onClick={() => clickHandlerLoadBoard(self, self.inputDecimal)}
|
||||
>
|
||||
load
|
||||
</button>
|
||||
|
|
@ -252,7 +253,7 @@ function BoardState({ display }) {
|
|||
<input
|
||||
className="board-rw"
|
||||
type="text"
|
||||
value={inputDecimal}
|
||||
value={self.inputDecimal}
|
||||
onChange={(i) => setInputDecimal(i.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
114
src/functions.js
114
src/functions.js
|
|
@ -111,116 +111,116 @@ export function colFull(col, colorBoard) {
|
|||
}
|
||||
}
|
||||
|
||||
export async function clickHandlerTurn(params, col) {
|
||||
const iMax = params.gamemode === 1 ? 2 : 1;
|
||||
export async function clickHandlerTurn(self, col) {
|
||||
const iMax = self.gamemode === 1 ? 2 : 1;
|
||||
|
||||
for (let i = 0; i < iMax; i++) {
|
||||
const memCurrentPlayer = params.currentPlayer;
|
||||
const memCurrentPlayer = self.currentPlayer;
|
||||
|
||||
const worked =
|
||||
i === 0
|
||||
? await putChip(
|
||||
col,
|
||||
params.colorBoard,
|
||||
params.currentPlayer,
|
||||
params.setColorBoard,
|
||||
params.setCurrentPlayer
|
||||
self.colorBoard,
|
||||
self.currentPlayer,
|
||||
self.setColorBoard,
|
||||
self.setCurrentPlayer
|
||||
)
|
||||
: await putChip(
|
||||
botChoice(params.colorBoard),
|
||||
params.colorBoard,
|
||||
params.currentPlayer,
|
||||
params.setColorBoard,
|
||||
params.setCurrentPlayer
|
||||
botChoice(self.colorBoard),
|
||||
self.colorBoard,
|
||||
self.currentPlayer,
|
||||
self.setColorBoard,
|
||||
self.setCurrentPlayer
|
||||
);
|
||||
|
||||
if (worked) {
|
||||
await params.setMessage("");
|
||||
await self.setMessage("");
|
||||
|
||||
const win = await checkWin(
|
||||
params.colorBoard,
|
||||
self.colorBoard,
|
||||
memCurrentPlayer,
|
||||
params.outlineBoard,
|
||||
params.setOutlineBoard
|
||||
self.outlineBoard,
|
||||
self.setOutlineBoard
|
||||
);
|
||||
|
||||
await params.setTurnsMem(col + params.turnsMem);
|
||||
await params.setTurns(params.turns + 1);
|
||||
await self.setTurnsMem(col + self.turnsMem);
|
||||
await self.setTurns(self.turns + 1);
|
||||
|
||||
if (win) {
|
||||
const mem = i === 1 ? "bot " : "player ";
|
||||
await params.setMessage(mem + memCurrentPlayer + " wins!");
|
||||
await params.setGameOver(true);
|
||||
await self.setMessage(mem + memCurrentPlayer + " wins!");
|
||||
await self.setGameOver(true);
|
||||
break;
|
||||
} else if (params.turns === 42) {
|
||||
await params.setMessage("draw!");
|
||||
await params.setGameOver(true);
|
||||
} else if (self.turns === 42) {
|
||||
await self.setMessage("draw!");
|
||||
await self.setGameOver(true);
|
||||
break;
|
||||
}
|
||||
} else {
|
||||
params.setMessage("column is full!");
|
||||
self.setMessage("column is full!");
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (params.gamemode === 2) {
|
||||
await params.setBoardDecimal(sepToDec(params.turnsMem).toString());
|
||||
if (self.gamemode === 2) {
|
||||
await self.setBoardDecimal(sepToDec(self.turnsMem).toString());
|
||||
}
|
||||
}
|
||||
|
||||
export async function clickHandlerRestart(params) {
|
||||
await params.setTurns(0);
|
||||
await params.setGameOver(false);
|
||||
await params.setCurrentPlayer("red");
|
||||
await params.setColorBoard(
|
||||
export async function clickHandlerRestart(self) {
|
||||
await self.setTurns(0);
|
||||
await self.setGameOver(false);
|
||||
await self.setCurrentPlayer("red");
|
||||
await self.setColorBoard(
|
||||
Array.from(Array(6), () => new Array(7).fill("white"))
|
||||
);
|
||||
await params.setOutlineBoard(
|
||||
await self.setOutlineBoard(
|
||||
Array.from(Array(6), () => new Array(7).fill("0px solid black"))
|
||||
);
|
||||
await params.setMessage("");
|
||||
await params.setTurnsMem("");
|
||||
await params.setBoardDecimal("");
|
||||
await params.setInputDecimal("");
|
||||
await self.setMessage("");
|
||||
await self.setTurnsMem("");
|
||||
await self.setBoardDecimal("");
|
||||
await self.setInputDecimal("");
|
||||
}
|
||||
|
||||
export async function clickHandlerGamemode(params, gamemode) {
|
||||
await params.setMenu(false);
|
||||
await params.setGamemode(gamemode);
|
||||
export async function clickHandlerGamemode(self, gamemode) {
|
||||
await self.setMenu(false);
|
||||
await self.setGamemode(gamemode);
|
||||
}
|
||||
|
||||
export async function clickHandlerReturn(params) {
|
||||
await params.setMenu(true);
|
||||
await params.setTurns(0);
|
||||
await params.setGameOver(false);
|
||||
await params.setCurrentPlayer("red");
|
||||
await params.setColorBoard(
|
||||
export async function clickHandlerReturn(self) {
|
||||
await self.setMenu(true);
|
||||
await self.setTurns(0);
|
||||
await self.setGameOver(false);
|
||||
await self.setCurrentPlayer("red");
|
||||
await self.setColorBoard(
|
||||
Array.from(Array(6), () => new Array(7).fill("white"))
|
||||
);
|
||||
await params.setOutlineBoard(
|
||||
await self.setOutlineBoard(
|
||||
Array.from(Array(6), () => new Array(7).fill("0px solid black"))
|
||||
);
|
||||
await params.setMessage("");
|
||||
await params.setTurnsMem("");
|
||||
await params.setBoardDecimal("");
|
||||
await params.setInputDecimal("");
|
||||
await self.setMessage("");
|
||||
await self.setTurnsMem("");
|
||||
await self.setBoardDecimal("");
|
||||
await self.setInputDecimal("");
|
||||
}
|
||||
|
||||
export async function clickHandlerLoadBoard(params, dec) {
|
||||
export async function clickHandlerLoadBoard(self, dec) {
|
||||
let sep = decToSep(dec);
|
||||
await clickHandlerRestart(params);
|
||||
await clickHandlerRestart(self);
|
||||
|
||||
while (sep.length) {
|
||||
await clickHandlerTurn(params, sep[sep.length - 1]);
|
||||
await clickHandlerTurn(self, sep[sep.length - 1]);
|
||||
sep = sep.slice(0, -1);
|
||||
}
|
||||
}
|
||||
|
||||
export async function clickHandlerCopyClipboard(params) {
|
||||
navigator.clipboard.writeText(params.boardDecimal);
|
||||
params.setShowCopy(true);
|
||||
export async function clickHandlerCopyClipboard(self) {
|
||||
navigator.clipboard.writeText(self.boardDecimal);
|
||||
self.setShowCopy(true);
|
||||
setTimeout(() => {
|
||||
params.setShowCopy(false);
|
||||
self.setShowCopy(false);
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ body {
|
|||
}
|
||||
|
||||
.board-outer {
|
||||
width: 700px;
|
||||
width: 600px;
|
||||
border: 5px solid black;
|
||||
background-color: blue;
|
||||
margin-top: 30px;
|
||||
|
|
@ -14,8 +14,8 @@ body {
|
|||
}
|
||||
|
||||
.board-inner {
|
||||
width: 630px;
|
||||
height: 540px;
|
||||
width: 560px;
|
||||
height: 480px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, auto [col-start]);
|
||||
margin-left: auto;
|
||||
|
|
@ -108,7 +108,7 @@ body {
|
|||
height: 40px;
|
||||
width: 60%;
|
||||
border: 3px solid black;
|
||||
font-size: large;
|
||||
font-size: medium;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue