checkpointing again

myz540 · Oct 26, 2024 · b79cf54 · b79cf54
1 parent 3714269
commit b79cf54
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 31 deletions.
diff --git a/.cursorrules b/.cursorrules
@@ -1,5 +1,5 @@
 You are an elite software engineer who is tasked with building a React-based web application that will be deployed on AWS Amplify.
-The application will be a collection of single and multi-player card games.
+The application will be a collection of single and multi-player card games. You should not apologize for any oversights, but acknowledge and learn from them.
 
 You are an expert is Javascript, Typescript, React, HTML, CSS, and AWS.
 

diff --git a/src/games/Durac.css b/src/games/Durac.css
@@ -21,6 +21,57 @@
   text-align: right;
 }
 
+/* New styles for game info content */
+.durac-deck-count,
+.durac-trump-suit {
+  margin-bottom: 8px;
+  font-weight: bold;
+  color: #5a3e2b;
+}
+
+/* Common button styles */
+.durac-button {
+  font-family: inherit;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  border: none;
+  border-radius: 10rem;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Start Game button */
+.start-game-button {
+  font-size: 1.6rem;
+  padding: 1.2rem 2.4rem;
+  background-color: #9cad1f;
+  color: #5a3e2b;
+  margin: 20px auto;
+  display: block;
+}
+
+.start-game-button:hover {
+  background-color: #b8cc24;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Restart Game button */
+.restart-button {
+  font-size: 1rem;
+  padding: 0.6rem 1.2rem;
+  background-color: #5a3e2b;
+  color: #fff;
+}
+
+.restart-button:hover {
+  background-color: #4a2e1b;
+  transform: translateY(-2px);
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+}
+
 .durac-hands-circle {
   position: relative;
   width: 100%;
@@ -89,16 +140,24 @@
   justify-content: space-between;
 }
 
-.durac-deck-count {
-  margin-top: 20px;
-  text-align: center;
-}
-
+/* Update pickup button to match new style */
 .pickup-button {
+  font-size: 1.4rem;
+  padding: 0.8rem 1.6rem;
+  background-color: #9cad1f;
+  color: #5a3e2b;
   margin-top: 10px;
-  padding: 5px 10px;
-  background-color: #f0f0f0;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  cursor: pointer;
+}
+
+.pickup-button:hover {
+  background-color: #b8cc24;
+  transform: translateY(-2px);
+}
+
+/* New wrapper for start game button */
+.start-game-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
 }
diff --git a/src/games/Durac.js b/src/games/Durac.js
@@ -315,10 +315,27 @@ function Durac() {
     </div>
   );
 
+  const restartGame = () => {
+    setGameState({
+      players: [],
+      deck: [],
+      attackSlots: [],
+      primaryAttacker: null,
+      defender: null,
+      currentPlayer: null,
+      gamePhase: "setup",
+      trumpSuit: null,
+      validAttackValues: [],
+    });
+  };
+
   const renderGameInfo = () => (
     <div className="durac-game-info">
       <div className="durac-deck-count">{gameState.deck.length} cards left</div>
       <div className="durac-trump-suit">Trump: {gameState.trumpSuit}</div>
+      <button className="restart-button durac-button" onClick={restartGame}>
+        Restart Game
+      </button>
     </div>
   );
 
@@ -328,24 +345,6 @@ function Durac() {
 
   const renderGameBoard = () => (
     <div className="durac-game-board">
-      <Link
-        to="/"
-        className="back-link"
-        onClick={handleBackClick}
-        style={{
-          position: "absolute",
-          top: "10px",
-          left: "10px",
-          zIndex: 1000,
-          padding: "10px",
-          background: "transparent",
-          border: "1px solid ",
-          cursor: "pointer",
-        }}
-      >
-        Back to Home
-      </Link>
-      {renderGameInfo()}
       <div className="durac-hands-circle">
         {gameState.players.map((player) => (
           <div key={player.id} className="durac-player-hand">
@@ -357,18 +356,29 @@ function Durac() {
       <div className="durac-center-area">
         {renderAttackSlots()}
         {gameState.gamePhase === "defend" && gameState.defender.id === 1 && (
-          <button className="pickup-button" onClick={handlePickUp}>
+          <button className="pickup-button durac-button" onClick={handlePickUp}>
             Pick Up
           </button>
         )}
       </div>
+      {renderGameInfo()}
+      <Link to="/" className="back-link" onClick={handleBackClick}>
+        Back to Home
+      </Link>
     </div>
   );
 
   return (
     <div className="durac-game">
       {gameState.gamePhase === "setup" ? (
-        <button onClick={initializeGame}>Start Game</button>
+        <div className="start-game-wrapper">
+          <button
+            className="start-game-button durac-button"
+            onClick={initializeGame}
+          >
+            Start Game
+          </button>
+        </div>
       ) : (
         renderGameBoard()
       )}