Spaces:

flopro
/

sf-b2d

Running

App Files Files Community

flopro commited on Nov 16, 2023

Commit

9e3a33b

1 Parent(s): 0f8795b

Add 3 files

Browse files

Files changed (3) hide show

app.js +76 -0
index.html +1 -19
style.css +49 -17

app.js ADDED Viewed

	@@ -0,0 +1,76 @@

+// Use AlpineJS to create the game component
+<div class="game" x-data="{ nomination: '' }" x-init="selectEnemy()">
+ <div class="prose">
+    <p>You are a ninja and have to fight enemies to get to a data facility to clone a creature so every species is not extinct anymore. Good luck!</p>
+ </div>
+ <div class="game-canvas" x-bind:style="getCanvasStyle()" width="800" height="600">
+    <canvas id="game-canvas"></canvas>
+ </div>
+ <div class="options">
+    <button class="btn-primary" x-on:click="addEnemy()">Add Enemy</button>
+    <button class="btn-primary" x-on:click="updateEnemy()">Update Enemy</button>
+    <button class="btn-primary" x-on:click="removeEnemy()">Remove Enemy</button>
+    <button class="btn-primary" x-on:click="selectEnemy()">Select Enemy</button>
+    <button class="btn-primary" x-on:click="cloneCreature()">Clone Creature</button>
+ </div>
+</div>
+// Initialize the game canvas with Three.js
+const canvas = document.getElementById("game-canvas");
+const renderer = new THREE.WebGLRenderer({ canvas });
+// Set up the camera
+const camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
+camera.position.z = 1000;
+// Set up the controls
+const controls = new THREE.OrbitControls(camera, canvas);
+controls.target.set(0, 0, 0);
+controls.update();
+// Set up the scene
+const scene = new THREE.Scene();
+// Set up the render function
+const render = function () {
+ requestAnimationFrame(render);
+ renderer.render(scene, camera);
+};
+requestAnimationFrame(render);
+// Set up the enemies
+const enemies = [];
+// Add an enemy
+function addEnemy() {
+ enemies.push(new THREE.Mesh(new THREE.SphereGeometry(10, 10, 32), new THREE.MeshBasicMaterial()));
+ enemies[enemies.length - 1].position.set(0, 0, 0);
+ enemies[enemies.length - 1].Friendly = false;
+ scene.add(enemies[enemies.length - 1]);
+}
+// Update an enemy's position
+function updateEnemy() {
+ const enemySelection = enemies[selectEnemy()];
+ enemySelection.position.set(Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500);
+}
+// Remove an enemy
+function removeEnemy() {
+ const enemySelection = enemies[selectEnemy()];
+ scene.remove(enemySelection);
+ enemies.splice(enemies.indexOf(enemySelection), 1);
+}
+// Select an enemy
+function selectEnemy() {
+ x-on:change="enemies[selectEnemy()] !== '' ? enemySelection = enemies[selectEnemy()] : enemySelection = null"
+ return enemySelection;
+}
+// Clone a creature
+function cloneCreature() {
+ if (selectEnemy() !== null) {
+    scene.add(enemies[selectEnemy()]);
+ }
+}

index.html CHANGED Viewed

@@ -1,19 +1 @@
-<!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>


1	+ <html><head><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Ninja Clone</title></head><body><h1>Ninja Clone</h1><div class="prose"><p>You are a ninja and have to fight enemies to get to a data facility to clone a creature so every species is not extinct anymore. Good luck!</p></div><div class="game"><canvas id="game-canvas" width="800" height="600"></canvas></div><script type="module" src="app.js"></script></body></html>

style.css CHANGED Viewed

@@ -1,28 +1,60 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
 h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css');
+@import url('https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio');
 body {
+ font-family: Arial, sans-serif;
+ height: 100vh;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: #f5f5f5;
+ color: #333;
 }
 h1 {
+ font-size: 48px;
+ text-align: center;
+ font-weight: bold;
+ margin-bottom: 20px;
 }
+.game {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ margin: 20px;
+ width: 400px;
+ height: 400px;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+ background-color: #fff;
 }
+.game-canvas {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 400px;
+ height: 400px;
 }
+button {
+ padding: 10px 20px;
+ font-size: 16px;
+ cursor: pointer;
+ border: none;
+ background-color: #4CAF50;
+ color: #fff;
+ text-align: center;
+ outline: none;
+ transition: .4s ease-in-out;
 }
+button:hover {
+ background-color: #45a049;
+}