Spaces:

broadfield-dev
/

test_js

Running

App Files Files Community

broadfield-dev commited on Feb 12

Commit

7fd47be

verified ·

1 Parent(s): 3268778

Update index.html

Browse files

Files changed (1) hide show

index.html +163 -19

index.html CHANGED Viewed

@@ -1,19 +1,163 @@
-<!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>Rubik's Cube</title>
+    <style>
+        body { margin: 0; overflow: hidden; }
+        canvas { width: 100%; height: 100%; }
+    </style>
+</head>
+<body>
+    <div id="controls">
+        <button onclick="rotate('U')">U</button>
+        <button onclick="rotate('U\'')">U'</button>
+        <button onclick="rotate('D')">D</button>
+        <button onclick="rotate('D\'')">D'</button>
+        <button onclick="rotate('L')">L</button>
+        <button onclick="rotate('L\'')">L'</button>
+        <button onclick="rotate('R')">R</button>
+        <button onclick="rotate('R\'')">R'</button>
+        <button onclick="rotate('F')">F</button>
+        <button onclick="rotate('F\'')">F'</button>
+        <button onclick="rotate('B')">B</button>
+        <button onclick="rotate('B\'')">B'</button>
+        <button onclick="scramble()">Scramble</button>
+        <button onclick="unscramble()">Unscramble</button>
+    </div>
+    <script type="module">
+        import * as THREE from 'https://cdn.skypack.dev/[email protected]';
+        import { OrbitControls } from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';
+        const scene = new THREE.Scene();
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        const renderer = new THREE.WebGLRenderer();
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        const controls = new OrbitControls(camera, renderer.domElement);
+        camera.position.z = 5;
+        const cubeSize = 0.9;
+        const colors = {
+            'U': 0xFFFFFF, 'D': 0xFFFF00, 'L': 0xFFA500,
+            'R': 0x00FF00, 'F': 0x0000FF, 'B': 0xFF00FF
+        };
+        // Create cubies
+        const cubies = [];
+        for (let x = -1; x <= 1; x++) {
+            for (let y = -1; y <= 1; y++) {
+                for (let z = -1; z <= 1; z++) {
+                    const geometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
+                    const material = new THREE.MeshStandardMaterial({
+                        color: 0x000000,
+                        emissive: 0x000000
+                    });
+                    const cubie = new THREE.Mesh(geometry, material);
+                    cubie.position.set(x * (cubeSize + 0.01), y * (cubeSize + 0.01), z * (cubeSize + 0.01));
+                    // Paint faces
+                    for (let face of ['U', 'D', 'L', 'R', 'F', 'B']) {
+                        if ((face === 'U' && y === 1) || (face === 'D' && y === -1) ||
+                            (face === 'L' && x === -1) || (face === 'R' && x === 1) ||
+                            (face === 'F' && z === 1) || (face === 'B' && z === -1)) {
+                            cubie.geometry.faces[getFaceIndex(face)].color.setHex(colors[face]);
+                        }
+                    }
+                    cubie.geometry.colorsNeedUpdate = true;
+                    cubies.push({ mesh: cubie, originalPosition: cubie.position.clone(), originalRotation: cubie.rotation.clone() });
+                    scene.add(cubie);
+                }
+            }
+        }
+        // Light setup
+        const ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(5, 5, 5);
+        scene.add(directionalLight);
+        // Cube rotation logic
+        const moveMap = {
+            'U': { axis: 'y', layer: 1, direction: 1, affectedCubies: cubies.filter(c => c.mesh.position.y === cubeSize) },
+            'U\'': { axis: 'y', layer: 1, direction: -1, affectedCubies: cubies.filter(c => c.mesh.position.y === cubeSize) },
+            // ... other moves similarly defined
+        };
+        let movesHistory = [];
+        function rotate(move) {
+            const { axis, layer, direction, affectedCubies } = moveMap[move];
+            const pivot = new THREE.Object3D();
+            scene.add(pivot);
+            for (let cubie of affectedCubies) {
+                pivot.attach(cubie.mesh);
+            }
+            const targetRotation = Math.PI / 2 * direction;
+            let currentRotation = 0;
+            function animate() {
+                if (currentRotation < targetRotation) {
+                    currentRotation += 0.1;
+                    pivot.rotation[axis] = currentRotation;
+                    requestAnimationFrame(animate);
+                } else {
+                    pivot.rotation[axis] = targetRotation;
+                    for (let cubie of affectedCubies) {
+                        cubie.mesh.applyMatrix4(pivot.matrix);
+                        scene.attach(cubie.mesh);
+                    }
+                    scene.remove(pivot);
+                    movesHistory.push(move);
+                }
+            }
+            animate();
+        }
+        function scramble() {
+            const moves = ['U', 'U\'', 'D', 'D\'', 'L', 'L\'', 'R', 'R\'', 'F', 'F\'', 'B', 'B\''];
+            for (let i = 0; i < 20; i++) {
+                rotate(moves[Math.floor(Math.random() * moves.length)]);
+            }
+        }
+        let unscrambling = false;
+        function unscramble() {
+            if (!unscrambling) {
+                unscrambling = true;
+                const interval = setInterval(() => {
+                    if (movesHistory.length > 0) {
+                        let lastMove = movesHistory.pop();
+                        let inverse = lastMove.replace("'", "") + (lastMove.includes('\'') ? '' : '\'');
+                        rotate(inverse);
+                    } else {
+                        clearInterval(interval);
+                        unscrambling = false;
+                    }
+                }, 500);
+            }
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            renderer.render(scene, camera);
+        }
+        animate();
+        function getFaceIndex(face) {
+            switch(face) {
+                case 'U': return 4; // top
+                case 'D': return 5; // bottom
+                case 'L': return 0; // left
+                case 'R': return 1; // right
+                case 'F': return 2; // front
+                case 'B': return 3; // back
+            }
+        }
+    </script>
+</body>
+</html>