/tmp MDR

2022-05-29 11:14:08 +02:00 · 2022-05-29 11:14:08 +02:00 · 5579e0cdc8
parent 9f58270be8
commit 5579e0cdc8
15 changed files with 209 additions and 1029 deletions
--- a/src/main/webapp/css/buypixel.css
+++ b/src/main/webapp/css/buypixel.css
@ -1,89 +0,0 @@
-.buypixel-container .text {
-    font-size: 35px;
-    font-weight: 600;
-    text-align: center;
-}
-
-.buypixel-container .solde {
-    font-size: 35px;
-    font-weight: 600;
-    text-align: center;
-    color: #fff;
-    border-radius: 45px;
-    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-
-.buypixel-container form {
-    margin-top: -20px;
-}
-
-.buypixel-container form .data {
-    height: 45px;
-    width: 100%;
-    margin: 40px 0;
-}
-
-form .data label {
-    font-size: 18px;
-}
-
-form .data input {
-    height: 100%;
-    width: 100%;
-    padding-left: 10px;
-    font-size: 17px;
-    border: 1px solid silver;
-}
-
-form .data input:focus {
-    border-color: #3498db;
-    border-bottom-width: 2px;
-}
-
-form .forgot-pass {
-    margin-top: -8px;
-}
-
-form .forgot-pass a {
-    color: #3498db;
-    text-decoration: none;
-}
-
-form .forgot-pass a:hover {
-    text-decoration: underline;
-}
-
-form .btn {
-    margin: 30px 0;
-    height: 45px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    border-radius: 45px;
-}
-
-form .btn:hover {
-    box-shadow: 0px 0px 5px 5px #3333;
-}
-
-form .btn button {
-    height: 100%;
-    width: 100%;
-    background: none;
-    border: none;
-    color: #fff;
-    font-size: 18px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    cursor: pointer;
-    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-
-form .signup-login-link {
-    text-align: center;
-}
-
-#color {
-    min-height: 20px;
-}
--- a/src/main/webapp/css/logged-in-out.css
+++ b/src/main/webapp/css/logged-in-out.css
@ -1,11 +1,3 @@
-nav {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    background: #3333;
-    height: 5rem;
-}
-
 .logged-out,
 .logged-in {
    display: flex;
--- a/src/main/webapp/css/mypixel.css
+++ b/src/main/webapp/css/mypixel.css
@ -1,89 +0,0 @@
-.mypixel-container .text {
-    font-size: 35px;
-    font-weight: 600;
-    text-align: center;
-}
-
-.mypixel-container .solde {
-    font-size: 35px;
-    font-weight: 600;
-    text-align: center;
-    color: #fff;
-    border-radius: 45px;
-    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-
-.mypixel-container form {
-    margin-top: -20px;
-}
-
-.mypixel-container form .data {
-    height: 45px;
-    width: 100%;
-    margin: 40px 0;
-}
-
-form .data label {
-    font-size: 18px;
-}
-
-form .data input {
-    height: 100%;
-    width: 100%;
-    padding-left: 10px;
-    font-size: 17px;
-    border: 1px solid silver;
-}
-
-form .data input:focus {
-    border-color: #3498db;
-    border-bottom-width: 2px;
-}
-
-form .forgot-pass {
-    margin-top: -8px;
-}
-
-form .forgot-pass a {
-    color: #3498db;
-    text-decoration: none;
-}
-
-form .forgot-pass a:hover {
-    text-decoration: underline;
-}
-
-form .btn {
-    margin: 30px 0;
-    height: 45px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    border-radius: 45px;
-}
-
-form .btn:hover {
-    box-shadow: 0px 0px 5px 5px #3333;
-}
-
-form .btn button {
-    height: 100%;
-    width: 100%;
-    background: none;
-    border: none;
-    color: #fff;
-    font-size: 18px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    cursor: pointer;
-    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-
-form .signup-login-link {
-    text-align: center;
-}
-
-#color {
-    min-height: 20px;
-}
--- a/src/main/webapp/css/login-signup.css
+++ b/src/main/webapp/css/login-signup.css
@ -1,5 +1,4 @@
-#login,
-#signup {
+.popup {
    display: none;
    background: #fff;

@ -15,14 +14,13 @@
    text-align: center;
 }

-.close {
+.popup > button {
+    cursor: pointer;
+}
+
+.popup .close {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 18px;
 }
-
-#login > button,
-#signup > button {
-    cursor: pointer;
-}
--- a/src/main/webapp/css/profil.css
+++ b/src/main/webapp/css/profil.css
@ -1,175 +0,0 @@
-.menu-container {
-    --width: 410px;
-    display: none;
-    visibility: visible;
-    background: #fff;
-    width: var(--width);
-    margin: 30px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    left: calc(50% - var(--width) / 2);
-    top: 30%;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 5px #000;
-}
-
-#show-menu:checked ~ .menu-container {
-    display: block;
-}
-
-.menu-container .close-btn {
-    position: absolute;
-    right: 20px;
-    top: 15px;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-.menu-container .close-btn:hover {
-    color: #3498db;
-}
-
-.menu-container div {
-    display: flex;
-    justify-content: space-evenly;
-}
-
-.wallet-container {
-    --width: 410px;
-    display: none;
-    visibility: visible;
-    background: #fff;
-    width: var(--width);
-    margin: 30px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    left: calc(50% - var(--width) / 2);
-    top: 30%;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 5px #000;
-}
-
-#show-wallet:checked ~ .wallet-container {
-    display: block;
-}
-
-.wallet-container .close-btn {
-    position: absolute;
-    right: 20px;
-    top: 15px;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-.wallet-container .close-btn:hover {
-    color: #3498db;
-}
-
-.mypixel-container {
-    --width: 410px;
-    display: none;
-    visibility: visible;
-    background: #fff;
-    width: var(--width);
-    margin: 30px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    left: calc(50% - var(--width) / 2);
-    top: 30%;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 5px #000;
-}
-
-#show-mypixel:checked ~ .mypixel-container {
-    display: block;
-}
-
-.mypixel-container .close-btn {
-    position: absolute;
-    right: 20px;
-    top: 15px;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-.mypixel-container .close-btn:hover {
-    color: #3498db;
-}
-
-.buypixel-container {
-    --width: 410px;
-    display: none;
-    visibility: visible;
-    background: #fff;
-    width: var(--width);
-    margin: 30px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    left: calc(50% - var(--width) / 2);
-    top: 30%;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 5px #000;
-}
-
-#show-buypixel:checked ~ .buypixel-container {
-    display: block;
-}
-
-.buypixel-container .close-btn {
-    position: absolute;
-    right: 20px;
-    top: 15px;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-.buypixel-container .close-btn:hover {
-    color: #3498db;
-}
-
-.settings-container {
-    --width: 410px;
-    display: none;
-    visibility: visible;
-    background: #fff;
-    width: var(--width);
-    margin: 30px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    position: absolute;
-    left: calc(50% - var(--width) / 2);
-    top: 30%;
-    padding: 20px;
-    border-radius: 10px;
-    box-shadow: 0px 0px 5px #000;
-}
-
-#show-settings:checked ~ .settings-container {
-    display: block;
-}
-
-.settings-container .close-btn {
-    position: absolute;
-    right: 20px;
-    top: 15px;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-.settings-container .close-btn:hover {
-    color: #3498db;
-}
-
-.wallet-btn,
-.mypixel-btn,
-.buypixel-btn,
-.settings-btn {
-    background: #fff;
-    margin: 10px 10px;
-    padding: 10px 10px;
-    color: #3498db;
-    cursor: pointer;
-}
--- a/src/main/webapp/css/style.css
+++ b/src/main/webapp/css/style.css
@ -10,11 +10,10 @@ body {
    background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
 }

-.href {
-    color: #3498db;
-    cursor: pointer;
-}
-
-.href:hover {
-    text-decoration: underline;
+nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    background: #3333;
+    height: 5rem;
 }
--- a/src/main/webapp/css/wallet.css
+++ b/src/main/webapp/css/wallet.css
@ -1,85 +0,0 @@
-.wallet-container .text {
-    font-size: 35px;
-    font-weight: 600;
-    text-align: center;
-}
-
-.wallet-container .solde {
-    font-size: 35px;
-    font-weight: 600;
-    text-align: center;
-    color: #fff;
-    border-radius: 45px;
-    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-
-.wallet-container form {
-    margin-top: -20px;
-}
-
-.wallet-container form .data {
-    height: 45px;
-    width: 100%;
-    margin: 40px 0;
-}
-
-form .data label {
-    font-size: 18px;
-}
-
-form .data input {
-    height: 100%;
-    width: 100%;
-    padding-left: 10px;
-    font-size: 17px;
-    border: 1px solid silver;
-}
-
-form .data input:focus {
-    border-color: #3498db;
-    border-bottom-width: 2px;
-}
-
-form .forgot-pass {
-    margin-top: -8px;
-}
-
-form .forgot-pass a {
-    color: #3498db;
-    text-decoration: none;
-}
-
-form .forgot-pass a:hover {
-    text-decoration: underline;
-}
-
-form .btn {
-    margin: 30px 0;
-    height: 45px;
-    width: 100%;
-    position: relative;
-    overflow: hidden;
-    border-radius: 45px;
-}
-
-form .btn:hover {
-    box-shadow: 0px 0px 5px 5px #3333;
-}
-
-form .btn button {
-    height: 100%;
-    width: 100%;
-    background: none;
-    border: none;
-    color: #fff;
-    font-size: 18px;
-    font-weight: 500;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    cursor: pointer;
-    background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
-}
-
-form .signup-login-link {
-    text-align: center;
-}
--- a/src/main/webapp/favicon.ico
+++ b/src/main/webapp/favicon.ico
--- a/src/main/webapp/index.html
+++ b/src/main/webapp/index.html
@ -3,12 +3,12 @@
    <head>
        <meta charset="utf-8" />
        <title>Pixels</title>
-        <link rel="stylesheet" href="css/utils.css" />
-        <link rel="stylesheet" href="css/title-bar.css" />
-        <link rel="stylesheet" href="css/login-signup.css" />
+        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/pixels.css" />
-        <script src="js/login-signup.js"></script>
+        <link rel="stylesheet" href="css/popups.css" />
+        <link rel="stylesheet" href="css/logged-in-out.css" />
        <script src="js/pixels.js"></script>
+        <script src="js/user.js"></script>
        <script src="js/loaded.js"></script>
    </head>

@ -17,11 +17,11 @@
            <img src="assets/logo.png" />

            <span class="logged-out">
-                <button onclick="toggleLoginPopup();">Login</button>
-                <button onclick="toggleSignupPopup();">Signup</button>
+                <button onclick="togglePopup('login');">Login</button>
+                <button onclick="togglePopup('signup');">Signup</button>

-                <div id="login">
-                    <button onclick="toggleLoginPopup()" class="close">
+                <div id="login" class="popup">
+                    <button onclick="togglePopup('login')" class="close">
                        X
                    </button>

@ -29,7 +29,7 @@

                    <form id="login-form" action="api/user/login" method="post">
                        <div>
-                            <label>Nickname</label>
+                            <label>Username</label>
                            <input type="text" name="username" required />
                        </div>

@ -42,8 +42,8 @@
                    </form>
                </div>

-                <div id="signup">
-                    <button onclick="toggleSignupPopup()" class="close">
+                <div id="signup" class="popup">
+                    <button onclick="togglePopup('signup')" class="close">
                        X
                    </button>

@ -55,7 +55,7 @@
                        method="post"
                    >
                        <div>
-                            <label>Nickname</label>
+                            <label>Username</label>
                            <input type="text" name="username" required />
                        </div>

@ -70,8 +70,8 @@
            </span>

            <span class="logged-in">
-                USERNAME HERE
-                <button onclick="userLogout();">Logout</button>
+                <span id="username"></span>
+                <button onclick="userLogout()">Logout</button>
            </span>
        </nav>

@ -87,5 +87,65 @@
            <tr></tr>
            <tr></tr>
        </table>
+
+        <div id="buy" class="popup">
+            <button onclick="togglePopup('buy')" class="close">X</button>
+
+            Pixel infos
+
+            <div>
+                <label>Owner</label>
+                <span id="info-owner"></span>
+            </div>
+
+            <div>
+                <label>Description</label>
+                <span id="info-description"></span>
+            </div>
+
+            <div>
+                <label>Price</label>
+                <span id="info-price"></span>
+            </div>
+
+            <form id="buy-form" class="logged-in" method="post">
+                <button type="submit">Buy</button>
+            </form>
+        </div>
+
+        <div id="modify" class="popup">
+            <button onclick="togglePopup('modify')" class="close">X</button>
+
+            Modify pixel
+
+            <form id="modify-form" method="post">
+                <div class="data">
+                    <label>Price</label>
+                    <input type="number" name="price" id="price" required />
+                </div>
+
+                <div>
+                    <label>Red</label>
+                    <input type="range" name="red" required />
+                </div>
+
+                <div>
+                    <label>Green</label>
+                    <input type="range" name="green" required />
+                </div>
+
+                <div>
+                    <label>Blue</label>
+                    <input type="range" name="blue" required />
+                </div>
+
+                <div>
+                    <label>Description</label>
+                    <input type="text" name="description" required />
+                </div>
+
+                <button type="submit">Modify</button>
+            </form>
+        </div>
    </body>
 </html>
--- a/src/main/webapp/index2.html
+++ b/src/main/webapp/index2.html
@ -1,260 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-    <head>
-        <meta charset="utf-8" />
-        <title>Pixel</title>
-        <link rel="stylesheet" href="css/utils.css" />
-        <link rel="stylesheet" href="css/title-bar.css" />
-        <link rel="stylesheet" href="css/profil.css" />
-        <link rel="stylesheet" href="css/pixels.css" />
-        <link rel="stylesheet" href="css/wallet.css" />
-        <link rel="stylesheet" href="css/mypixel.css" />
-        <link rel="stylesheet" href="css/buypixel.css" />
-        <script>
-            function setMenu() {
-                if (document.getElementById("show-menu").checked) {
-                    document.getElementById("show-menu").checked = false;
-                } else {
-                    document.getElementById("show-menu").checked = true;
-                    document.getElementById("show-wallet").checked = false;
-                    document.getElementById("show-mypixel").checked = false;
-                    document.getElementById("show-buypixel").checked = false;
-                    document.getElementById("show-settings").checked = false;
-                }
-            }
-            function setWallet() {
-                document.getElementById("show-menu").checked = false;
-                document.getElementById("show-wallet").checked = true;
-                document.getElementById("show-mypixel").checked = false;
-                document.getElementById("show-buypixel").checked = false;
-                document.getElementById("show-settings").checked = false;
-            }
-            function setMypixel() {
-                document.getElementById("show-menu").checked = false;
-                document.getElementById("show-wallet").checked = false;
-                document.getElementById("show-mypixel").checked = true;
-                document.getElementById("show-buypixel").checked = false;
-                document.getElementById("show-settings").checked = false;
-            }
-            function setBuypixel() {
-                document.getElementById("show-menu").checked = false;
-                document.getElementById("show-wallet").checked = false;
-                document.getElementById("show-mypixel").checked = false;
-                document.getElementById("show-buypixel").checked = true;
-                document.getElementById("show-settings").checked = false;
-            }
-            function setSettings() {
-                document.getElementById("show-menu").checked = false;
-                document.getElementById("show-wallet").checked = false;
-                document.getElementById("show-mypixel").checked = false;
-                document.getElementById("show-buypixel").checked = false;
-                document.getElementById("show-settings").checked = true;
-            }
-        </script>
-        <script type="text/javascript" src="pixels.js"></script>
-    </head>
-
-    <body>
-        <div class="title-bar">
-            <div class="title"><img src="logo.png" /> Pixels</div>
-            <div class="profil">
-                <input type="checkbox" id="show-menu" class="show" />
-                <input type="checkbox" id="show-wallet" class="show" />
-                <input type="checkbox" id="show-mypixel" class="show" />
-                <input type="checkbox" id="show-buypixel" class="show" />
-                <input type="checkbox" id="show-settings" class="show" />
-
-                <label class="menu-btn" onclick="setMenu()">Menu</label>
-                <div class="username">My name is Amogus</div>
-
-                <div class="menu-container">
-                    <label for="show-menu" class="close-btn" title="close"
-                        >X</label
-                    >
-                    <div class="text">Menu</div>
-                    <div>
-                        <label class="wallet-btn" onclick="setWallet()"
-                            >Wallet</label
-                        >
-                        <label class="mypixel-btn" onclick="setMypixel()"
-                            >My pixels</label
-                        >
-                        <label class="buypixel-btn" onclick="setBuypixel()"
-                            >Buy pixel</label
-                        >
-                        <label class="settings-btn" onclick="setSettings()"
-                            >Settings</label
-                        >
-                    </div>
-                </div>
-
-                <div class="wallet-container">
-                    <label for="show-wallet" class="close-btn" title="close"
-                        >X</label
-                    >
-                    <div class="text">Wallet</div>
-                    <br />
-                    <div class="solde"></div>
-                    <form action="pay" method="post">
-                        <div class="data">
-                            <label>Amount</label>
-                            <input type="number" name="amount" required />
-                        </div>
-                        <div class="data">
-                            <label>Card number</label>
-                            <input type="number" name="card" required />
-                        </div>
-                        <div class="data">
-                            <label>Expiry date</label>
-                            <input type="month" name="date" required />
-                        </div>
-                        <div class="btn">
-                            <button type="submit">Pay</button>
-                        </div>
-                    </form>
-                </div>
-                <div class="mypixel-container">
-                    <label for="show-mypixel" class="close-btn" title="close"
-                        >X</label
-                    >
-                    <div class="text">My pixels</div>
-                    <br />
-                    <div class="solde"></div>
-                    <div id="color"></div>
-                    <div id="pixel-index"></div>
-                    (
-                    <div id="user-pixel-index"></div>
-                    )
-                    <form action="modify" method="post">
-                        <div class="data">
-                            <label>Price</label>
-                            <input
-                                type="number"
-                                name="price"
-                                id="price"
-                                required
-                            />
-                        </div>
-                        <div class="data">
-                            <label>Red</label>
-                            <input
-                                type="range"
-                                name="red"
-                                id="red"
-                                oninput="updateUserColorPreview()"
-                                required
-                            />
-                        </div>
-                        <div class="data">
-                            <label>Green</label>
-                            <input
-                                type="range"
-                                name="green"
-                                id="green"
-                                oninput="updateUserColorPreview()"
-                                required
-                            />
-                        </div>
-                        <div class="data">
-                            <label>Blue</label>
-                            <input
-                                type="range"
-                                name="blue"
-                                id="blue"
-                                oninput="updateUserColorPreview()"
-                                required
-                            />
-                        </div>
-                        <div class="data">
-                            <label>Description</label>
-                            <input
-                                type="text"
-                                name="desc"
-                                id="description"
-                                required
-                            />
-                        </div>
-                        <div class="btn">
-                            <button type="submit">Modify</button>
-                        </div>
-                    </form>
-                    <div>
-                        <div class="btn">
-                            <button onclick="previousUserPixel()">
-                                Previous
-                            </button>
-                        </div>
-                        <div class="btn">
-                            <button onclick="nextUserPixel()">Next</button>
-                        </div>
-                    </div>
-                </div>
-                <div class="buypixel-container">
-                    <label for="show-buypixel" class="close-btn" title="close"
-                        >X</label
-                    >
-                    <div class="text">Buy pixel</div>
-                    <br />
-                    <form action="modify" method="post">
-                        <div class="solde"></div>
-                        <div class="data">
-                            <label>Index</label>
-                            <input
-                                type="number"
-                                name="index"
-                                id="buy-pixel-index"
-                                required
-                            />
-                        </div>
-                        <div class="data">
-                            <label>Owner</label>
-                            <div id="buy-pixel-owner"></div>
-                        </div>
-                        <div class="data">
-                            <label>Description</label>
-                            <div id="buy-pixel-description"></div>
-                        </div>
-                        <div class="data">
-                            <label>Price</label>
-                            <div id="buy-pixel-price"></div>
-                        </div>
-                        <div class="btn">
-                            <button type="submit">Buy</button>
-                        </div>
-                    </form>
-                    <div>
-                        <div class="btn">
-                            <button onclick="previousBuyPixel()">
-                                Previous
-                            </button>
-                        </div>
-                        <div class="btn">
-                            <button onclick="nextBuyPixel()">Next</button>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="settings-container">
-                    <label for="show-settings" class="close-btn" title="close"
-                        >X</label
-                    >
-                    <div class="text">Settings</div>
-                </div>
-            </div>
-        </div>
-        <div class="pixel-container">
-            <table id="pixelTable">
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-                <tr></tr>
-            </table>
-        </div>
-    </body>
-</html>
--- a/src/main/webapp/js/loaded.js
+++ b/src/main/webapp/js/loaded.js
@ -1,19 +1,21 @@
+// 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
    document.forms["login-form"].addEventListener("submit", (event) => {
        event.preventDefault();

        fetch(event.target.action, {
            method: "POST",
            body: new URLSearchParams(new FormData(event.target)),
-        }).then((resp) => {
+        }).then(async (resp) => {
            if (resp.ok) {
                userLogin();
-                console.log("logged in !");
-                toggleLoginPopup();
+                togglePopup("login");
            }
        });
    });

+    // permet d'intercepter la requête post du formulaire et de la changer un peu
    document.forms["signup-form"].addEventListener("submit", (event) => {
        event.preventDefault();

@ -23,12 +25,15 @@ function pageLoaded() {
        }).then((resp) => {
            if (resp.ok) {
                userLogin();
-                console.log("signed up ! (and logged in)");
-                toggleSignupPopup();
+                togglePopup("signup");
            }
        });
    });

-    updatePixelsJSON();
-    setInterval(updatePixelsJSON, 10000);
+    updatePixelGrid();
+    setInterval(updatePixelGrid, 10000);
+
+    if (localStorage.getItem("logged")) {
+        userLogin();
+    }
 }
--- a/src/main/webapp/js/login-signup.js
+++ b/src/main/webapp/js/login-signup.js
@ -1,54 +0,0 @@
-function toggleLoginPopup() {
-    signup = document.getElementById("signup");
-    signup.style.display = "none";
-
-    toggleElement("login");
-}
-
-function toggleSignupPopup() {
-    login = document.getElementById("login");
-    login.style.display = "none";
-
-    toggleElement("signup");
-}
-
-function toggleElement(id) {
-    element = document.getElementById(id);
-    if (element.style.display === "none" || element.style.display === "") {
-        element.style.display = "unset";
-    } else {
-        element.style.display = "none";
-    }
-}
-
-function userLogin() {
-    let elements = document.getElementsByClassName("logged-out");
-    for (element of elements) {
-        element.style.display = "none";
-    }
-
-    elements = document.getElementsByClassName("logged-in");
-    for (element of elements) {
-        element.style.display = "flex";
-    }
-}
-
-function userLogout() {
-    fetch("/api/user/logout", {
-        method: "POST",
-    }).then((resp) => {
-        if (resp.ok) {
-            let elements = document.getElementsByClassName("logged-out");
-            for (element of elements) {
-                element.style.display = "flex";
-            }
-
-            elements = document.getElementsByClassName("logged-in");
-            for (element of elements) {
-                element.style.display = "none";
-            }
-
-            console.log("logged out");
-        }
-    });
-}
--- a/src/main/webapp/js/old.js
+++ b/src/main/webapp/js/old.js
@ -1,224 +0,0 @@
-//////////////////
-// 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();
--- a/src/main/webapp/js/pixels.js
+++ b/src/main/webapp/js/pixels.js
@ -1,12 +1,15 @@
-let urlPixel = "http://localhost:8080/api/pixel";
+let urlPixel = "http://localhost:8080/api/pixel/";

-const updatePixelsJSON = async () => {
-    reponse = await fetch(urlPixel);
-    pixelsJSON = await reponse.json();
-    setPixels();
+const updatePixelGrid = async () => {
+    fetch(urlPixel).then(async (resp) => {
+        if (resp.ok) {
+            json = await resp.json();
+            setPixels(json);
+        }
+    });
 };

-function setPixels() {
+function setPixels(json) {
    var table = document.getElementById("pixels");
    var num_rows = table.rows.length;

@ -14,15 +17,17 @@ function setPixels() {
        table.rows[i].innerHTML = "";
    }

-    for (i in pixelsJSON) {
-        var pixel = pixelsJSON[i];
+    for (i in json) {
+        var pixel = json[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 +
-            '">' +
+            '" onclick="pixelClick(' +
+            pixel.id +
+            ')">' +
            '<div class="info-pixel">' +
            '<div class="username">' +
            pixel.owner_username +
@ -35,3 +40,39 @@ function setPixels() {
            "</td>";
    }
 }
+
+function pixelClick(id) {
+    fetch(urlPixel + id).then(async (resp) => {
+        if (resp.ok) {
+            pixel = await resp.json();
+
+            fetch(urlUser).then(async (resp) => {
+                if (resp.ok) {
+                    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");
+                    }
+                }
+            });
+        }
+    });
+}
--- a/src/main/webapp/js/user.js
+++ b/src/main/webapp/js/user.js
@ -0,0 +1,61 @@
+let urlUser = "http://localhost:8080/api/user";
+let urlLogout = "http://localhost:8080/api/user/logout";
+
+function togglePopup(id) {
+    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 {
+            popup.style.display = "none";
+        }
+    }
+}
+async function userLogin() {
+    fetch(urlUser).then(async (resp) => {
+        if (resp.ok) {
+            user = await resp.json();
+
+            username = document.getElementById("username");
+            username.innerHTML = user.user;
+
+            let elements = document.getElementsByClassName("logged-out");
+            for (element of elements) {
+                element.style.display = "none";
+            }
+
+            elements = document.getElementsByClassName("logged-in");
+            for (element of elements) {
+                element.style.display = "flex";
+            }
+
+            localStorage.setItem("logged", true);
+            console.log("logged in");
+        }
+    });
+}
+
+function userLogout() {
+    fetch(urlLogout, {
+        method: "POST",
+    }).then((resp) => {
+        if (resp.ok) {
+            let elements = document.getElementsByClassName("logged-out");
+            for (element of elements) {
+                element.style.display = "flex";
+            }
+
+            elements = document.getElementsByClassName("logged-in");
+            for (element of elements) {
+                element.style.display = "none";
+            }
+
+            localStorage.setItem("logged", false);
+            console.log("logged out");
+        }
+    });
+}