From 26a0a195c26dd1de3a531f7fd1f93bc0e375ce7b Mon Sep 17 00:00:00 2001
From: Selim Eser <2211482@stud.hs-mannheim.de>
Date: Mon, 30 Dec 2024 18:06:24 +0100
Subject: [PATCH] Resizing and rename of params

---
 src/App.jsx      | 103 +++++++++++++++++++++---------------------
 src/functions.js | 114 +++++++++++++++++++++++------------------------
 src/index.css    |   8 ++--
 3 files changed, 113 insertions(+), 112 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 773801e..837d4c4 100644
--- a/src/App.jsx
+++ b/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)}
     >
       &#8634;
     </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>
diff --git a/src/functions.js b/src/functions.js
index 5d43d2f..7f2891b 100644
--- a/src/functions.js
+++ b/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);
 }
 
diff --git a/src/index.css b/src/index.css
index b54211e..e5af896 100644
--- a/src/index.css
+++ b/src/index.css
@@ -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;
 }