added landing & rules page, more styling

jbshryne · Nov 17, 2023 · 6b03611 · 6b03611
1 parent a55356c
commit 6b03611
Show file tree

Hide file tree

Showing 19 changed files with 336 additions and 110 deletions.
diff --git a/public/assets/dungeon-throwdown 01.png b/public/assets/dungeon-throwdown 01.png
diff --git a/public/assets/dungeon-throwdown 02.png b/public/assets/dungeon-throwdown 02.png
diff --git a/src/App.css b/src/App.css
@@ -1,27 +1,102 @@
-#board-display {
+a {
+  /* text-decoration: none; */
+  color: white;
+}
+
+#landing-page {
+  /* background-color: rgb(221, 196, 162); */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+  height: 95vh;
+  width: 100vw;
+}
+
+#hero-image {
+  height: 600px;
+}
+
+.auth-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+  height: 95vh;
+  width: 100vw;
+}
+
+.auth-component {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  width: 700px;
+  height: 200px;
+  color: white;
+  background-color: rgba(211, 211, 210, 0.2);
+}
+
+.nav-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  width: 100%;
+  background-color: rgba(211, 211, 210, 0.2);
+}
+
+.nav-bar-item {
+  text-decoration: none;
+  color: white;
+  font-size: 18px;
+  padding: 0 6px;
+}
+
+.rules-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  /* justify-content: center; */
+  height: 95vh;
+  width: 100vw;
+}
+
+.rules-page p {
+  width: 90vw;
+  font-size: 18px;
+  line-height: 1.5;
+  text-align: left;
 }
 
 .play-screen {
   display: flex;
   flex-direction: row;
+}
+
+#board-display {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  height: 100vh;
+  /* justify-content: center; */
+  height: 95vh;
+  width: 100vw;
 }
 
 .player-panel {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  width: 30vw;
-  height: 50vh;
-  background-color: #f0f0f0;
+  width: 400px;
+  height: 400px;
+  color: white;
+  background-color: rgba(211, 211, 210, 0.2);
+}
+
+.player-panel.active {
+  background-color: rgba(211, 211, 210, 0.4);
 }
 
 #board {
@@ -30,7 +105,7 @@
   /* width: 500px;
   height: 500px; */
   /* margin: 0 auto; */
-  border: 1px solid black;
+  border: 1px solid rgb(191, 191, 191);
 }
 
 .tile {
@@ -44,11 +119,11 @@
 
 /* .tile:hover, */
 .tile.adjacent {
-  background-color: #f0f0f0;
+  background-color: rgb(151, 115, 115);
 }
 
 .tile.hovered {
-  background-color: #c0c0c0; /* You can customize the color for hovered adjacent tiles */
+  background-color: rgb(171, 171, 144);
 }
 
 .tile.opponent {
@@ -60,25 +135,43 @@
 }
 
 .board-icon {
-  color: white;
-  font-size: 36px;
   padding-top: 6px;
 }
 
+.player-icon {
+  font-size: 40px;
+  color: white;
+}
+
 .box-icon {
   color: rgb(221, 196, 162);
   font-size: 36px;
   padding-top: 6px;
 }
 
+.player-stats th {
+  /* border: 1px solid rgb(0, 0, 0); */
+  padding: 0;
+  width: 60px;
+}
+
+.player-stats td {
+  border: 1px solid rgba(219, 214, 214, 0.354);
+  text-align: center;
+  font-size: 24px;
+  font-weight: bold;
+  padding: 0;
+  height: 40px;
+}
+
 .movement-die-container {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  width: 30vw;
+  width: 200px;
   height: 50vh;
-  background-color: #f0f0f0;
+  /* background-color: #f0f0f0; */
 }
 
 .battle-die-container {
@@ -88,7 +181,7 @@
   justify-content: center;
   width: 30vw;
   height: 50vh;
-  background-color: #f0f0f0;
+  /* background-color: #f0f0f0; */
 }
 
 .movement-die {
@@ -108,4 +201,10 @@
   border-radius: 5px;
   width: 40px;
   height: 40px;
+  color: black;
+  background-color: #f0f0f0;
+}
+
+.battle-die.failure {
+  opacity: 0.5;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,10 +1,32 @@
-import { Outlet } from "react-router-dom";
+// import { Outlet } from "react-router-dom";
+import { Route, Routes } from "react-router-dom";
 import "./App.css";
+import NavBar from "./components/NavBar";
+import AuthChecker from "./components/AuthChecker";
+import Home from "./pages/Home";
+import Auth from "./pages/Auth";
+import Client from "./pages/Client";
+import Rules from "./pages/Rules";
 
 function App() {
   return (
     <div className="App">
-      <Outlet />
+      <NavBar />
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/auth" element={<Auth />} />
+          <Route path="/rules" element={<Rules />} />
+          <Route
+            path="/game"
+            element={
+              <AuthChecker>
+                <Client />
+              </AuthChecker>
+            }
+          />
+        </Routes>
+      </main>
     </div>
   );
 }

diff --git a/src/components/BattleDie.jsx b/src/components/BattleDie.jsx
@@ -2,12 +2,21 @@ import React from "react";
 import { GiSwordWound } from "react-icons/gi";
 import { GiArrowsShield } from "react-icons/gi";
 
-const BattleDie = ({ result }) => {
+const BattleDie = ({ result, isAttacking }) => {
   console.log(result);
+
+  const isSuccess =
+    (result === "atk" && isAttacking) || (result === "def" && !isAttacking);
+
   return (
-    <div className="battle-die">
+    <div
+      className={`battle-die ${!isSuccess ? "" : "failure"} ${
+        result === "blank" ? "failure" : ""
+      }`}
+    >
       {result === "atk" && <GiSwordWound />}
       {result === "def" && <GiArrowsShield />}
+      {result === "blank" && ""}
     </div>
   );
 };

diff --git a/src/components/Board.jsx b/src/components/Board.jsx
@@ -9,6 +9,7 @@ import {
   GiDiceSixFacesFour,
   GiDiceSixFacesFive,
   GiDiceSixFacesSix,
+  GiCheckMark,
 } from "react-icons/gi";
 import { GiChest } from "react-icons/gi";
 
@@ -176,36 +177,45 @@ export function Board({ ctx, G, moves, events }) {
     const attackDice = player.attackDice + player.attackBoost;
     const defenseDice = player.defenseDice + player.defenseBoost;
     const movement = player.moveTiles;
+    const action = player.hasDoneAction;
     const powerup = player.powerup;
     const isCurrentPlayer = currentPlayer.name === name;
 
     return (
-      <div className="player-panel">
+      <div className={`player-panel ${isCurrentPlayer && "active"}`}>
         {status}
         <br />
-        <p>{name}</p>
         <div className="movement-die-container">
           {isCurrentPlayer && renderMovementRoll(movementDice)}
         </div>
-        <br />
-        Hit Points: {hitPoints}
-        <br />
-        Attack Dice: {attackDice}
-        <br />
-        Defense Dice: {defenseDice}
-        <br />
-        Moves Left: {movement}
-        <br />
+        <p>{name}</p>
+        <table className="player-stats">
+          <thead>
+            <th>Moves Left</th>
+            <th>Action Taken</th>
+            <th>Attack Dice</th>
+            <th>Defense Dice</th>
+            <th>Hit Points</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>{movement}</td>
+              <td>{action ? <GiCheckMark style={{ size: 36 }} /> : ""}</td>
+              <td>{attackDice}</td>
+              <td>{defenseDice}</td>
+              <td>{hitPoints}</td>
+            </tr>
+          </tbody>
+        </table>
         Powerup: {powerup ? powerup.name : "None"}
-        <br />
         {powerup && powerup.type === "ATK" && (
           <i>(+{powerup.amount} to Attack Dice)</i>
         )}
         {powerup && powerup.type === "DEF" && (
           <i>(+{powerup.amount} to Defense Dice)</i>
         )}
         <div className="battle-die-container">
-          {renderBattleRoll(battleDice)}
+          {renderBattleRoll(battleDice, isCurrentPlayer)}
         </div>
         <button
           onClick={() => events.endTurn()}
@@ -293,7 +303,6 @@ export function calculateMoveTiles(startTile, targetTile, boardSize) {
 }
 
 function renderMovementRoll(roll) {
-  console.log(roll);
   return roll.map((die, idx) => {
     if (die === 1) {
       return <GiDiceSixFacesOne key={idx} className="movement-die" />;
@@ -316,9 +325,9 @@ function renderMovementRoll(roll) {
   });
 }
 
-function renderBattleRoll(roll) {
+function renderBattleRoll(roll, isAttacking) {
   // console.log(roll);
   return roll.map((die, idx) => {
-    return <BattleDie key={idx} result={die} />;
+    return <BattleDie key={idx} result={die} isAttacking={isAttacking} />;
   });
 }
diff --git a/src/components/Game.jsx b/src/components/Game.jsx
@@ -24,7 +24,7 @@ const monster = {
   name: "Monster",
   type: "PLAYER",
   team: "Monster",
-  position: 57,
+  position: 24,
   attackDice: 3,
   attackBoost: 0,
   defenseDice: 2,
@@ -248,9 +248,6 @@ export const DungeonThrowdown = {
       currentPlayer.hasMoved = false;
       currentPlayer.hasDoneAction = false;
 
-      G.battleDice.p1 = [];
-      G.battleDice.p2 = [];
-
       const movementRoll = random.D6(2);
       const movementTotal = movementRoll[0] + movementRoll[1];
       currentPlayer.moveTiles = movementTotal;
@@ -259,8 +256,6 @@ export const DungeonThrowdown = {
       );
       G.movementDice = movementRoll;
 
-      console.log("Active Team:", currentPlayer.team);
-
       const occupiedTiles = G.tiles.map((tile, idx) => {
         if (tile !== null) {
           return idx;

diff --git a/src/components/GameInfo.jsx b/src/components/GameInfo.jsx