fix project and upgrade bolt sdk (#29)

Author: davidminin

.nvmrc

@@ -0,0 +1 @@
+24.12.0

README.md

@@ -33,6 +33,15 @@ When you are ready to implement Bolt into your gaming SDK make sure to follow al
 
 This project includes a Tilt configuration for easy local development. You have two options to start the development environment:
 
+**Setup:**
+```
+cp client/.env.local.sample client/.env.local
+cp client/.env.staging.sample client/.env.staging
+
+cp server/.env.local.sample server/.env.local
+cp server/.env.staging.sample server/.env.staging
+```
+
 **Using script (uses Tilt):**
 
 ```bash

client/package-lock.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@boltpay/bolt-js": "^0.2.2",
+    "@boltpay/bolt-js": "^0.2.3",
     "@tanstack/query-async-storage-persister": "^5.83.0",
     "@tanstack/react-query": "^5.83.0",
     "@tanstack/react-query-persist-client": "^5.83.0",

client/package.json

@@ -14,7 +14,6 @@
 .app-header h1 {
   background: var(--gradient-accent);
   background-clip: text;
-  font-size: 3rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
   position: relative;
@@ -35,7 +34,7 @@
   display: grid;
   gap: 2rem;
   grid-template-columns: 1fr 1fr;
-  margin-bottom: 3rem;
+  margin-top: 3rem;
 }
 
 .demo-card {
@@ -111,13 +110,11 @@
 
 .demo-button:hover {
   color: inherit;
-  transform: translateY(2px);
   box-shadow: 0 4px 0 var(--color-tan-dark),
     0 6px 8px var(--color-shadow-medium), 0 0 20px var(--color-glow-accent);
 }
 
 .demo-button:active {
-  transform: translateY(4px);
   box-shadow: 0 2px 0 var(--color-tan-dark),
     0 4px 6px var(--color-shadow-medium);
 }
@@ -176,15 +173,6 @@
     grid-template-columns: 1fr;
   }
 
-  .app-header h1 {
-    font-size: clamp(1.8rem, 5vw, 2.5rem);
-  }
-
-  .index-page .app-header {
-    padding: 3rem 1.5rem;
-    margin: 1rem 0 2rem 0;
-  }
-
   .footer-content {
     flex-direction: column;
     gap: 1rem;
@@ -215,7 +203,6 @@
 /* Demo top bar styles */
 .demo-top-bar {
   background: #fefef9ab;
-  border-bottom: 2px solid #e9ecef;
   padding-inline: 1rem;
 }
 
@@ -280,10 +267,6 @@
     width: 1px;
   }
 
-  .demo-top-bar {
-    padding: 0.5rem 1rem;
-  }
-
   .demo-tab {
     padding: 0.5rem 0.9rem;
     font-size: 0.8rem;
@@ -319,6 +302,7 @@
   flex-direction: column;
   position: relative;
   justify-content: center;
+  padding: 0 1rem;
 }
 
 .index-page::before {
@@ -350,6 +334,7 @@
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
+  padding: 1rem 0;
 }
 
 .nav-logo {
@@ -423,7 +408,6 @@
 
 .nav-signin-btn:hover {
   background: var(--color-nav-text);
-  transform: translateY(-1px);
   box-shadow: 0 3px 0 var(--color-nav-bg), 0 6px 12px rgba(139, 115, 85, 0.4);
 }
 
@@ -457,18 +441,21 @@
 
 /* Home page hero section styling */
 .index-page .app-header {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   background: linear-gradient(
     135deg,
     rgba(245, 235, 220, 0.95) 0%,
     rgba(218, 204, 182, 0.9) 100%
   );
-  padding: 4rem 2rem;
-  margin: 2rem 0 3rem 0;
+  width: 100%;
   backdrop-filter: blur(12px);
   border-bottom: 4px solid rgba(218, 204, 182, 0.7);
   box-shadow: 0 4px 20px rgba(139, 128, 110, 0.3);
-  width: 100%;
-  max-width: none;
+  max-width: 100vw;
+  box-sizing: border-box;
 }
 
 .index-page .app-header h1 {
@@ -478,14 +465,12 @@
   -webkit-text-fill-color: transparent;
   text-shadow: 0 2px 0 rgba(139, 128, 110, 0.4),
     0 4px 8px rgba(139, 128, 110, 0.3);
-  font-size: clamp(2.5rem, 6vw, 4.5rem);
   margin-bottom: 1rem;
 }
 
 .index-page .app-header p {
   color: var(--color-text);
   text-shadow: 0 1px 2px rgba(245, 235, 220, 0.8);
-  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
   margin: 0;
 }
 

client/src/app.css

@@ -19,20 +19,22 @@ export function TopNav() {
           <div className="nav-brand">
             <Link to="/" className="nav-brand-link">
               <img src={GameLogo} alt="Game Logo" className="nav-logo" />
-              <span className="mobile-hidden">Knights of Valor</span>
+              Knights of Valor
             </Link>
           </div>
           <div className="nav-links mobile-hidden">
             <Link
               to="/store"
               className="nav-link"
-              activeProps={{ className: "active" }}>
+              activeProps={{ className: "active" }}
+            >
               Shop
             </Link>
             <Link
               to="/game"
               className="nav-link"
-              activeProps={{ className: "active" }}>
+              activeProps={{ className: "active" }}
+            >
               Game
             </Link>
           </div>

client/src/components/TopNav.tsx

@@ -195,13 +195,12 @@ button {
 }
 
 button:hover:not(:disabled) {
-  transform: translateY(2px);
+  opacity: 0.8;
   box-shadow: 0 4px 0 var(--color-stone-dark),
     0 6px 8px var(--color-shadow-medium), 0 0 20px var(--color-glow-accent);
 }
 
 button:active:not(:disabled) {
-  transform: translateY(4px);
   box-shadow: 0 2px 0 var(--color-stone-dark),
     0 4px 6px var(--color-shadow-medium);
 }

client/src/index.css

@@ -31,7 +31,8 @@
 
 .game-controls-info {
   margin-top: 20px;
-  text-align: center;
+  font-size: 1.2rem;
+  text-align: left;
   color: #666;
   font-family: Arial, sans-serif;
 }

client/src/pages/Game.css

@@ -100,8 +100,12 @@ export default function Game() {
       // Main cactus body
       ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
       // Spikes
-      ctx.fillRect(obstacle.x - 3, obstacle.y + 10, 6, 3);
-      ctx.fillRect(obstacle.x + 12, obstacle.y + 15, 6, 3);
+      ctx.fillRect(obstacle.x - 6, obstacle.y + 10, 6, 3);
+      ctx.fillRect(obstacle.x + 12, obstacle.y + 15, 9, 3);
+      // circular top of cactus
+      ctx.beginPath();
+      ctx.arc(obstacle.x + 7.5, obstacle.y, 7.5, 0, 2 * Math.PI);
+      ctx.fill();
     }
 
     function drawGround() {
@@ -126,7 +130,7 @@ export default function Game() {
     function createObstacle(x: number) {
       return {
         x: x,
-        y: GROUND_Y - 40,
+        y: GROUND_Y - 20,
         width: 15,
         height: 40,
       };
@@ -228,7 +232,7 @@ export default function Game() {
       }
 
       // Spawn obstacles
-      if (obstacles.length === 0 || Math.random() < 0.003) {
+      if (obstacles.length === 0 || Math.random() < 0.1) {
         if (
           obstacles.length === 0 ||
           canvas.width - obstacles[obstacles.length - 1].x >