From ddb025565f378b2172cad55a4d6e21518ceee411 Mon Sep 17 00:00:00 2001
From: alex-ui <53338521+alex-ui@users.noreply.github.com>
Date: Sat, 17 Feb 2024 10:50:01 +0100
Subject: [PATCH] arreglao

---
 graficos.css     |  4 ++--
 index.html       | 11 ++++++++---
 obtenerImagen.js | 28 ++++++++++++++++++----------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/graficos.css b/graficos.css
index 7f14333..b1cd086 100644
--- a/graficos.css
+++ b/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;
diff --git a/index.html b/index.html
index f68b914..2d6b8e1 100644
--- a/index.html
+++ b/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">
diff --git a/obtenerImagen.js b/obtenerImagen.js
index 6366ada..582c160 100644
--- a/obtenerImagen.js
+++ b/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,20 +19,15 @@ 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++) {
@@ -39,7 +35,8 @@ async function sliceImage(imageUrl) {
       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();