feat: des trucs

Co-authored-by: Laureηt <Laurent2916@users.noreply.github.com> Co-authored-by: pejour <pejour@users.noreply.github.com> Co-authored-by: Tom Heurtebise <theurt@users.noreply.github.com>
2022-05-25 16:45:37 +02:00 · 2022-05-25 16:45:37 +02:00 · 2de9e4e5fa
parent 70e24f39f5
commit 2de9e4e5fa
11 changed files with 359 additions and 75 deletions
--- a/src/main/java/com/pixels/adapters/UserAdapter.java
+++ b/src/main/java/com/pixels/adapters/UserAdapter.java
@ -22,7 +22,6 @@ public class UserAdapter implements JsonSerializer<User> {
        JsonObject json = new JsonObject();

        json.addProperty("user", src.getUsername());
-        json.addProperty("email", src.getEmail());
        json.addProperty("balance", src.getBalance());

        List<Long> list = new ArrayList<>();
--- a/src/main/java/com/pixels/beans/User.java
+++ b/src/main/java/com/pixels/beans/User.java
@ -25,12 +25,6 @@ public class User implements Serializable {
    @NotBlank
    private String username;

-    // addresse mail de l'utilisateur
-    @NonNull
-    @NotBlank
-    @Column(unique = true)
-    private String email;
-
    // mot de passe hashé en sha256
    @NonNull
    @NotBlank
@ -44,11 +38,11 @@ public class User implements Serializable {
    @NotNull
    private Integer balance = 0;

+    @Column(unique = true)
    private transient String sessionID;

-    public User(String username, String email, String password) {
+    public User(String username, String password) {
        this.username = username;
-        this.email = email;
        this.password = Hash.sha256(password);
    }

--- a/src/main/java/com/pixels/services/PixelService.java
+++ b/src/main/java/com/pixels/services/PixelService.java
@ -33,7 +33,7 @@ public class PixelService {
    @PersistenceContext
    private EntityManager em;

-    Gson gson = new GsonBuilder()
+    private final Gson gson = new GsonBuilder()
            .registerTypeAdapter(Pixel.class, new PixelAdapter())
            .registerTypeAdapter(User.class, new UserAdapter())
            .create();
@ -83,21 +83,30 @@ public class PixelService {
        User user = User.fromSessionID(cookie.getValue(), em);

        if (user.getBalance() >= pixel.getPrice() && pixel_json.getPrice() > pixel.getPrice()) {
+            // on récupère l'ancien owner
+            User old_owner = pixel.getOwner();
+
            // on update le pixel
            pixel.setOwner(user);
            pixel.setColor(pixel_json.getColor());
            pixel.setDescription(pixel_json.getDescription());
            pixel.setPrice(pixel_json.getPrice());

+            //Si le user possède le pixel on le débite pas
+            if (old_owner.getUsername().equals(user.getUsername())){
                // on débite le user
                user.setBalance(user.getBalance() - pixel_json.getPrice());

+                // on crédite l'ancien owner
+                old_owner.setBalance(old_owner.getBalance() + pixel_json.getPrice());
+            }
+
            // on ajoute la transaction
            Date now = new Date(System.currentTimeMillis());
            Transaction new_transaction = new Transaction(now, pixel);
            em.persist(new_transaction);

-            // on update le pixel dans la db
+            // on commit les modifs dans la db
            em.merge(pixel);
            em.merge(user);
        }
--- a/src/main/java/com/pixels/services/UserService.java
+++ b/src/main/java/com/pixels/services/UserService.java
@ -14,6 +14,7 @@ import javax.ws.rs.NotFoundException;
 import javax.ws.rs.POST;
 import javax.ws.rs.Path;
 import javax.ws.rs.PathParam;
+import javax.ws.rs.FormParam;
 import javax.ws.rs.Produces;
 import javax.ws.rs.core.Cookie;
 import javax.ws.rs.core.MediaType;
@ -34,13 +35,24 @@ public class UserService {

    private final Logger LOGGER = Logger.getLogger("UserService");

-    Gson gson = new GsonBuilder()
+    private final Gson gson = new GsonBuilder()
            .registerTypeAdapter(Pixel.class, new PixelAdapter())
            .registerTypeAdapter(User.class, new UserAdapter())
            .create();

    @GET
    @Produces(MediaType.APPLICATION_JSON)
+    public String myself(@CookieParam("JSESSIONID") Cookie cookie) {
+        // on trouve l'utilisateur connecté via son sessionID
+        User user = User.fromSessionID(cookie.getValue(), em);
+
+        // on renvoie les informations
+        return gson.toJson(user);
+    }
+
+    @GET
+    @Path("list")
+    @Produces(MediaType.APPLICATION_JSON)
    public String list() {
        TypedQuery<User> query = em.createNamedQuery("User.list", User.class);
        return gson.toJson(query.getResultList());
@ -61,15 +73,17 @@ public class UserService {

    @POST
    @Path("signup")
-    @Consumes(MediaType.APPLICATION_JSON)
-    public void signup(@CookieParam("JSESSIONID") Cookie cookie, String json) {
-        User json_user = gson.fromJson(json, User.class);
-        User new_user = new User(
-                json_user.getUsername(),
-                json_user.getEmail(),
-                json_user.getPassword());
+    @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
+    public void signup(@CookieParam("JSESSIONID") Cookie cookie, @FormParam("username") String username, @FormParam("password") String password) {
+        // on créé un utilisateur
+        User new_user = new User(username, password);
+
+        // on associe aussi le sessionID de l'utilisateur
        new_user.setSessionID(cookie.getValue());
+
+        // on commit les modifs dans la db
        em.persist(new_user);
+
        LOGGER.info("new user: " + new_user.getUsername());
    }

@ -79,8 +93,9 @@ public class UserService {
    public void login(@CookieParam("JSESSIONID") Cookie cookie, String json) {
        User user;
        try {
-            // si on trouve l'utilsateur via son sessionID
+            // si on trouve l'utilisateur via son sessionID
            user = User.fromSessionID(cookie.getValue(), em);
+
            LOGGER.info(user.getUsername() + " already logged in");
            // TODO: renvoyer un json avec les creds
        } catch (NoResultException e) {
@ -92,8 +107,12 @@ public class UserService {

            // si les identifiants sont valides
            if (user.validPassword(json_user.getPassword())) {
+                // on enregistre son sessionID
                user.setSessionID(cookie.getValue());
+
+                // on commit les modifs dans la db
                em.merge(user);
+
                LOGGER.info(user.getUsername() + " logged in");
            } else {
                LOGGER.info("incorrect creds for " + user.getUsername());
@ -105,8 +124,15 @@ public class UserService {
    @Path("logout")
    public void logout(@CookieParam("JSESSIONID") Cookie cookie) {
        try {
+            // on trouve l'utilisateur connecté via son sessionID
            User user = User.fromSessionID(cookie.getValue(), em);
+
+            // on supprime le sessionID
            user.setSessionID(null);
+
+            // on commit les modifs dans la db
+            em.merge(user);
+
            LOGGER.info(user.getUsername() + " logged out");
        } catch (NoResultException e) {
            LOGGER.info("user not logged in, cannot logout");
--- a/src/main/webapp/buy_pixel.js
+++ b/src/main/webapp/buy_pixel.js
@ -0,0 +1,61 @@
+var urlPixel = "http://localhost:8080/api/pixel";
+
+// var pixelsJSON;
+
+// const updatePixelsJSON = async () => {
+//     var reponse = await fetch(urlPixel);
+//     pixelsJSON = await reponse.json();
+// }
+
+// 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 previousUserPixel() {
+    var pixel_index = document.getElementById("buy-pixel-index");
+
+    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;
+}
+
+// updatePixelsJSON();
+initBuyPixel();
+
+// setInterval(updatePixelsJSON, 10000);
+
--- a/src/main/webapp/buypixel.css
+++ b/src/main/webapp/buypixel.css
@ -0,0 +1,89 @@
+.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/index.html
+++ b/src/main/webapp/index.html
@ -35,7 +35,7 @@
                <div class="text">
                    Login
                </div>
-                <form action="login" method="post">
+                <form action="api/user/login" method="post">
                    <div class="data">
                        <label>Nickname</label>
                        <input type="text" name="username" required>
@ -62,7 +62,7 @@
                <div class="text">
                    Signup
                </div>
-                <form action="signup" method="post">
+                <form action="api/user/signup" method="post">
                    <div class="data">
                        <label>Nickname</label>
                        <input type="text" name="username" required>
--- a/src/main/webapp/index2.html
+++ b/src/main/webapp/index2.html
@ -10,6 +10,7 @@
    <link rel="stylesheet" href="pixels.css">
    <link rel="stylesheet" href="wallet.css">
    <link rel="stylesheet" href="mypixel.css">
+    <link rel="stylesheet" href="buypixel.css">
    <script>
        function setMenu() {
            if (document.getElementById("show-menu").checked) {
@ -18,6 +19,7 @@
                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;
            }
        }
@ -25,18 +27,28 @@
            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>
@ -54,6 +66,7 @@
            <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>
@ -67,6 +80,7 @@
                <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>
@ -96,42 +110,76 @@
                    </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 id="color"></div>
+                <div id="pixel-index"></div>
+                (<div id="user-pixel-index"></div>)
                <form action="modify" method="post">
-                    <div class="data">
-                        <label>Index</label>
-                        <input class="color" type="number" name="index" id="color" required>
-                    </div>
                    <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="updateColor()" required>
+                        <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="updateColor()" required>
+                        <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="updateColor()" required>
+                        <input type="range" name="blue" id="blue" oninput="updateUserColorPreview()" required>
                    </div>
                    <div class="data">
                        <label>Description</label>
-                        <input type="text" name="desc" onchange="updateColor()" id="description" required>
+                        <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="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="previousPixel()">Previous</button>
@ -165,6 +213,7 @@
        </table>
    </div>
    <script type="text/javascript" src="modify_pixel.js"></script>
+    <script type="text/javascript" src="buy_pixel.js"></script>
 </body>

 </html>
--- a/src/main/webapp/modify_pixel.js
+++ b/src/main/webapp/modify_pixel.js
@ -1,7 +1,18 @@
-var url = "http://localhost:8080/api/pixel";
+var urlPixel = "http://localhost:8080/api/pixel";
+var urlUser = "http://localhost:8080/api/user";

-var reponse;
 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 hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@ -13,68 +24,82 @@ function hexToRgb(hex) {
  } : null;
 }

-function nextPixel() {
-    var index = document.getElementById("color").value - 1;
+// Initialize pixel index
+function initUserPixel() {
+    var user_pixel_index = 0;
+    var pixel_index = userJSON.pixels[user_pixel_index].id - 1;

-    var table = document.getElementById("pixelTable");
-    var num_rows = table.rows.length;
+    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
+    document.getElementById("pixel-index").innerHTML = pixel_index;

-    index++;
-    if (index > num_rows * num_rows - 1) {
-        index = 0;
+    updatePixelPreview();
 }

-    document.getElementById("color").value = index + 1;
+// Compute next pixel index
+function nextUserPixel() {
+    var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);

-    updateInfo();
+    user_pixel_index++;
+    if (user_pixel_index > userJSON.pixels.length - 1) {
+        user_pixel_index = 0;
    }

-function previousPixel() {
-    var index = document.getElementById("color").value - 1;
+    var pixel_index = userJSON.pixels[user_pixel_index].id - 1;

-    var table = document.getElementById("pixelTable");
-    var num_rows = table.rows.length;
+    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
+    document.getElementById("pixel-index").innerHTML = pixel_index;

-    index--;
-    if (index < 0) {
-        index = num_rows * num_rows - 1;
+    updatePixelPreview();
 }

-    document.getElementById("color").value = index + 1;
+// Compute previous pixel index
+function previousUserPixel() {
+    var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);

-    updateInfo();
+    user_pixel_index--;
+    if (user_pixel_index < 0) {
+        user_pixel_index = userJSON.pixels.length - 1;
    }

-function updateInfo() {
+    var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
+
+    document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
+    document.getElementById("pixel-index").innerHTML = pixel_index;
+
+    updatePixelPreview();
+}
+
+function updatePixelPreview() {
    var colorDiv = document.getElementById("color");
-    var index = colorDiv.value - 1;

+    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");

-    console.log(pixel.color);
    var color = hexToRgb(pixel.color);
-    console.log(color);

    red.value = color.r;
    green.value = color.g;
    blue.value = color.b;
-    colorDiv.style.color = 'rgb(' + (255 - color.r) + ',' + (255 - color.g) + ',' + (255 - color.b) + ')';
-    colorDiv.style.background = 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')';

+    updateUserColorPreview();
+
+    // Update description
    var description = document.getElementById("description");
    description.value = pixel.description;

-    updateColor();
 }

-function updateColor() {
+// 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;
@ -83,13 +108,11 @@ function updateColor() {
    color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
 }

-const updatePixelsJSON = async () => {
-    reponse = await fetch(url);
-    pixelsJSON = await reponse.json();
-}
-
 updatePixelsJSON();
-setInterval(updatePixelsJSON, 10000);
+updateUserJSON();
+
+initUserPixel();
+
+setInterval(updatePixelsJSON, 10000);
+setInterval(updateUserJSON, 10000);

-updateColor();
-updateInfo();
--- a/src/main/webapp/mypixel.css
+++ b/src/main/webapp/mypixel.css
@ -84,6 +84,6 @@ form .signup-login-link {
    text-align: center;
 }

-.color {
+#color {
    min-height: 20px;
 }
--- a/src/main/webapp/profil.css
+++ b/src/main/webapp/profil.css
@ -102,6 +102,39 @@
    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;
@ -139,6 +172,7 @@

 .wallet-btn,
 .mypixel-btn,
+.buypixel-btn,
 .settings-btn {
    background: #fff;
    margin: 10px 10px;