JE COMMIt

Co-authored-by: Damien <damguillotin@gmail.com>

src/main/webapp/css/pixels.css

@@ -1,6 +1,7 @@
 #pixels {
-    --side: 80px;
-    --border-width: 3px;
+    --side: 5.5rem;
+    --border-width: 0.2rem;
+    --border-color: #333;
     border-spacing: 0;
     table-layout: fixed;
     width: calc(10 * var(--side));
@@ -20,8 +21,7 @@
 }
 
 #pixels td:hover {
-    --border-color: #333;
-    box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
 }
 
 .info-pixel {
@@ -30,8 +30,8 @@
     width: max-content;
     min-width: var(--side);
     top: var(--side);
-    box-shadow: 0px 0px 0px var(--border-width) var(--border-color);
-    background: #888;
+    box-shadow: 0 0 0 var(--border-width) var(--border-color);
+    background: #8888;
 }
 
 .pixel:hover .info-pixel {
@@ -40,7 +40,7 @@
 
 .patch-shadow {
     display: none;
-    width: 3px;
+    width: var(--border-width);
     position: relative;
     height: var(--side);
     left: var(--side);

src/main/webapp/css/popups.css

@@ -1,6 +1,7 @@
 .popup {
     display: none;
     background: #fff;
+    box-shadow: 0px 0px 1rem #3333;
 
     padding: 2rem;
     width: 40rem;

src/main/webapp/css/style.css

@@ -17,3 +17,7 @@ nav {
     background: #3333;
     height: 5rem;
 }
+
+#username {
+    color: white;
+}

src/main/webapp/index.html

@@ -71,6 +71,7 @@
 
             <span class="logged-in">
                 <span id="username"></span>
+                <button onclick="togglePopup('wallet');">Wallet</button>
                 <button onclick="userLogout()">Logout</button>
             </span>
         </nav>
@@ -93,6 +94,11 @@
 
             Pixel infos
 
+            <div>
+                <label>Solde</label>
+                <span class="solde"></span>
+            </div>
+
             <div>
                 <label>Owner</label>
                 <span id="info-owner"></span>
@@ -109,7 +115,7 @@
             </div>
 
             <form id="buy-form" class="logged-in" method="post">
-                <button type="submit">Buy</button>
+                <button type="submit" onclick="updateSolde();">Buy</button>
             </form>
         </div>
 
@@ -121,31 +127,85 @@
             <form id="modify-form" method="post">
                 <div class="data">
                     <label>Price</label>
-                    <input type="number" name="price" id="price" required />
+                    <input
+                        type="number"
+                        name="price"
+                        id="modify-price"
+                        required
+                    />
                 </div>
 
                 <div>
                     <label>Red</label>
-                    <input type="range" name="red" required />
+                    <input
+                        type="range"
+                        min="0"
+                        max="255"
+                        step="1"
+                        name="red"
+                        id="modify-red"
+                        required
+                    />
                 </div>
 
                 <div>
                     <label>Green</label>
-                    <input type="range" name="green" required />
+                    <input
+                        type="range"
+                        min="0"
+                        max="255"
+                        step="1"
+                        name="green"
+                        id="modify-green"
+                        required
+                    />
                 </div>
 
                 <div>
                     <label>Blue</label>
-                    <input type="range" name="blue" required />
+                    <input
+                        type="range"
+                        min="0"
+                        max="255"
+                        step="1"
+                        name="blue"
+                        id="modify-blue"
+                        required
+                    />
                 </div>
 
                 <div>
                     <label>Description</label>
-                    <input type="text" name="description" required />
+                    <input
+                        type="text"
+                        name="description"
+                        id="modify-description"
+                        required
+                    />
                 </div>
 
                 <button type="submit">Modify</button>
             </form>
         </div>
+
+        <div id="wallet" class="popup">
+            <button onclick="togglePopup('wallet')" class="close">X</button>
+
+            Wallet
+
+            <div>
+                <label>Solde</label>
+                <span class="solde"></span>
+            </div>
+
+            <form id="pay-form" action="/api/user/pay" method="post">
+                <div class="data">
+                    <label>Amount</label>
+                    <input type="number" name="amount" required />
+                </div>
+
+                <button type="submit" onclick="updateSolde();">Pay</button>
+            </form>
+        </div>
     </body>
 </html>

src/main/webapp/js/loaded.js

@@ -1,11 +1,20 @@
 // fonction qui s'execute quand la page a finie de charger
 function pageLoaded() {
-    // permet d'intercepter la requête post du formulaire et de la changer un peu
+    let forms = document.forms;
+    for (form of forms) {
+        form.addEventListener("submit", (event) => {
+            event.preventDefault();
+            fetch(event.target.action, {
+                method: event.target.method,
+                body: new URLSearchParams(new FormData(event.target)),
+            });
+        });
+    }
+
     document.forms["login-form"].addEventListener("submit", (event) => {
         event.preventDefault();
-
         fetch(event.target.action, {
-            method: "POST",
+            method: event.target.method,
             body: new URLSearchParams(new FormData(event.target)),
         }).then(async (resp) => {
             if (resp.ok) {
@@ -15,12 +24,10 @@ function pageLoaded() {
         });
     });
 
-    // permet d'intercepter la requête post du formulaire et de la changer un peu
     document.forms["signup-form"].addEventListener("submit", (event) => {
         event.preventDefault();
-
         fetch(event.target.action, {
-            method: "POST",
+            method: event.target.method,
             body: new URLSearchParams(new FormData(event.target)),
         }).then((resp) => {
             if (resp.ok) {
@@ -33,7 +40,9 @@ function pageLoaded() {
     updatePixelGrid();
     setInterval(updatePixelGrid, 10000);
 
-    if (localStorage.getItem("logged")) {
+    if (localStorage.getItem("logged") === "true") {
         userLogin();
+    } else {
+        localStorage.setItem("logged", "false");
     }
 }

src/main/webapp/js/pixels.js

@@ -10,17 +10,17 @@ const updatePixelGrid = async () => {
 };
 
 function setPixels(json) {
-    var table = document.getElementById("pixels");
-    var num_rows = table.rows.length;
+    let table = document.getElementById("pixels");
+    let num_rows = table.rows.length;
 
     for (let i = 0; i < num_rows; i++) {
         table.rows[i].innerHTML = "";
     }
 
     for (i in json) {
-        var pixel = json[i];
-        var row_id = Math.floor((pixel.id - 1) / num_rows);
-        var row = table.rows[row_id];
+        let pixel = json[i];
+        let row_id = Math.floor((pixel.id - 1) / num_rows);
+        let row = table.rows[row_id];
 
         row.innerHTML +=
             '<td class="pixel" style="background:#' +
@@ -46,33 +46,76 @@ function pixelClick(id) {
         if (resp.ok) {
             pixel = await resp.json();
 
-            fetch(urlUser).then(async (resp) => {
-                if (resp.ok) {
-                    user = await resp.json();
+            if (localStorage.getItem("logged") === "true") {
+                // si le user est connecté
+                fetch(urlUser).then(async (resp) => {
+                    if (resp.ok) {
+                        // on récupère ses infos
+                        user = await resp.json();
 
-                    if (user.pixels.includes(pixel.id)) {
-                        form = document.getElementById("modify-form");
-                        form.action = urlPixel + pixel.id + "/modify";
-
-                        togglePopup("modify");
-                    } else {
-                        owner = document.getElementById("info-owner");
-                        owner.innerHTML = pixel.owner_username;
-
-                        description =
-                            document.getElementById("info-description");
-                        description.innerHTML = pixel.description;
-
-                        price = document.getElementById("info-price");
-                        price.innerHTML = pixel.price;
-
-                        form = document.getElementById("buy-form");
-                        form.action = urlPixel + pixel.id + "/buy";
-
-                        togglePopup("buy");
+                        if (user.pixels.includes(pixel.id)) {
+                            // si le pixel lui appartient
+                            updateModifyForm(pixel);
+                            togglePopup("modify", "unset");
+                        } else {
+                            // sinon on affiche le form d'achat
+                            updateBuyForm(pixel);
+                            togglePopup("buy", "unset");
+                        }
                     }
-                }
-            });
+                });
+            } else {
+                // si non connecté, on affiche les infos
+                updateBuyForm(pixel);
+                togglePopup("buy", "unset");
+            }
         }
     });
 }
+
+function updateModifyForm(pixel) {
+    let form = document.getElementById("modify-form");
+    form.action = urlPixel + pixel.id + "/modify";
+
+    let price = document.getElementById("modify-price");
+    price.value = pixel.price;
+
+    let color = hexToRgb(pixel.color);
+
+    let red = document.getElementById("modify-red");
+    red.value = color.r;
+
+    let green = document.getElementById("modify-green");
+    green.value = color.g;
+
+    let blue = document.getElementById("modify-blue");
+    blue.value = color.b;
+
+    let description = document.getElementById("modify-description");
+    description.value = pixel.description;
+}
+
+function updateBuyForm(pixel) {
+    owner = document.getElementById("info-owner");
+    owner.innerHTML = pixel.owner_username;
+
+    description = document.getElementById("info-description");
+    description.innerHTML = pixel.description;
+
+    price = document.getElementById("info-price");
+    price.innerHTML = pixel.price;
+
+    form = document.getElementById("buy-form");
+    form.action = urlPixel + pixel.id + "/buy";
+}
+
+function hexToRgb(hex) {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+              r: parseInt(result[1], 16),
+              g: parseInt(result[2], 16),
+              b: parseInt(result[3], 16),
+          }
+        : null;
+}

src/main/webapp/js/user.js

@@ -1,20 +1,28 @@
 let urlUser = "http://localhost:8080/api/user";
 let urlLogout = "http://localhost:8080/api/user/logout";
 
-function togglePopup(id) {
+function togglePopup(id, value = "toggle") {
     popups = document.getElementsByClassName("popup");
     for (popup of popups) {
-        if (popup.id == id) {
-            if (popup.style.display != "unset") {
-                popup.style.display = "unset";
-            } else {
-                popup.style.display = "none";
-            }
-        } else {
+        if (popup.id != id) {
             popup.style.display = "none";
+            continue;
         }
+
+        if (value !== "toggle") {
+            popup.style.display = value;
+            continue;
+        }
+
+        if (popup.style.display === "unset") {
+            popup.style.display = "none";
+            continue;
+        }
+
+        popup.style.display = "unset";
     }
 }
+
 async function userLogin() {
     fetch(urlUser).then(async (resp) => {
         if (resp.ok) {
@@ -33,7 +41,9 @@ async function userLogin() {
                 element.style.display = "flex";
             }
 
-            localStorage.setItem("logged", true);
+            updateSolde();
+
+            localStorage.setItem("logged", "true");
             console.log("logged in");
         }
     });
@@ -44,18 +54,34 @@ function userLogout() {
         method: "POST",
     }).then((resp) => {
         if (resp.ok) {
-            let elements = document.getElementsByClassName("logged-out");
-            for (element of elements) {
+            logouts = document.getElementsByClassName("logged-out");
+            for (element of logouts) {
                 element.style.display = "flex";
             }
 
-            elements = document.getElementsByClassName("logged-in");
-            for (element of elements) {
+            logins = document.getElementsByClassName("logged-in");
+            for (element of logins) {
                 element.style.display = "none";
             }
 
-            localStorage.setItem("logged", false);
+            localStorage.setItem("logged", "false");
             console.log("logged out");
         }
     });
 }
+
+async function updateSolde() {
+    fetch(urlUser).then(async (resp) => {
+        if (resp.ok) {
+            console.log("ici");
+            user = await resp.json();
+            console.log("là");
+
+            let soldes = document.getElementsByClassName("solde");
+            for (element of soldes) {
+                element.innerHTML = user.balance + " €";
+            }
+            console.log("ok");
+        }
+    });
+}