fix games

Author: 0xKurt

packages/builder/tsconfig.tsbuildinfo

@@ -2,6 +2,54 @@ import React, { useState, useEffect } from "react";
 import { getChains, stringToBlobUrl } from "common";
 import { TChain } from "common";
 
+// Game Configuration
+const GAME_CONFIG = {
+  // Player settings
+  player: {
+    radius: 20,
+    initialX: 50,
+    jumpForce: -15,
+    gravity: 0.6,
+  },
+
+  // Obstacle settings
+  obstacles: {
+    width: 40,
+    minHeight: 40,
+    maxNormalHeight: 60,
+    minHighHeight: 100,
+    maxHighHeight: 140,
+    highObstacleChance: 0.4,
+    minSpacing: 700,
+    randomSpacingRange: 300,
+  },
+
+  // Game physics
+  physics: {
+    initialSpeed: 3,
+    speedIncrease: 4,
+    speedIncreaseRate: 1000, // Lower = faster speed increase
+  },
+
+  // Scoring
+  scoring: {
+    obstaclePoints: 100,
+    survivalPointsPerSecond: 1,
+  },
+
+  // Canvas settings
+  canvas: {
+    width: 400,
+    height: 300,
+    groundOffset: 30,
+  },
+
+  // Cooldown
+  cooldown: {
+    duration: 3, // seconds
+  },
+};
+
 type Obstacle = {
   x: number;
   width: number;
@@ -19,14 +67,14 @@ export function GitcoinRunner() {
   const [cooldown, setCooldown] = useState(false);
   const [cooldownTime, setCooldownTime] = useState(3);
   const playerRef = React.useRef({
-    x: 50,
-    y: 250, // Default position, will be updated in useEffect
+    x: GAME_CONFIG.player.initialX,
+    y: 250,
     dy: 0,
-    radius: 20,
+    radius: GAME_CONFIG.player.radius,
     isJumping: false,
   });
   const gameStateRef = React.useRef({
-    gameSpeed: 2,
+    gameSpeed: GAME_CONFIG.physics.initialSpeed,
     frameCount: 0,
   });
   const obstaclesRef = React.useRef<Obstacle[]>([]);
@@ -36,9 +84,8 @@ export function GitcoinRunner() {
 
   function startJump() {
     const player = playerRef.current;
-
     if (!player.isJumping) {
-      player.dy = -10;
+      player.dy = GAME_CONFIG.player.jumpForce;
       player.isJumping = true;
     }
   }
@@ -55,12 +102,36 @@ export function GitcoinRunner() {
       : 250;
     player.dy = 0;
     player.isJumping = false;
-    gameState.gameSpeed = 2;
+    gameState.gameSpeed = GAME_CONFIG.physics.initialSpeed;
     gameState.frameCount = 0;
     obstaclesRef.current = [];
     setGameStarted(true);
   }
 
+  function createObstacle() {
+    const width = GAME_CONFIG.obstacles.width;
+    const isHighObstacle =
+      Math.random() < GAME_CONFIG.obstacles.highObstacleChance;
+    const height = isHighObstacle
+      ? GAME_CONFIG.obstacles.minHighHeight +
+        Math.random() *
+          (GAME_CONFIG.obstacles.maxHighHeight -
+            GAME_CONFIG.obstacles.minHighHeight)
+      : GAME_CONFIG.obstacles.minHeight +
+        Math.random() *
+          (GAME_CONFIG.obstacles.maxNormalHeight -
+            GAME_CONFIG.obstacles.minHeight);
+    const iconIndex = Math.floor(Math.random() * chainIconsRef.current.length);
+
+    obstaclesRef.current.push({
+      x: canvasRef.current?.width || 0,
+      width,
+      height,
+      scored: false,
+      iconIndex,
+    });
+  }
+
   useEffect(() => {
     if (!canvasRef.current || !imagesLoaded) return;
 
@@ -72,28 +143,8 @@ export function GitcoinRunner() {
     const obstacles = obstaclesRef.current;
     const gameState = gameStateRef.current;
     let animationId: number;
-    const gravity = 0.25;
-    const groundLevel = canvas.height - 30;
-
-    function createObstacle() {
-      const width = 40;
-      // Sometimes create higher obstacles that can be passed under
-      const isHighObstacle = Math.random() < 0.3; // 30% chance for high obstacle
-      const height = isHighObstacle
-        ? 80 + Math.random() * 40 // High obstacle: 80-120px
-        : 40 + Math.random() * 20; // Normal obstacle: 40-60px
-      const iconIndex = Math.floor(
-        Math.random() * chainIconsRef.current.length
-      );
-
-      obstacles.push({
-        x: canvas.width,
-        width,
-        height,
-        scored: false,
-        iconIndex,
-      });
-    }
+    const gravity = GAME_CONFIG.player.gravity;
+    const groundLevel = canvas.height - GAME_CONFIG.canvas.groundOffset;
 
     function drawGround(context: CanvasRenderingContext2D) {
       context.strokeStyle = "#666";
@@ -134,21 +185,38 @@ export function GitcoinRunner() {
 
     function checkCollision() {
       return obstacles.some((obstacle) => {
-        // Get player bounds
-        const playerTop = player.y - player.radius;
-        const playerBottom = player.y + player.radius;
-        const playerLeft = player.x - player.radius;
-        const playerRight = player.x + player.radius;
-
-        // Get obstacle bounds
-        const obstacleLeft = obstacle.x;
-        const obstacleRight = obstacle.x + obstacle.width;
-        const obstacleTop = groundLevel - obstacle.height;
-
-        // Check if we're horizontally aligned with the obstacle
-        if (playerRight > obstacleLeft && playerLeft < obstacleRight) {
-          // Only collide if we hit from above or the sides
-          return playerBottom > obstacleTop && playerTop < obstacleTop;
+        const playerBox = {
+          left: player.x - player.radius,
+          right: player.x + player.radius,
+          top: player.y - player.radius,
+          bottom: player.y + player.radius,
+        };
+
+        const obstacleBox = {
+          left: obstacle.x,
+          right: obstacle.x + obstacle.width,
+          top: groundLevel - obstacle.height,
+          bottom: groundLevel,
+        };
+
+        // Check for horizontal overlap
+        const horizontalOverlap =
+          playerBox.right > obstacleBox.left &&
+          playerBox.left < obstacleBox.right;
+
+        // If there's horizontal overlap, check for collision
+        if (horizontalOverlap) {
+          // For high obstacles (that can be passed under)
+          if (obstacle.height > GAME_CONFIG.obstacles.maxNormalHeight) {
+            // Only collide if we hit the top portion
+            return (
+              playerBox.bottom > obstacleBox.top &&
+              playerBox.top < obstacleBox.top
+            );
+          } else {
+            // For normal obstacles, collide if there's any vertical overlap
+            return playerBox.bottom > obstacleBox.top;
+          }
         }
 
         return false;
@@ -159,17 +227,17 @@ export function GitcoinRunner() {
       obstacles.forEach((obstacle) => {
         if (!obstacle.scored && player.x > obstacle.x + obstacle.width) {
           obstacle.scored = true;
-          setScore((prev) => prev + 100); // More points for obstacles
+          setScore((prev) => prev + GAME_CONFIG.scoring.obstaclePoints);
         }
       });
 
-      // Update survival time based on frame count (60 frames = 1 second)
       if (gameStarted && !gameOver) {
         gameState.frameCount++;
-        // Add 1 point every 60 frames (1 second)
         if (gameState.frameCount % 60 === 0) {
           setSurvivalTime(gameState.frameCount / 60);
-          setScore((prev) => prev + 1);
+          setScore(
+            (prev) => prev + GAME_CONFIG.scoring.survivalPointsPerSecond
+          );
         }
       }
     }
@@ -193,26 +261,28 @@ export function GitcoinRunner() {
 
       // Draw start screen
       if (!gameStarted && !gameOver) {
-        ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
+        ctx.fillStyle = "#ffffff";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
 
         // Title with glow
-        ctx.fillStyle = "white";
+        ctx.fillStyle = "#000000";
         ctx.textAlign = "center";
-        ctx.shadowColor = "rgba(0, 255, 255, 0.5)";
+        ctx.shadowColor = "rgba(0, 200, 255, 0.3)";
         ctx.shadowBlur = 15;
         ctx.font = "bold 36px Arial";
         ctx.fillText("Chain Hopper", canvas.width / 2, canvas.height / 2 - 20);
 
         // Instructions
         ctx.shadowBlur = 5;
         ctx.font = "20px Arial";
+        ctx.fillStyle = "#333333";
         ctx.fillText(
           "Jump across the chains!",
           canvas.width / 2,
           canvas.height / 2 + 10
         );
         ctx.font = "16px Arial";
+        ctx.fillStyle = "#666666";
         ctx.fillText(
           "Press spacebar or tap to play",
           canvas.width / 2,
@@ -225,19 +295,19 @@ export function GitcoinRunner() {
 
       // Draw game over screen
       if (gameOver) {
-        // Semi-transparent overlay
-        ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
+        // Light background
+        ctx.fillStyle = "#ffffff";
         ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-        // Draw fancy score box with gradient
+        // Draw score box with subtle gradient
         const gradient = ctx.createLinearGradient(
           0,
           canvas.height / 2 - 100,
           0,
           canvas.height / 2 + 100
         );
-        gradient.addColorStop(0, "rgba(255, 255, 255, 0.15)");
-        gradient.addColorStop(1, "rgba(255, 255, 255, 0.05)");
+        gradient.addColorStop(0, "rgba(0, 200, 255, 0.1)");
+        gradient.addColorStop(1, "rgba(0, 200, 255, 0.05)");
         ctx.fillStyle = gradient;
         ctx.beginPath();
         ctx.roundRect(
@@ -250,16 +320,17 @@ export function GitcoinRunner() {
         ctx.fill();
 
         // Game over text with shadow
-        ctx.fillStyle = "white";
-        ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+        ctx.fillStyle = "#000000";
+        ctx.shadowColor = "rgba(0, 200, 255, 0.3)";
         ctx.shadowBlur = 10;
         ctx.font = "bold 36px Arial";
         ctx.textAlign = "center";
         ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2 - 30);
 
-        // Score and time with subtle glow
+        // Score with subtle glow
         ctx.shadowBlur = 5;
         ctx.font = "28px Arial";
+        ctx.fillStyle = "#333333";
         ctx.fillText(
           `Score: ${score}`,
           canvas.width / 2,
@@ -271,15 +342,15 @@ export function GitcoinRunner() {
 
         if (cooldown) {
           ctx.font = "16px Arial";
-          ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
+          ctx.fillStyle = "#666666";
           ctx.fillText(
             `Wait ${cooldownTime} seconds...`,
             canvas.width / 2,
             canvas.height / 2 + 50
           );
         } else {
           ctx.font = "18px Arial";
-          ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
+          ctx.fillStyle = "#666666";
           ctx.fillText(
             "Press space to play again",
             canvas.width / 2,
@@ -299,8 +370,13 @@ export function GitcoinRunner() {
           player.isJumping = false;
         }
 
-        // Remove speed cap and make progression slower
-        gameState.gameSpeed = 2 + (gameState.frameCount / 6000) * 3;
+        // Update game speed
+        gameState.gameSpeed =
+          GAME_CONFIG.physics.initialSpeed +
+          Math.min(
+            gameState.frameCount / GAME_CONFIG.physics.speedIncreaseRate,
+            GAME_CONFIG.physics.speedIncrease
+          );
 
         // Update obstacles
         obstacles.forEach((obstacle) => {
@@ -312,10 +388,13 @@ export function GitcoinRunner() {
           obstacles.shift();
         }
 
-        // Add new obstacles with much more space between them
+        // Add new obstacles with randomized spacing
         if (
           obstacles.length === 0 ||
-          obstacles[obstacles.length - 1].x < canvas.width - 800
+          obstacles[obstacles.length - 1].x <
+            canvas.width -
+              (GAME_CONFIG.obstacles.minSpacing +
+                Math.random() * GAME_CONFIG.obstacles.randomSpacingRange)
         ) {
           createObstacle();
         }
@@ -488,8 +567,8 @@ export function GitcoinRunner() {
     <div className="text-center">
       <canvas
         ref={canvasRef}
-        width={400}
-        height={300}
+        width={GAME_CONFIG.canvas.width}
+        height={GAME_CONFIG.canvas.height}
         className="mx-auto border rounded-lg cursor-pointer"
       />
     </div>

packages/grant-explorer/src/components/GitcoinRunner.tsx

@@ -19,6 +19,7 @@ import { Balance, BalanceMap } from "../../api/types";
 import { formatUnits } from "ethers/lib/utils";
 import GenericModal from "../../common/GenericModal";
 import SquidWidget, { SwapParams } from "./SquidWidget";
+import { GitcoinRunner } from "../../../components/GitcoinRunner";
 
 export default function ViewCart() {
   const { projects, setCart, getVotingTokenForChain } = useCartStorage();
@@ -136,7 +137,10 @@ export default function ViewCart() {
                 address: token.address,
                 chainId: chainIdNumber,
                 formattedAmount: Number(
-                  formatUnits(balance.value / BigInt(getMultiplier(chainIdNumber)), balance.decimals)
+                  formatUnits(
+                    balance.value / BigInt(getMultiplier(chainIdNumber)),
+                    balance.decimals
+                  )
                 ),
               };
             } catch (e) {
@@ -250,6 +254,7 @@ export default function ViewCart() {
             ) : (
               <div className={"grid sm:grid-cols-3 gap-5 w-full"}>
                 <div className="flex flex-col gap-5 sm:col-span-2 order-2 sm:order-1">
+                  <GitcoinRunner />
                   {Object.keys(groupedCartProjects).map((chainId) => (
                     <div key={Number(chainId)}>
                       <CartWithProjects