equal-2-step

Sleeping

App Files Files Community

elyor-ml commited on Apr 25

Commit

285d2af

1 Parent(s): 0ceeacd

snake game

Browse files

Files changed (13) hide show

Dockerfile +34 -0
app.py +12 -4
frontend/index.html +12 -0
frontend/package.json +22 -0
frontend/src/App.css +3 -0
frontend/src/App.tsx +100 -0
frontend/src/global.d.ts +1 -0
frontend/src/index.css +13 -0
frontend/src/main.tsx +10 -0
frontend/tsconfig.json +16 -0
frontend/vite.config.ts +12 -0
requirements.txt +2 -1
snake_game.py +155 -0

Dockerfile CHANGED Viewed

@@ -1,6 +1,23 @@
 # Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
 # you will also find guides on how best to write your Dockerfile
 FROM python:3.9
 RUN useradd -m -u 1000 user
@@ -13,4 +30,21 @@ COPY --chown=user ./requirements.txt requirements.txt
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 COPY --chown=user . /app
 CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

 # Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
 # you will also find guides on how best to write your Dockerfile
+############################
+# Stage 1 – Build frontend #
+############################
+FROM node:20 AS frontend-builder
+WORKDIR /frontend
+# Copy and install deps
+COPY ./frontend/package.json ./frontend/tsconfig.json ./frontend/vite.config.ts ./frontend/index.html ./
+COPY ./frontend/src ./src
+RUN npm install --legacy-peer-deps && npm run build
+###########################
+# Stage 2 – Backend image  #
+###########################
 FROM python:3.9
 RUN useradd -m -u 1000 user
 RUN pip install --no-cache-dir --upgrade -r requirements.txt
 COPY --chown=user . /app
+# Copy built static files from frontend stage
+COPY --from=frontend-builder /frontend/dist ./static
+# ------------------------------------------------------------------------------
+# NOTE: Hugging Face Spaces run inside a headless container.  The Snake game
+# itself requires an X11 display and therefore cannot run on the Space.  The
+# FastAPI app in `app.py` just serves a landing page and a health-check.
+# ------------------------------------------------------------------------------
+# Install lightweight additional libraries to satisfy pygame at import time.
+# These X11/SDL libs are small and safe even for headless use.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libsdl2-2.0-0 libsdl2-image-2.0-0 libsdl2-ttf-2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+# Default command that Hugging Face will execute
 CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

app.py CHANGED Viewed

@@ -1,7 +1,15 @@
 from fastapi import FastAPI
-app = FastAPI()
-@app.get("/")
-def greet_json():
-    return {"Hello": "World!"}

 from fastapi import FastAPI
+from fastapi.responses import RedirectResponse
+from fastapi.staticfiles import StaticFiles
+# FastAPI application
+app = FastAPI(title="Snake Game React Space")
+# Serve compiled React app (generated by Vite) as static files
+app.mount("/", StaticFiles(directory="static", html=True), name="static")
+# Health-check endpoint for the Space
+@app.get("/ping")
+def ping():
+    return {"status": "ok"}

frontend/index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Snake Game</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "name": "snake-react",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.1.0",
+    "typescript": "^5.4.4",
+    "vite": "^5.2.0"
+  }
+}

frontend/src/App.css ADDED Viewed

	@@ -0,0 +1,3 @@

+canvas {
+  border: 1px solid #333;
+}

frontend/src/App.tsx ADDED Viewed

	@@ -0,0 +1,100 @@

+import React, { useEffect, useRef, useState } from 'react';
+import './App.css';
+type Point = { x: number; y: number };
+const CELL = 20;
+const COLS = 30;
+const ROWS = 20;
+const WIDTH = COLS * CELL;
+const HEIGHT = ROWS * CELL;
+const DIRECTIONS: Record<string, Point> = {
+  ArrowUp: { x: 0, y: -1 },
+  ArrowDown: { x: 0, y: 1 },
+  ArrowLeft: { x: -1, y: 0 },
+  ArrowRight: { x: 1, y: 0 },
+};
+function App() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [snake, setSnake] = useState<Point[]>([
+    { x: 5, y: 5 },
+  ]);
+  const [food, setFood] = useState<Point>({ x: 10, y: 10 });
+  const [dir, setDir] = useState<Point>({ x: 1, y: 0 });
+  const [gameOver, setGameOver] = useState(false);
+  const randomFood = () => {
+    return {
+      x: Math.floor(Math.random() * COLS),
+      y: Math.floor(Math.random() * ROWS),
+    };
+  };
+  useEffect(() => {
+    const handleKey = (e: KeyboardEvent) => {
+      if (DIRECTIONS[e.key]) {
+        setDir(DIRECTIONS[e.key]);
+      }
+    };
+    window.addEventListener('keydown', handleKey);
+    return () => window.removeEventListener('keydown', handleKey);
+  }, []);
+  useEffect(() => {
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) return;
+    const interval = setInterval(() => {
+      setSnake((prev: Point[]) => {
+        const head = { x: prev[0].x + dir.x, y: prev[0].y + dir.y };
+        // check wall
+        if (head.x < 0 || head.x >= COLS || head.y < 0 || head.y >= ROWS) {
+          setGameOver(true);
+          clearInterval(interval);
+          return prev;
+        }
+        // check self
+        if (prev.some((p: Point) => p.x === head.x && p.y === head.y)) {
+          setGameOver(true);
+          clearInterval(interval);
+          return prev;
+        }
+        const newSnake = [head, ...prev];
+        if (head.x === food.x && head.y === food.y) {
+          setFood(randomFood());
+        } else {
+          newSnake.pop();
+        }
+        return newSnake;
+      });
+    }, 100);
+    return () => clearInterval(interval);
+  }, [dir, food]);
+  useEffect(() => {
+    const ctx = canvasRef.current?.getContext('2d');
+    if (!ctx) return;
+    ctx.clearRect(0, 0, WIDTH, HEIGHT);
+    // draw food
+    ctx.fillStyle = 'red';
+    ctx.fillRect(food.x * CELL, food.y * CELL, CELL, CELL);
+    // draw snake
+    ctx.fillStyle = 'green';
+    snake.forEach((s: Point) => {
+      ctx.fillRect(s.x * CELL, s.y * CELL, CELL, CELL);
+    });
+  }, [snake, food]);
+  return (
+    <div className="wrapper">
+      {gameOver && <h2>Game Over</h2>}
+      <canvas ref={canvasRef} width={WIDTH} height={HEIGHT} />
+    </div>
+  );
+}
+export default App;

frontend/src/global.d.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ declare module '*.css';

frontend/src/index.css ADDED Viewed

	@@ -0,0 +1,13 @@

+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f5f5f5;
+}
+.wrapper {
+  text-align: center;
+}

frontend/src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

frontend/tsconfig.json ADDED Viewed

	@@ -0,0 +1,16 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowJs": false,
+    "resolveJsonModule": true
+  },
+  "types": ["vite/client"],
+  "include": ["src", "src/**/*.css", "src/global.d.ts"]
+}

frontend/vite.config.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+  },
+  build: {
+    outDir: 'dist',
+  },
+});

requirements.txt CHANGED Viewed

@@ -1,2 +1,3 @@
 fastapi
-uvicorn[standard]

 fastapi
+uvicorn[standard]
+pygame

snake_game.py ADDED Viewed

	@@ -0,0 +1,155 @@

+import pygame
+import random
+import sys
+# Initialize pygame
+pygame.init()
+# Screen dimensions
+WIDTH, HEIGHT = 600, 400
+CELL_SIZE = 20  # Size of a grid cell
+GRID_WIDTH = WIDTH // CELL_SIZE
+GRID_HEIGHT = HEIGHT // CELL_SIZE
+# Colors (R, G, B)
+WHITE = (255, 255, 255)
+BLACK = (0, 0, 0)
+RED = (200, 0, 0)
+GREEN = (0, 200, 0)
+DARK_GREEN = (0, 155, 0)
+# Frames per second
+FPS = 10
+# Directions
+UP = (0, -1)
+DOWN = (0, 1)
+LEFT = (-1, 0)
+RIGHT = (1, 0)
+# Create the screen
+screen = pygame.display.set_mode((WIDTH, HEIGHT))
+pygame.display.set_caption("Snake Game")
+clock = pygame.time.Clock()
+font = pygame.font.SysFont("arial", 24)
+def draw_grid():
+    """Draw grid lines (optional)."""
+    for x in range(0, WIDTH, CELL_SIZE):
+        pygame.draw.line(screen, BLACK, (x, 0), (x, HEIGHT))
+    for y in range(0, HEIGHT, CELL_SIZE):
+        pygame.draw.line(screen, BLACK, (0, y), (WIDTH, y))
+def random_food_position(snake_body):
+    """Return a random position not occupied by the snake."""
+    while True:
+        pos = (random.randint(0, GRID_WIDTH - 1), random.randint(0, GRID_HEIGHT - 1))
+        if pos not in snake_body:
+            return pos
+def draw_snake(snake_body):
+    for segment in snake_body:
+        rect = pygame.Rect(segment[0] * CELL_SIZE, segment[1] * CELL_SIZE, CELL_SIZE, CELL_SIZE)
+        pygame.draw.rect(screen, DARK_GREEN, rect)
+        pygame.draw.rect(screen, GREEN, rect.inflate(-4, -4))
+def draw_food(food_pos):
+    rect = pygame.Rect(food_pos[0] * CELL_SIZE, food_pos[1] * CELL_SIZE, CELL_SIZE, CELL_SIZE)
+    pygame.draw.rect(screen, RED, rect)
+def show_text(text, center):
+    surface = font.render(text, True, BLACK)
+    rect = surface.get_rect(center=center)
+    screen.blit(surface, rect)
+def game_over_screen(score):
+    screen.fill(WHITE)
+    show_text(f"Game Over! Score: {score}", (WIDTH // 2, HEIGHT // 2 - 20))
+    show_text("Press Enter to play again or Esc to quit", (WIDTH // 2, HEIGHT // 2 + 20))
+    pygame.display.flip()
+    waiting = True
+    while waiting:
+        for event in pygame.event.get():
+            if event.type == pygame.QUIT:
+                pygame.quit()
+                sys.exit()
+            elif event.type == pygame.KEYDOWN:
+                if event.key == pygame.K_RETURN:
+                    waiting = False
+                elif event.key == pygame.K_ESCAPE:
+                    pygame.quit()
+                    sys.exit()
+        clock.tick(60)
+def main():
+    # Initial snake setup
+    snake_body = [(GRID_WIDTH // 2, GRID_HEIGHT // 2)]
+    direction = RIGHT
+    food_pos = random_food_position(snake_body)
+    score = 0
+    running = True
+    while running:
+        clock.tick(FPS)
+        for event in pygame.event.get():
+            if event.type == pygame.QUIT:
+                pygame.quit()
+                sys.exit()
+            elif event.type == pygame.KEYDOWN:
+                if event.key == pygame.K_UP and direction != DOWN:
+                    direction = UP
+                elif event.key == pygame.K_DOWN and direction != UP:
+                    direction = DOWN
+                elif event.key == pygame.K_LEFT and direction != RIGHT:
+                    direction = LEFT
+                elif event.key == pygame.K_RIGHT and direction != LEFT:
+                    direction = RIGHT
+        # Calculate new head position
+        new_head = (snake_body[0][0] + direction[0], snake_body[0][1] + direction[1])
+        # Check collisions with walls
+        if (
+            new_head[0] < 0
+            or new_head[0] >= GRID_WIDTH
+            or new_head[1] < 0
+            or new_head[1] >= GRID_HEIGHT
+        ):
+            game_over_screen(score)
+            return  # Restart whole game
+        # Check collision with self
+        if new_head in snake_body:
+            game_over_screen(score)
+            return
+        # Move snake
+        snake_body.insert(0, new_head)
+        # Check if food eaten
+        if new_head == food_pos:
+            score += 1
+            food_pos = random_food_position(snake_body)
+        else:
+            snake_body.pop()  # Remove tail segment if no food eaten
+        # Draw everything
+        screen.fill(WHITE)
+        draw_grid()
+        draw_snake(snake_body)
+        draw_food(food_pos)
+        show_text(f"Score: {score}", (60, 20))
+        pygame.display.flip()
+if __name__ == "__main__":
+    while True:
+        main()  # Restartable game loop