feat(positions-coordinator): add helper for sorting positions (#892)

antoinezanardi · Sep 19, 2024 · 36cce97 · 36cce97
1 parent 8425de2
commit 36cce97
Show file tree

Hide file tree

Showing 9 changed files with 88,913 additions and 88,705 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/...tionCoordinator/GameLobbyPositionCoordinatorSorter/GameLobbyPositionCoordinatorSorter.vue b/...tionCoordinator/GameLobbyPositionCoordinatorSorter/GameLobbyPositionCoordinatorSorter.vue
@@ -1,50 +1,71 @@
 <template>
   <div
     id="game-lobby-position-coordinator-sorter-container"
-    class="flex gap-4 items-center justify-center md:h-full"
+    class="flex flex-col gap-4 h-full"
   >
-    <div class="flex flex-col gap-2 items-center justify-center w-2/12">
+    <h4
+      id="position-coordinator-sorter-title"
+      class="flex gap-2 items-center justify-center md:h-1/10"
+    >
       <FontAwesomeIcon
-        class="fa-2x"
-        icon="arrow-up"
+        class="text-info w-1/12"
+        icon="circle-info"
       />
 
       <span
-        id="sorter-left-neighbors-text"
-        class="text-center"
+        id="position-coordinator-sorter-text"
+        class="text-center w-full"
       >
-        {{ $t("components.GameLobbyPositionCoordinatorSorter.leftNeighbors") }}
+        {{ $t("components.GameLobbyPositionCoordinatorSorter.sortPlayersByDraggingInList") }}
       </span>
-    </div>
 
-    <VueDraggable
-      id="game-lobby-position-coordinator-sorter"
-      v-model="createGameDto.players"
-      :animation="200"
-      class="max-h-full overflow-y-scroll w-8/12"
-      item-key="name"
-      tag="ul"
-    >
-      <template #item="{ element }">
-        <GameLobbyPositionCoordinatorSorterElement
-          class="game-lobby-position-coordinator-sorter-element"
-          :player="element"
+      <span class="w-1/12"/>
+    </h4>
+
+    <div class="flex gap-4 grow items-center justify-center md:h-full md:max-h-8/10">
+      <div class="flex flex-col gap-2 items-center justify-center w-2/12">
+        <FontAwesomeIcon
+          class="fa-2x"
+          icon="arrow-up"
         />
-      </template>
-    </VueDraggable>
 
-    <div class="flex flex-col gap-2 items-center justify-center w-2/12">
-      <FontAwesomeIcon
-        class="fa-2x"
-        icon="arrow-down"
-      />
+        <span
+          id="sorter-left-neighbors-text"
+          class="text-center"
+        >
+          {{ $t("components.GameLobbyPositionCoordinatorSorter.leftNeighbors") }}
+        </span>
+      </div>
 
-      <span
-        id="sorter-right-neighbors-text"
-        class="text-center"
+      <VueDraggable
+        id="game-lobby-position-coordinator-sorter"
+        v-model="createGameDto.players"
+        :animation="200"
+        class="max-h-full overflow-y-scroll w-8/12"
+        item-key="name"
+        tag="ul"
       >
-        {{ $t("components.GameLobbyPositionCoordinatorSorter.rightNeighbors") }}
-      </span>
+        <template #item="{ element }">
+          <GameLobbyPositionCoordinatorSorterElement
+            class="game-lobby-position-coordinator-sorter-element"
+            :player="element"
+          />
+        </template>
+      </VueDraggable>
+
+      <div class="flex flex-col gap-2 items-center justify-center w-2/12">
+        <FontAwesomeIcon
+          class="fa-2x"
+          icon="arrow-down"
+        />
+
+        <span
+          id="sorter-right-neighbors-text"
+          class="text-center"
+        >
+          {{ $t("components.GameLobbyPositionCoordinatorSorter.rightNeighbors") }}
+        </span>
+      </div>
     </div>
   </div>
 </template>

diff --git a/config/tailwind/tailwind.config.ts b/config/tailwind/tailwind.config.ts
@@ -21,6 +21,7 @@ export default {
         "1/10": "10%",
         "2/3": "66.66666%",
         "9/10": "90%",
+        "8/10": "80%",
         "x-screen-9/10": "90vw",
       },
     },

diff --git a/modules/i18n/locales/en.json b/modules/i18n/locales/en.json
@@ -1473,7 +1473,8 @@
     },
     "GameLobbyPositionCoordinatorSorter": {
       "leftNeighbors": "Left neighbors",
-      "rightNeighbors": "Right neighbors"
+      "rightNeighbors": "Right neighbors",
+      "sortPlayersByDraggingInList": "Sort the players by dragging them in the list below"
     },
     "GameLobbyPositionCoordinatorChart": {
       "checkPositionWithChartBelow": "Check the position of the players with the graph below.",

diff --git a/modules/i18n/locales/fr.json b/modules/i18n/locales/fr.json
@@ -1473,7 +1473,8 @@
     },
     "GameLobbyPositionCoordinatorSorter": {
       "leftNeighbors": "Voisins de gauche",
-      "rightNeighbors": "Voisins de droite"
+      "rightNeighbors": "Voisins de droite",
+      "sortPlayersByDraggingInList": "Triez les joueurs en les faisant glisser dans la liste ci-dessous."
     },
     "GameLobbyPositionCoordinatorChart": {
       "checkPositionWithChartBelow": "Vérifiez la position des joueurs avec le graphique ci-dessous.",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "werewolves-assistant-web-next",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "description": "Werewolves Assistant Web is a Nuxt Web App using the Werewolves Assistant API. It helps you, the game master, to manage your games of Werewolves Of Millers Hollow.",
   "readme": "README.md",
   "type": "module",
@@ -194,4 +194,4 @@
     "linux"
   ],
   "packageManager": "pnpm@9.10.0"
-}
+}