From 114702e246708881c0c350e5505e0069dd757cc0 Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Tue, 11 Mar 2025 19:01:52 +0800
Subject: [PATCH 1/7] updated layout.tsx

---
 src/app/components/ChatInterface.tsx | 54 ++++++++++++++++++++++++++++
 src/app/components/Sidebar.tsx       | 44 +++++++++++++++++++++++
 src/app/globals.css                  | 46 +++++++++++++++---------
 src/app/layout.tsx                   | 21 ++++++++---
 src/app/page.tsx                     | 49 ++++---------------------
 5 files changed, 150 insertions(+), 64 deletions(-)
 create mode 100644 src/app/components/ChatInterface.tsx
 create mode 100644 src/app/components/Sidebar.tsx

diff --git a/src/app/components/ChatInterface.tsx b/src/app/components/ChatInterface.tsx
new file mode 100644
index 00000000..59ee69f2
--- /dev/null
+++ b/src/app/components/ChatInterface.tsx
@@ -0,0 +1,54 @@
+import { FC } from 'react';
+import { Plus, Search, Mic, MoreHorizontal } from 'lucide-react';
+
+const ChatInterface: FC = () => {
+  return (
+    <div className="flex-1 flex flex-col h-full">
+      {/* Chat Messages Area */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-3xl mx-auto py-4 px-6">
+          {/* Messages would go here */}
+          <div className="flex justify-center items-center h-full text-white text-lg">
+            What can I help with?
+          </div>
+        </div>
+      </div>
+
+      {/* Input Area */}
+      <div className="border-t border-gray-700 p-4">
+        <div className="max-w-3xl mx-auto">
+          <div className="relative">
+            <div className="flex items-center bg-[#40414f] rounded-lg border border-gray-700">
+              <button className="p-2 hover:bg-gray-700 rounded-l-lg">
+                <Plus className="w-5 h-5 text-gray-400" />
+              </button>
+              
+              <textarea
+                rows={1}
+                className="flex-1 bg-transparent border-0 outline-none resize-none py-3 px-2 text-white placeholder-gray-400"
+                placeholder="Ask anything"
+              />
+
+              <div className="flex items-center gap-1 pr-2">
+                <button className="p-2 hover:bg-gray-700 rounded-lg">
+                  <Search className="w-5 h-5 text-gray-400" />
+                </button>
+                <button className="p-2 hover:bg-gray-700 rounded-lg">
+                  <Mic className="w-5 h-5 text-gray-400" />
+                </button>
+                <button className="p-2 hover:bg-gray-700 rounded-lg">
+                  <MoreHorizontal className="w-5 h-5 text-gray-400" />
+                </button>
+              </div>
+            </div>
+            <div className="text-xs text-center text-gray-400 mt-2">
+              ChatGPT can make mistakes. Check important info.
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatInterface; 
\ No newline at end of file
diff --git a/src/app/components/Sidebar.tsx b/src/app/components/Sidebar.tsx
new file mode 100644
index 00000000..5b21ad61
--- /dev/null
+++ b/src/app/components/Sidebar.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { Plus, Search, Folder, Clock, Settings } from 'lucide-react';
+
+const Sidebar: FC = () => {
+  return (
+    <div className="flex flex-col w-[260px] h-full bg-[#202123] text-white">
+      {/* New Chat Button */}
+      <div className="p-2">
+        <button className="w-full flex items-center gap-2 rounded p-3 hover:bg-gray-700 transition-colors text-sm">
+          <Plus size={16} />
+          New chat
+        </button>
+      </div>
+
+      {/* Chat History */}
+      <div className="flex-1 overflow-y-auto">
+        <div className="px-2 py-2">
+          <div className="text-xs text-gray-500 font-medium mb-2 px-2">Today</div>
+          {/* Chat items would go here */}
+        </div>
+      </div>
+
+      {/* Projects Section */}
+      <div className="px-2 py-2 border-t border-gray-700">
+        <div className="text-xs text-gray-500 font-medium mb-2 px-2">Projects</div>
+        <button className="w-full flex items-center gap-2 rounded p-2 hover:bg-gray-700 transition-colors text-sm">
+          <Folder size={16} />
+          Business with Marc
+        </button>
+        {/* More project items */}
+      </div>
+
+      {/* Bottom Section */}
+      <div className="p-2 border-t border-gray-700">
+        <button className="w-full flex items-center gap-2 rounded p-2 hover:bg-gray-700 transition-colors text-sm">
+          <Settings size={16} />
+          Settings
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Sidebar; 
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 875c01e8..9fedcb6d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,27 +3,39 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
+  --foreground-rgb: 255, 255, 255;
+  --background-start-rgb: 52, 53, 65;
+  --background-end-rgb: 52, 53, 65;
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: rgb(var(--background-start-rgb));
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+/* Textarea autoresize */
+textarea {
+  min-height: 24px;
+  max-height: 200px;
 }
 
 @layer utilities {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3ca8f2da..ed303c37 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,13 +1,26 @@
-import "./globals.css";
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'ChatGPT Clone',
+  description: 'A ChatGPT clone built with Next.js',
+}
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={inter.className}>
+        <div className="flex h-screen bg-[#343541]">
+          {children}
+        </div>
+      </body>
     </html>
-  );
+  )
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index a41c2cd2..f5cb90ad 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,48 +1,11 @@
-import Link from "next/link";
+import Sidebar from './components/Sidebar';
+import ChatInterface from './components/ChatInterface';
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-8">
-      <div>
-        <h2 className="text-2xl font-semibold text-center border p-4 font-mono rounded-md">
-          Get started by choosing a template path from the /paths/ folder.
-        </h2>
-      </div>
-      <div>
-        <h1 className="text-6xl font-bold text-center">Make anything you imagine 🪄</h1>
-        <h2 className="text-2xl text-center font-light text-gray-500 pt-4">
-          This whole page will be replaced when you run your template path.
-        </h2>
-      </div>
-      <div className="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <div className="border rounded-lg p-6 hover:bg-gray-100 transition-colors">
-          <h3 className="text-xl font-semibold">AI Chat App</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            An intelligent conversational app powered by AI models, featuring real-time responses
-            and seamless integration with Next.js and various AI providers.
-          </p>
-        </div>
-        <div className="border rounded-lg p-6 hover:bg-gray-100 transition-colors">
-          <h3 className="text-xl font-semibold">AI Image Generation App</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            Create images from text prompts using AI, powered by the Replicate API and Next.js.
-          </p>
-        </div>
-        <div className="border rounded-lg p-6 hover:bg-gray-100 transition-colors">
-          <h3 className="text-xl font-semibold">Social Media App</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            A feature-rich social platform with user profiles, posts, and interactions using
-            Firebase and Next.js.
-          </p>
-        </div>
-        <div className="border rounded-lg p-6 hover:bg-gray-100 transition-colors">
-          <h3 className="text-xl font-semibold">Voice Notes App</h3>
-          <p className="mt-2 text-sm text-gray-600">
-            A voice-based note-taking app with real-time transcription using Deepgram API, 
-            Firebase integration for storage, and a clean, simple interface built with Next.js.
-          </p>
-        </div>
-      </div>
-    </main>
+    <>
+      <Sidebar />
+      <ChatInterface />
+    </>
   );
 }

From 4cb800cedde9b45354720ca29214a4b064c50a22 Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Tue, 11 Mar 2025 19:25:39 +0800
Subject: [PATCH 2/7] updated page.tsx

---
 src/app/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f5cb90ad..e075670f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@ import Sidebar from './components/Sidebar';
 import ChatInterface from './components/ChatInterface';
 
 export default function Home() {
+  
   return (
     <>
       <Sidebar />

From 8b69e6c0e3f1ae4363847fec68a3c41f07aaf230 Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Wed, 12 Mar 2025 00:36:29 +0800
Subject: [PATCH 3/7] updated page.tsx

---
 src/app/page.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e075670f..ebf97401 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,6 +4,7 @@ import ChatInterface from './components/ChatInterface';
 export default function Home() {
   
   return (
+    
     <>
       <Sidebar />
       <ChatInterface />

From 319c4df057f8011edc37553ebca6aca431d0d285 Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Wed, 12 Mar 2025 00:40:06 +0800
Subject: [PATCH 4/7] Fix email attribution

---
 src/app/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ebf97401..5fa44998 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,8 +4,9 @@ import ChatInterface from './components/ChatInterface';
 export default function Home() {
   
   return (
-    
+
     <>
+    
       <Sidebar />
       <ChatInterface />
     </>

From da80e8f61e8bd4238aa670f3e6937d8d9a4f6b3e Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Wed, 12 Mar 2025 00:46:27 +0800
Subject: [PATCH 5/7] Fix email attribution

---
 src/app/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5fa44998..508d5e5f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,9 +6,10 @@ export default function Home() {
   return (
 
     <>
-    
+
       <Sidebar />
       <ChatInterface />
+      
     </>
   );
 }

From dfdc16e9c355db2de60fb97ca52efb1a3ca1ff0e Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Wed, 12 Mar 2025 01:42:15 +0800
Subject: [PATCH 6/7] updated page.tsx

---
 src/app/components/GameCanvas.tsx |  73 +++++++++++++++++
 src/app/components/GameUI.tsx     |  50 ++++++++++++
 src/app/globals.css               |  31 +++++++-
 src/app/hooks/useGameState.ts     | 127 ++++++++++++++++++++++++++++++
 src/app/page.tsx                  |  18 ++---
 5 files changed, 286 insertions(+), 13 deletions(-)
 create mode 100644 src/app/components/GameCanvas.tsx
 create mode 100644 src/app/components/GameUI.tsx
 create mode 100644 src/app/hooks/useGameState.ts

diff --git a/src/app/components/GameCanvas.tsx b/src/app/components/GameCanvas.tsx
new file mode 100644
index 00000000..cf1c1e22
--- /dev/null
+++ b/src/app/components/GameCanvas.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useGameState } from '../hooks/useGameState';
+
+const GameCanvas = () => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const { gameState, updateGameState } = useGameState();
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Set canvas size
+    const setCanvasSize = () => {
+      const container = canvas.parentElement;
+      if (!container) return;
+      canvas.width = container.clientWidth;
+      canvas.height = container.clientHeight;
+    };
+
+    // Initial size setup
+    setCanvasSize();
+    window.addEventListener('resize', setCanvasSize);
+
+    // Game loop
+    let animationFrameId: number;
+
+    const render = () => {
+      // Clear canvas
+      ctx.fillStyle = '#1a1a1a';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Draw game elements
+      drawCharacters(ctx);
+      drawEnvironment(ctx);
+
+      // Update game state
+      updateGameState();
+
+      // Continue game loop
+      animationFrameId = requestAnimationFrame(render);
+    };
+
+    render();
+
+    return () => {
+      window.removeEventListener('resize', setCanvasSize);
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [updateGameState]);
+
+  const drawCharacters = (ctx: CanvasRenderingContext2D) => {
+    // Draw stick figures and their animations
+  };
+
+  const drawEnvironment = (ctx: CanvasRenderingContext2D) => {
+    // Draw background and interactive elements
+  };
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 w-full h-full"
+      style={{ imageRendering: 'pixelated' }}
+    />
+  );
+};
+
+export default GameCanvas; 
\ No newline at end of file
diff --git a/src/app/components/GameUI.tsx b/src/app/components/GameUI.tsx
new file mode 100644
index 00000000..077bb9f0
--- /dev/null
+++ b/src/app/components/GameUI.tsx
@@ -0,0 +1,50 @@
+'use client';
+
+import { useState } from 'react';
+import { useGameState } from '../hooks/useGameState';
+
+const GameUI = () => {
+  const [selectedCharacter, setSelectedCharacter] = useState('red');
+  const { gameState } = useGameState();
+
+  const characters = [
+    { id: 'red', name: 'Red', color: '#ff0000' },
+    { id: 'blue', name: 'Blue', color: '#0000ff' },
+    { id: 'green', name: 'Green', color: '#00ff00' },
+    { id: 'yellow', name: 'Yellow', color: '#ffff00' },
+    { id: 'purple', name: 'Purple', color: '#800080' },
+  ];
+
+  return (
+    <div className="absolute bottom-0 left-0 right-0 p-4">
+      {/* Character Selection */}
+      <div className="flex justify-center gap-4 mb-4">
+        {characters.map((char) => (
+          <button
+            key={char.id}
+            className={`w-12 h-12 rounded-full transition-transform ${
+              selectedCharacter === char.id ? 'scale-110 ring-2 ring-white' : ''
+            }`}
+            style={{ backgroundColor: char.color }}
+            onClick={() => setSelectedCharacter(char.id)}
+          />
+        ))}
+      </div>
+
+      {/* Controls */}
+      <div className="flex justify-center gap-4">
+        <div className="bg-black/50 backdrop-blur-sm p-4 rounded-lg">
+          <div className="text-white text-sm mb-2">Controls:</div>
+          <div className="text-gray-300 text-xs">
+            <div>WASD - Move</div>
+            <div>SPACE - Jump/Special</div>
+            <div>E - Interact</div>
+            <div>Q - Switch Character</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GameUI; 
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 9fedcb6d..16883328 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,13 +4,19 @@
 
 :root {
   --foreground-rgb: 255, 255, 255;
-  --background-start-rgb: 52, 53, 65;
-  --background-end-rgb: 52, 53, 65;
+  --background-rgb: 26, 26, 26;
 }
 
 body {
   color: rgb(var(--foreground-rgb));
-  background: rgb(var(--background-start-rgb));
+  background: rgb(var(--background-rgb));
+  overflow: hidden;
+}
+
+/* Game specific styles */
+.pixel-art {
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
 }
 
 /* Custom scrollbar */
@@ -32,6 +38,25 @@ body {
   background: #6b7280;
 }
 
+/* Animation keyframes */
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+.float {
+  animation: float 2s ease-in-out infinite;
+}
+
+/* Character selection glow effect */
+.character-glow {
+  filter: drop-shadow(0 0 8px currentColor);
+}
+
 /* Textarea autoresize */
 textarea {
   min-height: 24px;
diff --git a/src/app/hooks/useGameState.ts b/src/app/hooks/useGameState.ts
new file mode 100644
index 00000000..87100f4b
--- /dev/null
+++ b/src/app/hooks/useGameState.ts
@@ -0,0 +1,127 @@
+import { useState, useCallback, useEffect } from 'react';
+
+interface Character {
+  id: string;
+  x: number;
+  y: number;
+  velocityX: number;
+  velocityY: number;
+  isJumping: boolean;
+  specialAbility: string;
+}
+
+interface GameState {
+  characters: Record<string, Character>;
+  activeCharacter: string;
+  score: number;
+}
+
+export const useGameState = () => {
+  const [gameState, setGameState] = useState<GameState>({
+    characters: {
+      red: {
+        id: 'red',
+        x: 100,
+        y: 100,
+        velocityX: 0,
+        velocityY: 0,
+        isJumping: false,
+        specialAbility: 'multiply',
+      },
+      blue: {
+        id: 'blue',
+        x: 200,
+        y: 100,
+        velocityX: 0,
+        velocityY: 0,
+        isJumping: false,
+        specialAbility: 'fly',
+      },
+      // Add more characters with their initial positions and abilities
+    },
+    activeCharacter: 'red',
+    score: 0,
+  });
+
+  const handleKeyPress = useCallback((event: KeyboardEvent) => {
+    const { key } = event;
+    const character = gameState.characters[gameState.activeCharacter];
+
+    setGameState((prev) => {
+      const updatedCharacter = { ...character };
+
+      switch (key.toLowerCase()) {
+        case 'w':
+          if (!updatedCharacter.isJumping) {
+            updatedCharacter.velocityY = -10;
+            updatedCharacter.isJumping = true;
+          }
+          break;
+        case 'a':
+          updatedCharacter.velocityX = -5;
+          break;
+        case 'd':
+          updatedCharacter.velocityX = 5;
+          break;
+        case 's':
+          // Implement crouch or special down action
+          break;
+        case ' ':
+          // Implement special ability
+          break;
+      }
+
+      return {
+        ...prev,
+        characters: {
+          ...prev.characters,
+          [gameState.activeCharacter]: updatedCharacter,
+        },
+      };
+    });
+  }, [gameState]);
+
+  const updateGameState = useCallback(() => {
+    setGameState((prev) => {
+      const updatedCharacters = { ...prev.characters };
+
+      // Update each character's position and physics
+      Object.keys(updatedCharacters).forEach((charId) => {
+        const char = updatedCharacters[charId];
+
+        // Apply gravity
+        char.velocityY += 0.5;
+
+        // Update position
+        char.x += char.velocityX;
+        char.y += char.velocityY;
+
+        // Ground collision
+        if (char.y > 400) {
+          char.y = 400;
+          char.velocityY = 0;
+          char.isJumping = false;
+        }
+
+        // Apply friction
+        char.velocityX *= 0.9;
+      });
+
+      return {
+        ...prev,
+        characters: updatedCharacters,
+      };
+    });
+  }, []);
+
+  // Set up keyboard event listeners
+  useEffect(() => {
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [handleKeyPress]);
+
+  return {
+    gameState,
+    updateGameState,
+  };
+}; 
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 508d5e5f..e417628a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,13 @@
-import Sidebar from './components/Sidebar';
-import ChatInterface from './components/ChatInterface';
+import GameCanvas from './components/GameCanvas';
+import GameUI from './components/GameUI';
 
 export default function Home() {
-  
   return (
-
-    <>
-
-      <Sidebar />
-      <ChatInterface />
-      
-    </>
+    <main className="flex min-h-screen flex-col items-center justify-center bg-gray-900">
+      <div className="relative w-full max-w-6xl aspect-video">
+        <GameCanvas />
+        <GameUI />
+      </div>
+    </main>
   );
 }

From e7b595a633a725f5ff26183297c7cc186003591d Mon Sep 17 00:00:00 2001
From: Your Name <danteocualesjr@gmail.com>
Date: Wed, 12 Mar 2025 01:45:19 +0800
Subject: [PATCH 7/7] added updates

---
 src/app/components/GameCanvas.tsx | 48 +++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/src/app/components/GameCanvas.tsx b/src/app/components/GameCanvas.tsx
index cf1c1e22..6660a495 100644
--- a/src/app/components/GameCanvas.tsx
+++ b/src/app/components/GameCanvas.tsx
@@ -54,11 +54,55 @@ const GameCanvas = () => {
   }, [updateGameState]);
 
   const drawCharacters = (ctx: CanvasRenderingContext2D) => {
-    // Draw stick figures and their animations
+    Object.values(gameState.characters).forEach((char) => {
+      // Save context state
+      ctx.save();
+      
+      // Set character color
+      ctx.strokeStyle = char.id;
+      ctx.lineWidth = 2;
+      
+      // Draw stick figure
+      ctx.beginPath();
+      
+      // Head
+      ctx.arc(char.x, char.y - 20, 10, 0, Math.PI * 2);
+      
+      // Body
+      ctx.moveTo(char.x, char.y - 10);
+      ctx.lineTo(char.x, char.y + 20);
+      
+      // Arms
+      ctx.moveTo(char.x - 15, char.y);
+      ctx.lineTo(char.x + 15, char.y);
+      
+      // Legs
+      ctx.moveTo(char.x, char.y + 20);
+      ctx.lineTo(char.x - 10, char.y + 40);
+      ctx.moveTo(char.x, char.y + 20);
+      ctx.lineTo(char.x + 10, char.y + 40);
+      
+      // Draw the figure
+      ctx.stroke();
+      
+      // Restore context state
+      ctx.restore();
+    });
   };
 
   const drawEnvironment = (ctx: CanvasRenderingContext2D) => {
-    // Draw background and interactive elements
+    // Draw ground
+    ctx.fillStyle = '#333';
+    ctx.fillRect(0, 450, ctx.canvas.width, 5);
+    
+    // Draw background elements
+    ctx.fillStyle = '#222';
+    for (let i = 0; i < 5; i++) {
+      const x = Math.random() * ctx.canvas.width;
+      const y = Math.random() * 400;
+      const size = Math.random() * 20 + 10;
+      ctx.fillRect(x, y, size, size);
+    }
   };
 
   return (