Add 1 files

index.html

@@ -259,6 +259,7 @@
         let diceObjects = [];
         let diceMeshes = [];
         let diceValues = {};
+        let isRolling = false;
         
         // Initialize Three.js and Cannon.js
         function init() {
@@ -273,6 +274,9 @@
             // Add directional light
             const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
             directionalLight.position.set(1, 1, 1).normalize();
+            directionalLight.castShadow = true;
+            directionalLight.shadow.mapSize.width = 1024;
+            directionalLight.shadow.mapSize.height = 1024;
             scene.add(directionalLight);
             
             // Add point light
@@ -323,10 +327,37 @@
             // Handle window resize
             window.addEventListener('resize', onWindowResize);
             
+            // Set up dice selection
+            setupDiceSelection();
+            
+            // Set up roll button
+            document.getElementById('rollButton').addEventListener('click', rollDice);
+            
             // Start animation loop
             animate();
         }
         
+        // Set up dice selection
+        function setupDiceSelection() {
+            const diceSelectors = document.querySelectorAll('.dice-selector');
+            
+            diceSelectors.forEach(selector => {
+                selector.addEventListener('click', function() {
+                    // Remove active class from all selectors
+                    diceSelectors.forEach(s => s.classList.remove('active'));
+                    
+                    // Add active class to clicked selector
+                    this.classList.add('active');
+                    
+                    // Update selected sides
+                    selectedSides = parseInt(this.getAttribute('data-sides'));
+                });
+            });
+            
+            // Activate D20 by default
+            document.querySelector('.dice-selector[data-sides="20"]').classList.add('active');
+        }
+        
         // Add decorative elements to the scene
         function addDecorativeElements() {
             // Add some floating runes
@@ -346,25 +377,6 @@
                 );
                 scene.add(rune);
             }
-            
-            // Add some floating particles
-            const particlesGeometry = new THREE.BufferGeometry();
-            const particlesCount = 100;
-            const posArray = new Float32Array(particlesCount * 3);
-            
-            for (let i = 0; i < particlesCount * 3; i++) {
-                posArray[i] = (Math.random() - 0.5) * 20;
-            }
-            
-            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(posArray, 3));
-            const particlesMaterial = new THREE.PointsMaterial({
-                color: 0x8b5a2b,
-                size: 0.05,
-                transparent: true,
-                opacity: 0.5
-            });
-            const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial);
-            scene.add(particlesMesh);
         }
         
         // Handle window resize
@@ -501,5 +513,184 @@
                 case 8:
                     color = 0x005b96; // Blue
                     break;
-                case
+                case 10:
+                    color = 0x5e8c31; // Green
+                    break;
+                case 12:
+                    color = 0x7d26cd; // Purple
+                    break;
+                case 20:
+                    color = 0xd4af37; // Gold
+                    break;
+                default:
+                    color = 0xffffff; // White
+            }
+            
+            return new THREE.MeshStandardMaterial({
+                color: color,
+                roughness: 0.3,
+                metalness: 0.5,
+                emissive: color,
+                emissiveIntensity: 0.1
+            });
+        }
+        
+        // Roll the dice
+        function rollDice() {
+            if (isRolling) return;
+            
+            isRolling = true;
+            
+            // Clear previous dice
+            clearDice();
+            
+            // Get quantity
+            const quantity = parseInt(document.getElementById('diceQuantity').value) || 1;
+            const modifier = parseInt(document.getElementById('diceModifier').value) || 0;
+            
+            // Hide result display
+            document.getElementById('resultDisplay').classList.add('hidden');
+            document.getElementById('criticalText').classList.add('hidden');
+            
+            // Create new dice
+            for (let i = 0; i < quantity; i++) {
+                // Position the dice in a line above the ground
+                const x = (i - (quantity - 1) / 2) * 2;
+                const position = new CANNON.Vec3(x, 5, 0);
+                
+                // Create physics body
+                const body = createDiceBody(selectedSides, position);
+                
+                // Add some random force to make it roll
+                body.velocity.set(
+                    Math.random() * 5 - 2.5,
+                    Math.random() * 2,
+                    Math.random() * 5 - 2.5
+                );
+                
+                body.angularVelocity.set(
+                    Math.random() * 5,
+                    Math.random() * 5,
+                    Math.random() * 5
+                );
+                
+                world.addBody(body);
+                diceObjects.push(body);
+                
+                // Create visual mesh
+                const geometry = createDiceGeometry(selectedSides);
+                const material = createDiceMaterial(selectedSides);
+                const mesh = new THREE.Mesh(geometry, material);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                scene.add(mesh);
+                diceMeshes.push(mesh);
+            }
+            
+            // Wait for dice to settle
+            setTimeout(() => {
+                checkDiceResults(quantity, modifier);
+            }, 2000);
+        }
+        
+        // Clear all dice from scene
+        function clearDice() {
+            // Remove physics bodies
+            diceObjects.forEach(body => {
+                world.removeBody(body);
+            });
+            
+            // Remove meshes
+            diceMeshes.forEach(mesh => {
+                scene.remove(mesh);
+                if (mesh.geometry) mesh.geometry.dispose();
+                if (mesh.material) mesh.material.dispose();
+            });
+            
+            diceObjects = [];
+            diceMeshes = [];
+            diceValues = {};
+        }
+        
+        // Check dice results after they've settled
+        function checkDiceResults(quantity, modifier) {
+            const results = [];
+            let total = 0;
+            let isCritical = false;
+            
+            // Generate random results (since we can't actually detect dice faces in this simplified version)
+            for (let i = 0; i < quantity; i++) {
+                const value = Math.floor(Math.random() * selectedSides) + 1;
+                results.push(value);
+                total += value;
+                
+                // Check for critical (20 on d20)
+                if (selectedSides === 20 && value === 20) {
+                    isCritical = true;
+                }
+            }
+            
+            // Add modifier
+            total += modifier;
+            
+            // Display results
+            displayResults(results, total, modifier, isCritical);
+            
+            // Add to history
+            addToHistory(results, total, modifier);
+            
+            isRolling = false;
+        }
+        
+        // Display the results
+        function displayResults(results, total, modifier, isCritical) {
+            const resultDisplay = document.getElementById('resultDisplay');
+            const totalResult = document.getElementById('totalResult');
+            const individualResults = document.getElementById('individualResults');
+            const criticalText = document.getElementById('criticalText');
+            
+            // Show total
+            totalResult.textContent = total;
+            
+            // Show individual results
+            let individualText = `Rolls: ${results.join(', ')}`;
+            if (modifier !== 0) {
+                individualText += ` + ${modifier}`;
+            }
+            individualResults.textContent = individualText;
+            
+            // Show critical if applicable
+            if (isCritical) {
+                criticalText.classList.remove('hidden');
+            }
+            
+            // Show the display
+            resultDisplay.classList.remove('hidden');
+        }
+        
+        // Add roll to history
+        function addToHistory(results, total, modifier) {
+            const historyContainer = document.getElementById('rollHistory');
+            const historyItem = document.createElement('div');
+            historyItem.className = 'roll-history-item p-3 bg-gray-800 rounded';
+            
+            let historyText = `D${selectedSides}: ${results.join(' + ')}`;
+            if (modifier !== 0) {
+                historyText += ` + ${modifier}`;
+            }
+            historyText += ` = ${total}`;
+            
+            historyItem.textContent = historyText;
+            historyContainer.insertBefore(historyItem, historyContainer.firstChild);
+            
+            // Limit history to 10 items
+            if (historyContainer.children.length > 10) {
+                historyContainer.removeChild(historyContainer.lastChild);
+            }
+        }
+        
+        // Initialize when DOM is loaded
+        document.addEventListener('DOMContentLoaded', init);
+    </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=dricampbell/d-d-dice" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>