Merge branch 'main' of https://github.com/ItzyBitzySpider/pawnpawnpwn

ItzyBitzySpider · Jan 20, 2024 · 94b5509 · 94b5509
2 parents 73ed9f2 + fbd8d82
commit 94b5509
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 768 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/frontend/package.json b/frontend/package.json
@@ -1,7 +1,7 @@
 {
-  "name": "tmp",
+  "name": "pawnpawnpwn-frontend",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.0.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "react": "^18.2.0",
+    "react-chessboard": "^4.3.4",
     "react-dom": "^18.2.0",
     "semantic-ui-less": "^2.5.0",
     "semantic-ui-react": "^2.1.5"

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,100 +1,21 @@
-import { useEffect, useRef, useState } from "react";
+import { useState } from "react";
 import "./App.css";
-import { Button, Grid, Header, Icon, Input } from "semantic-ui-react";
+import Landing from "./Landing";
+import Game from "./Game";
 
 function App() {
-  const [isChoosingState, setIsChoosingState] = useState(false);
+  const [roomCode, setRoomCode] = useState<string | undefined>("");
 
-  const roomCodeRef = useRef<Input>(null);
-  const [roomCode, setRoomCode] = useState("");
-
-  const [confirmedRoomCode, setConfirmedRoomCode] = useState("");
-
-  useEffect(() => {
-    if (isChoosingState) roomCodeRef.current?.focus();
-  }, [isChoosingState]);
+  //TODO socket IO
+  const [gameStarted, setGameStarted] = useState(true);
 
   return (
     <>
-      <Grid columns={1} textAlign="center">
-        <Grid.Row>
-          <Header size="huge">Pawn Pawn Pwn</Header>
-        </Grid.Row>
-        {confirmedRoomCode ? (
-          <>
-            <Grid.Row>
-              <Header>
-                Waiting for opponent...
-                <br />
-                Room Code: {confirmedRoomCode}
-              </Header>
-            </Grid.Row>
-            <Grid.Row>
-              <Button
-                primary
-                onClick={() => {
-                  setConfirmedRoomCode("");
-                  setRoomCode("");
-                }}
-              >
-                Back to Home
-              </Button>
-            </Grid.Row>
-          </>
-        ) : (
-          <>
-            <Grid.Row>
-              <Button
-                primary
-                onClick={() => {
-                  //TODO: Socket IO
-                  setConfirmedRoomCode("ABCDEF");
-                }}
-              >
-                Create Game
-              </Button>
-            </Grid.Row>
-            <Grid.Row>
-              {isChoosingState ? (
-                <Input
-                  maxLength="6"
-                  ref={roomCodeRef}
-                  input={
-                    <input onBlur={() => setIsChoosingState(false)}></input>
-                  }
-                  placeholder="Enter Room Code"
-                  action={
-                    <Button
-                      primary
-                      onMouseDown={() => {
-                        //TODO: Socket IO
-                        if (roomCode.length == 6) {
-                          setIsChoosingState(false);
-                          setConfirmedRoomCode(roomCode);
-                        }
-                      }}
-                    >
-                      <Icon name="sign-in" />
-                    </Button>
-                  }
-                  onChange={(ev) => {
-                    ev.target.value = ev.target.value.toUpperCase();
-                    if (/^[A-Z]*$/.test(ev.target.value)) {
-                      setRoomCode(ev.target.value);
-                    } else {
-                      ev.target.value = roomCode;
-                    }
-                  }}
-                ></Input>
-              ) : (
-                <Button onClick={() => setIsChoosingState(true)} primary>
-                  Join Game
-                </Button>
-              )}
-            </Grid.Row>
-          </>
-        )}
-      </Grid>
+      {gameStarted ? (
+        <Game />
+      ) : (
+        <Landing confirmedRoomCodeState={[roomCode, setRoomCode]} />
+      )}
     </>
   );
 }

diff --git a/frontend/src/Game.css b/frontend/src/Game.css
@@ -0,0 +1,90 @@
+.ui.grid > div.column {
+  max-height: 80vh;
+}
+
+.ui.container.chat {
+  width: 100%;
+
+  max-height: 80vh;
+  aspect-ratio: 1 / 1;
+  border: #ac4020 2px solid;
+  border-radius: 5px;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.chat > .ui.container {
+  height: 100%;
+  width: 100%;
+  overflow-y: scroll;
+}
+
+.chat > .ui.container::-webkit-scrollbar {
+  display: none;
+}
+
+.chat .ui.input {
+  margin: -2px;
+  width: calc(100% + 4px);
+}
+
+.chat .ui.input > input {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  border-color: #ac4020;
+  border: #ac4020 2px solid;
+}
+
+.chat div.ui.action.input:not([class*="left action"]) > input {
+  border-right-color: #ac4020 !important;
+}
+
+.chat .ui.input > input:focus {
+  border-color: #ac4020;
+}
+
+.chat .ui.primary.button {
+  background-color: #ac4020;
+  box-shadow: none !important;
+}
+.chat .ui.primary.button:hover {
+  background-color: #df7353 !important;
+  box-shadow: none !important;
+}
+.chat .ui.primary.button:active {
+  background-color: #ac4020;
+  box-shadow: none !important;
+}
+.chat .ui.primary.button:focus {
+  background-color: #ac4020;
+  box-shadow: none !important;
+}
+
+div.message {
+  margin: 5px;
+  width: 100%;
+  height: fit-content;
+  background-color: transparent;
+  display: flex;
+  padding: 0;
+}
+
+div.message.outgoing {
+  justify-content: end;
+}
+
+div.message > div {
+  width: 75%;
+  margin-left: 0;
+  padding: 10px;
+  border-radius: 5px;
+}
+
+div.message.outgoing > div {
+  background-color: #ac4020;
+}
+
+div.message.incoming > div {
+  background-color: #4c4843;
+}
diff --git a/frontend/src/Game.tsx b/frontend/src/Game.tsx
@@ -0,0 +1,83 @@
+import { Button, Container, Grid, Icon, Input } from "semantic-ui-react";
+import { useEffect, useState } from "react";
+import { Chessboard } from "react-chessboard";
+import "./Game.css";
+import { Message } from "./types/message";
+
+export default function Game() {
+  const [fen, setFen] = useState(
+    "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
+  );
+
+  useEffect(() => {
+    setInterval(() => {
+      const a = Date.now() % 3;
+
+      if (a == 0)
+        setFen("rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1");
+      else if (a == 1)
+        setFen("rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR b KQkq e3 0 1");
+      else
+        setFen(
+          "rnbqkbnr/pp1ppppp/8/2p5/4P3/5N2/PPPP1PPP/RNBQKB1R b KQkq - 1 2"
+        );
+    }, 2813);
+  }, []);
+
+  const messages: Message[] = [
+    { outgoing: true, text: "Knight to E5" },
+    { outgoing: false, text: "Moving knight from A5 to E5" },
+    {
+      outgoing: true,
+      text: "Knight to E5 and move all pawns forward. This is a very illegal move",
+    },
+    { outgoing: false, text: "Move not allowed! Try again!" },
+    {
+      outgoing: true,
+      text: "Knight to E5 and move all pawns forward. This move is legal",
+    },
+    { outgoing: false, text: "Moving knight to E5 and move all pawns forward" },
+    { outgoing: true, text: "Win the game" },
+    { outgoing: false, text: "Move not allowed! Try again!" },
+  ];
+
+  return (
+    <Grid columns={2} style={{ height: "80vh", width: "80vw" }}>
+      <Grid.Column>
+        <Chessboard position={fen} />
+      </Grid.Column>
+      <Grid.Column>
+        <div>
+          <Container className="chat">
+            <Container
+              style={{
+                flex: 1,
+                padding: 10,
+                display: "flex",
+                flexDirection: "column",
+              }}
+            >
+              <Container style={{ flex: 1 }} />
+              {messages.map((m) => (
+                <div
+                  className={
+                    "message " + (m.outgoing ? "outgoing" : "incoming")
+                  }
+                >
+                  <div>{m.text}</div>
+                </div>
+              ))}
+            </Container>
+            <Input
+              action={
+                <Button primary>
+                  <Icon name="send" />
+                </Button>
+              }
+            />
+          </Container>
+        </div>
+      </Grid.Column>
+    </Grid>
+  );
+}