fix: pixel table

src/main/webapp/css/pixels.css

@@ -1,32 +1,25 @@
-.pixel-container {
-    display: flex;
-    justify-content: space-evenly;
-    align-items: center;
-    width: 100%;
-    height: 1000px;
-}
-
-table {
+#pixels {
     --side: 80px;
     --border-width: 3px;
     border-spacing: 0;
     table-layout: fixed;
     width: calc(10 * var(--side));
     height: calc(10 * var(--side));
+    margin: auto;
 }
 
-table tr {
+#pixels tr {
     height: var(--side);
 }
 
-.pixel {
+#pixels td {
     background: #fff;
     width: var(--side);
     height: var(--side);
     display: inline-block;
 }
 
-.pixel:hover {
+#pixels td:hover {
     --border-color: #333;
     box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
 }

src/main/webapp/index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="css/login-signup.css" />
         <link rel="stylesheet" href="css/pixels.css" />
         <script src="js/login-signup.js"></script>
+        <script src="js/pixels.js"></script>
         <script src="js/loaded.js"></script>
     </head>
 
@@ -74,7 +75,7 @@
             </span>
         </nav>
 
-        <table id="pixelTable">
+        <table id="pixels">
             <tr></tr>
             <tr></tr>
             <tr></tr>

src/main/webapp/js/loaded.js

@@ -28,4 +28,7 @@ function pageLoaded() {
             }
         });
     });
+
+    updatePixelsJSON();
+    setInterval(updatePixelsJSON, 10000);
 }

src/main/webapp/js/old.js

@@ -0,0 +1,224 @@
+//////////////////
+// Update loops //
+//////////////////
+
+var urlPixel = "http://localhost:8080/api/pixel";
+var urlUser = "http://localhost:8080/api/user";
+
+var pixelsJSON;
+var userJSON;
+
+const updatePixelsJSON = async () => {
+    var reponse = await fetch(urlPixel);
+    pixelsJSON = await reponse.json();
+};
+
+const updateUserJSON = async () => {
+    var reponse = await fetch(urlUser);
+    userJSON = await reponse.json();
+};
+
+function updateSolde() {
+    var elems = document.getElementsByClassName("solde");
+    elems.forEach((el) => {
+        el.innerHTML = userJSON.solde + "₿";
+    });
+}
+
+updateSolde();
+updateUserJSON();
+updatePixelsJSON();
+setInterval(updateSolde, 10000);
+setInterval(updateUserJSON, 10000);
+setInterval(updatePixelsJSON, 10000);
+
+////////////////
+// Pixel grid //
+////////////////
+
+function setPixels() {
+    var table = document.getElementById("pixelTable");
+    var num_rows = table.rows.length;
+
+    for (let i = 0; i < num_rows; i++) {
+        table.rows[i].innerHTML = "";
+    }
+
+    for (i in pixelsJSON) {
+        var pixel = pixelsJSON[i];
+        var row_id = Math.floor((pixel.id - 1) / num_rows);
+        var row = table.rows[row_id];
+
+        row.innerHTML +=
+            '<td class="pixel" style="background:#' +
+            pixel.color +
+            '">' +
+            '<div class="info-pixel">' +
+            '<div class="username">' +
+            pixel.owner_username +
+            "</div>" +
+            '<div class="description">' +
+            pixel.description +
+            "</div>" +
+            "</div>" +
+            '<div class="patch-shadow"></div>' +
+            "</td>";
+    }
+}
+
+//////////////////////
+// Modify my pixels //
+//////////////////////
+
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    console.log(result);
+    return result
+        ? {
+              r: parseInt(result[1], 16),
+              g: parseInt(result[2], 16),
+              b: parseInt(result[3], 16),
+          }
+        : null;
+}
+
+// Initialize pixel index
+function initUserPixel() {
+    var user_pixel_index = 0;
+    var pixel_index = userJSON.pixels[user_pixel_index] - 1;
+
+    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
+    document.getElementById("pixel-index").innerHTML = pixel_index;
+
+    updatePixelPreview();
+}
+
+// Compute next pixel index
+function nextUserPixel() {
+    var user_pixel_index = parseInt(
+        document.getElementById("user-pixel-index").innerHTML
+    );
+
+    user_pixel_index++;
+    if (user_pixel_index > userJSON.pixels.length - 1) {
+        user_pixel_index = 0;
+    }
+
+    var pixel_index = userJSON.pixels[user_pixel_index] - 1;
+
+    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
+    document.getElementById("pixel-index").innerHTML = pixel_index;
+
+    updatePixelPreview();
+}
+
+// Compute previous pixel index
+function previousUserPixel() {
+    var user_pixel_index = parseInt(
+        document.getElementById("user-pixel-index").innerHTML
+    );
+
+    user_pixel_index--;
+    if (user_pixel_index < 0) {
+        user_pixel_index = userJSON.pixels.length - 1;
+    }
+
+    var pixel_index = userJSON.pixels[user_pixel_index] - 1;
+
+    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
+    document.getElementById("pixel-index").innerHTML = pixel_index;
+
+    updatePixelPreview();
+}
+
+function updatePixelPreview() {
+    var index = parseInt(document.getElementById("pixel-index").innerHTML);
+    var pixel = pixelsJSON[index];
+
+    // Update price
+    var price = document.getElementById("price");
+    price.value = pixel.price;
+
+    // Update color
+    var red = document.getElementById("red");
+    var green = document.getElementById("green");
+    var blue = document.getElementById("blue");
+
+    var color = hexToRgb(pixel.color);
+
+    red.value = color.r;
+    green.value = color.g;
+    blue.value = color.b;
+
+    updateUserColorPreview();
+
+    // Update description
+    var description = document.getElementById("description");
+    description.value = pixel.description;
+}
+
+// Update preview's color
+function updateUserColorPreview() {
+    var red = (document.getElementById("red").value * 255) / 100;
+    var green = (document.getElementById("green").value * 255) / 100;
+    var blue = (document.getElementById("blue").value * 255) / 100;
+
+    var color = document.getElementById("color");
+    color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
+}
+
+initUserPixel();
+
+///////////////
+// Buy pixel //
+///////////////
+
+// Initialize pixel index
+function initBuyPixel() {
+    var pixel_index = 0;
+
+    var pixel = pixelsJSON[pixel_index];
+    updatePixelBuyPreview(pixel);
+}
+
+// Compute next pixel index
+function nextBuyPixel() {
+    var pixel_index = document.getElementById("buy-pixel-index").value;
+
+    var table = document.getElementById("pixelTable");
+    var number_rows = table.rows.length;
+
+    pixel_index++;
+    if (pixel_index > number_rows * number_rows - 1) {
+        pixel_index = 0;
+    }
+
+    var pixel = pixelsJSON[pixel_index];
+    updatePixelBuyPreview(pixel);
+}
+
+// Compute previous pixel index
+function previousBuyPixel() {
+    var pixel_index = document.getElementById("buy-pixel-index").value;
+
+    var table = document.getElementById("pixelTable");
+    var number_rows = table.rows.length;
+
+    pixel_index--;
+    if (pixel_index < 0) {
+        pixel_index = number_rows * number_rows - 1;
+    }
+
+    var pixel = pixelsJSON[pixel_index];
+    updatePixelBuyPreview(pixel);
+}
+
+function updatePixelBuyPreview(pixel) {
+    document.getElementById("buy-pixel-index").value = pixel.id - 1;
+    document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
+    document.getElementById("buy-pixel-description").innerHTML =
+        pixel.description;
+    document.getElementById("buy-pixel-price").innerHTML = pixel.price;
+}
+
+initBuyPixel();

src/main/webapp/js/pixels.js

@@ -1,43 +1,13 @@
-//////////////////
-// Update loops //
-//////////////////
-
-var urlPixel = "http://localhost:8080/api/pixel";
-var urlUser = "http://localhost:8080/api/user";
-
-var pixelsJSON;
-var userJSON;
+let urlPixel = "http://localhost:8080/api/pixel";
 
 const updatePixelsJSON = async () => {
-    var reponse = await fetch(urlPixel);
+    reponse = await fetch(urlPixel);
     pixelsJSON = await reponse.json();
+    setPixels();
 };
 
-const updateUserJSON = async () => {
-    var reponse = await fetch(urlUser);
-    userJSON = await reponse.json();
-};
-
-function updateSolde() {
-    var elems = document.getElementsByClassName("solde");
-    elems.forEach((el) => {
-        el.innerHTML = userJSON.solde + "₿";
-    });
-}
-
-updateSolde();
-updateUserJSON();
-updatePixelsJSON();
-setInterval(updateSolde, 10000);
-setInterval(updateUserJSON, 10000);
-setInterval(updatePixelsJSON, 10000);
-
-////////////////
-// Pixel grid //
-////////////////
-
 function setPixels() {
-    var table = document.getElementById("pixelTable");
+    var table = document.getElementById("pixels");
     var num_rows = table.rows.length;
 
     for (let i = 0; i < num_rows; i++) {
@@ -65,160 +35,3 @@ function setPixels() {
             "</td>";
     }
 }
-
-//////////////////////
-// Modify my pixels //
-//////////////////////
-
-function hexToRgb(hex) {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-    console.log(result);
-    return result
-        ? {
-              r: parseInt(result[1], 16),
-              g: parseInt(result[2], 16),
-              b: parseInt(result[3], 16),
-          }
-        : null;
-}
-
-// Initialize pixel index
-function initUserPixel() {
-    var user_pixel_index = 0;
-    var pixel_index = userJSON.pixels[user_pixel_index] - 1;
-
-    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
-    document.getElementById("pixel-index").innerHTML = pixel_index;
-
-    updatePixelPreview();
-}
-
-// Compute next pixel index
-function nextUserPixel() {
-    var user_pixel_index = parseInt(
-        document.getElementById("user-pixel-index").innerHTML
-    );
-
-    user_pixel_index++;
-    if (user_pixel_index > userJSON.pixels.length - 1) {
-        user_pixel_index = 0;
-    }
-
-    var pixel_index = userJSON.pixels[user_pixel_index] - 1;
-
-    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
-    document.getElementById("pixel-index").innerHTML = pixel_index;
-
-    updatePixelPreview();
-}
-
-// Compute previous pixel index
-function previousUserPixel() {
-    var user_pixel_index = parseInt(
-        document.getElementById("user-pixel-index").innerHTML
-    );
-
-    user_pixel_index--;
-    if (user_pixel_index < 0) {
-        user_pixel_index = userJSON.pixels.length - 1;
-    }
-
-    var pixel_index = userJSON.pixels[user_pixel_index] - 1;
-
-    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
-    document.getElementById("pixel-index").innerHTML = pixel_index;
-
-    updatePixelPreview();
-}
-
-function updatePixelPreview() {
-    var index = parseInt(document.getElementById("pixel-index").innerHTML);
-    var pixel = pixelsJSON[index];
-
-    // Update price
-    var price = document.getElementById("price");
-    price.value = pixel.price;
-
-    // Update color
-    var red = document.getElementById("red");
-    var green = document.getElementById("green");
-    var blue = document.getElementById("blue");
-
-    var color = hexToRgb(pixel.color);
-
-    red.value = color.r;
-    green.value = color.g;
-    blue.value = color.b;
-
-    updateUserColorPreview();
-
-    // Update description
-    var description = document.getElementById("description");
-    description.value = pixel.description;
-}
-
-// Update preview's color
-function updateUserColorPreview() {
-    var red = (document.getElementById("red").value * 255) / 100;
-    var green = (document.getElementById("green").value * 255) / 100;
-    var blue = (document.getElementById("blue").value * 255) / 100;
-
-    var color = document.getElementById("color");
-    color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
-}
-
-initUserPixel();
-
-///////////////
-// Buy pixel //
-///////////////
-
-// Initialize pixel index
-function initBuyPixel() {
-    var pixel_index = 0;
-
-    var pixel = pixelsJSON[pixel_index];
-    updatePixelBuyPreview(pixel);
-}
-
-// Compute next pixel index
-function nextBuyPixel() {
-    var pixel_index = document.getElementById("buy-pixel-index").value;
-
-    var table = document.getElementById("pixelTable");
-    var number_rows = table.rows.length;
-
-    pixel_index++;
-    if (pixel_index > number_rows * number_rows - 1) {
-        pixel_index = 0;
-    }
-
-    var pixel = pixelsJSON[pixel_index];
-    updatePixelBuyPreview(pixel);
-}
-
-// Compute previous pixel index
-function previousBuyPixel() {
-    var pixel_index = document.getElementById("buy-pixel-index").value;
-
-    var table = document.getElementById("pixelTable");
-    var number_rows = table.rows.length;
-
-    pixel_index--;
-    if (pixel_index < 0) {
-        pixel_index = number_rows * number_rows - 1;
-    }
-
-    var pixel = pixelsJSON[pixel_index];
-    updatePixelBuyPreview(pixel);
-}
-
-function updatePixelBuyPreview(pixel) {
-    document.getElementById("buy-pixel-index").value = pixel.id - 1;
-    document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
-    document.getElementById("buy-pixel-description").innerHTML =
-        pixel.description;
-    document.getElementById("buy-pixel-price").innerHTML = pixel.price;
-}
-
-initBuyPixel();