Spaces:

awacke1
/

GPTCanvasandClaudeArtifactsGame

Running

App Files Files Community

awacke1 commited on Oct 7, 2024

Commit

559ea42

verified ·

1 Parent(s): 763029c

Update index.html

Browse files

Files changed (1) hide show

index.html +296 -19

index.html CHANGED Viewed

@@ -1,19 +1,296 @@
-<!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>AI Development and Game Programming Resource Management Game</title>
+    <style>
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: #f0f0f0;
+            padding: 20px;
+            color: #333;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+        .resource, .actions, .events {
+            margin-bottom: 20px;
+            padding: 15px;
+            background-color: #fff;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            flex-basis: calc(33% - 20px);
+        }
+        h1, h2 {
+            color: #2c3e50;
+        }
+        button {
+            margin: 5px;
+            padding: 10px 15px;
+            font-size: 16px;
+            background-color: #3498db;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        button:hover {
+            background-color: #2980b9;
+        }
+        canvas {
+            border: 1px solid #ccc;
+            margin-top: 20px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        #resource-list {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
+        .resource-item {
+            background-color: #ecf0f1;
+            padding: 10px;
+            border-radius: 5px;
+            text-align: center;
+            flex-grow: 1;
+        }
+        #event-result {
+            font-style: italic;
+            color: #e74c3c;
+        }
+        #game-log {
+            max-height: 150px;
+            overflow-y: auto;
+            background-color: #ecf0f1;
+            padding: 10px;
+            border-radius: 5px;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <h1>AI Development and Game Programming Resource Management Game</h1>
+    <div class="container">
+        <div class="resource" id="resources">
+            <h2>Current Resources</h2>
+            <div id="resource-list"></div>
+        </div>
+        <div class="actions">
+            <h2>Actions</h2>
+            <button onclick="performAction('Cook Chicken')">Cook Chicken</button>
+            <button onclick="performAction('Make Salad')">Make Salad</button>
+            <button onclick="performAction('Drink Water')">Drink Water</button>
+            <button onclick="performAction('Monster Zero')">Drink Monster Zero</button>
+            <button onclick="performAction('Code')">Code</button>
+            <button onclick="performAction('Debug')">Debug</button>
+        </div>
+        <div class="events">
+            <h2>Random Events</h2>
+            <button onclick="triggerRandomEvent()">Wait for Random Event</button>
+            <p id="event-result"></p>
+        </div>
+    </div>
+    <canvas id="gameCanvas" width="800" height="400"></canvas>
+    <div id="game-log"></div>
+    <script>
+        let gameState = {
+            "Monster Zero": 1,
+            "Water": 10,
+            "Chicken": 3,
+            "Salad": 5,
+            "Air Fryer": 1,
+            "Microwave": 1,
+            "Culligan Machine": 1,
+            "Energy": 100,
+            "Code Quality": 0,
+            "Bugs": 0
+        };
+        const RESOURCE_COSTS = {
+            "Cook Chicken": {"Chicken": 1, "Energy": 10},
+            "Make Salad": {"Salad": 1, "Energy": 5},
+            "Drink Water": {"Water": 1},
+            "Monster Zero": {"Monster Zero": 1},
+            "Code": {"Energy": 15},
+            "Debug": {"Energy": 20}
+        };
+        const RESOURCE_GAINS = {
+            "Cook Chicken": {"Energy": 20},
+            "Make Salad": {"Energy": 15},
+            "Drink Water": {"Energy": 5},
+            "Monster Zero": {"Energy": 30},
+            "Code": {"Code Quality": 10, "Bugs": 5},
+            "Debug": {"Code Quality": 5, "Bugs": -10}
+        };
+        function updateResources() {
+            const resourceList = document.getElementById('resource-list');
+            resourceList.innerHTML = '';
+            for (let resource in gameState) {
+                const resourceItem = document.createElement('div');
+                resourceItem.className = 'resource-item';
+                resourceItem.textContent = `${resource}: ${gameState[resource]}`;
+                resourceList.appendChild(resourceItem);
+            }
+        }
+        function performAction(action) {
+            if (RESOURCE_COSTS.hasOwnProperty(action)) {
+                for (let resource in RESOURCE_COSTS[action]) {
+                    if (gameState[resource] < RESOURCE_COSTS[action][resource]) {
+                        logEvent(`Not enough ${resource} to perform ${action}`);
+                        return;
+                    }
+                }
+                for (let resource in RESOURCE_COSTS[action]) {
+                    gameState[resource] -= RESOURCE_COSTS[action][resource];
+                }
+                for (let resource in RESOURCE_GAINS[action]) {
+                    gameState[resource] += RESOURCE_GAINS[action][resource];
+                }
+                logEvent(`Performed action: ${action}`);
+                updateResources();
+                drawScene();
+                checkGameOver();
+            }
+        }
+        function triggerRandomEvent() {
+            const events = [
+                "Found Water", "Lost Chicken", "Energy Boost", "Microwave Malfunction",
+                "Coding Inspiration", "Bug Infestation", "Coffee Break", "Power Outage"
+            ];
+            const event = events[Math.floor(Math.random() * events.length)];
+            document.getElementById('event-result').textContent = `Event: ${event}`;
+            switch (event) {
+                case "Found Water":
+                    gameState["Water"] += 3;
+                    break;
+                case "Lost Chicken":
+                    if (gameState["Chicken"] > 0) gameState["Chicken"] -= 1;
+                    break;
+                case "Energy Boost":
+                    gameState["Energy"] += 20;
+                    break;
+                case "Microwave Malfunction":
+                    if (gameState["Microwave"] > 0) gameState["Microwave"] -= 1;
+                    break;
+                case "Coding Inspiration":
+                    gameState["Code Quality"] += 15;
+                    break;
+                case "Bug Infestation":
+                    gameState["Bugs"] += 20;
+                    break;
+                case "Coffee Break":
+                    gameState["Energy"] += 10;
+                    gameState["Water"] -= 1;
+                    break;
+                case "Power Outage":
+                    gameState["Energy"] -= 10;
+                    gameState["Code Quality"] -= 5;
+                    break;
+            }
+            logEvent(`Random event occurred: ${event}`);
+            updateResources();
+            drawScene();
+            checkGameOver();
+        }
+        function checkGameOver() {
+            if (gameState["Energy"] <= 0) {
+                logEvent("Game Over! You ran out of energy.");
+            } else if (gameState["Chicken"] === 0 && gameState["Salad"] === 0 && gameState["Water"] === 0) {
+                logEvent("Game Over! You ran out of all food resources.");
+            } else if (gameState["Bugs"] >= 100) {
+                logEvent("Game Over! Your code has too many bugs.");
+            }
+        }
+        function drawScene() {
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            const BAR_WIDTH = 40;
+            const BAR_SPACING = 60;
+            const MAX_BAR_HEIGHT = 300;
+            let x = 50;
+            for (let resource in gameState) {
+                const value = gameState[resource];
+                const normalizedHeight = (value / 100) * MAX_BAR_HEIGHT;
+                // Draw 3D-like bar
+                ctx.fillStyle = 'rgba(100, 100, 250, 0.7)';
+                ctx.beginPath();
+                ctx.moveTo(x, canvas.height - normalizedHeight);
+                ctx.lineTo(x + BAR_WIDTH, canvas.height - normalizedHeight);
+                ctx.lineTo(x + BAR_WIDTH, canvas.height);
+                ctx.lineTo(x, canvas.height);
+                ctx.closePath();
+                ctx.fill();
+                // Draw top of the bar
+                ctx.fillStyle = 'rgba(150, 150, 255, 0.9)';
+                ctx.beginPath();
+                ctx.moveTo(x, canvas.height - normalizedHeight);
+                ctx.lineTo(x + BAR_WIDTH, canvas.height - normalizedHeight);
+                ctx.lineTo(x + BAR_WIDTH - 5, canvas.height - normalizedHeight - 5);
+                ctx.lineTo(x - 5, canvas.height - normalizedHeight - 5);
+                ctx.closePath();
+                ctx.fill();
+                // Draw side of the bar
+                ctx.fillStyle = 'rgba(80, 80, 200, 0.8)';
+                ctx.beginPath();
+                ctx.moveTo(x + BAR_WIDTH, canvas.height - normalizedHeight);
+                ctx.lineTo(x + BAR_WIDTH, canvas.height);
+                ctx.lineTo(x + BAR_WIDTH - 5, canvas.height - 5);
+                ctx.lineTo(x + BAR_WIDTH - 5, canvas.height - normalizedHeight - 5);
+                ctx.closePath();
+                ctx.fill();
+                // Draw outline
+                ctx.strokeStyle = 'black';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(x, canvas.height - normalizedHeight, BAR_WIDTH, normalizedHeight);
+                // Draw label
+                ctx.fillStyle = 'black';
+                ctx.font = '12px Arial';
+                ctx.textAlign = 'center';
+                ctx.fillText(resource, x + BAR_WIDTH / 2, canvas.height - normalizedHeight - 10);
+                ctx.fillText(value, x + BAR_WIDTH / 2, canvas.height - normalizedHeight / 2);
+                x += BAR_SPACING;
+            }
+        }
+        function logEvent(message) {
+            const gameLog = document.getElementById('game-log');
+            const logEntry = document.createElement('p');
+            logEntry.textContent = message;
+            gameLog.insertBefore(logEntry, gameLog.firstChild);
+            if (gameLog.children.length > 5) {
+                gameLog.removeChild(gameLog.lastChild);
+            }
+        }
+        updateResources();
+        drawScene();
+    </script>
+</body>
+</html>