From 71c046a0871ce1ae751f144dc0570f4cd764290f Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Sun, 21 Jul 2024 18:46:13 +0200
Subject: [PATCH] Converted last px to tailwind breakpoints

---
 src/components/utilities/Modal.vue |  2 +-
 src/screens/Characters.vue         | 38 +++++++++++++++---------------
 src/screens/Game.vue               |  6 ++---
 src/screens/Login.vue              | 14 +++++------
 4 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index b68a613..444fd29 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -11,7 +11,7 @@
       </div>
       <div class="overflow-auto grow">
         <slot name="modalBody" />
-        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-3/5" @mousedown="startResize" />
+        <img v-if="isResizable" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
       </div>
       <div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-cyan-200">
         <slot name="modalFooter" />
diff --git a/src/screens/Characters.vue b/src/screens/Characters.vue
index 3e60ed3..8030aff 100644
--- a/src/screens/Characters.vue
+++ b/src/screens/Characters.vue
@@ -1,44 +1,44 @@
 <template>
   <div class="bg-gray-300 relative">
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full"></div>
-    <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-[80px] px-[80px]">
+    <div class="ui-wrapper h-dvh flex flex-col justify-center items-center gap-20 px-20">
       <div class="filler"></div>
-      <div class="flex justify-center flex-wrap gap-[60px] w-full max-h-[650px] overflow-auto" v-if="!isLoading">
-        <div v-for="character in characters" :key="character.id" class="group m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
+      <div class="flex justify-center flex-wrap gap-14 w-full max-h-[650px] overflow-auto" v-if="!isLoading">
+        <div v-for="character in characters" :key="character.id" class="group m-4 w-[170px] h-[275px] flex flex-col rounded-2xl relative bg-[url('/assets/shapes/character-select-shape.svg')] bg-no-repeat shadow-character" :class="{ active: selected_character == character.id }">
           <input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
-          <label class="font-bold absolute left-1/2 top-[20px] max-w-[130px] translate-x-[-50%] translate-y-[-50%] text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
+          <label class="font-bold absolute left-1/2 top-5 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
           <!-- @TODO : Add a confirmation dialog -->
-          <button class="delete bg-red w-[30px] h-[30px] p-[3px] rounded-full absolute right-[-15px] top-0 translate-y-[-50%] z-10 border-2 border-solid border-white hover:bg-red-100" @click="delete_character(character.id)">
+          <button class="delete bg-red w-8 h-8 p-[3px] rounded-full absolute -right-4 top-0 -translate-y-1/2 z-10 border-2 border-solid border-white hover:bg-red-100" @click="delete_character(character.id)">
             <img draggable="false" src="/assets/icons/trashcan.svg" />
           </button>
 
           <div class="sprite-container flex flex-col items-center m-auto">
             <img class="drop-shadow-20" draggable="false" src="/assets/avatar/default/0.png" />
           </div>
-          <span class="absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
-          <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-[65%] h-[3px] bg-white rounded-[3px] left-1/2 bottom-[-15px] translate-x-[-50%] transition-all ease-in-out duration-300"></div>
+          <span class="absolute bottom-5 w-full text-center translate-y-1/2 z-10 drop-shadow-text">Lvl. {{ character.level }}</span>
+          <div class="selected-character group-[.active]:max-w-[170px] absolute max-w-0 w-4/6 h-[3px] bg-white rounded-[3px] left-1/2 -bottom-4 -translate-x-1/2 transition-all ease-in-out duration-300"></div>
         </div>
 
-        <div class="character new-character m-[15px] w-[170px] h-[275px] flex flex-col rounded-[20px] relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
-          <button class="h-full w-full py-[40px] flex flex-col justify-between" @click="isModalOpen = true">
+        <div class="character new-character m-4 w-[170px] h-[275px] flex flex-col rounded-2xl relative bg-gray-50/50 bg-no-repeat shadow-character" v-if="characters.length < 4">
+          <button class="h-full w-full py-10 flex flex-col justify-between" @click="isModalOpen = true">
             <div class="filler"></div>
-            <img class="w-[100px] h-[100px] m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
-            <span class="self-center text-base absolute bottom-[20px] w-full text-center translate-y-1/2 z-10 drop-shadow-text">Create new</span>
+            <img class="w-24 h-24 m-auto" draggable="false" src="/assets/icons/plus-icon.svg" />
+            <span class="self-center text-base absolute bottom-5 w-full text-center translate-y-1/2 z-10 drop-shadow-text">Create new</span>
           </button>
         </div>
       </div>
       <div v-else>
-        <img class="w-[80px] invert-80" src="/assets/icons/loading-icon1.svg" />
+        <img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
       </div>
 
-      <div class="button-wrapper flex gap-[30px]" v-if="!isLoading">
+      <div class="button-wrapper flex gap-8" v-if="!isLoading">
         <button
-          class="btn-cyan py-2 pr-2.5 pl-[30px] min-w-[100px] relative rounded text-xl flex gap-[15px] items-center transition-all ease-in-out duration-200 hover:gap-[20px] disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
+          class="btn-cyan py-2 pr-2.5 pl-8 min-w-24 relative rounded text-xl flex gap-4 items-center transition-all ease-in-out duration-200 hover:gap-5 disabled:bg-cyan/50 disabled:hover:bg-opacity-50 disabled:cursor-not-allowed disabled:hover:gap-[15px]"
           :disabled="!selected_character"
           @click="select_character()"
         >
           PLAY
-          <img class="h-[30px] drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
+          <img class="h-8 drop-shadow-20" draggable="false" src="/assets/icons/arrow.svg" />
         </button>
       </div>
     </div>
@@ -50,15 +50,15 @@
     </template>
 
     <template #modalBody>
-      <div class="m-[15px] character-form">
+      <div class="m-4 character-form">
         <form method="post" @submit.prevent="create" class="inline">
           <div class="flex flex-col mb-5">
             <label class="mb-1.5 font-titles" for="name">Name</label>
-            <input class="input-cyan max-w-[250px]" v-model="name" name="name" id="name" />
+            <input class="input-cyan max-w-64" v-model="name" name="name" id="name" />
           </div>
-          <button class="btn-cyan py-1.5 px-[15px] mr-[20px] min-w-[100px] inline-block" type="submit">CREATE</button>
+          <button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
         </form>
-        <button class="btn-cyan py-1.5 px-[15px] min-w-[100px] inline-block" @click="isModalOpen = false">CANCEL</button>
+        <button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="isModalOpen = false">CANCEL</button>
       </div>
     </template>
   </Modal>
diff --git a/src/screens/Game.vue b/src/screens/Game.vue
index 06aa84c..1a48739 100644
--- a/src/screens/Game.vue
+++ b/src/screens/Game.vue
@@ -1,18 +1,18 @@
 <template>
-  <div class="flex justify-center items-center h-dvh p-[30px] relative">
+  <div class="flex justify-center items-center h-dvh p-8 relative">
     <GmTools v-if="isLoaded && gameStore.character?.role === 'gm'" />
     <GmPanel v-if="isLoaded && gameStore.character?.role === 'gm'" />
 
     <div v-if="!zoneEditorStore.active">
       <Game :config="gameConfig" @create="createGame">
         <Scene name="main" @preload="preloadScene" @create="createScene">
-          <div class="flex absolute justify-between left-0 right-0 top-[48px] mx-[48px] my-0">
+          <div class="flex absolute justify-between left-0 right-0 top-12 mx-12 my-0">
             <Hud />
           </div>
           <div v-if="isLoaded">
             <World :key="gameStore.character?.zoneId" />
           </div>
-          <div class="flex absolute justify-between left-0 right-0 bottom-[100px] h-[100px] mx-[48px] my-0">
+          <div class="flex absolute justify-between left-0 right-0 bottom-24 h-24 mx-12 my-0">
             <Chat />
             <Menubar />
           </div>
diff --git a/src/screens/Login.vue b/src/screens/Login.vue
index bac4675..9d0b65d 100644
--- a/src/screens/Login.vue
+++ b/src/screens/Login.vue
@@ -3,10 +3,10 @@
     <div class="absolute bg-[url('/assets/shapes/select-screen-bg-shape.svg')] bg-no-repeat bg-center w-full h-full z-10 pointer-events-none"></div>
     <div class="z-20 w-full h-dvh flex items-center justify-between flex-col relative">
       <div class="filler"></div>
-      <h1 class="mt-[115px] text-center text-6xl">NEW QUEST</h1>
+      <h1 class="mt-28 text-center text-6xl">NEW QUEST</h1>
       <form @submit.prevent="loginFunc">
-        <div class="my-[80px] mx-0 w-full flex flex-col gap-[24px]">
-          <div class="w-full grid gap-[15px]">
+        <div class="my-20 mx-0 w-full flex flex-col gap-6">
+          <div class="w-full grid gap-4">
             <div class="flex flex-col bg-white/50 rounded-[3px] border border-solid border-gray-50 sm:min-w-[500px] sm:w-unset w-full my-0 mx-auto">
               <label class="text-black bg-white/50 p-1 text-sm rounded-t-[3px]" for="username">Username</label>
               <input class="p-1 text-sm focus-visible:outline-none" id="username" v-model="username" type="text" name="username" required autofocus />
@@ -16,10 +16,10 @@
               <input class="p-1 text-sm focus-visible:outline-none" id="password" v-model="password" type="password" name="password" required />
             </div>
           </div>
-          <div class="flex justify-center sm:gap-[15px] gap-[8px]">
-            <button class="btn-cyan py-2 px-0 min-w-[100px]" type="submit"><span class="m-auto">PLAY</span></button>
-            <button class="btn-cyan py-2 px-0 min-w-[100px]" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
-            <button class="btn-cyan py-2 px-0 min-w-[100px]"><span class="m-auto">CREDITS</span></button>
+          <div class="flex justify-center sm:gap-4 gap-2">
+            <button class="btn-cyan py-2 px-0 min-w-24" type="submit"><span class="m-auto">PLAY</span></button>
+            <button class="btn-cyan py-2 px-0 min-w-24" type="button" @click.prevent="registerFunc"><span class="m-auto">REGISTER</span></button>
+            <button class="btn-cyan py-2 px-0 min-w-24"><span class="m-auto">CREDITS</span></button>
           </div>
         </div>
       </form>