Update index.html

index.html

@@ -25,21 +25,44 @@
         var world = new CANNON.World();
         world.gravity.set(0, -9.82, 0); // Apply gravity in the negative y direction
 
-        // Card geometry
-        var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
-        var cardMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-        var cards = [];
-        var cardBodies = [];
-
         // Lighting
-        var ambientLight = new THREE.AmbientLight(0x404040);
+        var ambientLight = new THREE.AmbientLight(0x404040); // Soft white light
         scene.add(ambientLight);
         var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
         directionalLight.position.set(0, 1, 1);
         scene.add(directionalLight);
 
-        // Card creation
-        function addCard(x, y, z) {
+        // Table surface
+        var tableGeometry = new THREE.BoxGeometry(100, 1, 100);
+        var tableMaterial = new THREE.MeshLambertMaterial({ color: 0x8B4513 }); // Brown color for the table
+        var table = new THREE.Mesh(tableGeometry, tableMaterial);
+        table.position.set(0, -1, 0); // Position the table slightly below where the cards will be
+        scene.add(table);
+
+        // Card geometry
+        var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7); // Generic card size
+        var cards = [];
+        var cardBodies = []; // For physics bodies
+
+        // Shuffle and color assignment
+        var colors = []; // Array to hold colors
+        // Generate unique colors for each card
+        for (let i = 0; i < 52; i++) {
+            colors.push(Math.random() * 0xffffff); // Generate random color
+        }
+
+        function shuffleArray(array) {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]]; // Swap
+            }
+        }
+
+        shuffleArray(colors); // Shuffle the colors array to simulate shuffling cards
+
+        // Card creation with physics and color based on shuffle
+        function addCard(x, y, z, colorIndex) {
+            var cardMaterial = new THREE.MeshLambertMaterial({ color: colors[colorIndex] });
             var card = new THREE.Mesh(cardGeometry, cardMaterial);
             card.position.set(x, y, z);
             scene.add(card);
@@ -47,21 +70,18 @@
 
             // Physics for card
             var cardShape = new CANNON.Box(new CANNON.Vec3(2.5, 0.05, 3.5));
-            var cardBody = new CANNON.Body({ mass: 1 });
+            var cardBody = new CANNON.Body({ mass: 0.1 }); // Cards are lightweight
             cardBody.addShape(cardShape);
             cardBody.position.set(x, y, z);
             world.addBody(cardBody);
             cardBodies.push(cardBody);
         }
 
-        // Example: Add a stack of cards
+        // Create a stack of cards
         for (let i = 0; i < 52; i++) {
-            addCard(0, i * 0.2, 0); // Adjust position as needed
+            addCard(0, i * 0.2 + 1, 0, i); // Position cards in a stack, slightly offset in the y direction
         }
 
-        // Drag and drop functionality (simplified)
-        // You will need to implement raycasting to pick up and move cards
-
         function animate() {
             requestAnimationFrame(animate);