diff --git a/index.html b/index.html index 1384554..df03a84 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + CONNECT4 diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/App/App.css b/src/components/App/App.css new file mode 100644 index 0000000..4b90377 --- /dev/null +++ b/src/components/App/App.css @@ -0,0 +1,40 @@ +#app-container{ + font-family: Arial, Helvetica, sans-serif; +} + +.gamemode { + text-align: center; + margin-left: auto; + margin-right: auto; + width: 300px; + height: 202px; + border: 5px solid black; + background-color: blue; +} + +.gamemode-selection { + margin-top: 34px; + border: 3px solid black; + width: 50%; + height: 50px; + font-size: larger; +} + +.gamemode-selection:hover { + cursor: pointer; + background-color: lightgray; +} + +.message{ + text-align: center; + font-size: larger; +} + +.heading{ + text-align: center; + transition: font-size 1s ease-out 100ms; +} + +.heading:hover{ + font-size:3em; +} \ No newline at end of file diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx new file mode 100644 index 0000000..fa5cfed --- /dev/null +++ b/src/components/App/App.jsx @@ -0,0 +1,62 @@ +import { useState } from "react"; +import { clickHandlerGamemode } from "./AppFunctions.js"; +import "./App.css"; +import Board from "../Board/Board.jsx"; + +export const self = {}; + +const App = () => { + const [menu, setMenu] = useState(true); + self.menu = menu; + self.setMenu = setMenu; + const [gamemode, setGamemode] = useState(0); + self.gamemode = gamemode; + self.setGamemode = setGamemode; + + return ( +
+ + + + +
+ ); +}; + +const Gamemode = () => ( + +); + +const Heading = () => ( +

+ CONNECT4 +

+); + +const Message = () => { + const [message, setMessage] = useState(""); + self.message = message; + self.setMessage = setMessage; + + return ( + + ); +}; + +export default App; diff --git a/src/components/App/AppFunctions.js b/src/components/App/AppFunctions.js new file mode 100644 index 0000000..1f942e7 --- /dev/null +++ b/src/components/App/AppFunctions.js @@ -0,0 +1,4 @@ +export const clickHandlerGamemode = async (self, gamemode) => { + await self.setMenu(false); + await self.setGamemode(gamemode); +}; diff --git a/src/index.css b/src/components/Board/Board.css similarity index 54% rename from src/index.css rename to src/components/Board/Board.css index e5af896..4ef3e3e 100644 --- a/src/index.css +++ b/src/components/Board/Board.css @@ -1,9 +1,3 @@ -body { - text-align: center; - font-family: Arial, Helvetica, sans-serif; - color: black; -} - .board-outer { width: 600px; border: 5px solid black; @@ -31,7 +25,17 @@ body { outline-offset: -7px; } -.inner-button { +.board-action{ + display: flex; + align-items: center; + justify-content: center; + margin-left: auto; + margin-right: auto; + margin-top: 30px; + margin-bottom: 30px; +} + +.action-button { width: 17%; height: 60px; font-size: larger; @@ -45,73 +49,11 @@ body { font-size: x-large; } -.inner-button:hover { +.action-button:hover { cursor: pointer; background-color: lightgray; } -#board-load-button{ - margin-left: 16.1%; -} - -.flex-box .inner-button{ - width: 200px; -} - -.board-state .inner-button:disabled{ - margin-left: 16.1%; - color: black; - background-color: lightgray; - border-color: black; - cursor: not-allowed ; -} - - -.gamemode-div { - - margin-left: auto; - margin-right: auto; - width: 300px; - height: 202px; - border: 5px solid black; - background-color: blue; - -} - -.gamemode-div .gamemode-button { - margin-top: 34px; - border: 3px solid black; - width: 50%; - height: 50px; - font-size: larger; - -} - -.gamemode-div .gamemode-button:hover { - cursor: pointer; - background-color: lightgray; -} - -.message { - font-size: larger; -} - -.heading{ - transition: font-size 1s ease-out 100ms; -} - -.heading:hover{ - font-size:3em; -} - -.board-rw{ - height: 40px; - width: 60%; - border: 3px solid black; - font-size: medium; - margin-right: auto; -} - .board-state{ display: flex; align-items: center; @@ -123,21 +65,24 @@ body { margin-top: 10px; } -.action-bar{ - display: flex; - align-items: center; - justify-content: center; - margin-left: auto; - margin-right: auto; - margin-bottom: 30px; +.board-state-action{ + margin-right: 3%; } -.board-state .inner-button{ +.board-state-number{ + height: 40px; + width: 60%; + border: 3px solid black; + font-size: medium; +} + +.board-state .board-action{ + margin-top: 0px; + margin-bottom: 0px; +} + +.board-state .action-button{ width: 100px; height: 48px; } -.field-div{ - width: 20%; - margin-left: auto; -} \ No newline at end of file diff --git a/src/App.jsx b/src/components/Board/Board.jsx similarity index 55% rename from src/App.jsx rename to src/components/Board/Board.jsx index 837d4c4..167f7bb 100644 --- a/src/App.jsx +++ b/src/components/Board/Board.jsx @@ -2,15 +2,14 @@ import { useState } from "react"; import { clickHandlerTurn, clickHandlerRestart, - clickHandlerGamemode, clickHandlerReturn, clickHandlerLoadBoard, clickHandlerCopyClipboard, -} from "./functions"; +} from "./BoardFunctions.js"; +import "./Board.css"; +import { self } from "../App/App.jsx"; -const self = {}; - -export default function App() { +const Board = () => { const [colorBoard, setColorBoard] = useState( Array.from(Array(6), () => new Array(7).fill("white")) ); @@ -31,37 +30,48 @@ export default function App() { self.currentPlayer = currentPlayer; self.setCurrentPlayer = setCurrentPlayer; - const [message, setMessage] = useState(""); - self.message = message; - self.setMessage = setMessage; - const [turns, setTurns] = useState(0); self.turns = turns; self.setTurns = setTurns; - const [menu, setMenu] = useState(true); - self.menu = menu; - self.setMenu = setMenu; - - const [gamemode, setGamemode] = useState(0); - self.gamemode = gamemode; - self.setGamemode = setGamemode; - const [turnsMem, setTurnsMem] = useState(""); self.turnsMem = turnsMem; self.setTurnsMem = setTurnsMem; - return ( - <> - - - - - + const fields = colorBoard.map((subarr, row) => + subarr.map((color, col) => { + return ( + + ); + }) ); -} -function Field({ row, col, style, disabled }) { + return ( + + ); +}; + +const Field = ({ row, col, style, disabled }) => { const [pointer, setPointer] = useState(false); const [hoverColor, setHoverColor] = useState("white"); @@ -108,106 +118,9 @@ function Field({ row, col, style, disabled }) {   ); -} +}; -function Board() { - const fields = self.colorBoard.map((subarr, row) => - subarr.map((color, col) => { - return ( - - ); - }) - ); - - const displayMem = self.menu ? "none" : ""; - const displayState = self.gamemode === 1 ? "none" : ""; - - return ( -
-
- {fields.map((subarr) => subarr.map((field) => field))} -
- -
-
- - -
-
- ); -} - -function Restart() { - return ( - - ); -} - -function Return() { - return ( - - ); -} - -function Gamemode() { - return ( - - ); -} - -function Message() { - const displayMem = self.menu ? "none" : ""; - return ( -

- {self.message} -

- ); -} - -function Heading() { - const displayMem = !self.menu ? "none" : ""; - return ( -

- CONNECT4 -

- ); -} - -function BoardState({ display }) { +const BoardState = () => { const [boardDecimal, setBoardDecimal] = useState(""); self.boardDecimal = boardDecimal; self.setBoardDecimal = setBoardDecimal; @@ -221,11 +134,11 @@ function BoardState({ display }) { self.setShowCopy = setShowCopy; return ( -
+