From 0566cde54040310a8a838bc85bf3fd8ea4e3b58a Mon Sep 17 00:00:00 2001
From: afornerot <afornerot@cadoles.com>
Date: Sat, 24 Feb 2024 16:34:16 +0100
Subject: [PATCH] svg

---
 src/app.css                  |   1 -
 src/routes/game/+page.svelte | 180 +++++++++++++++--------------------
 2 files changed, 76 insertions(+), 105 deletions(-)

diff --git a/src/app.css b/src/app.css
index 8ea294a..874302b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -325,7 +325,6 @@
     border: 1px red solid;
 }
 
-.tile, .tilenone { width: 33.33333333333333333333333% }
 .tilenone {border: none;}
 .rencontre{border: 1px 5px}
 .sortable > span {
diff --git a/src/routes/game/+page.svelte b/src/routes/game/+page.svelte
index e89a40d..137cdf8 100644
--- a/src/routes/game/+page.svelte
+++ b/src/routes/game/+page.svelte
@@ -273,37 +273,6 @@
 
 {#if data.party }
     <div class="sticky bg-white dark:bg-gray-900 pt-3" style="top:65px">
-        <!-- LISTE DES JOUEURS -->
-        <div class="flex wrap mb-3 items-center justify-center">
-            {#each data.players as player}
-                {#if player._id===data.party.playercurrent._id && data.party.status!="partyend"}
-                    <div class="flex flex-col p-1 w-20 h-20 md:w-28 md:h-28 items-center justify-center bg-lime-500 mx-1 text-black">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden md:block w-10 h-10 text-cyan-950">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
-                        </svg>
-
-                        <span class="text-xs text-center">Joueur<br><span class="{(player._id==my._id?"text-3xl":"")}">{(player._id==my._id?"MOI":player.name)}</span></span>
-
-                        {#if my._id===data.party.playerid && my._id!==player._id}
-                            <button on:click={playerkill(player._id)}>sortir</button>
-                        {/if}
-                    </div>
-                {:else}
-                    <div class="flex flex-col p-1 w-20 h-20 md:w-28 md:h-28 items-center justify-center bg-gray-200 mx-1 text-black">
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden md:block w-10 h-10">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
-                        </svg>
-                        
-                        <span class="text-xs text-center">Joueur<br><span class="{(player._id==my._id?"text-3xl":"")}">{(player._id==my._id?"MOI":player.name)}</span></span>
-
-                        {#if my._id===data.party.playerid && my._id!==player._id}
-                            <button on:click={playerkill(player._id)}>sortir</button>
-                        {/if}
-                    </div>            
-                {/if}
-            {/each}
-        </div>
-
         <!-- PARTIE EN ATTENTE -->
         {#if data.party.status==="playerwait"}
             <div class="text-center">
@@ -377,84 +346,87 @@
             </div>
         {/if}
     {/if}
-    <div>
-        {#if data.party.playertile }
-            Nom = {data.party.playertile.name}<br>
-            Position = {data.party.playertile.position}<br>
-            Cash = {data.party.playerparty.cash}<br>
-            
-        {/if}
-    </div>
 
     {#key data.party.playertile.position}
-    <div style="width:600px; max-width:100%; display:flex; flex-direction: column; margin:auto;">
+    <div style="width:1000px; max-width:100%; display:flex; margin:auto;flex-direction: column; margin-top: 10px">
         <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[14]} />
 
         <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[13]}/>
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[15]}  />
-        </div>
-        
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[12]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[16]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[11]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[17]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[10]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[18]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[9]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[19]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[8]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[20]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[7]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[21]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[6]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[22]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[5]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[23]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[4]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[24]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[3]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[25]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[2]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[26]}  />
-        </div>
-        <div style="display:flex">
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[1]} />
-            <div class="tilenone"></div>
-            <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[27]}  />
+            <div style="display:flex; flex-direction: column;width:25%;">
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[13]}/>
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[12]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[11]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[10]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[9]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[8]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[7]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[6]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[5]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[4]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[3]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[2]} />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[1]} />
+            </div>
+
+            <div class="tilenone" style="display:flex; flex-direction: column;;width:50%;">
+                {#if data.party }
+                    {#if data.party.playertile }
+                        <div>
+                            Nom = {data.party.playertile.name}<br>
+                            Position = {data.party.playertile.position}<br>
+                            Cash = {data.party.playerparty.cash}<br>
+                        </div>
+                    {/if}
+
+                    <!-- LISTE DES JOUEURS -->
+                    <div class="flex wrap mb-3 items-center justify-center">
+                        {#each data.players as player}
+                            {#if player._id===data.party.playercurrent._id && data.party.status!="partyend"}
+                                <div class="flex flex-col p-1 w-20 h-20 md:w-28 md:h-28 items-center justify-center bg-lime-500 mx-1 text-black">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden md:block w-10 h-10 text-cyan-950">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    </svg>
+            
+                                    <span class="text-xs text-center">Joueur<br><span class="{(player._id==my._id?"text-3xl":"")}">{(player._id==my._id?"MOI":player.name)}</span></span>
+            
+                                    {#if my._id===data.party.playerid && my._id!==player._id}
+                                        <button on:click={playerkill(player._id)}>sortir</button>
+                                    {/if}
+                                </div>
+                            {:else}
+                                <div class="flex flex-col p-1 w-20 h-20 md:w-28 md:h-28 items-center justify-center bg-gray-200 mx-1 text-black">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden md:block w-10 h-10">
+                                        <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" />
+                                    </svg>
+                                    
+                                    <span class="text-xs text-center">Joueur<br><span class="{(player._id==my._id?"text-3xl":"")}">{(player._id==my._id?"MOI":player.name)}</span></span>
+            
+                                    {#if my._id===data.party.playerid && my._id!==player._id}
+                                        <button on:click={playerkill(player._id)}>sortir</button>
+                                    {/if}
+                                </div>            
+                            {/if}
+                        {/each}
+                    </div>
+                {/if}                   
+
+            </div>
+                
+            <div style="display:flex; flex-direction: column;width:25%;">
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[15]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[16]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[17]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[18]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[19]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[20]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[21]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[22]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[23]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[24]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[25]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[26]}  />
+                <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[27]}  />
+            </div>
         </div>
         <Tile playerposition="{data.party.playertile.position}" partyid={data.party._id} {...data.tiles[0]}  />
     </div>