arreglao

graficos.css

@@ -80,9 +80,9 @@
 
 .pieza {
   place-items: center;
-  background-color: #009578;
+  background-color:transparent;
   /* Color de fondo de cada pieza */
-  color: white;
+  color: black;
   /* Color del texto de cada pieza */
   display: flex;
   justify-content: center;

index.html

@@ -15,9 +15,10 @@ <h1 style="text-align: center;">Crono <img style="height: 35px;" src="./imagenes
                 alt=""> Square</h1>
     <div class="contenedor">
         <div class="texto">
-            00:00:00
+            <div id="cuentaRegresiva">15:00:00</div>
+                <script src="cuentaRegresiva.js"></script>
             <br><br><br><br><br><br>
-            Score: 1570
+            <div id="score-display">Score: 0</div>
             <br>
         </div>
         <div class="puzzle" id="game-grid">
@@ -28,9 +29,13 @@ <h1 style="text-align: center;">Crono <img style="height: 35px;" src="./imagenes
     <div class="botones">
         Imagen
         <label class="switch">
-            <input type="checkbox">
+            <input type="checkbox" id="toggleSwitch">
             <span class="slider"></span>
         </label>
+            <div id="imagenContenedor" style="display:none;">
+                <img style="width: 50px;" id="imagen" src="imagenes/patron.png" alt="">
+            </div>
+            <script src="script.js"></script>
 
         <br><br><br><br><br><br><br>
         Numbers <label class="switch">

obtenerImagen.js

@@ -5,6 +5,7 @@ const timerDisplay = document.getElementById('timer');
 
 let emptyTilePosition;
 let originalEmptyTilePosition;
+let score = 0;
 
 // Fetch a random square image from Unsplash
 async function fetchRandomSquareImage() {
@@ -18,28 +19,24 @@ async function fetchRandomSquareImage() {
 }
 
 // Slice the image into parts
+
 async function sliceImage(imageUrl) {
   const response = await fetch(imageUrl);
   const blob = await response.blob();
   const image = await createImageBitmap(blob);
 
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-  canvas.width = image.width;
-  canvas.height = image.height;
-  ctx.drawImage(image, 0, 0);
-
   const imageParts = [];
-  const partWidth = canvas.width / 4;
-  const partHeight = canvas.height / 4;
+  const partWidth = image.width / 4;
+  const partHeight = image.height / 4;
 
   for (let row = 0; row < 4; row++) {
     for (let col = 0; col < 4; col++) {
       const partCanvas = document.createElement('canvas');
       partCanvas.width = partWidth;
       partCanvas.height = partHeight;
       const partCtx = partCanvas.getContext('2d');
-      partCtx.drawImage(canvas, -col * partWidth, -row * partHeight);
+      // Draw each slice from the original image
+      partCtx.drawImage(image, col * partWidth, row * partHeight, partWidth, partHeight, 0, 0, partWidth, partHeight);
       const partUrl = partCanvas.toDataURL();
       imageParts.push({url: partUrl, id: row * 4 + col + 1}); // Assign a unique ID to each tile
     }
@@ -139,7 +136,10 @@ function tileClickHandler(event) {
 
   if (isPuzzleSolved()) {
       const nb = document.getElementById("next-btn");
-      nb.disabled = false;
+
+      score += 100; // Increase score by 100 when puzzle is solved
+      updateScoreDisplay();
+      const nextButton = document.getElementById('next-btn');
   }
 }
 
@@ -176,11 +176,13 @@ function shuffle(array) {
   let currentIndex = array.length;
   let randomIndex;
 
+  /*
   while (currentIndex !== 0) {
     randomIndex = Math.floor(Math.random() * currentIndex);
     currentIndex--;
     [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
   }
+  */
 
   return array;
 }
@@ -209,6 +211,12 @@ function isPuzzleSolved() {
   return true;
 }
 
+// Update the score display
+function updateScoreDisplay() {
+  const scoreDisplay = document.getElementById('score-display');
+  scoreDisplay.textContent = `Score: ${score}`;
+}
+
 // Initialize the game
 async function initializeGame() {
   const imageUrl = await fetchRandomSquareImage();