2211482
/
CONNECT4
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Resizing and rename of params

main
Selim Eser 2024-12-30 18:06:24 +01:00
parent 997475e153
commit 26a0a195c2
3 changed files with 113 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
src/App.jsx
View File

@ -7,50 +7,49 @@ import {
clickHandlerLoadBoard, clickHandlerLoadBoard,
clickHandlerCopyClipboard, clickHandlerCopyClipboard,
} from "./functions"; } from "./functions";
import { use } from "react";
const params = {}; const self = {};
export default function App() { export default function App() {
const [colorBoard, setColorBoard] = useState( const [colorBoard, setColorBoard] = useState(
Array.from(Array(6), () => new Array(7).fill("white")) Array.from(Array(6), () => new Array(7).fill("white"))
); );
params.colorBoard = colorBoard; self.colorBoard = colorBoard;
params.setColorBoard = setColorBoard; self.setColorBoard = setColorBoard;
const [outlineBoard, setOutlineBoard] = useState( const [outlineBoard, setOutlineBoard] = useState(
Array.from(Array(6), () => new Array(7).fill("0px solid black")) Array.from(Array(6), () => new Array(7).fill("0px solid black"))
); );
params.outlineBoard = outlineBoard; self.outlineBoard = outlineBoard;
params.setOutlineBoard = setOutlineBoard; self.setOutlineBoard = setOutlineBoard;
const [gameOver, setGameOver] = useState(false); const [gameOver, setGameOver] = useState(false);
params.gameOver = gameOver; self.gameOver = gameOver;
params.setGameOver = setGameOver; self.setGameOver = setGameOver;
const [currentPlayer, setCurrentPlayer] = useState("red"); const [currentPlayer, setCurrentPlayer] = useState("red");
params.currentPlayer = currentPlayer; self.currentPlayer = currentPlayer;
params.setCurrentPlayer = setCurrentPlayer; self.setCurrentPlayer = setCurrentPlayer;
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
params.message = message; self.message = message;
params.setMessage = setMessage; self.setMessage = setMessage;
const [turns, setTurns] = useState(0); const [turns, setTurns] = useState(0);
params.turns = turns; self.turns = turns;
params.setTurns = setTurns; self.setTurns = setTurns;
const [menu, setMenu] = useState(true); const [menu, setMenu] = useState(true);
params.menu = menu; self.menu = menu;
params.setMenu = setMenu; self.setMenu = setMenu;
const [gamemode, setGamemode] = useState(0); const [gamemode, setGamemode] = useState(0);
params.gamemode = gamemode; self.gamemode = gamemode;
params.setGamemode = setGamemode; self.setGamemode = setGamemode;
const [turnsMem, setTurnsMem] = useState(""); const [turnsMem, setTurnsMem] = useState("");
params.turnsMem = turnsMem; self.turnsMem = turnsMem;
params.setTurnsMem = setTurnsMem; self.setTurnsMem = setTurnsMem;
return ( return (
<> <>
@ -69,9 +68,9 @@ function Field({ row, col, style, disabled }) {
const styling = { const styling = {
backgroundColor: !pointer backgroundColor: !pointer
? style.backgroundColor ? style.backgroundColor
: params.currentPlayer === "red" && row === 0 : self.currentPlayer === "red" && row === 0
? hoverColor ? hoverColor
: params.currentPlayer === "yellow" && row === 0 && hoverColor, : self.currentPlayer === "yellow" && row === 0 && hoverColor,
cursor: pointer && "pointer", cursor: pointer && "pointer",
outlineWidth: style.outlineWidth, outlineWidth: style.outlineWidth,
outlineColor: style.outlineColor, outlineColor: style.outlineColor,
@ -85,9 +84,9 @@ function Field({ row, col, style, disabled }) {
col={col} col={col}
style={styling} style={styling}
onClick={async () => { onClick={async () => {
await clickHandlerTurn(params, col); await clickHandlerTurn(self, col);
if (params.gamemode === 2) { if (self.gamemode === 2) {
params.currentPlayer === "red" self.currentPlayer === "red"
? setHoverColor("hsla(0, 100%, 80%, 1)") ? setHoverColor("hsla(0, 100%, 80%, 1)")
: setHoverColor("hsla(60, 100%, 80%, 1)"); : setHoverColor("hsla(60, 100%, 80%, 1)");
} }
@ -95,9 +94,9 @@ function Field({ row, col, style, disabled }) {
disabled={disabled} disabled={disabled}
onMouseEnter={() => { onMouseEnter={() => {
if (!disabled) { if (!disabled) {
setPointer(!params.gameOver); setPointer(!self.gameOver);
} }
params.currentPlayer === "red" self.currentPlayer === "red"
? setHoverColor("hsla(0, 100%, 80%, 1)") ? setHoverColor("hsla(0, 100%, 80%, 1)")
: setHoverColor("hsla(60, 100%, 80%, 1)"); : setHoverColor("hsla(60, 100%, 80%, 1)");
}} }}
@ -112,7 +111,7 @@ function Field({ row, col, style, disabled }) {
} }
function Board() { function Board() {
const fields = params.colorBoard.map((subarr, row) => const fields = self.colorBoard.map((subarr, row) =>
subarr.map((color, col) => { subarr.map((color, col) => {
return ( return (
<Field <Field
@ -121,18 +120,18 @@ function Board() {
col={col} col={col}
style={{ style={{
backgroundColor: color, backgroundColor: color,
outlineWidth: params.outlineBoard[row][col].split(" ")[0], outlineWidth: self.outlineBoard[row][col].split(" ")[0],
outlineColor: params.outlineBoard[row][col].split(" ")[2], outlineColor: self.outlineBoard[row][col].split(" ")[2],
outlineStyle: params.outlineBoard[row][col].split(" ")[1], 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 displayMem = self.menu ? "none" : "";
const displayState = params.gamemode === 1 ? "none" : ""; const displayState = self.gamemode === 1 ? "none" : "";
return ( return (
<div className="board-outer" style={{ display: displayMem }}> <div className="board-outer" style={{ display: displayMem }}>
@ -154,8 +153,8 @@ function Restart() {
<button <button
className="inner-button" className="inner-button"
id="restart" id="restart"
hidden={!params.gameOver} hidden={!self.gameOver}
onClick={() => clickHandlerRestart(params)} onClick={() => clickHandlerRestart(self)}
> >
&#8634; &#8634;
</button> </button>
@ -164,7 +163,7 @@ function Restart() {
function Return() { function Return() {
return ( return (
<button className="inner-button" onClick={() => clickHandlerReturn(params)}> <button className="inner-button" onClick={() => clickHandlerReturn(self)}>
menu menu
</button> </button>
); );
@ -172,17 +171,17 @@ function Return() {
function Gamemode() { function Gamemode() {
return ( return (
<div className="gamemode-div" hidden={!params.menu}> <div className="gamemode-div" hidden={!self.menu}>
<button <button
className="gamemode-button" className="gamemode-button"
onClick={() => clickHandlerGamemode(params, 1)} onClick={() => clickHandlerGamemode(self, 1)}
> >
singleplayer singleplayer
</button> </button>
<br /> <br />
<button <button
className="gamemode-button" className="gamemode-button"
onClick={() => clickHandlerGamemode(params, 2)} onClick={() => clickHandlerGamemode(self, 2)}
> >
multiplayer multiplayer
</button> </button>
@ -191,16 +190,16 @@ function Gamemode() {
} }
function Message() { function Message() {
const displayMem = params.menu ? "none" : ""; const displayMem = self.menu ? "none" : "";
return ( return (
<p className="message" style={{ display: displayMem }}> <p className="message" style={{ display: displayMem }}>
{params.message} {self.message}
</p> </p>
); );
} }
function Heading() { function Heading() {
const displayMem = !params.menu ? "none" : ""; const displayMem = !self.menu ? "none" : "";
return ( return (
<h1 className="heading" style={{ display: displayMem }}> <h1 className="heading" style={{ display: displayMem }}>
CONNECT4 CONNECT4
@ -210,14 +209,16 @@ function Heading() {
function BoardState({ display }) { function BoardState({ display }) {
const [boardDecimal, setBoardDecimal] = useState(""); const [boardDecimal, setBoardDecimal] = useState("");
params.boardDecimal = boardDecimal; self.boardDecimal = boardDecimal;
params.setBoardDecimal = setBoardDecimal; self.setBoardDecimal = setBoardDecimal;
const [inputDecimal, setInputDecimal] = useState(""); const [inputDecimal, setInputDecimal] = useState("");
params.setInputDecimal = setInputDecimal; self.inputDecimal = inputDecimal;
self.setInputDecimal = setInputDecimal;
const [showCopy, setShowCopy] = useState(false); const [showCopy, setShowCopy] = useState(false);
params.setShowCopy = setShowCopy; self.showCopy = showCopy;
self.setShowCopy = setShowCopy;
return ( return (
<div style={{ display: display }}> <div style={{ display: display }}>
@ -226,7 +227,7 @@ function BoardState({ display }) {
<button <button
className="inner-button" className="inner-button"
onClick={() => { onClick={() => {
clickHandlerCopyClipboard(params); clickHandlerCopyClipboard(self);
}} }}
> >
state state
@ -237,14 +238,14 @@ function BoardState({ display }) {
id="1" id="1"
type="text" type="text"
readOnly={true} readOnly={true}
value={showCopy ? "copied to clipboard!" : boardDecimal} value={self.showCopy ? "copied to clipboard!" : self.boardDecimal}
/> />
</div> </div>
<div className="board-state"> <div className="board-state">
<div className="field-div"> <div className="field-div">
<button <button
className="inner-button" className="inner-button"
onClick={() => clickHandlerLoadBoard(params, inputDecimal)} onClick={() => clickHandlerLoadBoard(self, self.inputDecimal)}
> >
load load
</button> </button>
@ -252,7 +253,7 @@ function BoardState({ display }) {
<input <input
className="board-rw" className="board-rw"
type="text" type="text"
value={inputDecimal} value={self.inputDecimal}
onChange={(i) => setInputDecimal(i.target.value)} onChange={(i) => setInputDecimal(i.target.value)}
/> />
</div> </div>

114
src/functions.js
View File

@ -111,116 +111,116 @@ export function colFull(col, colorBoard) {
} }
} }
export async function clickHandlerTurn(params, col) { export async function clickHandlerTurn(self, col) {
const iMax = params.gamemode === 1 ? 2 : 1; const iMax = self.gamemode === 1 ? 2 : 1;
for (let i = 0; i < iMax; i++) { for (let i = 0; i < iMax; i++) {
const memCurrentPlayer = params.currentPlayer; const memCurrentPlayer = self.currentPlayer;
const worked = const worked =
i === 0 i === 0
? await putChip( ? await putChip(
col, col,
params.colorBoard, self.colorBoard,
params.currentPlayer, self.currentPlayer,
params.setColorBoard, self.setColorBoard,
params.setCurrentPlayer self.setCurrentPlayer
) )
: await putChip( : await putChip(
botChoice(params.colorBoard), botChoice(self.colorBoard),
params.colorBoard, self.colorBoard,
params.currentPlayer, self.currentPlayer,
params.setColorBoard, self.setColorBoard,
params.setCurrentPlayer self.setCurrentPlayer
); );
if (worked) { if (worked) {
await params.setMessage(""); await self.setMessage("");
const win = await checkWin( const win = await checkWin(
params.colorBoard, self.colorBoard,
memCurrentPlayer, memCurrentPlayer,
params.outlineBoard, self.outlineBoard,
params.setOutlineBoard self.setOutlineBoard
); );
await params.setTurnsMem(col + params.turnsMem); await self.setTurnsMem(col + self.turnsMem);
await params.setTurns(params.turns + 1); await self.setTurns(self.turns + 1);
if (win) { if (win) {
const mem = i === 1 ? "bot " : "player "; const mem = i === 1 ? "bot " : "player ";
await params.setMessage(mem + memCurrentPlayer + " wins!"); await self.setMessage(mem + memCurrentPlayer + " wins!");
await params.setGameOver(true); await self.setGameOver(true);
break; break;
} else if (params.turns === 42) { } else if (self.turns === 42) {
await params.setMessage("draw!"); await self.setMessage("draw!");
await params.setGameOver(true); await self.setGameOver(true);
break; break;
} }
} else { } else {
params.setMessage("column is full!"); self.setMessage("column is full!");
break; break;
} }
} }
if (params.gamemode === 2) { if (self.gamemode === 2) {
await params.setBoardDecimal(sepToDec(params.turnsMem).toString()); await self.setBoardDecimal(sepToDec(self.turnsMem).toString());
} }
} }
export async function clickHandlerRestart(params) { export async function clickHandlerRestart(self) {
await params.setTurns(0); await self.setTurns(0);
await params.setGameOver(false); await self.setGameOver(false);
await params.setCurrentPlayer("red"); await self.setCurrentPlayer("red");
await params.setColorBoard( await self.setColorBoard(
Array.from(Array(6), () => new Array(7).fill("white")) 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")) Array.from(Array(6), () => new Array(7).fill("0px solid black"))
); );
await params.setMessage(""); await self.setMessage("");
await params.setTurnsMem(""); await self.setTurnsMem("");
await params.setBoardDecimal(""); await self.setBoardDecimal("");
await params.setInputDecimal(""); await self.setInputDecimal("");
} }
export async function clickHandlerGamemode(params, gamemode) { export async function clickHandlerGamemode(self, gamemode) {
await params.setMenu(false); await self.setMenu(false);
await params.setGamemode(gamemode); await self.setGamemode(gamemode);
} }
export async function clickHandlerReturn(params) { export async function clickHandlerReturn(self) {
await params.setMenu(true); await self.setMenu(true);
await params.setTurns(0); await self.setTurns(0);
await params.setGameOver(false); await self.setGameOver(false);
await params.setCurrentPlayer("red"); await self.setCurrentPlayer("red");
await params.setColorBoard( await self.setColorBoard(
Array.from(Array(6), () => new Array(7).fill("white")) 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")) Array.from(Array(6), () => new Array(7).fill("0px solid black"))
); );
await params.setMessage(""); await self.setMessage("");
await params.setTurnsMem(""); await self.setTurnsMem("");
await params.setBoardDecimal(""); await self.setBoardDecimal("");
await params.setInputDecimal(""); await self.setInputDecimal("");
} }
export async function clickHandlerLoadBoard(params, dec) { export async function clickHandlerLoadBoard(self, dec) {
let sep = decToSep(dec); let sep = decToSep(dec);
await clickHandlerRestart(params); await clickHandlerRestart(self);
while (sep.length) { while (sep.length) {
await clickHandlerTurn(params, sep[sep.length - 1]); await clickHandlerTurn(self, sep[sep.length - 1]);
sep = sep.slice(0, -1); sep = sep.slice(0, -1);
} }
} }
export async function clickHandlerCopyClipboard(params) { export async function clickHandlerCopyClipboard(self) {
navigator.clipboard.writeText(params.boardDecimal); navigator.clipboard.writeText(self.boardDecimal);
params.setShowCopy(true); self.setShowCopy(true);
setTimeout(() => { setTimeout(() => {
params.setShowCopy(false); self.setShowCopy(false);
}, 1500); }, 1500);
} }

8
src/index.css
View File

@ -5,7 +5,7 @@ body {
} }
.board-outer { .board-outer {
width: 700px; width: 600px;
border: 5px solid black; border: 5px solid black;
background-color: blue; background-color: blue;
margin-top: 30px; margin-top: 30px;
@ -14,8 +14,8 @@ body {
} }
.board-inner { .board-inner {
width: 630px; width: 560px;
height: 540px; height: 480px;
display: grid; display: grid;
grid-template-columns: repeat(7, auto [col-start]); grid-template-columns: repeat(7, auto [col-start]);
margin-left: auto; margin-left: auto;
@ -108,7 +108,7 @@ body {
height: 40px; height: 40px;
width: 60%; width: 60%;
border: 3px solid black; border: 3px solid black;
font-size: large; font-size: medium;
margin-right: auto; margin-right: auto;
} }