Spaces:

kate-line
/

amogos

Running

App Files Files Community

kate-line commited on Apr 19, 2025

Commit

1ea6b2e

verified ·

1 Parent(s): 4f02795

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +681 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Amogos
-emoji: 🏆
-colorFrom: gray
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: amogos
+emoji: 🐳
+colorFrom: green
+colorTo: gray
 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,681 @@
-<!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, maximum-scale=1.0, user-scalable=no">
+    <title>Mini Among Us</title>
+    <style>
+        /* Reset and base styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            touch-action: manipulation;
+        }
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #1a1a2e;
+            color: white;
+            overflow: hidden;
+            height: 100vh;
+            width: 100vw;
+            position: relative;
+        }
+        /* Game container */
+        #game-container {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        /* Game map */
+        #game-map {
+            position: absolute;
+            width: 2000px;
+            height: 2000px;
+            background-color: #16213e;
+            transform-origin: 0 0;
+            background-image:
+                linear-gradient(#4cc9f033 1px, transparent 1px),
+                linear-gradient(90deg, #4cc9f033 1px, transparent 1px);
+            background-size: 40px 40px;
+        }
+        /* Rooms and walls */
+        .room {
+            position: absolute;
+            background-color: #0f3460;
+            border: 3px solid #4cc9f0;
+        }
+        .room-label {
+            position: absolute;
+            color: white;
+            font-size: 16px;
+            text-align: center;
+            width: 100%;
+            top: 10px;
+            pointer-events: none;
+        }
+        /* Player character */
+        .player {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: #f72585;
+            border-radius: 50%;
+            border: 3px solid white;
+            z-index: 10;
+            transition: transform 0.2s ease;
+        }
+        .player::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 15px;
+            background-color: white;
+            border-radius: 50%;
+            top: 8px;
+            left: 10px;
+            transform: rotate(10deg);
+        }
+        /* NPC characters */
+        .npc {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: #4cc9f0;
+            border-radius: 50%;
+            border: 3px solid white;
+            z-index: 9;
+        }
+        .npc::after {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 15px;
+            background-color: white;
+            border-radius: 50%;
+            top: 8px;
+            left: 10px;
+            transform: rotate(10deg);
+        }
+        /* Tasks */
+        .task {
+            position: absolute;
+            width: 30px;
+            height: 30px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+            cursor: pointer;
+            z-index: 8;
+            box-shadow: 0 0 10px rgba(248, 249, 250, 0.5);
+        }
+        /* Task popup */
+        #task-popup {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            max-width: 300px;
+            background-color: #0f3460;
+            border: 3px solid #4cc9f0;
+            border-radius: 10px;
+            padding: 20px;
+            z-index: 100;
+            display: none;
+            text-align: center;
+        }
+        #task-popup h3 {
+            margin-bottom: 15px;
+            color: #f72585;
+        }
+        #task-popup button {
+            background-color: #4cc9f0;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            margin-top: 15px;
+            font-size: 16px;
+            cursor: pointer;
+        }
+        /* Controls */
+        #controls {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            width: 120px;
+            height: 120px;
+            z-index: 20;
+        }
+        .control-btn {
+            position: absolute;
+            width: 40px;
+            height: 40px;
+            background-color: rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 20px;
+            color: white;
+            user-select: none;
+        }
+        #up-btn { top: 0; left: 40px; }
+        #left-btn { top: 40px; left: 0; }
+        #right-btn { top: 40px; right: 0; }
+        #down-btn { bottom: 0; left: 40px; }
+        /* Task list */
+        #task-list {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background-color: rgba(15, 52, 96, 0.8);
+            border: 2px solid #4cc9f0;
+            border-radius: 10px;
+            padding: 10px;
+            max-width: 150px;
+            z-index: 20;
+        }
+        #task-list h3 {
+            font-size: 14px;
+            margin-bottom: 5px;
+            color: #f72585;
+        }
+        .task-item {
+            font-size: 12px;
+            margin-bottom: 5px;
+            display: flex;
+            align-items: center;
+        }
+        .task-item.completed {
+            text-decoration: line-through;
+            opacity: 0.6;
+        }
+        .task-checkbox {
+            width: 12px;
+            height: 12px;
+            border: 1px solid white;
+            border-radius: 2px;
+            margin-right: 5px;
+            display: inline-block;
+        }
+        .task-item.completed .task-checkbox {
+            background-color: #4cc9f0;
+        }
+        /* Game status */
+        #game-status {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background-color: rgba(15, 52, 96, 0.8);
+            border: 2px solid #4cc9f0;
+            border-radius: 10px;
+            padding: 10px;
+            z-index: 20;
+        }
+        #game-status h3 {
+            font-size: 14px;
+            margin-bottom: 5px;
+            color: #f72585;
+        }
+        /* Win screen */
+        #win-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 200;
+            display: none;
+        }
+        #win-screen h2 {
+            font-size: 32px;
+            color: #f72585;
+            margin-bottom: 20px;
+        }
+        #win-screen button {
+            background-color: #4cc9f0;
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 5px;
+            font-size: 18px;
+            cursor: pointer;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="game-map">
+            <!-- Rooms will be added via JavaScript -->
+        </div>
+        <!-- Player character will be added via JavaScript -->
+        <!-- Controls -->
+        <div id="controls">
+            <div id="up-btn" class="control-btn">↑</div>
+            <div id="left-btn" class="control-btn">←</div>
+            <div id="right-btn" class="control-btn">→</div>
+            <div id="down-btn" class="control-btn">↓</div>
+        </div>
+        <!-- Task list -->
+        <div id="task-list">
+            <h3>Tasks</h3>
+            <div id="tasks-container">
+                <!-- Task items will be added via JavaScript -->
+            </div>
+        </div>
+        <!-- Game status -->
+        <div id="game-status">
+            <h3>Status</h3>
+            <div id="tasks-completed">Tasks: 0/3</div>
+        </div>
+        <!-- Task popup -->
+        <div id="task-popup">
+            <h3 id="task-title">Fix Wiring</h3>
+            <div id="task-description">Tap the button to complete the task</div>
+            <button id="complete-task-btn">Complete</button>
+        </div>
+        <!-- Win screen -->
+        <div id="win-screen">
+            <h2>All Tasks Completed!</h2>
+            <button id="restart-btn">Play Again</button>
+        </div>
+    </div>
+    <script>
+        // Game state
+        const gameState = {
+            player: {
+                x: 500,
+                y: 500,
+                speed: 5,
+                moving: false,
+                direction: null
+            },
+            npcs: [],
+            tasks: [],
+            completedTasks: 0,
+            totalTasks: 3,
+            currentTask: null,
+            mapScale: 1,
+            mapOffset: { x: 0, y: 0 }
+        };
+        // DOM elements
+        const gameMap = document.getElementById('game-map');
+        const controls = document.getElementById('controls');
+        const taskList = document.getElementById('task-list');
+        const tasksContainer = document.getElementById('tasks-container');
+        const gameStatus = document.getElementById('game-status');
+        const tasksCompleted = document.getElementById('tasks-completed');
+        const taskPopup = document.getElementById('task-popup');
+        const taskTitle = document.getElementById('task-title');
+        const taskDescription = document.getElementById('task-description');
+        const completeTaskBtn = document.getElementById('complete-task-btn');
+        const winScreen = document.getElementById('win-screen');
+        const restartBtn = document.getElementById('restart-btn');
+        // Control buttons
+        const upBtn = document.getElementById('up-btn');
+        const leftBtn = document.getElementById('left-btn');
+        const rightBtn = document.getElementById('right-btn');
+        const downBtn = document.getElementById('down-btn');
+        // Initialize the game
+        function initGame() {
+            createRooms();
+            createPlayer();
+            createNPCs(3);
+            createTasks();
+            setupControls();
+            updateMapView();
+            // Game loop
+            setInterval(gameLoop, 1000/60);
+        }
+        // Create rooms on the map
+        function createRooms() {
+            const rooms = [
+                { x: 200, y: 200, width: 400, height: 300, name: "Admin" },
+                { x: 700, y: 200, width: 400, height: 300, name: "Cafeteria" },
+                { x: 200, y: 600, width: 400, height: 300, name: "Storage" },
+                { x: 700, y: 600, width: 400, height: 300, name: "MedBay" },
+                { x: 1200, y: 400, width: 300, height: 300, name: "Reactor" }
+            ];
+            rooms.forEach(room => {
+                const roomElement = document.createElement('div');
+                roomElement.className = 'room';
+                roomElement.style.left = `${room.x}px`;
+                roomElement.style.top = `${room.y}px`;
+                roomElement.style.width = `${room.width}px`;
+                roomElement.style.height = `${room.height}px`;
+                const label = document.createElement('div');
+                label.className = 'room-label';
+                label.textContent = room.name;
+                roomElement.appendChild(label);
+                gameMap.appendChild(roomElement);
+            });
+        }
+        // Create player character
+        function createPlayer() {
+            const player = document.createElement('div');
+            player.className = 'player';
+            player.id = 'player';
+            player.style.left = `${gameState.player.x}px`;
+            player.style.top = `${gameState.player.y}px`;
+            gameMap.appendChild(player);
+        }
+        // Create NPC characters
+        function createNPCs(count) {
+            for (let i = 0; i < count; i++) {
+                const npc = {
+                    x: Math.random() * 1800 + 100,
+                    y: Math.random() * 1800 + 100,
+                    speed: 1 + Math.random() * 2,
+                    direction: Math.random() * Math.PI * 2,
+                    changeDirectionTimer: 0
+                };
+                gameState.npcs.push(npc);
+                const npcElement = document.createElement('div');
+                npcElement.className = 'npc';
+                npcElement.style.left = `${npc.x}px`;
+                npcElement.style.top = `${npc.y}px`;
+                npcElement.id = `npc-${i}`;
+                gameMap.appendChild(npcElement);
+            }
+        }
+        // Create tasks
+        function createTasks() {
+            const taskTypes = [
+                { name: "Fix Wiring", description: "Connect the wires correctly", icon: "🔌" },
+                { name: "Download Data", description: "Wait for download to complete", icon: "📥" },
+                { name: "Align Engine", description: "Adjust the engine output", icon: "⚙️" },
+                { name: "Clear Asteroids", description: "Shoot the asteroids", icon: "☄️" },
+                { name: "Inspect Sample", description: "Analyze the sample", icon: "🧪" }
+            ];
+            // Create 3 random tasks
+            for (let i = 0; i < gameState.totalTasks; i++) {
+                const randomType = taskTypes[Math.floor(Math.random() * taskTypes.length)];
+                const task = {
+                    id: i,
+                    name: randomType.name,
+                    description: randomType.description,
+                    icon: randomType.icon,
+                    x: Math.random() * 1600 + 200,
+                    y: Math.random() * 1600 + 200,
+                    completed: false
+                };
+                gameState.tasks.push(task);
+                // Add to task list
+                const taskItem = document.createElement('div');
+                taskItem.className = 'task-item';
+                taskItem.id = `task-item-${i}`;
+                taskItem.innerHTML = `
+                    <span class="task-checkbox"></span>
+                    <span>${task.name}</span>
+                `;
+                tasksContainer.appendChild(taskItem);
+                // Create task element on map
+                const taskElement = document.createElement('div');
+                taskElement.className = 'task';
+                taskElement.id = `task-${i}`;
+                taskElement.style.left = `${task.x}px`;
+                taskElement.style.top = `${task.y}px`;
+                taskElement.textContent = task.icon;
+                taskElement.addEventListener('click', () => startTask(i));
+                gameMap.appendChild(taskElement);
+            }
+        }
+        // Setup controls
+        function setupControls() {
+            // Touch controls
+            upBtn.addEventListener('touchstart', () => { gameState.player.moving = true; gameState.player.direction = 'up'; });
+            leftBtn.addEventListener('touchstart', () => { gameState.player.moving = true; gameState.player.direction = 'left'; });
+            rightBtn.addEventListener('touchstart', () => { gameState.player.moving = true; gameState.player.direction = 'right'; });
+            downBtn.addEventListener('touchstart', () => { gameState.player.moving = true; gameState.player.direction = 'down'; });
+            upBtn.addEventListener('touchend', stopMoving);
+            leftBtn.addEventListener('touchend', stopMoving);
+            rightBtn.addEventListener('touchend', stopMoving);
+            downBtn.addEventListener('touchend', stopMoving);
+            // Mouse controls for testing
+            upBtn.addEventListener('mousedown', () => { gameState.player.moving = true; gameState.player.direction = 'up'; });
+            leftBtn.addEventListener('mousedown', () => { gameState.player.moving = true; gameState.player.direction = 'left'; });
+            rightBtn.addEventListener('mousedown', () => { gameState.player.moving = true; gameState.player.direction = 'right'; });
+            downBtn.addEventListener('mousedown', () => { gameState.player.moving = true; gameState.player.direction = 'down'; });
+            upBtn.addEventListener('mouseup', stopMoving);
+            leftBtn.addEventListener('mouseup', stopMoving);
+            rightBtn.addEventListener('mouseup', stopMoving);
+            downBtn.addEventListener('mouseup', stopMoving);
+            // Complete task button
+            completeTaskBtn.addEventListener('click', completeTask);
+            // Restart button
+            restartBtn.addEventListener('click', restartGame);
+        }
+        function stopMoving() {
+            gameState.player.moving = false;
+        }
+        // Game loop
+        function gameLoop() {
+            updatePlayer();
+            updateNPCs();
+            checkTaskCompletion();
+        }
+        // Update player position
+        function updatePlayer() {
+            const player = document.getElementById('player');
+            if (gameState.player.moving) {
+                switch (gameState.player.direction) {
+                    case 'up':
+                        gameState.player.y -= gameState.player.speed;
+                        break;
+                    case 'down':
+                        gameState.player.y += gameState.player.speed;
+                        break;
+                    case 'left':
+                        gameState.player.x -= gameState.player.speed;
+                        break;
+                    case 'right':
+                        gameState.player.x += gameState.player.speed;
+                        break;
+                }
+                // Boundary checking
+                gameState.player.x = Math.max(0, Math.min(gameState.player.x, 2000 - 40));
+                gameState.player.y = Math.max(0, Math.min(gameState.player.y, 2000 - 40));
+                player.style.left = `${gameState.player.x}px`;
+                player.style.top = `${gameState.player.y}px`;
+                updateMapView();
+            }
+        }
+        // Update NPC positions
+        function updateNPCs() {
+            gameState.npcs.forEach((npc, index) => {
+                // Change direction randomly
+                npc.changeDirectionTimer--;
+                if (npc.changeDirectionTimer <= 0) {
+                    npc.direction = Math.random() * Math.PI * 2;
+                    npc.changeDirectionTimer = 30 + Math.random() * 100;
+                }
+                // Move in current direction
+                npc.x += Math.cos(npc.direction) * npc.speed;
+                npc.y += Math.sin(npc.direction) * npc.speed;
+                // Boundary checking
+                npc.x = Math.max(0, Math.min(npc.x, 2000 - 40));
+                npc.y = Math.max(0, Math.min(npc.y, 2000 - 40));
+                // Update DOM
+                const npcElement = document.getElementById(`npc-${index}`);
+                npcElement.style.left = `${npc.x}px`;
+                npcElement.style.top = `${npc.y}px`;
+            });
+        }
+        // Update map view to follow player
+        function updateMapView() {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+            // Calculate scale to fit map in viewport
+            const scaleX = viewportWidth / 2000;
+            const scaleY = viewportHeight / 2000;
+            gameState.mapScale = Math.min(scaleX, scaleY) * 0.8; // Slightly zoomed in
+            // Center on player
+            gameState.mapOffset.x = -gameState.player.x * gameState.mapScale + viewportWidth / 2;
+            gameState.mapOffset.y = -gameState.player.y * gameState.mapScale + viewportHeight / 2;
+            // Apply transform
+            gameMap.style.transform = `translate(${gameState.mapOffset.x}px, ${gameState.mapOffset.y}px) scale(${gameState.mapScale})`;
+        }
+        // Start a task
+        function startTask(taskId) {
+            const task = gameState.tasks[taskId];
+            if (task && !task.completed) {
+                gameState.currentTask = taskId;
+                taskTitle.textContent = task.name;
+                taskDescription.textContent = task.description;
+                taskPopup.style.display = 'block';
+            }
+        }
+        // Complete the current task
+        function completeTask() {
+            if (gameState.currentTask !== null) {
+                const task = gameState.tasks[gameState.currentTask];
+                if (task && !task.completed) {
+                    task.completed = true;
+                    gameState.completedTasks++;
+                    // Update task list
+                    const taskItem = document.getElementById(`task-item-${gameState.currentTask}`);
+                    taskItem.classList.add('completed');
+                    // Remove task from map
+                    const taskElement = document.getElementById(`task-${gameState.currentTask}`);
+                    if (taskElement) taskElement.remove();
+                    // Update status
+                    tasksCompleted.textContent = `Tasks: ${gameState.completedTasks}/${gameState.totalTasks}`;
+                    // Check if all tasks are completed
+                    if (gameState.completedTasks >= gameState.totalTasks) {
+                        winScreen.style.display = 'flex';
+                    }
+                }
+                taskPopup.style.display = 'none';
+                gameState.currentTask = null;
+            }
+        }
+        // Check if player is near a task
+        function checkTaskCompletion() {
+            // This is handled by the click event on task elements
+        }
+        // Restart the game
+        function restartGame() {
+            // Clear existing elements
+            gameMap.innerHTML = '';
+            tasksContainer.innerHTML = '';
+            // Reset game state
+            gameState.player.x = 500;
+            gameState.player.y = 500;
+            gameState.player.moving = false;
+            gameState.player.direction = null;
+            gameState.npcs = [];
+            gameState.tasks = [];
+            gameState.completedTasks = 0;
+            gameState.currentTask = null;
+            // Hide win screen
+            winScreen.style.display = 'none';
+            // Reset status
+            tasksCompleted.textContent = `Tasks: 0/${gameState.totalTasks}`;
+            // Reinitialize game
+            initGame();
+        }
+        // Initialize the game when the page loads
+        window.addEventListener('load', initGame);
+        // Handle window resize
+        window.addEventListener('resize', updateMapView);
+    </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=kate-line/amogos" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Create a simple HTML/CSS/JavaScript game inspired by Among Us that works in a mobile browser in portrait mode. The game should be fully offline (no server or internet connection required) and include the following features: 1. A simple map where the player can move around. 2. A player character controlled by on-screen buttons (up/down/left/right) or touch controls. 3. NPC characters that move randomly on their own. 4. Basic tasks the player can complete (e.g., tapping a button to fix something). 5. No need for kill or vote mechanics since the game is offline. 6. A clean, mobile-friendly UI that works on touch screens. 7. Do not use any external libraries — only vanilla HTML, CSS, and JavaScript. If possible, keep the entire code in one file and include comments to make it easy to understand.