Spaces:

LukasBe
/

robofarm-showdown

Running

App Files Files Community

LukasBe commited on Apr 19, 2025

Commit

2f08f7e

verified ·

1 Parent(s): 3a9ba64

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1591 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Robofarm Showdown
-emoji: 🐨
-colorFrom: indigo
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: robofarm-showdown
+emoji: 🐳
+colorFrom: yellow
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1591 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>RoboFarm Showdown | Futuristic Farming Strategy Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rubik:wght@300;400;500;600;700&display=swap');
+        :root {
+            --primary: #00ff88;
+            --secondary: #00b8ff;
+            --accent: #ff00e4;
+            --dark: #0a0a1a;
+            --darker: #050510;
+            --light: #f0f8ff;
+        }
+        body {
+            font-family: 'Rubik', sans-serif;
+            background-color: var(--dark);
+            color: var(--light);
+            overflow: hidden;
+        }
+        .font-orbitron {
+            font-family: 'Orbitron', sans-serif;
+        }
+        .neon-text {
+            text-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary);
+        }
+        .neon-secondary {
+            text-shadow: 0 0 5px var(--secondary), 0 0 10px var(--secondary);
+        }
+        .neon-accent {
+            text-shadow: 0 0 5px var(--accent), 0 0 10px var(--accent);
+        }
+        .glow-box {
+            box-shadow: 0 0 10px var(--primary);
+            border: 1px solid rgba(0, 255, 136, 0.3);
+        }
+        .glow-box-secondary {
+            box-shadow: 0 0 10px var(--secondary);
+            border: 1px solid rgba(0, 184, 255, 0.3);
+        }
+        .glow-box-accent {
+            box-shadow: 0 0 10px var(--accent);
+            border: 1px solid rgba(255, 0, 228, 0.3);
+        }
+        .holographic-bg {
+            background: linear-gradient(135deg, rgba(10, 10, 26, 0.9) 0%, rgba(5, 5, 16, 0.95) 100%);
+            backdrop-filter: blur(10px);
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.6; }
+        }
+        @keyframes float {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        @keyframes scanline {
+            0% { background-position: 0 0; }
+            100% { background-position: 0 20px; }
+        }
+        .scanlines {
+            position: relative;
+            overflow: hidden;
+        }
+        .scanlines::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                rgba(0, 255, 136, 0.05) 50%,
+                transparent 100%
+            );
+            background-size: 100% 4px;
+            animation: scanline 1s linear infinite;
+            pointer-events: none;
+        }
+        .animate-pulse {
+            animation: pulse 2s infinite;
+        }
+        .animate-float {
+            animation: float 3s ease-in-out infinite;
+        }
+        .tile {
+            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .tile::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, rgba(255,255,255,0.03) 0%, transparent 50%);
+            pointer-events: none;
+        }
+        .tile:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
+            z-index: 10;
+        }
+        .tile-highlight {
+            box-shadow: 0 0 20px rgba(0, 255, 136, 0.7);
+            transform: scale(1.03);
+        }
+        .code-block {
+            font-family: 'Fira Code', monospace;
+            background-color: rgba(0, 184, 255, 0.1);
+            color: var(--light);
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            margin: 0.5rem 0;
+            cursor: pointer;
+            transition: all 0.3s;
+            border-left: 3px solid var(--secondary);
+            position: relative;
+        }
+        .code-block::before {
+            content: ">";
+            position: absolute;
+            left: 0.5rem;
+            color: var(--secondary);
+            opacity: 0;
+            transition: all 0.3s;
+        }
+        .code-block:hover {
+            background-color: rgba(0, 184, 255, 0.2);
+            transform: translateX(5px);
+        }
+        .code-block:hover::before {
+            opacity: 1;
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        .progress-bar {
+            transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1);
+            position: relative;
+            overflow: hidden;
+        }
+        .progress-bar::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
+            animation: progress-shine 2s infinite;
+        }
+        @keyframes progress-shine {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .player-avatar {
+            transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            position: relative;
+        }
+        .player-avatar::after {
+            content: "";
+            position: absolute;
+            bottom: -5px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 20px;
+            height: 5px;
+            background: rgba(0, 255, 136, 0.5);
+            border-radius: 50%;
+            filter: blur(2px);
+            transition: all 0.3s;
+        }
+        .player-avatar.active {
+            transform: scale(1.15);
+            box-shadow: 0 0 20px rgba(0, 255, 136, 0.7);
+        }
+        .player-avatar.active::after {
+            width: 30px;
+            height: 8px;
+            filter: blur(3px);
+        }
+        .modal {
+            transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+            transform: scale(0.9);
+            opacity: 0;
+        }
+        .modal.active {
+            transform: scale(1);
+            opacity: 1;
+        }
+        .modal-backdrop {
+            background-color: rgba(5, 5, 16, 0.9);
+            backdrop-filter: blur(10px);
+            transition: opacity 0.3s;
+        }
+        .crop-animation {
+            animation: grow 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
+        }
+        @keyframes grow {
+            0% { transform: scale(0.3) rotate(-15deg); opacity: 0; }
+            50% { transform: scale(1.1) rotate(5deg); opacity: 1; }
+            100% { transform: scale(1) rotate(0); opacity: 1; }
+        }
+        .grid-pattern {
+            background-image:
+                linear-gradient(rgba(0, 255, 136, 0.1) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 136, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px;
+        }
+        .hex-pattern {
+            background-image:
+                radial-gradient(circle at center, rgba(0, 184, 255, 0.05) 0%, transparent 70%),
+                repeating-linear-gradient(
+                    0deg,
+                    rgba(0, 184, 255, 0.03),
+                    rgba(0, 184, 255, 0.03) 1px,
+                    transparent 1px,
+                    transparent 10px
+                );
+        }
+        .circuit-pattern {
+            background-image:
+                radial-gradient(circle at center, rgba(255, 0, 228, 0.05) 0%, transparent 70%),
+                repeating-linear-gradient(
+                    45deg,
+                    rgba(255, 0, 228, 0.03),
+                    rgba(255, 0, 228, 0.03) 1px,
+                    transparent 1px,
+                    transparent 10px
+                );
+        }
+        .tooltip {
+            position: relative;
+            display: inline-block;
+        }
+        .tooltip .tooltiptext {
+            visibility: hidden;
+            width: 200px;
+            background-color: var(--darker);
+            color: var(--light);
+            text-align: center;
+            border-radius: 6px;
+            padding: 10px;
+            position: absolute;
+            z-index: 100;
+            bottom: 125%;
+            left: 50%;
+            margin-left: -100px;
+            opacity: 0;
+            transition: opacity 0.3s;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
+            border: 1px solid rgba(0, 255, 136, 0.2);
+            backdrop-filter: blur(5px);
+        }
+        .tooltip:hover .tooltiptext {
+            visibility: visible;
+            opacity: 1;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary) 0%, #00cc77 100%);
+            color: var(--dark);
+            font-weight: 600;
+            transition: all 0.3s;
+            box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
+        }
+        .btn-primary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
+        }
+        .btn-secondary {
+            background: linear-gradient(135deg, var(--secondary) 0%, #0099cc 100%);
+            color: var(--dark);
+            font-weight: 600;
+            transition: all 0.3s;
+            box-shadow: 0 4px 15px rgba(0, 184, 255, 0.3);
+        }
+        .btn-secondary:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 184, 255, 0.4);
+        }
+        .btn-accent {
+            background: linear-gradient(135deg, var(--accent) 0%, #cc00b8 100%);
+            color: var(--light);
+            font-weight: 600;
+            transition: all 0.3s;
+            box-shadow: 0 4px 15px rgba(255, 0, 228, 0.3);
+        }
+        .btn-accent:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 0, 228, 0.4);
+        }
+        .btn-dark {
+            background: linear-gradient(135deg, rgba(20, 20, 40, 0.8) 0%, rgba(10, 10, 30, 0.9) 100%);
+            color: var(--light);
+            font-weight: 600;
+            transition: all 0.3s;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(0, 255, 136, 0.1);
+        }
+        .btn-dark:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 15px rgba(0, 255, 136, 0.2);
+            border-color: rgba(0, 255, 136, 0.3);
+        }
+        .particles {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            overflow: hidden;
+            pointer-events: none;
+        }
+        .particle {
+            position: absolute;
+            background-color: var(--primary);
+            border-radius: 50%;
+            opacity: 0.3;
+            animation: float 15s infinite linear;
+        }
+        @keyframes particle-float {
+            0% { transform: translateY(0) rotate(0deg); }
+            100% { transform: translateY(-100vh) rotate(360deg); }
+        }
+        .grid-lines {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image:
+                linear-gradient(rgba(0, 255, 136, 0.03) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 136, 0.03) 1px, transparent 1px);
+            background-size: 40px 40px;
+            pointer-events: none;
+        }
+        .cyber-border {
+            position: relative;
+        }
+        .cyber-border::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
+        }
+        .cyber-border::after {
+            content: "";
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
+        }
+        .corner-decoration {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+        }
+        .corner-decoration.top-left {
+            top: 0;
+            left: 0;
+            border-top: 2px solid var(--primary);
+            border-left: 2px solid var(--primary);
+        }
+        .corner-decoration.top-right {
+            top: 0;
+            right: 0;
+            border-top: 2px solid var(--primary);
+            border-right: 2px solid var(--primary);
+        }
+        .corner-decoration.bottom-left {
+            bottom: 0;
+            left: 0;
+            border-bottom: 2px solid var(--primary);
+            border-left: 2px solid var(--primary);
+        }
+        .corner-decoration.bottom-right {
+            bottom: 0;
+            right: 0;
+            border-bottom: 2px solid var(--primary);
+            border-right: 2px solid var(--primary);
+        }
+        .status-bar {
+            height: 6px;
+            border-radius: 3px;
+            position: relative;
+            overflow: hidden;
+        }
+        .status-bar::after {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
+            animation: status-shine 2s infinite;
+        }
+        @keyframes status-shine {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .hologram-effect {
+            position: relative;
+            overflow: hidden;
+        }
+        .hologram-effect::before {
+            content: "";
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            right: -50%;
+            bottom: -50%;
+            background: linear-gradient(
+                to bottom,
+                transparent 0%,
+                rgba(0, 255, 136, 0.1) 50%,
+                transparent 100%
+            );
+            transform: rotate(30deg);
+            animation: hologram-scan 3s linear infinite;
+            pointer-events: none;
+        }
+        @keyframes hologram-scan {
+            0% { transform: translateY(-100%) rotate(30deg); }
+            100% { transform: translateY(100%) rotate(30deg); }
+        }
+        .pixel-grid {
+            background-image:
+                linear-gradient(rgba(0, 255, 136, 0.05) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(0, 255, 136, 0.05) 1px, transparent 1px);
+            background-size: 5px 5px;
+        }
+    </style>
+</head>
+<body class="min-h-screen overflow-hidden">
+    <!-- Particle Background -->
+    <div class="particles" id="particles"></div>
+    <div class="grid-lines"></div>
+    <!-- Main Game Container -->
+    <div class="flex flex-col h-screen">
+        <!-- Game Header -->
+        <header class="holographic-bg py-4 px-6 flex justify-between items-center border-b border-gray-800 relative cyber-border">
+            <div class="corner-decoration top-left"></div>
+            <div class="corner-decoration top-right"></div>
+            <div class="flex items-center space-x-6">
+                <div class="flex items-center">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center mr-3 glow-box">
+                        <i class="fas fa-robot text-xl text-white"></i>
+                    </div>
+                    <h1 class="text-2xl font-orbitron font-bold neon-text">ROBOFARM SHDOWN</h1>
+                </div>
+                <div class="flex items-center space-x-4">
+                    <div class="flex items-center space-x-2 bg-gray-900 px-3 py-1 rounded-full border border-gray-800">
+                        <span class="text-xs uppercase tracking-wider text-gray-400">Level</span>
+                        <span class="font-orbitron font-bold text-primary">01</span>
+                    </div>
+                    <div class="flex items-center space-x-2">
+                        <div class="w-3 h-3 rounded-full bg-primary glow-box"></div>
+                        <span id="level-name" class="font-medium">Patch of Dirt</span>
+                    </div>
+                </div>
+            </div>
+            <div class="flex items-center space-x-6">
+                <div class="flex items-center space-x-3">
+                    <div class="flex items-center space-x-2 bg-gray-900 px-3 py-1 rounded-full border border-gray-800">
+                        <i class="fas fa-stopwatch text-secondary"></i>
+                        <span id="timer" class="font-mono font-orbitron">00:30</span>
+                    </div>
+                    <div class="flex items-center space-x-2 bg-gray-900 px-3 py-1 rounded-full border border-gray-800">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <span id="score" class="font-orbitron font-bold">0</span>
+                    </div>
+                </div>
+                <button id="pause-btn" class="btn-dark px-4 py-2 rounded-full flex items-center space-x-2">
+                    <i class="fas fa-pause"></i>
+                    <span>Pause</span>
+                </button>
+            </div>
+        </header>
+        <!-- Main Game Area -->
+        <div class="flex-1 flex flex-col md:flex-row overflow-hidden">
+            <!-- Manual Gameplay Panel -->
+            <div id="manual-panel" class="w-full md:w-1/2 holographic-bg p-6 flex flex-col border-r border-gray-800 relative">
+                <div class="corner-decoration top-left"></div>
+                <div class="corner-decoration bottom-left"></div>
+                <div class="flex justify-between items-center mb-6">
+                    <div class="flex items-center space-x-3">
+                        <h2 class="text-xl font-orbitron font-bold flex items-center neon-text">
+                            <span class="w-8 h-8 rounded-full bg-blue-900 flex items-center justify-center mr-2 glow-box-secondary">
+                                <i class="fas fa-user text-blue-300"></i>
+                            </span>
+                            MANUAL FARMING
+                        </h2>
+                        <span id="manual-phase-badge" class="bg-blue-900 text-blue-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider glow-box-secondary">Phase 1</span>
+                    </div>
+                    <div id="manual-score" class="bg-gray-900 px-4 py-2 rounded-lg border border-gray-800 flex items-center space-x-2">
+                        <span class="text-sm uppercase tracking-wider text-gray-400">Score</span>
+                        <span class="font-orbitron font-bold text-xl text-primary">0</span>
+                    </div>
+                </div>
+                <!-- Farm Grid -->
+                <div id="manual-farm" class="grid grid-cols-4 gap-3 mb-6 flex-1">
+                    <!-- Tiles will be generated by JavaScript -->
+                </div>
+                <!-- Controls -->
+                <div class="bg-gray-900 p-4 rounded-xl border border-gray-800 mb-4">
+                    <h3 class="text-sm font-bold mb-3 uppercase tracking-wider text-gray-400 flex items-center">
+                        <i class="fas fa-gamepad mr-2 text-secondary"></i>
+                        Controls
+                    </h3>
+                    <div class="grid grid-cols-3 gap-3">
+                        <div class="bg-gray-800 p-3 rounded-lg text-center border border-gray-700 hover:border-secondary transition-all">
+                            <div class="bg-gray-900 w-10 h-10 mx-auto mb-2 rounded-lg flex items-center justify-center text-xl font-orbitron border border-gray-700">W</div>
+                            <span class="text-xs uppercase tracking-wider">Move Up</span>
+                        </div>
+                        <div class="bg-gray-800 p-3 rounded-lg text-center border border-gray-700 hover:border-secondary transition-all">
+                            <div class="bg-gray-900 w-10 h-10 mx-auto mb-2 rounded-lg flex items-center justify-center text-xl font-orbitron border border-gray-700">A</div>
+                            <span class="text-xs uppercase tracking-wider">Move Left</span>
+                        </div>
+                        <div class="bg-gray-800 p-3 rounded-lg text-center border border-gray-700 hover:border-secondary transition-all">
+                            <div class="bg-gray-900 w-10 h-10 mx-auto mb-2 rounded-lg flex items-center justify-center text-xl font-orbitron border border-gray-700">D</div>
+                            <span class="text-xs uppercase tracking-wider">Move Right</span>
+                        </div>
+                        <div class="bg-gray-800 p-3 rounded-lg text-center border border-gray-700 hover:border-secondary transition-all">
+                            <div class="bg-gray-900 w-10 h-10 mx-auto mb-2 rounded-lg flex items-center justify-center text-xl font-orbitron border border-gray-700">S</div>
+                            <span class="text-xs uppercase tracking-wider">Move Down</span>
+                        </div>
+                        <div class="bg-gray-800 p-3 rounded-lg text-center border border-gray-700 hover:border-secondary transition-all">
+                            <div class="bg-gray-900 w-10 h-10 mx-auto mb-2 rounded-lg flex items-center justify-center text-xl font-orbitron border border-gray-700">E</div>
+                            <span class="text-xs uppercase tracking-wider">Interact</span>
+                        </div>
+                        <div class="bg-gray-800 p-3 rounded-lg text-center border border-gray-700 hover:border-secondary transition-all">
+                            <div class="bg-gray-900 w-10 h-10 mx-auto mb-2 rounded-lg flex items-center justify-center text-xl font-orbitron border border-gray-700">Q</div>
+                            <span class="text-xs uppercase tracking-wider">Switch Tool</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Current Tool -->
+                <div class="mt-auto bg-gray-900 p-3 rounded-lg border border-gray-800 flex items-center justify-between">
+                    <span class="text-sm uppercase tracking-wider text-gray-400">Current Tool</span>
+                    <div id="current-tool" class="bg-gray-800 px-4 py-2 rounded-lg flex items-center space-x-3 border border-gray-700">
+                        <div class="w-6 h-6 rounded-full bg-primary flex items-center justify-center">
+                            <i class="fas fa-seedling text-xs text-gray-900"></i>
+                        </div>
+                        <span class="font-medium">Seeds</span>
+                    </div>
+                </div>
+            </div>
+            <!-- Bot Programming Panel -->
+            <div id="bot-panel" class="w-full md:w-1/2 holographic-bg p-6 flex flex-col relative">
+                <div class="corner-decoration top-right"></div>
+                <div class="corner-decoration bottom-right"></div>
+                <div class="flex justify-between items-center mb-6">
+                    <div class="flex items-center space-x-3">
+                        <h2 class="text-xl font-orbitron font-bold flex items-center neon-secondary">
+                            <span class="w-8 h-8 rounded-full bg-purple-900 flex items-center justify-center mr-2 glow-box-accent">
+                                <i class="fas fa-robot text-purple-300"></i>
+                            </span>
+                            ROBO-AGENT
+                        </h2>
+                        <span id="bot-phase-badge" class="bg-purple-900 text-purple-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider glow-box-accent">Phase 2</span>
+                    </div>
+                    <div id="bot-score" class="bg-gray-900 px-4 py-2 rounded-lg border border-gray-800 flex items-center space-x-2">
+                        <span class="text-sm uppercase tracking-wider text-gray-400">Score</span>
+                        <span class="font-orbitron font-bold text-xl text-secondary">0</span>
+                    </div>
+                </div>
+                <!-- Farm Grid -->
+                <div id="bot-farm" class="grid grid-cols-4 gap-3 mb-6 flex-1">
+                    <!-- Tiles will be generated by JavaScript -->
+                </div>
+                <!-- Programming Interface -->
+                <div class="bg-gray-900 p-4 rounded-xl border border-gray-800 mb-4">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-sm font-bold uppercase tracking-wider text-gray-400 flex items-center">
+                            <i class="fas fa-code mr-2 text-accent"></i>
+                            Code Editor
+                        </h3>
+                        <div class="flex space-x-3">
+                            <button id="run-bot-btn" class="btn-accent px-4 py-2 rounded-lg text-sm flex items-center space-x-2">
+                                <i class="fas fa-play"></i>
+                                <span>Run</span>
+                            </button>
+                            <button id="reset-bot-btn" class="btn-dark px-4 py-2 rounded-lg text-sm flex items-center space-x-2">
+                                <i class="fas fa-redo"></i>
+                                <span>Reset</span>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mb-3">
+                        <h4 class="text-xs uppercase tracking-wider text-gray-500 mb-1">Code Blocks</h4>
+                        <div id="code-blocks" class="bg-gray-800 p-3 rounded-lg mb-2 h-24 overflow-y-auto scrollbar-hide grid grid-cols-2 gap-2 border border-gray-700">
+                            <div class="code-block" draggable="true" data-action="move-right">move("right")</div>
+                            <div class="code-block" draggable="true" data-action="move-left">move("left")</div>
+                            <div class="code-block" draggable="true" data-action="move-up">move("up")</div>
+                            <div class="code-block" draggable="true" data-action="move-down">move("down")</div>
+                            <div class="code-block" draggable="true" data-action="plant">plant()</div>
+                            <div class="code-block" draggable="true" data-action="water">water()</div>
+                            <div class="code-block" draggable="true" data-action="harvest">harvest()</div>
+                            <div class="code-block" draggable="true" data-action="wait">wait(1)</div>
+                        </div>
+                    </div>
+                    <div>
+                        <h4 class="text-xs uppercase tracking-wider text-gray-500 mb-1">Your Program</h4>
+                        <div id="code-area" class="bg-gray-800 p-3 rounded-lg h-24 overflow-y-auto scrollbar-hide border-2 border-dashed border-gray-700 hover:border-accent transition-all">
+                            <!-- User's code will appear here -->
+                            <div class="text-gray-600 text-sm flex items-center justify-center h-full">
+                                <i class="fas fa-arrow-up mr-2"></i>
+                                Drag code blocks here
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Game Footer -->
+        <footer class="holographic-bg py-3 px-6 border-t border-gray-800 flex justify-between items-center relative cyber-border">
+            <div class="corner-decoration bottom-left"></div>
+            <div class="corner-decoration bottom-right"></div>
+            <div class="flex items-center space-x-6">
+                <div class="flex items-center space-x-3">
+                    <span class="text-sm uppercase tracking-wider text-gray-400">Progress</span>
+                    <div class="w-40 h-2 bg-gray-800 rounded-full overflow-hidden">
+                        <div id="progress-bar" class="h-full bg-gradient-to-r from-primary to-secondary progress-bar" style="width: 0%"></div>
+                    </div>
+                </div>
+                <button id="hint-btn" class="text-secondary hover:text-primary transition-colors text-sm flex items-center space-x-2">
+                    <i class="fas fa-lightbulb"></i>
+                    <span>Get Hint</span>
+                </button>
+            </div>
+            <div class="flex space-x-4">
+                <button id="sound-btn" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center border border-gray-800 hover:border-primary transition-all tooltip">
+                    <i class="fas fa-volume-up"></i>
+                    <span class="tooltiptext">Toggle Sound</span>
+                </button>
+                <button id="fullscreen-btn" class="w-10 h-10 rounded-full bg-gray-900 flex items-center justify-center border border-gray-800 hover:border-primary transition-all tooltip">
+                    <i class="fas fa-expand"></i>
+                    <span class="tooltiptext">Fullscreen</span>
+                </button>
+            </div>
+        </footer>
+    </div>
+    <!-- Pause Modal -->
+    <div id="pause-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-backdrop hidden">
+        <div class="bg-gray-900 rounded-2xl p-8 w-full max-w-md modal border border-gray-800 glow-box">
+            <div class="text-center mb-8">
+                <div class="w-20 h-20 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center mx-auto mb-4 glow-box animate-pulse">
+                    <i class="fas fa-pause text-3xl text-gray-900"></i>
+                </div>
+                <h2 class="text-3xl font-orbitron font-bold mb-2 neon-text">GAME PAUSED</h2>
+                <p class="text-gray-400">Take a break, farmer!</p>
+            </div>
+            <div class="flex flex-col space-y-4">
+                <button id="resume-btn" class="btn-primary py-4 rounded-xl font-bold flex items-center justify-center space-x-3">
+                    <i class="fas fa-play"></i>
+                    <span>Resume Game</span>
+                </button>
+                <button id="restart-btn" class="btn-secondary py-4 rounded-xl font-bold flex items-center justify-center space-x-3">
+                    <i class="fas fa-redo"></i>
+                    <span>Restart Level</span>
+                </button>
+                <button id="menu-btn" class="btn-dark py-4 rounded-xl font-bold flex items-center justify-center space-x-3 border border-gray-800">
+                    <i class="fas fa-home"></i>
+                    <span>Main Menu</span>
+                </button>
+                <button id="quit-btn" class="btn-dark py-4 rounded-xl font-bold flex items-center justify-center space-x-3 border border-red-900 hover:border-red-500">
+                    <i class="fas fa-power-off text-red-500"></i>
+                    <span class="text-red-500">Quit Game</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Level Complete Modal -->
+    <div id="complete-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-backdrop hidden">
+        <div class="bg-gray-900 rounded-2xl p-8 w-full max-w-md modal border border-gray-800 glow-box">
+            <div class="text-center mb-8">
+                <div class="w-24 h-24 rounded-full bg-gradient-to-br from-yellow-400 to-yellow-600 flex items-center justify-center mx-auto mb-6 shadow-lg animate-float">
+                    <i class="fas fa-trophy text-4xl text-gray-900"></i>
+                </div>
+                <h2 class="text-3xl font-orbitron font-bold mb-2 text-primary">LEVEL COMPLETE!</h2>
+                <p class="text-gray-400">Your farming skills are impressive</p>
+            </div>
+            <div class="grid grid-cols-2 gap-4 mb-8">
+                <div class="bg-gray-800 p-4 rounded-xl border border-gray-700">
+                    <div class="text-sm uppercase tracking-wider text-gray-400 mb-1">Manual Score</div>
+                    <div id="final-manual-score" class="text-2xl font-orbitron font-bold text-primary">120</div>
+                </div>
+                <div class="bg-gray-800 p-4 rounded-xl border border-gray-700">
+                    <div class="text-sm uppercase tracking-wider text-gray-400 mb-1">Bot Score</div>
+                    <div id="final-bot-score" class="text-2xl font-orbitron font-bold text-secondary">150</div>
+                </div>
+            </div>
+            <div class="mb-8 text-center">
+                <div id="result-message" class="text-xl font-orbitron font-bold text-primary mb-2">Your Bot Won!</div>
+                <div class="text-sm text-gray-500">Time to automate more tasks!</div>
+            </div>
+            <div class="flex flex-col space-y-4">
+                <button id="next-level-btn" class="btn-primary py-4 rounded-xl font-bold flex items-center justify-center space-x-3">
+                    <i class="fas fa-arrow-right"></i>
+                    <span>Next Level</span>
+                </button>
+                <button id="retry-btn" class="btn-secondary py-4 rounded-xl font-bold flex items-center justify-center space-x-3">
+                    <i class="fas fa-redo"></i>
+                    <span>Try Again</span>
+                </button>
+                <button id="level-select-btn" class="btn-dark py-4 rounded-xl font-bold flex items-center justify-center space-x-3 border border-gray-800">
+                    <i class="fas fa-list-ol"></i>
+                    <span>Level Select</span>
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Hint Modal -->
+    <div id="hint-modal" class="fixed inset-0 flex items-center justify-center z-50 modal-backdrop hidden">
+        <div class="bg-gray-900 rounded-2xl p-8 w-full max-w-md modal border border-gray-800 glow-box-secondary">
+            <div class="text-center mb-6">
+                <div class="w-16 h-16 rounded-full bg-gradient-to-br from-secondary to-blue-600 flex items-center justify-center mx-auto mb-4 glow-box-secondary">
+                    <i class="fas fa-lightbulb text-2xl text-gray-900"></i>
+                </div>
+                <h2 class="text-2xl font-orbitron font-bold mb-2 neon-secondary">LEVEL HINT</h2>
+                <p class="text-sm text-gray-400">Need some help, farmer?</p>
+            </div>
+            <div class="bg-gray-800 p-5 rounded-xl mb-6 border border-gray-700">
+                <p id="hint-text" class="mb-4 text-gray-300">For this small farm, you can simply move right, plant, and water each tile in sequence. Try writing code that does this!</p>
+                <div class="bg-gray-900 p-3 rounded-lg border border-gray-700">
+                    <div class="code-block">move("right")</div>
+                    <div class="code-block">plant()</div>
+                    <div class="code-block">water()</div>
+                    <div class="code-block">move("right")</div>
+                    <div class="code-block">plant()</div>
+                    <div class="code-block">water()</div>
+                </div>
+            </div>
+            <button id="close-hint-btn" class="w-full btn-secondary py-4 rounded-xl font-bold flex items-center justify-center space-x-3">
+                <i class="fas fa-check"></i>
+                <span>Got It!</span>
+            </button>
+        </div>
+    </div>
+    <script>
+        // Game State
+        const gameState = {
+            currentLevel: 1,
+            levels: [
+                {
+                    name: "Patch of Dirt",
+                    size: 4,
+                    manualTime: 30,
+                    botTime: 30,
+                    tiles: [
+                        { type: "soil", state: "dry" },
+                        { type: "soil", state: "dry" },
+                        { type: "soil", state: "dry" },
+                        { type: "soil", state: "dry" }
+                    ],
+                    goal: "Plant and water all crops",
+                    hint: "For this small farm, you can simply move right, plant, and water each tile in sequence. Try writing code that does this!"
+                },
+                {
+                    name: "Small Plot",
+                    size: 4,
+                    manualTime: 25,
+                    botTime: 25,
+                    tiles: [
+                        { type: "soil", state: "dry" },
+                        { type: "soil", state: "dry", obstacle: "rock" },
+                        { type: "soil", state: "dry" },
+                        { type: "soil", state: "dry" }
+                    ],
+                    goal: "Plant around the obstacle",
+                    hint: "Use conditionals to check if a tile has an obstacle before planting."
+                }
+            ],
+            phase: "manual", // manual or bot
+            manualScore: 0,
+            botScore: 0,
+            timeLeft: 30,
+            timerInterval: null,
+            currentTool: "seeds", // seeds, water, harvest
+            playerPosition: 0,
+            botPosition: 0,
+            isPaused: false,
+            soundEnabled: true
+        };
+        // DOM Elements
+        const elements = {
+            manualFarm: document.getElementById('manual-farm'),
+            botFarm: document.getElementById('bot-farm'),
+            manualScore: document.querySelector('#manual-score span'),
+            botScore: document.querySelector('#bot-score span'),
+            timer: document.getElementById('timer'),
+            currentTool: document.getElementById('current-tool'),
+            codeBlocks: document.getElementById('code-blocks'),
+            codeArea: document.getElementById('code-area'),
+            runBotBtn: document.getElementById('run-bot-btn'),
+            resetBotBtn: document.getElementById('reset-bot-btn'),
+            pauseBtn: document.getElementById('pause-btn'),
+            pauseModal: document.getElementById('pause-modal'),
+            resumeBtn: document.getElementById('resume-btn'),
+            restartBtn: document.getElementById('restart-btn'),
+            menuBtn: document.getElementById('menu-btn'),
+            quitBtn: document.getElementById('quit-btn'),
+            completeModal: document.getElementById('complete-modal'),
+            nextLevelBtn: document.getElementById('next-level-btn'),
+            retryBtn: document.getElementById('retry-btn'),
+            levelSelectBtn: document.getElementById('level-select-btn'),
+            finalManualScore: document.getElementById('final-manual-score'),
+            finalBotScore: document.getElementById('final-bot-score'),
+            resultMessage: document.getElementById('result-message'),
+            hintBtn: document.getElementById('hint-btn'),
+            hintModal: document.getElementById('hint-modal'),
+            closeHintBtn: document.getElementById('close-hint-btn'),
+            hintText: document.getElementById('hint-text'),
+            soundBtn: document.getElementById('sound-btn'),
+            fullscreenBtn: document.getElementById('fullscreen-btn'),
+            progressBar: document.getElementById('progress-bar'),
+            levelName: document.getElementById('level-name'),
+            manualPhaseBadge: document.getElementById('manual-phase-badge'),
+            botPhaseBadge: document.getElementById('bot-phase-badge'),
+            particles: document.getElementById('particles')
+        };
+        // Create particles
+        function createParticles() {
+            for (let i = 0; i < 50; i++) {
+                const particle = document.createElement('div');
+                particle.classList.add('particle');
+                const size = Math.random() * 3 + 1;
+                const posX = Math.random() * 100;
+                const posY = Math.random() * 100;
+                const duration = Math.random() * 20 + 10;
+                const delay = Math.random() * 10;
+                particle.style.width = `${size}px`;
+                particle.style.height = `${size}px`;
+                particle.style.left = `${posX}%`;
+                particle.style.top = `${posY}%`;
+                particle.style.animation = `particle-float ${duration}s ${delay}s infinite linear`;
+                particle.style.opacity = Math.random() * 0.3 + 0.1;
+                elements.particles.appendChild(particle);
+            }
+        }
+        // Initialize Game
+        function initGame() {
+            createParticles();
+            loadLevel(gameState.currentLevel);
+            setupEventListeners();
+            updateUI();
+        }
+        // Load Level
+        function loadLevel(levelNum) {
+            const level = gameState.levels[levelNum - 1];
+            gameState.phase = "manual";
+            gameState.manualScore = 0;
+            gameState.botScore = 0;
+            gameState.timeLeft = level.manualTime;
+            gameState.playerPosition = 0;
+            gameState.botPosition = 0;
+            // Update UI
+            elements.levelName.textContent = level.name;
+            elements.timer.textContent = formatTime(gameState.timeLeft);
+            elements.manualScore.textContent = gameState.manualScore;
+            elements.botScore.textContent = gameState.botScore;
+            elements.progressBar.style.width = '0%';
+            // Generate Farm Grids
+            generateFarmGrid(elements.manualFarm, level.tiles, true);
+            generateFarmGrid(elements.botFarm, level.tiles, false);
+            // Start Timer
+            startTimer();
+            // Update phase badges
+            updatePhaseBadges();
+        }
+        // Generate Farm Grid
+        function generateFarmGrid(container, tiles, isManual) {
+            container.innerHTML = '';
+            tiles.forEach((tile, index) => {
+                const tileElement = document.createElement('div');
+                tileElement.className = `tile rounded-xl flex items-center justify-center relative overflow-hidden`;
+                // Base styling
+                tileElement.classList.add('hologram-effect');
+                // Set tile appearance based on type and state
+                if (tile.obstacle === 'rock') {
+                    tileElement.className += ' bg-gray-800';
+                    tileElement.innerHTML = `
+                        <i class="fas fa-mountain text-gray-600 text-2xl"></i>
+                        <div class="absolute inset-0 bg-gradient-to-br from-transparent to-gray-900 opacity-30"></div>
+                    `;
+                } else {
+                    if (tile.state === 'dry') {
+                        tileElement.className += ' bg-yellow-900';
+                        tileElement.innerHTML = `
+                            <div class="absolute inset-0 bg-gradient-to-br from-transparent to-yellow-900 opacity-30"></div>
+                            <div class="w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM5Yzc2MDAiLz48cGF0aCBkPSJNMjAgMjBMNDAgNDBNNjAgMjBMODAgNDBNMTAwIDIwTDEyMCA0ME0xNDAgMjBMMTYwIDQwTTE4MCAyMEwyMDAgNDBNMjAgNjBMNDAgODBNNjAgNjBMODAgODBNMTAwIDYwTDEyMCA4ME0xNDAgNjBMMTYwIDgwTTE4MCA2MEwyMDAgODBNMjAgMTAwTDQwIDEyME02MCAxMDBMODAgMTIwTTEwMCAxMDBMMTIwIDEyME0xNDAgMTAwTDE2MCAxMjBNMTgwIDEwMEwyMDAgMTIwTTIwIDE0MEw0MCAxNjBNNjAgMTQwTDgwIDE2ME0xMDAgMTQwTDEyMCAxNjBNMTQwIDE0MEwxNjAgMTYwTTE4MCAxNDBMMjAwIDE2MCBNNDAgMEw2MCAyME04MCAwTDEwMCAyME0xMjAgMEwxNDAgMjBNMTYwIDBMMjAwIDIwTTQwIDQwTDYwIDYwTDgwIDgwTDEwMCAxMDBMMTIwIDEyMEwxNDAgMTQwTDE2MCAxNjBMMjAwIDE4MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIgLz48L3N2Zz4=')] opacity-20"></div>
+                        `;
+                    } else if (tile.state === 'wet') {
+                        tileElement.className += ' bg-yellow-800';
+                        tileElement.innerHTML = `
+                            <div class="absolute inset-0 bg-gradient-to-br from-transparent to-yellow-800 opacity-30"></div>
+                            <div class="w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiM4YzZkMDAiLz48cGF0aCBkPSJNMjAgMjBMNDAgNDBNNjAgMjBMODAgNDBNMTAwIDIwTDEyMCA0ME0xNDAgMjBMMTYwIDQwTTE4MCAyMEwyMDAgNDBNMjAgNjBMNDAgODBNNjAgNjBMODAgODBNMTAwIDYwTDEyMCA4ME0xNDAgNjBMMTYwIDgwTTE4MCA2MEwyMDAgODBNMjAgMTAwTDQwIDEyME02MCAxMDBMODAgMTIwTTEwMCAxMDBMMTIwIDEyME0xNDAgMTAwTDE2MCAxMjBNMTgwIDEwMEwyMDAgMTIwTTIwIDE0MEw0MCAxNjBNNjAgMTQwTDgwIDE2ME0xMDAgMTQwTDEyMCAxNjBNMTQwIDE0MEwxNjAgMTYwTTE4MCAxNDBMMjAwIDE2MCBNNDAgMEw2MCAyME04MCAwTDEwMCAyME0xMjAgMEwxNDAgMjBNMTYwIDBMMjAwIDIwTTQwIDQwTDYwIDYwTDgwIDgwTDEwMCAxMDBMMTIwIDEyMEwxNDAgMTQwTDE2MCAxNjBMMjAwIDE4MCIgc3Ryb2tlPSJyZ2JhKDI1NSwyNTUsMjU1LDAuMSkiIHN0cm9rZS13aWR0aD0iMSIgLz48L3N2Zz4=')] opacity-30"></div>
+                        `;
+                    } else if (tile.state === 'planted') {
+                        tileElement.className += ' bg-green-900';
+                        tileElement.innerHTML = `
+                            <i class="fas fa-seedling text-green-300 text-2xl crop-animation"></i>
+                            <div class="absolute inset-0 bg-gradient-to-br from-transparent to-green-900 opacity-30"></div>
+                        `;
+                    } else if (tile.state === 'grown') {
+                        tileElement.className += ' bg-green-700';
+                        tileElement.innerHTML = `
+                            <i class="fas fa-carrot text-yellow-300 text-2xl"></i>
+                            <div class="absolute inset-0 bg-gradient-to-br from-transparent to-green-700 opacity-30"></div>
+                        `;
+                    } else if (tile.state === 'withered') {
+                        tileElement.className += ' bg-yellow-950';
+                        tileElement.innerHTML = `
+                            <i class="fas fa-leaf text-yellow-700 text-2xl"></i>
+                            <div class="absolute inset-0 bg-gradient-to-br from-transparent to-yellow-950 opacity-30"></div>
+                        `;
+                    }
+                }
+                // Highlight player position
+                if ((isManual && index === gameState.playerPosition) ||
+                    (!isManual && index === gameState.botPosition)) {
+                    tileElement.classList.add('tile-highlight');
+                    const avatar = document.createElement('div');
+                    avatar.className = `player-avatar absolute -top-2 -right-2 w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold ${
+                        isManual ? 'bg-blue-500' : 'bg-purple-500'
+                    }`;
+                    avatar.innerHTML = isManual ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>';
+                    if ((isManual && gameState.phase === "manual") || (!isManual && gameState.phase === "bot")) {
+                        avatar.classList.add('active');
+                    }
+                    tileElement.appendChild(avatar);
+                }
+                container.appendChild(tileElement);
+            });
+        }
+        // Start Timer
+        function startTimer() {
+            if (gameState.timerInterval) {
+                clearInterval(gameState.timerInterval);
+            }
+            gameState.timerInterval = setInterval(() => {
+                if (!gameState.isPaused) {
+                    gameState.timeLeft--;
+                    elements.timer.textContent = formatTime(gameState.timeLeft);
+                    // Update progress bar
+                    const currentLevel = gameState.levels[gameState.currentLevel - 1];
+                    const totalTime = gameState.phase === "manual" ? currentLevel.manualTime : currentLevel.botTime;
+                    const percentage = ((totalTime - gameState.timeLeft) / totalTime) * 100;
+                    elements.progressBar.style.width = `${percentage}%`;
+                    if (gameState.timeLeft <= 0) {
+                        clearInterval(gameState.timerInterval);
+                        if (gameState.phase === "manual") {
+                            switchToBotPhase();
+                        } else {
+                            endLevel();
+                        }
+                    }
+                }
+            }, 1000);
+        }
+        // Format Time
+        function formatTime(seconds) {
+            const mins = Math.floor(seconds / 60);
+            const secs = seconds % 60;
+            return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+        }
+        // Switch to Bot Phase
+        function switchToBotPhase() {
+            gameState.phase = "bot";
+            const currentLevel = gameState.levels[gameState.currentLevel - 1];
+            gameState.timeLeft = currentLevel.botTime;
+            elements.timer.textContent = formatTime(gameState.timeLeft);
+            // Reset bot position
+            gameState.botPosition = 0;
+            // Update UI
+            updatePhaseBadges();
+            generateFarmGrid(elements.botFarm, currentLevel.tiles, false);
+            // Start timer again
+            startTimer();
+        }
+        // End Level
+        function endLevel() {
+            clearInterval(gameState.timerInterval);
+            // Show results
+            elements.finalManualScore.textContent = gameState.manualScore;
+            elements.finalBotScore.textContent = gameState.botScore;
+            if (gameState.botScore > gameState.manualScore) {
+                elements.resultMessage.textContent = "Your Bot Won!";
+                elements.resultMessage.className = "text-xl font-orbitron font-bold text-primary mb-2";
+            } else if (gameState.botScore < gameState.manualScore) {
+                elements.resultMessage.textContent = "Manual Farming Won!";
+                elements.resultMessage.className = "text-xl font-orbitron font-bold text-blue-400 mb-2";
+            } else {
+                elements.resultMessage.textContent = "It's a Tie!";
+                elements.resultMessage.className = "text-xl font-orbitron font-bold text-yellow-400 mb-2";
+            }
+            elements.completeModal.classList.remove('hidden');
+            setTimeout(() => {
+                elements.completeModal.classList.add('active');
+            }, 10);
+        }
+        // Update UI
+        function updateUI() {
+            // Update current tool display
+            let toolIcon, toolName, toolColor;
+            switch (gameState.currentTool) {
+                case "seeds":
+                    toolIcon = '<i class="fas fa-seedling"></i>';
+                    toolName = "Seeds";
+                    toolColor = 'from-green-500 to-green-600';
+                    break;
+                case "water":
+                    toolIcon = '<i class="fas fa-tint"></i>';
+                    toolName = "Water";
+                    toolColor = 'from-blue-400 to-blue-600';
+                    break;
+                case "harvest":
+                    toolIcon = '<i class="fas fa-sickle"></i>';
+                    toolName = "Harvest";
+                    toolColor = 'from-yellow-500 to-yellow-600';
+                    break;
+            }
+            elements.currentTool.innerHTML = `
+                <div class="w-6 h-6 rounded-full bg-gradient-to-br ${toolColor} flex items-center justify-center">
+                    ${toolIcon}
+                </div>
+                <span class="font-medium">${toolName}</span>
+            `;
+        }
+        // Update Phase Badges
+        function updatePhaseBadges() {
+            if (gameState.phase === "manual") {
+                elements.manualPhaseBadge.textContent = "Phase 1";
+                elements.manualPhaseBadge.className = "bg-blue-900 text-blue-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider glow-box-secondary";
+                elements.botPhaseBadge.textContent = "Phase 2";
+                elements.botPhaseBadge.className = "bg-purple-900 text-purple-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider glow-box-accent";
+            } else {
+                elements.manualPhaseBadge.textContent = "Phase 2";
+                elements.manualPhaseBadge.className = "bg-purple-900 text-purple-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider glow-box-accent";
+                elements.botPhaseBadge.textContent = "Phase 1";
+                elements.botPhaseBadge.className = "bg-blue-900 text-blue-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider glow-box-secondary";
+            }
+        }
+        // Setup Event Listeners
+        function setupEventListeners() {
+            // Keyboard Controls
+            document.addEventListener('keydown', (e) => {
+                if (gameState.phase !== "manual" || gameState.isPaused) return;
+                const currentLevel = gameState.levels[gameState.currentLevel - 1];
+                const gridSize = Math.sqrt(currentLevel.size);
+                switch (e.key.toLowerCase()) {
+                    case 'w':
+                        if (gameState.playerPosition - gridSize >= 0) {
+                            gameState.playerPosition -= gridSize;
+                            generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                        }
+                        break;
+                    case 'a':
+                        if (gameState.playerPosition % gridSize !== 0) {
+                            gameState.playerPosition--;
+                            generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                        }
+                        break;
+                    case 's':
+                        if (gameState.playerPosition + gridSize < currentLevel.size) {
+                            gameState.playerPosition += gridSize;
+                            generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                        }
+                        break;
+                    case 'd':
+                        if (gameState.playerPosition % gridSize !== gridSize - 1) {
+                            gameState.playerPosition++;
+                            generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                        }
+                        break;
+                    case 'e':
+                        interactWithTile();
+                        break;
+                    case 'q':
+                        switchTool();
+                        break;
+                }
+            });
+            // Code Block Drag and Drop
+            elements.codeBlocks.querySelectorAll('.code-block').forEach(block => {
+                block.addEventListener('dragstart', (e) => {
+                    e.dataTransfer.setData('text/plain', block.textContent);
+                    e.dataTransfer.setData('action', block.dataset.action);
+                    block.style.opacity = '0.4';
+                });
+                block.addEventListener('dragend', () => {
+                    block.style.opacity = '1';
+                });
+            });
+            elements.codeArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                elements.codeArea.classList.add('border-accent');
+                elements.codeArea.classList.remove('border-gray-700');
+            });
+            elements.codeArea.addEventListener('dragleave', () => {
+                elements.codeArea.classList.remove('border-accent');
+                elements.codeArea.classList.add('border-gray-700');
+            });
+            elements.codeArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                elements.codeArea.classList.remove('border-accent');
+                elements.codeArea.classList.add('border-gray-700');
+                const action = e.dataTransfer.getData('action');
+                const text = e.dataTransfer.getData('text/plain');
+                // Remove the placeholder if it exists
+                if (elements.codeArea.querySelector('.text-gray-600')) {
+                    elements.codeArea.innerHTML = '';
+                }
+                const newBlock = document.createElement('div');
+                newBlock.className = 'code-block';
+                newBlock.textContent = text;
+                newBlock.dataset.action = action;
+                newBlock.draggable = true;
+                newBlock.addEventListener('dragstart', (dragEvent) => {
+                    dragEvent.dataTransfer.setData('text/plain', newBlock.textContent);
+                    dragEvent.dataTransfer.setData('action', newBlock.dataset.action);
+                    newBlock.style.opacity = '0.4';
+                });
+                newBlock.addEventListener('dragend', () => {
+                    newBlock.style.opacity = '1';
+                });
+                elements.codeArea.appendChild(newBlock);
+            });
+            // Run Bot Button
+            elements.runBotBtn.addEventListener('click', () => {
+                if (gameState.phase !== "bot") return;
+                const commands = Array.from(elements.codeArea.querySelectorAll('.code-block')).map(block => block.dataset.action);
+                executeBotCommands(commands);
+            });
+            // Reset Bot Button
+            elements.resetBotBtn.addEventListener('click', () => {
+                elements.codeArea.innerHTML = `
+                    <div class="text-gray-600 text-sm flex items-center justify-center h-full">
+                        <i class="fas fa-arrow-up mr-2"></i>
+                        Drag code blocks here
+                    </div>
+                `;
+            });
+            // Pause Button
+            elements.pauseBtn.addEventListener('click', () => {
+                gameState.isPaused = true;
+                elements.pauseModal.classList.remove('hidden');
+                setTimeout(() => {
+                    elements.pauseModal.classList.add('active');
+                }, 10);
+            });
+            // Resume Button
+            elements.resumeBtn.addEventListener('click', () => {
+                gameState.isPaused = false;
+                elements.pauseModal.classList.remove('active');
+                setTimeout(() => {
+                    elements.pauseModal.classList.add('hidden');
+                }, 300);
+            });
+            // Restart Button
+            elements.restartBtn.addEventListener('click', () => {
+                elements.pauseModal.classList.remove('active');
+                setTimeout(() => {
+                    elements.pauseModal.classList.add('hidden');
+                }, 300);
+                setTimeout(() => {
+                    loadLevel(gameState.currentLevel);
+                }, 350);
+            });
+            // Menu Button
+            elements.menuBtn.addEventListener('click', () => {
+                // In a full game, this would return to main menu
+                alert("Returning to main menu...");
+            });
+            // Quit Button
+            elements.quitBtn.addEventListener('click', () => {
+                if (confirm("Are you sure you want to quit?")) {
+                    window.close();
+                }
+            });
+            // Next Level Button
+            elements.nextLevelBtn.addEventListener('click', () => {
+                elements.completeModal.classList.remove('active');
+                setTimeout(() => {
+                    elements.completeModal.classList.add('hidden');
+                }, 300);
+                gameState.currentLevel++;
+                if (gameState.currentLevel > gameState.levels.length) {
+                    gameState.currentLevel = 1;
+                }
+                setTimeout(() => {
+                    loadLevel(gameState.currentLevel);
+                }, 350);
+            });
+            // Retry Button
+            elements.retryBtn.addEventListener('click', () => {
+                elements.completeModal.classList.remove('active');
+                setTimeout(() => {
+                    elements.completeModal.classList.add('hidden');
+                }, 300);
+                setTimeout(() => {
+                    loadLevel(gameState.currentLevel);
+                }, 350);
+            });
+            // Level Select Button
+            elements.levelSelectBtn.addEventListener('click', () => {
+                // In a full game, this would show level selection
+                alert("Showing level selection...");
+            });
+            // Hint Button
+            elements.hintBtn.addEventListener('click', () => {
+                const currentLevel = gameState.levels[gameState.currentLevel - 1];
+                elements.hintText.textContent = currentLevel.hint;
+                elements.hintModal.classList.remove('hidden');
+                setTimeout(() => {
+                    elements.hintModal.classList.add('active');
+                }, 10);
+            });
+            // Close Hint Button
+            elements.closeHintBtn.addEventListener('click', () => {
+                elements.hintModal.classList.remove('active');
+                setTimeout(() => {
+                    elements.hintModal.classList.add('hidden');
+                }, 300);
+            });
+            // Sound Button
+            elements.soundBtn.addEventListener('click', () => {
+                gameState.soundEnabled = !gameState.soundEnabled;
+                elements.soundBtn.innerHTML = gameState.soundEnabled ?
+                    '<i class="fas fa-volume-up"></i>' :
+                    '<i class="fas fa-volume-mute"></i>';
+                // In a full game, this would toggle sound effects
+            });
+            // Fullscreen Button
+            elements.fullscreenBtn.addEventListener('click', () => {
+                if (!document.fullscreenElement) {
+                    document.documentElement.requestFullscreen();
+                } else {
+                    if (document.exitFullscreen) {
+                        document.exitFullscreen();
+                    }
+                }
+            });
+        }
+        // Interact with Tile
+        function interactWithTile() {
+            const currentLevel = gameState.levels[gameState.currentLevel - 1];
+            const tile = currentLevel.tiles[gameState.playerPosition];
+            if (tile.obstacle) return;
+            switch (gameState.currentTool) {
+                case "seeds":
+                    if (tile.state === "dry" || tile.state === "wet") {
+                        tile.state = "planted";
+                        gameState.manualScore += 10;
+                        elements.manualScore.textContent = gameState.manualScore;
+                        generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                    }
+                    break;
+                case "water":
+                    if (tile.state === "dry") {
+                        tile.state = "wet";
+                        gameState.manualScore += 5;
+                        elements.manualScore.textContent = gameState.manualScore;
+                        generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                    } else if (tile.state === "planted") {
+                        // Plant grows faster when watered
+                        setTimeout(() => {
+                            tile.state = "grown";
+                            generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                        }, 1000);
+                    }
+                    break;
+                case "harvest":
+                    if (tile.state === "grown") {
+                        tile.state = "dry";
+                        gameState.manualScore += 20;
+                        elements.manualScore.textContent = gameState.manualScore;
+                        generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                    } else if (tile.state === "planted") {
+                        tile.state = "withered";
+                        gameState.manualScore -= 10;
+                        elements.manualScore.textContent = gameState.manualScore;
+                        generateFarmGrid(elements.manualFarm, currentLevel.tiles, true);
+                    }
+                    break;
+            }
+        }
+        // Switch Tool
+        function switchTool() {
+            switch (gameState.currentTool) {
+                case "seeds":
+                    gameState.currentTool = "water";
+                    break;
+                case "water":
+                    gameState.currentTool = "harvest";
+                    break;
+                case "harvest":
+                    gameState.currentTool = "seeds";
+                    break;
+            }
+            updateUI();
+        }
+        // Execute Bot Commands
+        function executeBotCommands(commands) {
+            if (commands.length === 0) return;
+            const currentLevel = gameState.levels[gameState.currentLevel - 1];
+            let commandIndex = 0;
+            const executeNextCommand = () => {
+                if (commandIndex >= commands.length || gameState.timeLeft <= 0) {
+                    return;
+                }
+                const command = commands[commandIndex];
+                const tile = currentLevel.tiles[gameState.botPosition];
+                switch (command) {
+                    case "move-right":
+                        if (gameState.botPosition % Math.sqrt(currentLevel.size) !== Math.sqrt(currentLevel.size) - 1) {
+                            gameState.botPosition++;
+                        }
+                        break;
+                    case "move-left":
+                        if (gameState.botPosition % Math.sqrt(currentLevel.size) !== 0) {
+                            gameState.botPosition--;
+                        }
+                        break;
+                    case "move-up":
+                        if (gameState.botPosition - Math.sqrt(currentLevel.size) >= 0) {
+                            gameState.botPosition -= Math.sqrt(currentLevel.size);
+                        }
+                        break;
+                    case "move-down":
+                        if (gameState.botPosition + Math.sqrt(currentLevel.size) < currentLevel.size) {
+                            gameState.botPosition += Math.sqrt(currentLevel.size);
+                        }
+                        break;
+                    case "plant":
+                        if (!tile.obstacle && (tile.state === "dry" || tile.state === "wet")) {
+                            tile.state = "planted";
+                            gameState.botScore += 10;
+                            elements.botScore.textContent = gameState.botScore;
+                        }
+                        break;
+                    case "water":
+                        if (!tile.obstacle && tile.state === "dry") {
+                            tile.state = "wet";
+                            gameState.botScore += 5;
+                            elements.botScore.textContent = gameState.botScore;
+                        } else if (!tile.obstacle && tile.state === "planted") {
+                            // Plant grows faster when watered
+                            setTimeout(() => {
+                                tile.state = "grown";
+                                generateFarmGrid(elements.botFarm, currentLevel.tiles, false);
+                            }, 800);
+                        }
+                        break;
+                    case "harvest":
+                        if (!tile.obstacle && tile.state === "grown") {
+                            tile.state = "dry";
+                            gameState.botScore += 20;
+                            elements.botScore.textContent = gameState.botScore;
+                        } else if (!tile.obstacle && tile.state === "planted") {
+                            tile.state = "withered";
+                            gameState.botScore -= 10;
+                            elements.botScore.textContent = gameState.botScore;
+                        }
+                        break;
+                    case "wait":
+                        // Just delay the next command
+                        break;
+                }
+                generateFarmGrid(elements.botFarm, currentLevel.tiles, false);
+                commandIndex++;
+                if (commandIndex < commands.length) {
+                    setTimeout(executeNextCommand, 800);
+                }
+            };
+            executeNextCommand();
+        }
+        // Initialize the game when DOM is loaded
+        document.addEventListener('DOMContentLoaded', initGame);
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=LukasBe/robofarm-showdown" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

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

+# 🧠 **Game Concept Specification: RoboFarm Showdown**  ## 🎮 Title **RoboFarm Showdown**   **Tagline**: *“Harvest or Be Harvested!”*  ---  ## 🎯 Objective Introduce high school students to programming by engaging them in a split-screen farming simulation competition.   Players **start by manually performing tasks**, but as levels get harder, they must **program a robot** (agent) to do the same tasks **faster and smarter**.  ---  ## 🧩 Game Structure  ### 🕹️ **Split-Screen View** - **Left Panel**: Manual Gameplay (Player-controlled) - **Right Panel**: RoboAgent Programming (Bot-controlled)  Each level is played in **two phases**: 1. **Manual Phase**: Player performs farming tasks with keyboard/mouse. 2. **Bot Phase**: Player submits a program that controls a RoboAgent to complete the same tasks.  ---  ## 📈 Level Progression  | Level | Complexity | Manual Advantage | Programming Advantage | |-------|------------|------------------|------------------------| | 1-2   | Very Easy  | ✅                | ❌                    | | 3-4   | Easy       | ✅                | ⚠️ (emerging)          | | 5-6   | Moderate   | ⚠️               | ✅                    | | 7-8   | Hard       | ❌                | ✅✅                  | | 9-10  | Exponential | ❌❌              | ✅✅✅                |  ---  ## 🧑‍🌾 Game Elements  ### 🔷 Grid Layout - 10x10 grid (scalable with difficulty) - Tile types:   - **Empty Soil**   - **Planted Crop**   - **Ripe Crop**   - **Watered Soil**   - **Withered Crop**   - **Obstacle (rock/fence)**  ### 📦 Objects & Actions - **Crop Seeds** - **Water Bucket** - **Compost Bin** - **Basket (for harvested crops)**  ### 🎮 Manual Controls - Arrow keys/WASD = Move - E = Interact (plant, harvest, water) - Q = Pick up/drop tool - Space = Use tool - R = Refill water  ### 🤖 RoboAgent Programming - Programming is done in a block-based language (e.g., Blockly) or simple Python/JS interface. - Available commands:   - `move(direction)`   - `plant()`   - `harvest()`   - `water()`   - `pickup(tool)`   - `use()`   - `if`, `while`, `for`, `function()`  ---  ## 🏆 Scoring System  | Action           | Points  | |------------------|---------| | Plant crop       | +10     | | Water plant      | +5      | | Harvest crop     | +20     | | Withered crop    | -10     | | Incorrect action | -5      | | Unused time      | +0.1/sec|  - **Total score per phase** = Sum of actions + efficiency bonus - Final score for a level = **Manual score vs. RoboAgent score**  ---  ## 🧠 Educational Focus  ### 👨‍🏫 Programming Concepts Introduced - Sequences - Conditionals (`if`) - Loops (`while`, `for`) - Functions and modular code - Efficiency and refactoring  ### 🏁 Outcome Students realize that **code scales better than manual action** as complexity grows.   They develop an appreciation for **automation, logic, and optimization**.  ---  ## 🧪 Example Level  ### Level 1 – “Patch of Dirt” - 4 tiles, all require planting and watering. - Manual phase: takes ~10 seconds. - Bot phase: student writes:   ```python   move("right")   plant()   water()   move("right")   plant()   water()   ``` - Both phases roughly equal in score.  ---  ## 🚀 Advanced Features (Optional for MVP)  ### 🧬 Random Weather System - Rain = auto-watering - Drought = crops wither faster - Frost = slows movement  ### 🧱 Obstacles and Pests - Random tiles blocked by rocks or fences - Birds steal unharvested crops after time X  ### 🧠 Bot Arena (for final level) - Players pit their best bot against others in an automated farming arena with the same seed state. - Fastest, most efficient bot wins.  ---  ## 🖥️ Technical Stack Suggestions  ### Frontend - HTML/CSS/JavaScript (React preferred) - Phaser.js or Pixi.js for game rendering  ### Backend (if needed) - Node.js (or Python Flask) - WebSocket for live sync - MongoDB or Firebase for leaderboard  ### Programming Interface - **Blockly** for drag-n-drop beginners - **Python Lite** for more advanced learners - Sandbox security for student-submitted code  ---  ## 💡 Implementation Tips  - Offer “code hint” buttons for each level. - Let players record their manual runs and visualize bot-vs-man replay side-by-side. - Include a “simulate” mode before submitting bot code.
+As a game designer transform the entire experience into a game UI with easy intuitive operation and fun to play mechanics.
+Act as world class game UI/UX designer and make it a 1000 times better! award winning UI/UX Design.