chore: minor ui update

wolimst · Jun 6, 2024 · 0077e9b · 0077e9b
1 parent f51504e
commit 0077e9b
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 127 deletions.
diff --git a/public/resources/images/wide-icon-compact.png b/public/resources/images/wide-icon-compact.png
diff --git a/src/components/ui/icons/Wordle1.svelte b/src/components/ui/icons/Wordle1.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  export let widthPerSyllable: number = 48
-  export let gapRem: number = 0.125
+  export let widthPerSyllable: number = 52
+  export let gapRem: number = 0.2
 </script>
 
 <div class="tw-inline-flex tw-justify-center" style:gap={`${gapRem}rem`}>

diff --git a/src/components/ui/icons/Wordle2.svelte b/src/components/ui/icons/Wordle2.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  export let widthPerSyllable: number = 48
-  export let gapRem: number = 0.125
+  export let widthPerSyllable: number = 52
+  export let gapRem: number = 0.2
 </script>
 
 <div class="tw-inline-flex tw-justify-center" style:gap={`${gapRem}rem`}>

diff --git a/src/components/ui/icons/Wordle3.svelte b/src/components/ui/icons/Wordle3.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  export let widthPerSyllable: number = 48
-  export let gapRem: number = 0.125
+  export let widthPerSyllable: number = 52
+  export let gapRem: number = 0.2
 </script>
 
 <div class="tw-inline-flex tw-justify-center" style:gap={`${gapRem}rem`}>

diff --git a/...es/custom-game/CustomGameGenerator.svelte → src/routes/CustomGameGenerator.svelte b/...es/custom-game/CustomGameGenerator.svelte → src/routes/CustomGameGenerator.svelte
@@ -118,17 +118,17 @@
   }
 </script>
 
-<div class="tw-max-w-sm tw-mx-auto tw-p-3">
-  <div class="tw-w-full tw-text-center tw-mt-3">
+<div class="tw-max-w-sm tw-mx-auto">
+  <div class="tw-w-full tw-text-center tw-mb-5">
     나만의 문제를 만들어 공유해보세요!
   </div>
 
   <form
     bind:this={formElement}
     on:submit|preventDefault={submit}
-    class="tw-flex tw-flex-col tw-gap-3 tw-mt-5"
+    class="tw-flex tw-flex-col tw-gap-3"
   >
-    <div class="">
+    <div>
       <label for="author" class="tw-block tw-mb-2 tw-font-medium">
         출제자
       </label>
@@ -144,7 +144,7 @@
       />
     </div>
 
-    <div class="">
+    <div>
       <label for="nWordles" class="tw-block tw-mb-2 tw-font-medium">
         워들 수
       </label>
@@ -161,7 +161,7 @@
       />
     </div>
 
-    <div class="">
+    <div>
       <label for="nGuesses" class="tw-block tw-mb-2 tw-font-medium">
         추측 횟수
       </label>
@@ -181,7 +181,7 @@
       />
     </div>
 
-    <div class="">
+    <div>
       <label for="answerLength" class="tw-block tw-mb-2 tw-font-medium">
         정답 글자 수
       </label>
@@ -202,7 +202,7 @@
     </div>
 
     {#each { length: Math.min(Math.max(nWordles, 1), Wordle.MAX_N_WORDLES) || 1 } as _, i}
-      <div class="">
+      <div>
         <label for="answers" class="tw-block tw-mb-2 tw-font-medium">
           정답 {i + 1}
         </label>

diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
@@ -6,59 +6,61 @@
 </script>
 
 <script lang="ts">
-  import CustomTab from './custom-game/CustomTab.svelte'
   import Badge from '@/components/ui/core/Badge.svelte'
   import ClickButton from '@/components/ui/core/ClickButton.svelte'
   import LinkButton from '@/components/ui/core/LinkButton.svelte'
   import Wordle1Icon from '@/components/ui/icons/Wordle1.svelte'
   import Wordle2Icon from '@/components/ui/icons/Wordle2.svelte'
   import Wordle3Icon from '@/components/ui/icons/Wordle3.svelte'
   import { GAMES, GAME_MODES } from '@/constants'
+  import CustomGameGenerator from '@/routes/CustomGameGenerator.svelte'
 
   const icons = [undefined, Wordle1Icon, Wordle2Icon, Wordle3Icon] as const
 
-  const descriptions = [
+  const gameDescriptions = [
     'invalid',
     '일반적인 워들 게임입니다.',
     '워들 2문제를 동시에 풀어보세요.',
     '워들 3문제를 동시에 풀어보세요.',
   ] as const
 </script>
 
-<div class="tw-container tw-mx-auto tw-py-3">
+<div
+  class="tw-max-w-sm tw-min-h-full tw-mx-auto tw-p-3 tw-flex tw-flex-col tw-flex-nowrap tw-items-center"
+>
   <div
-    class="tw-flex tw-flex-nowrap tw-justify-center tw-text-lg tw-font-medium"
+    class="tw-w-full tw-mb-6 tw-inline-flex tw-justify-evenly tw-gap-2 tw-border-b tw-border-app-text-secondary md:tw-text-lg tw-font-medium"
   >
-    <div
-      class="tw-inline-flex tw-gap-8 tw-px-2 tw-border-b tw-border-app-text-secondary"
-    >
-      {#each GAME_MODES as mode}
-        <ClickButton
-          on:click={() => ($gameMode = mode.id)}
-          disabled={mode.disabled}
-        >
-          <div class="tab-button" class:selected={$gameMode === mode.id}>
-            {mode.name}
-          </div>
-        </ClickButton>
-      {/each}
-    </div>
+    {#each GAME_MODES as mode}
+      <ClickButton
+        on:click={() => ($gameMode = mode.id)}
+        disabled={mode.disabled}
+      >
+        <div class="tab-button" class:selected={$gameMode === mode.id}>
+          {mode.name}
+        </div>
+      </ClickButton>
+    {/each}
   </div>
 
   {#if $gameMode === 'custom'}
-    <CustomTab />
+    <CustomGameGenerator />
   {:else}
-    <div
-      class="tw-mt-6 tw-flex tw-flex-wrap tw-justify-center tw-items-stretch tw-gap-3"
-    >
+    <div class="tw-w-full tw-flex tw-flex-col tw-gap-3">
       {#each GAMES.filter((game) => game.mode === $gameMode) as game}
         <LinkButton url={game.link} useRouter underline={false}>
-          <div class="card tw-shadow-md">
-            <div class="tw-inline-flex tw-items-end tw-gap-2 tw-mb-4">
-              <svelte:component this={icons[game.nWordles]} />
-              <Badge rounded="lg">{game.answerLength}글자</Badge>
+          <div
+            class="tw-w-full tw-px-2.5 tw-py-5 tw-flex tw-gap-1.5 tw-border tw-border-app-text-secondary tw-rounded-lg tw-shadow-md"
+          >
+            <svelte:component this={icons[game.nWordles]} />
+            <div
+              class="tw-flex tw-flex-col tw-justify-evenly tw-items-start tw-gap-1"
+            >
+              <Badge>{game.answerLength}글자</Badge>
+              <span class="tw-text-sm tw-break-keep"
+                >{gameDescriptions[game.nWordles]}</span
+              >
             </div>
-            <span class="tw-text-sm">{descriptions[game.nWordles]}</span>
           </div>
         </LinkButton>
       {/each}
@@ -80,19 +82,4 @@
   .tab-button.selected {
     border-color: var(--primary-color);
   }
-
-  .card {
-    max-width: 13rem;
-    height: 100%;
-
-    overflow: hidden;
-    padding: 1.4rem;
-
-    text-align: left;
-    word-break: keep-all;
-
-    border: 1px solid;
-    border-color: var(--text-color-secondary);
-    border-radius: 0.5rem;
-  }
 </style>
diff --git a/src/routes/Notice.svelte b/src/routes/Notice.svelte
@@ -16,10 +16,10 @@
 </script>
 
 <div
-  class="tw-container tw-min-h-full tw-mx-auto tw-p-3 tw-flex tw-flex-col tw-flex-nowrap tw-items-center"
+  class="tw-max-w-sm tw-min-h-full tw-mx-auto tw-p-3 tw-flex tw-flex-col tw-flex-nowrap tw-items-center"
 >
   <div
-    class="tw-mx-auto tw-mb-6 tw-inline-flex tw-justify-center tw-gap-8 tw-px-4 tw-border-b tw-border-app-text-secondary md:tw-text-lg tw-font-medium"
+    class="tw-w-full tw-mb-6 tw-inline-flex tw-justify-evenly tw-gap-2 tw-border-b tw-border-app-text-secondary md:tw-text-lg tw-font-medium"
   >
     {#each menus as menu}
       <ClickButton on:click={() => ($selected = menu)}>

diff --git a/src/routes/WordleCustom.svelte b/src/routes/WordleCustom.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import CustomGameGenerator from './custom-game/CustomGameGenerator.svelte'
+  import CustomGameGenerator from './CustomGameGenerator.svelte'
   import PageNotFound from '@/NotFound.svelte'
   import SpinnerIcon from '@/components/ui/icons/Spinner.svelte'
   import Game from '@/components/wordle/Game.svelte'

diff --git a/src/routes/custom-game/CustomTab.svelte b/src/routes/custom-game/CustomTab.svelte