From e4f3edcc04bce22d159f5edb65a436d7fb8992d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luc=C3=A0s?= <vabrelucas@gmail.com>
Date: Mon, 29 Apr 2024 17:31:22 +0200
Subject: [PATCH] feat(DevWeb): Add CSS and Image for play-card display

---
 .../src/main/webapp/WEB-INF/pages/game.jsp    | 525 +++++++++---------
 .../src/main/webapp/static/css/card.css       | 157 ++++++
 .../src/main/webapp/static/img/color/club.svg |   4 +
 .../main/webapp/static/img/color/diamond.svg  |   5 +
 .../main/webapp/static/img/color/heart.svg    |   5 +
 .../main/webapp/static/img/color/spade.svg    |   7 +
 .../webapp/static/img/value/black_ace.svg     |   3 +
 .../webapp/static/img/value/black_eight.svg   |   3 +
 .../webapp/static/img/value/black_five.svg    |   3 +
 .../webapp/static/img/value/black_four.svg    |   3 +
 .../webapp/static/img/value/black_jack.svg    |   3 +
 .../webapp/static/img/value/black_king.svg    |   3 +
 .../webapp/static/img/value/black_nine.svg    |   3 +
 .../webapp/static/img/value/black_queen.svg   |   3 +
 .../webapp/static/img/value/black_seven.svg   |   3 +
 .../webapp/static/img/value/black_six.svg     |   3 +
 .../webapp/static/img/value/black_ten.svg     |   3 +
 .../webapp/static/img/value/black_three.svg   |   3 +
 .../webapp/static/img/value/black_two.svg     |   3 +
 .../main/webapp/static/img/value/red_ace.svg  |   3 +
 .../webapp/static/img/value/red_eight.svg     |   3 +
 .../main/webapp/static/img/value/red_five.svg |   3 +
 .../main/webapp/static/img/value/red_four.svg |   3 +
 .../main/webapp/static/img/value/red_jack.svg |   3 +
 .../main/webapp/static/img/value/red_king.svg |   3 +
 .../main/webapp/static/img/value/red_nine.svg |   3 +
 .../webapp/static/img/value/red_queen.svg     |   3 +
 .../webapp/static/img/value/red_seven.svg     |   3 +
 .../main/webapp/static/img/value/red_six.svg  |   3 +
 .../main/webapp/static/img/value/red_ten.svg  |   3 +
 .../webapp/static/img/value/red_three.svg     |   3 +
 .../main/webapp/static/img/value/red_two.svg  |   3 +
 32 files changed, 526 insertions(+), 255 deletions(-)
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/css/card.css
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/color/club.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/color/diamond.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/color/heart.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/color/spade.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ace.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_eight.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_five.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_four.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_jack.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_king.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_nine.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_queen.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_seven.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_six.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ten.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_three.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/black_two.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ace.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_eight.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_five.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_four.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_jack.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_king.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_nine.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_queen.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_seven.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_six.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ten.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_three.svg
 create mode 100644 S2/DevWeb/Projet/src/main/webapp/static/img/value/red_two.svg

diff --git a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
index b838683..3ac4ac1 100644
--- a/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
+++ b/S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/game.jsp
@@ -1,154 +1,160 @@
+<%@ page import="uppa.project.database.pojo.Card" %>
 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 <%@taglib prefix="layout" tagdir="/WEB-INF/tags/layouts" %>
 <%@taglib prefix="component" tagdir="/WEB-INF/tags/components" %>
 
+
 <layout:base>
+    <jsp:attribute name="head">
+        <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/card.css">
+    </jsp:attribute>
+    <jsp:body>
 
-    <component:hero>
+        <component:hero>
 
-        <div class="columns" id="gameWaiting">
-            <div class="column">
-                <component:card title="Liste des joueurs dans la partie">
+            <div class="columns" id="gameWaiting">
+                <div class="column">
+                    <component:card title="Liste des joueurs dans la partie">
                     <jsp:attribute name="footer">
                         <a data-target="#user-list-modal" class="card-footer-item modal-trigger">Ajouter</a>
                         <a id="start-game-button" class="is-primary card-footer-item">Démarrer</a>
                     </jsp:attribute>
-                    <jsp:body>
-                        <table id="playerList" class="table is-fullwidth">
-                            <thead>
-                            <tr><td>Joueur</td></tr>
-                            </thead>
-                            <tbody></tbody>
-                        </table>
-                    </jsp:body>
-                </component:card>
-            </div>
-            <div class="column">
-                <component:card title="Partie n°${pageContext.request.getParameter('id')}">
-                    <jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
+                        <jsp:body>
+                            <table id="playerList" class="table is-fullwidth">
+                                <thead>
+                                <tr><td>Joueur</td></tr>
+                                </thead>
+                                <tbody></tbody>
+                            </table>
+                        </jsp:body>
+                    </component:card>
+                </div>
+                <div class="column">
+                    <component:card title="Partie n°${pageContext.request.getParameter('id')}">
+                        <jsp:useBean id="game" scope="request" type="uppa.project.database.pojo.Game"/>
 
-                    <p><strong>Créé le:</strong> ${game.createdAt.toLocaleString()}</p>
-                    <p><strong>Difficulté:</strong> ${game.difficulty}</p>
-                    <p><strong>Nombre de tours:</strong> ${game.nbRounds}</p>
-                    <p><strong>Nombre de couleurs:</strong> ${game.nbColors}</p>
-                    <p><strong>Valeurs par couleur:</strong> ${game.nbValuesPerColor}</p>
-                </component:card>
-            </div>
-        </div>
-        <div id="gameStarted" style="display:none;">
-            <div class="columns" id="otherCards"></div>
-            <div class="columns">
-                <div class="column" id="deck"></div>
-                <div class="column" id="choice">
-                    <button class="button" data-value="COLOR_VALUE">Même couleur et valeur</button>
-                    <button class="button" data-value="VALUE">Même valeur</button>
-                    <button class="button" data-value="COLOR">Même couleur</button>
-                    <button class="button" data-value="NONE">Aucun</button>
+                        <p><strong>Créé le:</strong> ${game.createdAt.toLocaleString()}</p>
+                        <p><strong>Difficulté:</strong> ${game.difficulty}</p>
+                        <p><strong>Nombre de tours:</strong> ${game.nbRounds}</p>
+                        <p><strong>Nombre de couleurs:</strong> ${game.nbColors}</p>
+                        <p><strong>Valeurs par couleur:</strong> ${game.nbValuesPerColor}</p>
+                    </component:card>
                 </div>
             </div>
-            <div class="columns">
-                <div class="column" id="myCard">
+            <div id="gameStarted" style="display:none;">
+                <div class="columns" id="otherCards"></div>
+                <div class="columns">
+                    <div class="column" id="deck"></div>
+                    <div class="column" id="choice">
+                        <button class="button" data-value="COLOR_VALUE">Même couleur et valeur</button>
+                        <button class="button" data-value="VALUE">Même valeur</button>
+                        <button class="button" data-value="COLOR">Même couleur</button>
+                        <button class="button" data-value="NONE">Aucun</button>
+                    </div>
+                </div>
+                <div class="columns">
+                    <div class="column" id="myCard">
 
+                    </div>
                 </div>
             </div>
+        </component:hero>
+
+        <!-- Liste des utilisateurs dans le lobby -->
+        <div id="user-list-modal" class="modal">
+            <div class="modal-background"></div>
+            <div class="modal-card">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Liste des utilisateurs connectés</p>
+                    <button class="delete" aria-label="close"></button>
+                </header>
+                <section class="modal-card-body">
+                    <table class="table is-fullwidth">
+                        <thead>
+                        <tr>
+                            <th>Utilisateur</th>
+                            <th>Nombre de parties jouées</th>
+                            <th>Nombre de victoires</th>
+                            <th>Clics corrects</th>
+                            <th>Clics rapides</th>
+                            <th>Action</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+
+                        </tbody>
+                    </table>
+                </section>
+                <footer class="modal-card-foot">
+                    <button class="button is-success">Fermer</button>
+                </footer>
+            </div>
         </div>
-    </component:hero>
 
-    <!-- Liste des utilisateurs dans le lobby -->
-    <div id="user-list-modal" class="modal">
-        <div class="modal-background"></div>
-        <div class="modal-card">
-            <header class="modal-card-head">
-                <p class="modal-card-title">Liste des utilisateurs connectés</p>
-                <button class="delete" aria-label="close"></button>
-            </header>
-            <section class="modal-card-body">
-                <table class="table is-fullwidth">
-                    <thead>
-                    <tr>
-                        <th>Utilisateur</th>
-                        <th>Nombre de parties jouées</th>
-                        <th>Nombre de victoires</th>
-                        <th>Clics corrects</th>
-                        <th>Clics rapides</th>
-                        <th>Action</th>
-                    </tr>
-                    </thead>
-                    <tbody>
+        <jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
+        <script defer type="module">
+            // Modal
 
-                    </tbody>
-                </table>
-            </section>
-            <footer class="modal-card-foot">
-                <button class="button is-success">Fermer</button>
-            </footer>
-        </div>
-    </div>
-
-    <jsp:useBean id="user" scope="session" type="uppa.project.database.pojo.User"/>
-    <script defer type="module">
-        // Modal
-
-        // Modal
-        document.querySelectorAll('.modal-trigger').forEach(($el) => {
-            $el.addEventListener('click', () => {
-                const target = $el.dataset.target;
-                const $target = document.querySelector(target);
-                $target.classList.add('is-active');
+            // Modal
+            document.querySelectorAll('.modal-trigger').forEach(($el) => {
+                $el.addEventListener('click', () => {
+                    const target = $el.dataset.target;
+                    const $target = document.querySelector(target);
+                    $target.classList.add('is-active');
+                });
             });
-        });
 
-        const closeModal = ($el) => $el.classList.remove('is-active');
-        const closeAllModals = () => (document.querySelectorAll('.modal') || []).forEach(($modal) => closeModal($modal));
+            const closeModal = ($el) => $el.classList.remove('is-active');
+            const closeAllModals = () => (document.querySelectorAll('.modal') || []).forEach(($modal) => closeModal($modal));
 
-        // Add a click event on various child elements to close the parent modal
-        (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
-            const $target = $close.closest('.modal');
-            $close.addEventListener('click', () => closeModal($target));
-        });
+            // Add a click event on various child elements to close the parent modal
+            (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+                const $target = $close.closest('.modal');
+                $close.addEventListener('click', () => closeModal($target));
+            });
 
-        // Add a keyboard event to close all modals
-        document.addEventListener('keydown', (event) => {
-            if (event.key === "Escape") closeAllModals();
-        });
-    </script>
+            // Add a keyboard event to close all modals
+            document.addEventListener('keydown', (event) => {
+                if (event.key === "Escape") closeAllModals();
+            });
+        </script>
 
-    <script defer type="module">
-        import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
+        <script defer type="module">
+            import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
 
-        let users = [];
+            let users = [];
 
-        function updateUsers() {
-            const $tbody = document.querySelector('#user-list-modal tbody');
-            $tbody.innerHTML = '';
-            users.forEach(user => {
-                const $tr = document.createElement('tr');
-                const $tdUsername = document.createElement('td');
-                const $tdNbPlayedGame = document.createElement('td');
-                const $tdNbWins = document.createElement('td');
-                const $tdRightClick = document.createElement('td');
-                const $tdRapidClick = document.createElement('td');
-                const $tdAction = document.createElement('td');
-                const $button = document.createElement('button');
+            function updateUsers() {
+                const $tbody = document.querySelector('#user-list-modal tbody');
+                $tbody.innerHTML = '';
+                users.forEach(user => {
+                    const $tr = document.createElement('tr');
+                    const $tdUsername = document.createElement('td');
+                    const $tdNbPlayedGame = document.createElement('td');
+                    const $tdNbWins = document.createElement('td');
+                    const $tdRightClick = document.createElement('td');
+                    const $tdRapidClick = document.createElement('td');
+                    const $tdAction = document.createElement('td');
+                    const $button = document.createElement('button');
 
-                $button.classList.add('button', 'is-success');
-                $button.textContent = 'Inviter';
-                $button.addEventListener('click', () => {
-                    const data = {
-                        from: {
-                            id: ${user.id},
-                            username: "${user.username}"
-                        },
-                        to: {...user},
-                        game_id: ${game.id}
-                    };
-                    const message = {
-                        type: "invite",
-                        data: JSON.stringify(data)
-                    };
+                    $button.classList.add('button', 'is-success');
+                    $button.textContent = 'Inviter';
+                    $button.addEventListener('click', () => {
+                        const data = {
+                            from: {
+                                id: ${user.id},
+                                username: "${user.username}"
+                            },
+                            to: {...user},
+                            game_id: ${game.id}
+                        };
+                        const message = {
+                            type: "invite",
+                            data: JSON.stringify(data)
+                        };
 
-                    ws.ws.send(JSON.stringify(message));
-                })
+                        ws.ws.send(JSON.stringify(message));
+                    })
 
 
                     $tdUsername.textContent = user.username;
@@ -195,161 +201,170 @@
             })
             ws.onError((error) => console.error(error));
             ws.onClose(() => console.log("Disconnected from the server"));
-    </script>
+        </script>
 
-    <script type="module" defer>
-        import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
+        <script type="module" defer>
+            import WebsocketToolkit from "${pageContext.request.contextPath}/static/js/WebsocketToolkit.js";
 
-        const url = new URL(window.location.href);
-        url.pathname = "${pageContext.request.contextPath}/ws/game/${game.id}";
-        url.protocol = "ws:";
-        url.searchParams.delete("id");
-
-        const wsgame = new WebsocketToolkit(url);
-        wsgame.onOpen(() => {
-            console.log("Connected to the server (GameWS)")
-
-            const message = {
-                type: "connection",
-                data: JSON.stringify({
-                    id: ${user.id},
-                    username: "${user.username}"
-                })
+            const getCardColorValue = (color) => {
+                return (color === "DIAMONDS" || color === "HEART")
+                    ? "red" : "black"
+                    ;
             }
 
-            wsgame.ws.send(JSON.stringify(message))
-        });
-        wsgame.onMessage("updatePlayerList", (data) => {
-            players = data;
-            updatePlayerList();
-        });
-        wsgame.onMessage("start", (game) => {
-            currentGame = game;
+            const url = new URL(window.location.href);
+            url.pathname = "${pageContext.request.contextPath}/ws/game/${game.id}";
+            url.protocol = "ws:";
+            url.searchParams.delete("id");
 
-            document.querySelector('#gameWaiting').style.display = 'none';
-            document.querySelector('#gameStarted').style.display = 'block';
+            const wsgame = new WebsocketToolkit(url);
+            wsgame.onOpen(() => {
+                console.log("Connected to the server (GameWS)")
 
-            const deck = document.querySelector('#deck');
-            const choice = document.querySelector('#choice');
-            const myCard = document.querySelector('#myCard');
-            const otherCards = document.querySelector('#otherCards');
+                const message = {
+                    type: "connection",
+                    data: JSON.stringify({
+                        id: ${user.id},
+                        username: "${user.username}"
+                    })
+                }
 
-            // Choices
-            choice.querySelectorAll('button').forEach(button => {
-                button.addEventListener('click', () => {
-                    const message = {
-                        type: "click",
-                        data: button.dataset.value
-                    }
-                    wsgame.ws.send(JSON.stringify(message));
-
-                    // Disable buttons
-                    choice.querySelectorAll('button').forEach(button => button.disabled = true);
-                });
+                wsgame.ws.send(JSON.stringify(message))
             });
-
-            // Show other player cards
-            game.players
-                .filter(p => p.user.id !== ${user.id})
-                .forEach(p => {
-                    // Create column in OtherCards
-                    const column = document.createElement('div');
-                    column.classList.add('column');
-                    column.id = 'otherCards-' + p.id;
-
-                    const cardValue = document.createElement('p');
-                    cardValue.textContent = p.currentCard.color + " " + p.currentCard.value;
-
-                    column.appendChild(cardValue);
-                    otherCards.appendChild(column);
+            wsgame.onMessage("updatePlayerList", (data) => {
+                players = data;
+                updatePlayerList();
             });
+            wsgame.onMessage("start", (game) => {
+                currentGame = game;
 
-            // Show my card
-            const myCardValue = document.createElement('p');
-            const me = game.players.find(p => p.user.id === ${user.id});
-            myCardValue.textContent = me.currentCard.color + " " + me.currentCard.value;
+                document.querySelector('#gameWaiting').style.display = 'none';
+                document.querySelector('#gameStarted').style.display = 'block';
 
-            myCard.appendChild(myCardValue);
+                const deck = document.querySelector('#deck');
+                const choice = document.querySelector('#choice');
+                const myCard = document.querySelector('#myCard');
+                const otherCards = document.querySelector('#otherCards');
 
-            // Show deck
-            const deckValue = document.createElement('p');
-            deckValue.textContent = game.currentCard.color + " " + game.currentCard.value;
-            deck.appendChild(deckValue);
-        })
-        wsgame.onMessage("updatePlayer", (player) => {
+                // Choices
+                choice.querySelectorAll('button').forEach(button => {
+                    button.addEventListener('click', () => {
+                        const message = {
+                            type: "click",
+                            data: button.dataset.value
+                        }
+                        wsgame.ws.send(JSON.stringify(message));
 
-        })
-        wsgame.onMessage("end", (game) => {
-            currentGame = game;
-
-            document.querySelector('#gameWaiting').style.display = 'block';
-            document.querySelector('#gameStarted').style.display = 'none';
-        })
-        wsgame.onMessage("nextRound", (game) => {
-            currentGame = game;
-
-            const deck = document.querySelector('#deck');
-            const choice = document.querySelector('#choice');
-            const myCard = document.querySelector('#myCard');
-            const otherCards = document.querySelector('#otherCards');
-
-            choice.querySelectorAll('button').forEach(button => button.disabled = false);
-
-            // Show other player cards
-            game.players
-                .filter(p => p.user.id !== ${user.id})
-                .forEach(p => {
-                    const column = document.querySelector('#otherCards-' + p.id);
-                    column.innerHTML = '';
-
-                    const cardValue = document.createElement('p');
-                    cardValue.textContent = p.currentCard.color + " " + p.currentCard.value;
-
-                    column.appendChild(cardValue);
+                        // Disable buttons
+                        choice.querySelectorAll('button').forEach(button => button.disabled = true);
+                    });
                 });
 
-            // Show my card
-            const myCardValue = document.querySelector('#myCard p');
-            const me = game.players.find(p => p.user.id === ${user.id});
-            myCardValue.textContent = me.currentCard.color + " " + me.currentCard.value;
+                // Show other player cards
+                game.players
+                    .filter(p => p.user.id !== ${user.id})
+                    .forEach(p => {
+                        // Create column in OtherCards
+                        const column = document.createElement('div');
+                        column.classList.add('column');
+                        column.id = 'otherCards-' + p.id;
 
-            // Show deck
-            const deckValue = document.querySelector('#deck p');
-            deckValue.textContent = game.currentCard.color + " " + game.currentCard.value;
-        })
-        wsgame.onError((error) => console.error(error));
-        wsgame.onClose(() => {
-            console.log("Disconnected from the server (GameWS)")
-        });
+                        const cardValue = document.createElement('p');
+                        cardValue.textContent = p.currentCard.color + " " + p.currentCard.value;
 
-        // Game
-        let currentGame;
+                        column.appendChild(cardValue);
+                        otherCards.appendChild(column);
+                    });
 
-        // Player List
-        let players = [];
-        const playerList = document.querySelector('#playerList tbody');
+                // Show my card
+                const myCardValue = document.createElement('p');
+                const me = game.players.find(p => p.user.id === ${user.id});
+                myCardValue.textContent = me.currentCard.color + " " + me.currentCard.value;
 
-        function updatePlayerList() {
-            playerList.innerHTML = '';
-            players.forEach(player => {
-                const tr = document.createElement('tr');
-                const td = document.createElement('td');
-                td.textContent = player.user.username;
-                tr.appendChild(td);
-                playerList.appendChild(tr);
+                myCard.appendChild(myCardValue);
+
+                // Show deck
+                const deckValue = document.createElement('div');
+                deckValue.classList.add("card-play", game.currentCard.color.toLowerCase(), getCardColorValue(game.currentCard.color) + "_" +game.currentCard.value.toLowerCase());
+                deck.appendChild(deckValue);
+            })
+            wsgame.onMessage("updatePlayer", (player) => {
+
+            })
+            wsgame.onMessage("end", (game) => {
+                currentGame = game;
+
+                document.querySelector('#gameWaiting').style.display = 'block';
+                document.querySelector('#gameStarted').style.display = 'none';
+            })
+            wsgame.onMessage("nextRound", (game) => {
+                currentGame = game;
+
+                const deck = document.querySelector('#deck');
+                const choice = document.querySelector('#choice');
+                const myCard = document.querySelector('#myCard');
+                const otherCards = document.querySelector('#otherCards');
+
+                choice.querySelectorAll('button').forEach(button => button.disabled = false);
+
+                // Show other player cards
+                game.players
+                    .filter(p => p.user.id !== ${user.id})
+                    .forEach(p => {
+                        const column = document.querySelector('#otherCards-' + p.id);
+                        column.innerHTML = '';
+
+                        // TODO Update card
+                        // const cardValue = document.createElement('p');
+                        // cardValue.textContent = p.currentCard.color + " " + p.currentCard.value;
+
+                        column.appendChild(cardValue);
+                    });
+
+                // Show my card
+                const myCardValue = document.querySelector('#myCard p');
+                const me = game.players.find(p => p.user.id === ${user.id});
+                myCardValue.textContent = me.currentCard.color + " " + me.currentCard.value;
+
+                // Show deck
+                const deckValue = document.querySelector('#deck p');
+                deckValue.textContent = game.currentCard.color + " " + game.currentCard.value;
+            })
+            wsgame.onError((error) => console.error(error));
+            wsgame.onClose(() => {
+                console.log("Disconnected from the server (GameWS)")
             });
-        }
 
-        // Start Game Button
-        document.querySelector('#start-game-button').addEventListener('click', () => {
-            if (players.length < 2 || players.length > 4) {
-                alert("Il faut entre 2 et 4 joueurs pour démarrer la partie");
-                return;
+            // Game
+            let currentGame;
+
+            // Player List
+            let players = [];
+            const playerList = document.querySelector('#playerList tbody');
+
+            function updatePlayerList() {
+                playerList.innerHTML = '';
+                players.forEach(player => {
+                    const tr = document.createElement('tr');
+                    const td = document.createElement('td');
+                    td.textContent = player.user.username;
+                    tr.appendChild(td);
+                    playerList.appendChild(tr);
+                });
             }
 
-            const message = {type: "start", data: ""}
-            wsgame.ws.send(JSON.stringify(message));
-        });
-    </script>
+            // Start Game Button
+            document.querySelector('#start-game-button').addEventListener('click', () => {
+                if (players.length < 2 || players.length > 4) {
+                    alert("Il faut entre 2 et 4 joueurs pour démarrer la partie");
+                    return;
+                }
 
+                const message = {type: "start", data: ""}
+                wsgame.ws.send(JSON.stringify(message));
+            });
+        </script>
+
+
+    </jsp:body>
 </layout:base>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/css/card.css b/S2/DevWeb/Projet/src/main/webapp/static/css/card.css
new file mode 100644
index 0000000..7c99e4b
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/css/card.css
@@ -0,0 +1,157 @@
+body {
+    background: gray;
+}
+
+.card-play {
+    position: relative;
+    aspect-ratio: 2/3;
+    width: 246px;
+    /*height: 340px;*/
+    background: #F8FAFC;
+    border-radius: 20px;
+
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.card-play::before {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    aspect-ratio: 1/1;
+    width: 65px;
+}
+
+.card-play::after {
+    content: "";
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    aspect-ratio: 1/1;
+    width: 65px;
+    transform: rotate(180deg);
+}
+
+/* Colors */
+
+.spades {
+    background-image: url("../img/color/spade.svg");
+}
+
+.heart {
+    background-image: url("../img/color/heart.svg");
+}
+
+.diamonds {
+    background-image: url("../img/color/diamond.svg");
+}
+
+.clubs {
+    background-image: url("../img/color/club.svg");
+}
+
+/* Values */
+.red_ace::before, .red_ace::after {
+    background-image: url("../img/value/red_ace.svg");
+}
+
+.black_ace::before, .black_ace::after {
+    background-image: url("../img/value/black_ace.svg");
+}
+
+.red_two::before, .red_two::after {
+    background-image: url("../img/value/red_two.svg");
+}
+
+.black_two::before, .black_two::after {
+    background-image: url("../img/value/black_two.svg");
+}
+
+.red_three::before, .red_three::after {
+    background-image: url("../img/value/red_three.svg");
+}
+
+.black_three::before, .black_three::after {
+    background-image: url("../img/value/black_three.svg");
+}
+
+.red_four::before, .red_four::after {
+    background-image: url("../img/value/red_four.svg");
+}
+
+.black_four::before, .black_four::after {
+    background-image: url("../img/value/black_four.svg");
+}
+
+.red_five::before, .red_five::after {
+    background-image: url("../img/value/red_five.svg");
+}
+
+.black_five::before, .black_five::after {
+    background-image: url("../img/value/black_five.svg");
+}
+
+.red_six::before, .red_six::after {
+    background-image: url("../img/value/red_six.svg");
+}
+
+.black_six::before, .black_six::after {
+    background-image: url("../img/value/black_six.svg");
+}
+
+.red_seven::before, .red_seven::after {
+    background-image: url("../img/value/red_seven.svg");
+}
+
+.black_seven::before, .black_seven::after {
+    background-image: url("../img/value/black_seven.svg");
+}
+
+.red_eight::before, .red_eight::after {
+    background-image: url("../img/value/red_eight.svg");
+}
+
+.black_eight::before, .black_eight::after {
+    background-image: url("../img/value/black_eight.svg");
+}
+
+.red_nine::before, .red_nine::after {
+    background-image: url("../img/value/red_nine.svg");
+}
+
+.black_nine::before, .black_nine::after {
+    background-image: url("../img/value/black_nine.svg");
+}
+
+.red_ten::before, .red_ten::after {
+    background-image: url("../img/value/red_ten.svg");
+}
+
+.black_ten::before, .black_ten::after {
+    background-image: url("../img/value/black_ten.svg");
+}
+
+.red_jack::before, .red_jack::after {
+    background-image: url("../img/value/red_jack.svg");
+}
+
+.black_jack::before, .black_jack::after {
+    background-image: url("../img/value/black_jack.svg");
+}
+
+.red_queen::before, .red_queen::after {
+    background-image: url("../img/value/red_queen.svg");
+}
+
+.black_queen::before, .black_queen::after {
+    background-image: url("../img/value/black_queen.svg");
+}
+
+.red_king::before, .red_king::after {
+    background-image: url("../img/value/red_king.svg");
+}
+
+.black_king::before, .black_king::after {
+    background-image: url("../img/value/black_king.svg");
+}
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/color/club.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/color/club.svg
new file mode 100644
index 0000000..3d5205c
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/color/club.svg
@@ -0,0 +1,4 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M79.5123 5.00497C73.9004 5.04972 68.3689 6.34366 63.3194 8.79285C58.2699 11.242 53.8293 14.785 50.3198 19.1644C46.8104 23.5439 44.3203 28.6499 43.0304 34.1118C41.7404 39.5736 41.683 45.2542 42.8623 50.741C33.3747 51.4794 24.5148 55.7698 18.0522 62.7551C11.5896 69.7404 7.99985 78.9065 8 88.4228C8 98.4467 11.982 108.06 19.07 115.148C26.1579 122.236 35.7713 126.218 45.7952 126.218C52.8957 126.218 59.8524 124.217 65.8685 120.446C71.8845 116.674 76.7165 111.285 79.8109 104.894C82.9058 111.284 87.7381 116.673 93.7541 120.444C99.7701 124.214 106.727 126.214 113.827 126.214C118.79 126.214 123.705 125.237 128.29 123.337C132.876 121.438 137.042 118.654 140.552 115.144C144.061 111.635 146.845 107.468 148.745 102.883C150.644 98.2971 151.622 93.3824 151.622 88.419C151.621 78.904 148.031 69.7393 141.57 62.7549C135.108 55.7705 126.25 51.4803 116.763 50.741C117.954 45.2043 117.885 39.4709 116.562 33.9645C115.239 28.458 112.695 23.3193 109.119 18.9281C105.543 14.5369 101.025 11.0055 95.9007 8.59495C90.7761 6.18435 85.1754 4.95996 79.5123 5.00497ZM79.6144 12.8172C84.5421 12.7873 89.4136 13.8641 93.8696 15.968C98.3257 18.072 102.253 21.1495 105.361 24.9736C108.469 28.7976 110.678 33.2706 111.827 38.0626C112.976 42.8547 113.034 47.8434 111.997 52.661C120.262 53.3034 127.98 57.04 133.609 63.1243C139.239 69.2087 142.366 77.193 142.366 85.4823C142.366 89.806 141.515 94.0875 139.861 98.0822C138.206 102.077 135.781 105.707 132.724 108.764C129.667 111.821 126.037 114.246 122.042 115.901C118.048 117.555 113.766 118.406 109.442 118.406C103.257 118.406 97.1972 116.664 91.9565 113.38C86.7158 110.095 82.5065 105.4 79.8109 99.8332C77.1153 105.4 72.906 110.095 67.6653 113.38C62.4246 116.664 56.3645 118.406 50.1795 118.406C45.8558 118.406 41.5743 117.555 37.5796 115.901C33.585 114.246 29.9553 111.821 26.898 108.764C23.8407 105.707 21.4156 102.077 19.7612 98.0822C18.1068 94.0875 17.2556 89.806 17.2561 85.4823C17.2548 77.193 20.3809 69.2082 26.0099 63.1231C31.6389 57.038 39.3564 53.3005 47.6207 52.6572C46.5917 47.872 46.6427 42.9177 47.7699 38.1547C48.8972 33.3918 51.0723 28.9401 54.137 25.1238C57.2017 21.3075 61.0788 18.2227 65.4861 16.0938C69.8934 13.9649 74.7199 12.8455 79.6144 12.8172Z" fill="#18181B"/>
+<path d="M79.811 97.7318C79.811 97.7318 79.811 108.125 67.8072 128.913C43.8035 170.488 31.8035 149.7 79.811 149.7C127.818 149.7 115.815 170.488 91.811 128.913C79.811 108.125 79.811 97.7318 79.811 97.7318ZM79.811 112.646C79.811 112.646 79.811 118.33 86.3722 129.699C99.4985 152.437 106.064 141.068 79.811 141.068C53.5584 141.068 60.1197 152.437 73.2459 129.699C79.811 118.33 79.811 112.646 79.811 112.646ZM79.6636 20.2591C72.2138 20.2974 65.0802 23.2747 59.8135 28.5439C53.0255 35.3319 50.1455 45.0982 52.16 54.4865C45.44 55.0118 39.1244 57.9183 34.3584 62.6843C29.0558 67.9869 26.0737 75.1832 26.0737 82.6817C26.0734 86.3958 26.8049 90.0735 28.2264 93.5048C29.6479 96.936 31.7316 100.054 34.3584 102.679C45.4022 113.723 63.3096 113.723 74.3533 102.679C76.5881 100.444 78.4328 97.851 79.811 95.0068C81.1874 97.8511 83.0309 100.444 85.2648 102.679C90.5675 107.982 97.7637 110.964 105.262 110.964C108.976 110.964 112.654 110.233 116.085 108.811C119.517 107.39 122.634 105.306 125.26 102.679C130.562 97.3727 133.544 90.1803 133.544 82.6817C133.545 78.9677 132.813 75.29 131.392 71.8587C129.97 68.4275 127.887 65.3099 125.26 62.6843C120.494 57.9183 114.178 55.0118 107.458 54.4865C109.476 45.1019 106.596 35.3319 99.8084 28.5439C94.468 23.2034 87.2151 20.2213 79.6636 20.2591ZM79.8903 29.7042C85.8014 29.7233 91.4647 32.0808 95.6434 36.2616C101.018 41.6361 103.301 49.369 101.702 56.7996C107.023 57.2157 112.02 59.5168 115.796 63.289C119.995 67.488 122.353 73.1838 122.353 79.1214C122.353 85.059 119.995 90.7548 115.796 94.9538C111.597 99.1529 105.901 101.511 99.9634 101.511C94.0258 101.511 88.33 99.1529 84.131 94.9538C82.3621 93.1846 80.9019 91.1316 79.811 88.8801C78.7201 91.1316 77.2599 93.1846 75.491 94.9538C71.2919 99.1529 65.5962 101.511 59.6586 101.511C53.7209 101.511 48.0252 99.1529 43.8261 94.9538C39.6271 90.7548 37.2687 85.059 37.2687 79.1214C37.2687 73.1838 39.6271 67.488 43.8261 63.289C47.5997 59.514 52.5984 57.2124 57.92 56.7996C56.3212 49.369 58.6041 41.6361 63.9748 36.2616C66.0641 34.1741 68.5455 32.5201 71.2762 31.3948C74.0069 30.2694 76.9369 29.6949 79.8903 29.7042ZM79.7921 39.153C75.4229 39.1568 71.2352 40.8953 68.1474 43.9832C64.1864 47.9441 62.5083 53.6437 63.6838 59.1164C59.7644 59.4225 56.0794 61.1158 53.2976 63.8975C50.2022 66.9929 48.4636 71.1882 48.4636 75.5649C48.4636 79.9416 50.2022 84.1368 53.2976 87.2323C59.7417 93.6764 70.1883 93.6764 76.6286 87.2323C77.9328 85.9296 79.0086 84.4168 79.811 82.7573C80.6134 84.4168 81.6892 85.9296 82.9933 87.2323C89.4374 93.6764 99.884 93.6764 106.324 87.2323C109.42 84.1368 111.158 79.9416 111.158 75.5649C111.158 71.1882 109.42 66.9929 106.324 63.8975C103.543 61.1158 99.8613 59.4225 95.9382 59.1164C96.5192 56.4219 96.4151 53.6247 95.6353 50.9809C94.8555 48.337 93.4249 45.9311 91.4746 43.9832C88.3754 40.884 84.1725 39.1454 79.7921 39.153ZM79.811 137.795C68.6387 137.795 71.4318 142.633 77.0179 132.957C82.604 123.281 77.0179 123.281 82.604 132.957C88.1902 142.633 90.9832 137.795 79.811 137.795Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/color/diamond.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/color/diamond.svg
new file mode 100644
index 0000000..0f2559b
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/color/diamond.svg
@@ -0,0 +1,5 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon=Diamond, color=red">
+<path id="Vector" d="M79.5196 4C75.2147 4 70.9174 17.0205 50.1754 42.9631C8.6082 94.9466 8.6082 64.4988 50.1754 116.479C91.7426 168.458 67.4025 168.458 108.966 116.479C150.529 64.4988 150.533 94.9429 108.966 42.9631C88.1331 17.0205 83.9265 4 79.6217 4H79.5196ZM79.5196 11.8009C83.3747 11.8009 87.2412 23.4192 105.863 46.7577C143.121 93.329 143.121 66.09 105.863 112.661C68.6043 159.233 90.4386 159.236 53.1801 112.661C15.9216 66.0862 15.9216 93.3328 53.1801 46.7577C71.8094 23.4192 75.7174 11.8009 79.5196 11.8009ZM79.5196 20.0252C76.1029 20.0252 72.69 30.3433 56.1848 50.9757C23.2312 92.2405 23.2312 68.1007 56.1848 109.267C89.1385 150.532 69.8062 150.532 102.858 109.267C135.812 68.0024 135.812 92.1385 102.858 50.9757C86.3303 30.3433 82.925 20.0252 79.5196 20.0252ZM79.5196 30.9442C82.3127 30.9442 85.1171 39.3877 98.6516 56.2859C125.694 90.0408 125.694 70.3079 98.6516 104.063C71.6091 137.818 87.4339 137.814 60.3914 104.063C33.349 70.3117 33.349 90.0408 60.3914 56.2859C73.9108 39.3612 76.719 30.9442 79.5196 30.9442ZM64.3675 97.4525C44.3285 72.3527 44.3285 87.021 64.3675 61.8494C84.4065 36.7496 72.6938 36.7496 92.7895 61.8494C112.829 86.9492 112.829 72.2809 92.7895 97.4525C72.7505 122.552 84.4632 122.552 64.3675 97.4525Z" fill="#EF4444"/>
+</g>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/color/heart.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/color/heart.svg
new file mode 100644
index 0000000..335fcf4
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/color/heart.svg
@@ -0,0 +1,5 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon=Heart, color=red">
+<path id="Vector" d="M52.6187 20.0041C34.2275 19.7131 14.763 34.9861 12.4197 53.2299C10.3636 66.4884 16.0064 80.3555 26.1922 88.9501C43.355 106.117 68.4964 119.715 80.0315 140.038C91.5666 119.715 116.704 106.117 133.867 88.9501C144.053 80.3555 149.699 66.4846 147.643 53.2299C145.3 34.9861 125.836 19.7131 107.444 20.0041C97.2926 19.902 83.8753 27.4195 80.0315 35.1108C76.1878 27.4195 62.7705 19.902 52.6187 20.0041ZM57.3846 30.4431C65.7714 30.36 76.8567 36.5697 80.0315 42.9231C83.2101 36.5697 94.2917 30.36 102.678 30.4431C117.868 30.2012 133.95 42.8173 135.885 57.89C137.582 68.8431 132.922 80.2988 124.505 87.4005C110.324 101.581 89.5635 112.814 80.0315 129.603C70.4996 112.814 49.7349 101.581 35.5541 87.4005C27.1409 80.2988 22.477 68.8431 24.174 57.89C26.1091 42.8211 42.1947 30.205 57.3846 30.4431ZM60.79 37.885C47.8791 37.6809 34.2124 48.4034 32.5683 61.2122C31.1245 70.5174 35.0855 80.2572 42.2363 86.2894C54.2854 98.3385 71.9358 107.886 80.0353 122.153C88.1348 107.886 105.781 98.3423 117.831 86.2894C124.981 80.2535 128.942 70.5174 127.502 61.2122C125.858 48.4072 112.191 37.6809 99.2806 37.885C92.1525 37.8132 82.7377 43.0932 80.0353 48.4941C77.3367 43.0932 67.9144 37.8132 60.79 37.885ZM64.6375 46.3133C70.3371 46.2567 77.8734 50.4784 80.0353 54.7984C82.1934 50.4784 89.7336 46.2567 95.4331 46.3133C105.763 46.1508 116.693 54.7266 118.008 64.9728C119.161 72.4185 115.994 80.2081 110.275 85.0346C100.634 94.6761 86.5172 102.311 80.0353 113.725C73.5572 102.311 59.4407 94.6723 49.7991 85.0346C44.0769 80.2081 40.9097 72.4185 42.0624 64.9728C43.3777 54.7266 54.3119 46.1508 64.6375 46.3133ZM68.7723 55.3577C61.2171 55.2368 53.2196 61.5146 52.2558 69.0094C51.413 74.4557 53.7298 80.1552 57.9138 83.6853C64.9664 90.7379 75.2958 96.324 80.0353 104.677C84.7748 96.3278 95.1043 90.7379 102.153 83.6853C106.337 80.1552 108.658 74.4557 107.811 69.0094C106.847 61.5146 98.8498 55.2368 91.2945 55.3577C87.1219 55.3162 81.6114 58.404 80.0315 61.5637C78.4517 58.404 72.9374 55.3162 68.7685 55.3577H68.7723Z" fill="#EF4444"/>
+</g>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/color/spade.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/color/spade.svg
new file mode 100644
index 0000000..c1fbac5
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/color/spade.svg
@@ -0,0 +1,7 @@
+<svg width="137" height="153" viewBox="0 0 137 153" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1">
+<path id="Vector" d="M68.0315 0C56.4964 20.3225 31.3588 33.9212 14.1922 51.084C4.00642 59.6787 -1.6364 73.5495 0.419658 86.8081C2.76296 105.052 22.2275 120.325 40.6187 120.034C50.7705 120.136 64.1878 112.618 68.0315 104.927C71.8753 112.618 85.2926 120.136 95.4444 120.034C113.836 120.325 133.3 105.052 135.643 86.8081C137.699 73.5495 132.057 59.6824 121.871 51.084C104.708 33.9174 79.5666 20.3187 68.0315 0ZM68.0315 7.86141C78.0586 25.5231 99.9005 37.3379 114.818 52.2557C123.67 59.7278 128.576 71.7769 126.788 83.2969C124.755 99.1482 107.834 112.422 91.8539 112.169C83.0325 112.259 71.3726 105.725 68.0315 99.0424C64.6904 105.725 53.0306 112.259 44.2092 112.169C28.2294 112.422 11.3122 99.1482 9.27886 83.2969C7.49114 71.7769 12.397 59.724 21.2486 52.2557C36.1664 37.3379 58.0045 25.5231 68.0315 7.86141Z" fill="#18181B"/>
+<path id="Vector_2" d="M68.0315 94.3484C68.0315 94.3484 68.0315 104.923 55.8198 126.074C31.3966 168.374 19.1849 147.224 68.0315 147.224C116.878 147.224 104.666 168.374 80.2431 126.074C68.0315 104.923 68.0315 94.3484 68.0315 94.3484ZM68.0315 107.104C68.0315 107.104 68.0315 113.65 75.5905 126.746C90.7124 152.935 98.2714 139.839 68.0315 139.839C37.7915 139.839 45.3506 152.935 60.4724 126.746C68.0315 113.65 68.0315 107.104 68.0315 107.104Z" fill="#18181B"/>
+<path id="Vector_3" d="M68.0317 14.2036C59.2254 29.7148 40.0405 40.0971 26.9369 53.1969C19.1625 59.7582 14.8576 70.3446 16.4261 80.4624C18.2138 94.3862 33.0711 106.046 47.1045 105.823C54.8525 105.902 65.095 100.161 68.0317 94.2917C70.9684 100.161 81.2109 105.902 88.9589 105.823C102.996 106.046 117.853 94.3862 119.641 80.4624C121.21 70.3446 116.901 59.7582 109.126 53.1969C96.0266 40.0933 76.838 29.7148 68.0317 14.2036ZM68.0317 21.7627C75.3828 34.7151 91.4042 43.3815 102.346 54.3195C108.835 59.7998 112.434 68.6363 111.126 77.0835C109.633 88.7093 97.2285 98.4454 85.5082 98.2602C79.0376 98.3244 70.4884 93.532 68.0355 88.63C65.5863 93.532 57.0333 98.3244 50.5627 98.2602C38.8424 98.4454 26.438 88.7093 24.9451 77.0835C23.6336 68.6363 27.2317 59.796 33.7212 54.3195C44.6591 43.3815 60.6767 34.7113 68.0317 21.7627ZM82.0499 90.7087C91.4534 90.8561 101.409 83.0476 102.607 73.7197C103.657 66.9393 100.77 59.8489 95.5617 55.4533C86.7857 46.6773 73.9277 39.7229 68.0279 29.3293C62.1281 39.7229 49.2739 46.6773 40.4979 55.4533C35.2897 59.8489 32.4021 66.9393 33.4528 73.7197C34.6509 83.0476 44.6024 90.8599 54.0097 90.7087C59.1989 90.7616 66.0625 86.9178 68.0279 82.9834C69.9932 86.9178 76.8606 90.7616 82.0499 90.7087ZM68.0317 132.283C56.8329 132.283 59.6336 137.133 65.2311 127.434C70.8285 117.736 65.2311 117.736 70.8285 127.434C76.426 137.133 79.2304 132.283 68.0317 132.283Z" fill="#18181B"/>
+</g>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ace.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ace.svg
new file mode 100644
index 0000000..2f401e9
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ace.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.1127 48.9732H22.9474L19.6063 58.5354H6L25.4267 6H41.5653L60.9921 58.5354H47.3858L44.1127 48.9732ZM26.3112 39.222H40.6733L33.4922 18.3212L26.3112 39.222Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_eight.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_eight.svg
new file mode 100644
index 0000000..2f455a0
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_eight.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8015 59.1999C43.611 59.1999 50.7165 53.0015 50.7165 44.9511C50.7165 37.6944 46.6724 33.348 41.7968 30.7023V30.3433C45.3231 27.8223 48.6377 23.4267 48.6377 18.1732C48.6377 9.66928 42.5905 4 33.1417 4C23.9197 4 17.0787 9.48031 17.0787 18.022C17.0787 23.6913 20.0305 27.7354 24.1464 30.6834V31.0425C19.1953 33.6352 15 38.1102 15 44.9511C15 53.3039 22.6346 59.1999 32.8015 59.1999ZM36.1842 27.7543C30.5527 25.5206 26.4708 23.0677 26.4708 18.0409C26.4708 13.8079 29.3508 11.4268 32.9338 11.4268C37.3937 11.4268 40.0015 14.5222 40.0015 18.8346C40.0015 22.0019 38.777 25.033 36.1842 27.7543ZM33.0888 51.7165C28.1376 51.7165 24.1691 48.621 24.1691 43.7795C24.1691 39.811 26.1836 36.2204 29.0825 33.9149C35.999 36.7231 40.8746 39.0173 40.8746 44.5732C40.8746 49.1842 37.6356 51.7165 33.0888 51.7165Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_five.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_five.svg
new file mode 100644
index 0000000..33d112e
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_five.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0812 59.3495C42.9458 59.3495 51.7143 52.5086 51.7143 40.6409C51.7143 29.0378 44.2308 23.7086 35.3112 23.7086C32.862 23.7086 31.0781 24.2113 28.886 25.2204L29.8951 13.9197H49.2463V5H20.7487L19.3087 30.9275L24.1464 34.0948C27.2419 32.0803 28.9842 31.2866 32.1212 31.2866C37.526 31.2866 41.1165 34.7411 41.1165 40.9244C41.1165 47.1984 37.2236 50.7133 31.6677 50.7133C26.7165 50.7133 22.937 48.2642 19.9134 45.3086L15 52.0739C18.9685 56.0424 24.5622 59.3306 32.9905 59.3306L33.0812 59.3495Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_four.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_four.svg
new file mode 100644
index 0000000..2a0e3e9
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_four.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.2803 36.4456L32.5575 23.1795L36.7905 14.4488H37.0778L36.7187 25.5228V36.4078L24.2803 36.4456ZM36.7527 58.3291H46.6173V44.496H52.8913V36.4456H46.6173V5H33.8803L14 37.3149V44.496H36.7527V58.3291Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_jack.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_jack.svg
new file mode 100644
index 0000000..ce01ab7
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_jack.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.6431 2H45.1738V44.1417C45.1738 49.9848 43.3975 54.3451 39.8447 57.2226C36.3171 60.1001 30.9502 61.5388 23.7439 61.5388H21V52.4037H23.109C25.931 52.4037 28.0476 51.7032 29.4586 50.3023C30.9124 48.9013 31.6394 46.8453 31.6394 44.1341L31.6431 2Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_king.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_king.svg
new file mode 100644
index 0000000..f9cb2da
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_king.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 6H20.5307V25.1622L40.033 6H55.7558L30.4708 30.8693L58.3637 58.4976H41.4314L20.5307 37.8236V58.4976H7V6Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_nine.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_nine.svg
new file mode 100644
index 0000000..7c57a40
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_nine.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.7512 21.7638C24.7512 15.2252 27.9902 11.9748 31.9323 11.9748C36.4677 11.9748 40.1338 15.5729 41.0787 25.2409C38.6296 29.3606 35.2582 30.9858 32.3102 30.9858C27.6992 30.9858 24.7512 28.034 24.7512 21.7638ZM30.496 59.2944C41.0787 59.2944 50.9433 50.5637 50.9433 30.4189C50.9433 11.8992 41.8724 4 31.7811 4C22.6346 4 15 10.8409 15 21.8015C15 33.1023 21.4252 38.5826 30.2693 38.5826C33.8674 38.5826 38.3952 36.4207 41.2299 32.8378C40.7272 46.1417 35.8252 50.6771 29.8535 50.6771C26.6863 50.6771 23.4283 49.0217 21.5008 46.8598L15.8693 53.285C17.766 55.2372 20.0421 56.7807 22.5575 57.8207C25.0729 58.8606 27.7745 59.375 30.496 59.3322V59.2944Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_queen.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_queen.svg
new file mode 100644
index 0000000..a8962f4
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_queen.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.456 54.3873H33.4015C24.759 54.3873 18.0315 51.9936 13.2189 47.2062C8.4063 42.4188 6 35.7669 6 27.2504C6 18.7338 8.3937 12.0693 13.1811 7.25668C17.9937 2.41889 24.6078 0 33.0236 0C41.5401 0 48.1669 2.3937 52.9039 7.18109C57.6661 11.9685 60.0472 18.6582 60.0472 27.2504C60.0472 33.1464 58.7873 38.2362 56.2676 42.5196C53.7606 46.7779 50.1448 49.9905 45.4204 52.1574L56.0031 63.9873H43.1149L34.456 54.3873ZM33.016 9.78896C28.8837 9.78896 25.6838 11.3134 23.416 14.3622C21.1433 17.411 20.0069 21.6945 20.0069 27.2126C20.0069 32.8315 21.1206 37.1401 23.348 40.1385C25.5754 43.1118 28.8006 44.5984 33.0236 44.5984C37.1811 44.5984 40.3937 43.074 42.6614 40.0251C44.9341 36.9763 46.0705 32.6929 46.0705 27.1748C46.0705 21.6315 44.9341 17.348 42.6614 14.3244C40.3886 11.2756 37.176 9.75117 33.0236 9.75117L33.016 9.78896Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_seven.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_seven.svg
new file mode 100644
index 0000000..db1b06b
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_seven.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.789 58.3291H35.5228C36.3883 37.4661 38.0437 26.5811 50.4141 11.463V5H15V13.9197H38.9622C28.7953 28.0173 25.696 39.8472 24.789 58.518V58.3291Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_six.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_six.svg
new file mode 100644
index 0000000..2c25d98
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_six.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5877 32.233C38.1987 32.233 41.2223 35.1848 41.2223 41.4551C41.2223 47.9936 37.9115 51.3196 33.9656 51.3196C29.5058 51.3196 25.9153 47.5741 24.8948 37.8645C27.3439 33.8204 30.7153 32.233 33.6255 32.233H33.5877ZM34.1622 59.2944C43.233 59.2944 50.8677 52.3779 50.8677 41.4551C50.8677 30.0787 44.5181 24.7496 35.5984 24.7496C32.1439 24.7496 27.548 26.9115 24.6378 30.4945C25.0686 17.1149 30.1181 12.5039 36.2409 12.5039C39.3363 12.5039 42.5905 14.2312 44.4425 16.3968L50.074 10.0472C46.8349 6.73637 42.137 4 35.5984 4C24.8646 4 15 12.5039 15 32.3842C15 51.1684 23.9953 59.2944 34.1622 59.2944Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ten.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ten.svg
new file mode 100644
index 0000000..7e8450a
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_ten.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.03402 54.25H30.4053V46.9215H21.8523V8.83905H15.136C12.2485 10.6835 9.10015 11.8513 4.5496 12.7131V18.2954H12.7814V47.0878H3L3.03402 54.25ZM48.222 55.2214C57.5196 55.2214 63.5857 47.1181 63.5857 31.433C63.5857 15.748 57.4856 8 48.222 8C38.9584 8 32.794 15.6838 32.794 31.433C32.794 47.1181 38.9281 55.2214 48.222 55.2214ZM48.222 48.1536C44.2837 48.1536 41.347 44.2154 41.347 31.433C41.347 18.7149 44.2988 15.0035 48.222 15.0035C52.1451 15.0035 55.0327 18.6847 55.0327 31.433C55.0327 44.2154 52.1451 48.1536 48.222 48.1536Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_three.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_three.svg
new file mode 100644
index 0000000..5993c67
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_three.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8015 59.3133C42.9685 59.3133 51.5102 53.644 51.5102 43.8173C51.5102 36.8251 46.8992 32.3653 40.9275 30.7023V30.3433C46.559 28.1096 49.7716 23.9181 49.7716 18.1732C49.7716 9.10235 42.7795 4 32.4992 4C26.2252 4 21.1228 6.52094 16.5118 10.5386L21.9165 17.0016C25.0838 14.0497 28.1905 12.3149 32.0079 12.3149C36.5433 12.3149 39.1511 14.7641 39.1511 18.9291C39.1511 23.6913 35.9839 27.0551 26.1874 27.0551V34.6141C37.7905 34.6141 40.8897 37.925 40.8897 43.1181C40.8897 47.9558 37.216 50.6015 31.8189 50.6015C26.9811 50.6015 23.0882 48.2242 19.9512 45.1212L15 51.811C18.7455 56.044 24.4488 59.2188 32.8393 59.2188L32.8015 59.3133Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_two.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_two.svg
new file mode 100644
index 0000000..3c0585a
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/black_two.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5291 59.2664H51.2456V50.3467H39.7181C37.1971 50.3467 33.6708 50.6339 30.9874 50.9212C40.7007 41.4346 48.7133 31.0409 48.7133 21.4031C48.7133 11.463 42.0236 5 31.9323 5C24.6756 5 19.9134 7.80819 15 13.0504L20.7449 18.7953C23.4812 15.8434 26.6409 13.3149 30.5338 13.3149C35.6362 13.3149 38.5086 16.554 38.5086 21.9701C38.5086 30.1716 29.9291 40.1874 15.4535 53.1511L15.5291 59.2664Z" fill="#18181B"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ace.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ace.svg
new file mode 100644
index 0000000..fe4eb92
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ace.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.1127 48.9732H22.9474L19.6063 58.5354H6L25.4267 6H41.5653L60.9921 58.5354H47.3858L44.1127 48.9732ZM26.3112 39.222H40.6733L33.4922 18.3212L26.3112 39.222Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_eight.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_eight.svg
new file mode 100644
index 0000000..ee646ee
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_eight.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8015 59.1999C43.611 59.1999 50.7165 53.0015 50.7165 44.9511C50.7165 37.6944 46.6724 33.348 41.7968 30.7023V30.3433C45.3231 27.8223 48.6377 23.4267 48.6377 18.1732C48.6377 9.66928 42.5905 4 33.1417 4C23.9197 4 17.0787 9.48031 17.0787 18.022C17.0787 23.6913 20.0305 27.7354 24.1464 30.6834V31.0425C19.1953 33.6352 15 38.1102 15 44.9511C15 53.3039 22.6346 59.1999 32.8015 59.1999ZM36.1842 27.7543C30.5527 25.5206 26.4708 23.0677 26.4708 18.0409C26.4708 13.8079 29.3508 11.4268 32.9338 11.4268C37.3937 11.4268 40.0015 14.5222 40.0015 18.8346C40.0015 22.0019 38.777 25.033 36.1842 27.7543ZM33.0888 51.7165C28.1376 51.7165 24.1691 48.621 24.1691 43.7795C24.1691 39.811 26.1836 36.2204 29.0825 33.9149C35.999 36.7231 40.8746 39.0173 40.8746 44.5732C40.8746 49.1842 37.6356 51.7165 33.0888 51.7165Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_five.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_five.svg
new file mode 100644
index 0000000..ada283d
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_five.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.0812 59.3495C42.9458 59.3495 51.7143 52.5086 51.7143 40.6409C51.7143 29.0378 44.2308 23.7086 35.3112 23.7086C32.862 23.7086 31.0781 24.2113 28.886 25.2204L29.8951 13.9197H49.2463V5H20.7487L19.3087 30.9275L24.1464 34.0948C27.2419 32.0803 28.9842 31.2866 32.1212 31.2866C37.526 31.2866 41.1165 34.7411 41.1165 40.9244C41.1165 47.1984 37.2236 50.7133 31.6677 50.7133C26.7165 50.7133 22.937 48.2642 19.9134 45.3086L15 52.0739C18.9685 56.0424 24.5622 59.3306 32.9905 59.3306L33.0812 59.3495Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_four.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_four.svg
new file mode 100644
index 0000000..4e88ee1
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_four.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.2803 36.4456L32.5575 23.1795L36.7905 14.4488H37.0778L36.7187 25.5228V36.4078L24.2803 36.4456ZM36.7527 58.3291H46.6173V44.496H52.8913V36.4456H46.6173V5H33.8803L14 37.3149V44.496H36.7527V58.3291Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_jack.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_jack.svg
new file mode 100644
index 0000000..ed9d498
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_jack.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.6431 2H45.1738V44.1417C45.1738 49.9848 43.3975 54.3451 39.8447 57.2226C36.3171 60.1001 30.9502 61.5388 23.7439 61.5388H21V52.4037H23.109C25.931 52.4037 28.0476 51.7032 29.4586 50.3023C30.9124 48.9013 31.6394 46.8453 31.6394 44.1341L31.6431 2Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_king.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_king.svg
new file mode 100644
index 0000000..6b75281
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_king.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7 6H20.5307V25.1622L40.033 6H55.7558L30.4708 30.8693L58.3637 58.4976H41.4314L20.5307 37.8236V58.4976H7V6Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_nine.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_nine.svg
new file mode 100644
index 0000000..d6df86d
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_nine.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.7512 21.7638C24.7512 15.2252 27.9902 11.9748 31.9323 11.9748C36.4677 11.9748 40.1338 15.5729 41.0787 25.2409C38.6296 29.3606 35.2582 30.9858 32.3102 30.9858C27.6992 30.9858 24.7512 28.034 24.7512 21.7638ZM30.496 59.2944C41.0787 59.2944 50.9433 50.5637 50.9433 30.4189C50.9433 11.8992 41.8724 4 31.7811 4C22.6346 4 15 10.8409 15 21.8015C15 33.1023 21.4252 38.5826 30.2693 38.5826C33.8674 38.5826 38.3952 36.4207 41.2299 32.8378C40.7272 46.1417 35.8252 50.6771 29.8535 50.6771C26.6863 50.6771 23.4283 49.0217 21.5008 46.8598L15.8693 53.285C17.766 55.2372 20.0421 56.7807 22.5575 57.8207C25.0729 58.8606 27.7745 59.375 30.496 59.3322V59.2944Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_queen.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_queen.svg
new file mode 100644
index 0000000..de80424
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_queen.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M34.456 54.3873H33.4015C24.759 54.3873 18.0315 51.9936 13.2189 47.2062C8.4063 42.4188 6 35.7669 6 27.2504C6 18.7338 8.3937 12.0693 13.1811 7.25668C17.9937 2.41889 24.6078 0 33.0236 0C41.5401 0 48.1669 2.3937 52.9039 7.18109C57.6661 11.9685 60.0472 18.6582 60.0472 27.2504C60.0472 33.1464 58.7873 38.2362 56.2676 42.5196C53.7606 46.7779 50.1448 49.9905 45.4204 52.1574L56.0031 63.9873H43.1149L34.456 54.3873ZM33.016 9.78896C28.8837 9.78896 25.6838 11.3134 23.416 14.3622C21.1433 17.411 20.0069 21.6945 20.0069 27.2126C20.0069 32.8315 21.1206 37.1401 23.348 40.1385C25.5754 43.1118 28.8006 44.5984 33.0236 44.5984C37.1811 44.5984 40.3937 43.074 42.6614 40.0251C44.9341 36.9763 46.0705 32.6929 46.0705 27.1748C46.0705 21.6315 44.9341 17.348 42.6614 14.3244C40.3886 11.2756 37.176 9.75117 33.0236 9.75117L33.016 9.78896Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_seven.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_seven.svg
new file mode 100644
index 0000000..c45b4df
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_seven.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M24.789 58.3291H35.5228C36.3883 37.4661 38.0437 26.5811 50.4141 11.463V5H15V13.9197H38.9622C28.7953 28.0173 25.696 39.8472 24.789 58.518V58.3291Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_six.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_six.svg
new file mode 100644
index 0000000..9c44c32
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_six.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M33.5877 32.233C38.1987 32.233 41.2223 35.1848 41.2223 41.4551C41.2223 47.9936 37.9115 51.3196 33.9656 51.3196C29.5058 51.3196 25.9153 47.5741 24.8948 37.8645C27.3439 33.8204 30.7153 32.233 33.6255 32.233H33.5877ZM34.1622 59.2944C43.233 59.2944 50.8677 52.3779 50.8677 41.4551C50.8677 30.0787 44.5181 24.7496 35.5984 24.7496C32.1439 24.7496 27.548 26.9115 24.6378 30.4945C25.0686 17.1149 30.1181 12.5039 36.2409 12.5039C39.3363 12.5039 42.5905 14.2312 44.4425 16.3968L50.074 10.0472C46.8349 6.73637 42.137 4 35.5984 4C24.8646 4 15 12.5039 15 32.3842C15 51.1684 23.9953 59.2944 34.1622 59.2944Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ten.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ten.svg
new file mode 100644
index 0000000..2fe72f6
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_ten.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.03402 54.25H30.4053V46.9215H21.8523V8.83905H15.136C12.2485 10.6835 9.10015 11.8513 4.5496 12.7131V18.2954H12.7814V47.0878H3L3.03402 54.25ZM48.222 55.2214C57.5196 55.2214 63.5857 47.1181 63.5857 31.433C63.5857 15.748 57.4856 8 48.222 8C38.9584 8 32.794 15.6838 32.794 31.433C32.794 47.1181 38.9281 55.2214 48.222 55.2214ZM48.222 48.1536C44.2837 48.1536 41.347 44.2154 41.347 31.433C41.347 18.7149 44.2988 15.0035 48.222 15.0035C52.1451 15.0035 55.0327 18.6847 55.0327 31.433C55.0327 44.2154 52.1451 48.1536 48.222 48.1536Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_three.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_three.svg
new file mode 100644
index 0000000..5ec3f03
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_three.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M32.8015 59.3133C42.9685 59.3133 51.5102 53.644 51.5102 43.8173C51.5102 36.8251 46.8992 32.3653 40.9275 30.7023V30.3433C46.559 28.1096 49.7716 23.9181 49.7716 18.1732C49.7716 9.10235 42.7795 4 32.4992 4C26.2252 4 21.1228 6.52094 16.5118 10.5386L21.9165 17.0016C25.0838 14.0497 28.1905 12.3149 32.0079 12.3149C36.5433 12.3149 39.1511 14.7641 39.1511 18.9291C39.1511 23.6913 35.9839 27.0551 26.1874 27.0551V34.6141C37.7905 34.6141 40.8897 37.925 40.8897 43.1181C40.8897 47.9558 37.216 50.6015 31.8189 50.6015C26.9811 50.6015 23.0882 48.2242 19.9512 45.1212L15 51.811C18.7455 56.044 24.4488 59.2188 32.8393 59.2188L32.8015 59.3133Z" fill="#EF4444"/>
+</svg>
diff --git a/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_two.svg b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_two.svg
new file mode 100644
index 0000000..a9dc2c8
--- /dev/null
+++ b/S2/DevWeb/Projet/src/main/webapp/static/img/value/red_two.svg
@@ -0,0 +1,3 @@
+<svg width="65" height="65" viewBox="0 0 65 65" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5291 59.2664H51.2456V50.3467H39.7181C37.1971 50.3467 33.6708 50.6339 30.9874 50.9212C40.7007 41.4346 48.7133 31.0409 48.7133 21.4031C48.7133 11.463 42.0236 5 31.9323 5C24.6756 5 19.9134 7.80819 15 13.0504L20.7449 18.7953C23.4812 15.8434 26.6409 13.3149 30.5338 13.3149C35.6362 13.3149 38.5086 16.554 38.5086 21.9701C38.5086 30.1716 29.9291 40.1874 15.4535 53.1511L15.5291 59.2664Z" fill="#EF4444"/>
+</svg>