fix: adjust game page display (#456)

* fix: adjust game page display

* fix: zoom out AnswerTip width

apps/client/components/main/Answer.vue

@@ -18,6 +18,9 @@
     <div class="my-6 text-xl text-gray-500">
       {{ courseStore.currentStatement?.soundmark }}
     </div>
+    <div class="my-6 text-xl text-gray-500">
+      {{ courseStore.currentStatement?.chinese }}
+    </div>
     <button
       class="btn-item"
       @click="showQuestion"

apps/client/components/main/AnswerTip.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="absolute top-[-50px] left-0 w-full flex items-center justify-center text-xl dark:text-gray-50"
+    class="absolute flex items-center justify-center w-3/4 text-xl top-36 dark:text-gray-50"
   >
-    <div class="card bg-base-100 shadow-xl">
-      <div class="card-body relative">
-        <div class="absolute top-1 right-2 mt-0">
+    <div class="shadow-xl card bg-base-100">
+      <div class="relative card-body">
+        <div class="absolute mt-0 top-1 right-2">
           <button
-            class="w-6 h-6 outline-none dark:text-gray-300 text-gray-400"
+            class="w-6 h-6 text-gray-400 outline-none dark:text-gray-300"
             @click="hiddenAnswerTip"
           >
             <svg

apps/client/components/main/Contents/Contents.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     id="contents"
-    class="absolute left-0 z-10 overflow-x-hidden bg-white border-l-4 shadow select-none top-20 w-80 border-fuchsia-500 dark:bg-slate-800"
+    class="absolute left-0 z-20 overflow-x-hidden bg-white border-l-4 shadow select-none top-20 w-80 border-fuchsia-500 dark:bg-slate-800"
     :class="[isShowContents() && 'show']"
     v-bind="containerProps"
   >

apps/client/components/main/Game.vue

@@ -1,18 +1,15 @@
 <template>
-  <div class="h-full pt-20">
-    <div class="h-[40vh] flex flex-col justify-center relative">
-      <template v-if="isQuestion()">
-        <Question></Question>
-        <template v-if="isAnswerTip()">
-          <AnswerTip></AnswerTip>
-        </template>
+  <div class="flex items-center justify-center h-full">
+    <template v-if="isQuestion()">
+      <Question></Question>
+      <template v-if="isAnswerTip()">
+        <AnswerTip></AnswerTip>
       </template>
-      <template v-else-if="isAnswer()">
-        <Answer></Answer>
-      </template>
-    </div>
+    </template>
+    <template v-else-if="isAnswer()">
+      <Answer></Answer>
+    </template>
   </div>
-  <PrevAndNextBtn />
   <Tips></Tips>
   <Summary></Summary>
   <Share></Share>
@@ -27,7 +24,6 @@ import { useGameMode } from "~/composables/main/game";
 import Answer from "./Answer.vue";
 import AnswerTip from "./AnswerTip.vue";
 import AuthRequired from "./AuthRequired.vue";
-import PrevAndNextBtn from "./PrevAndNextBtn.vue";
 import Question from "./Question/Question.vue";
 import Share from "./Share.vue";
 import Summary from "./Summary.vue";

apps/client/components/main/PrevAndNextBtn.vue

@@ -1,11 +1,9 @@
 <template>
-  <div
-    class="flex items-center justify-between absolute left-0 right-0 bottom-[14vh] xl:w-[1200px] m-auto xl:px-2 px-24"
-  >
+  <div class="absolute flex items-center justify-between w-full">
     <!-- left arrow button: go to previous question -->
     <div class="w-12 h-12">
       <button
-        class="arrow-btn tooltip z-10"
+        class="arrow-btn tooltip"
         :data-tip="PREV_BTN_TIP"
         @click="goToPreviousQuestion"
         v-show="courseStore.statementIndex !== 0"
@@ -30,7 +28,7 @@
     <!-- right arrow button: go to next question -->
     <div class="w-12 h-12">
       <button
-        class="arrow-btn tooltip z-10"
+        class="arrow-btn tooltip"
         @click="goToNextQuestion"
         :data-tip="NEXT_BTN_TIP"
         totalQuestionsCount

apps/client/components/main/Question/Question.vue

@@ -1,12 +1,17 @@
 <template>
-  <div class="text-center pt-2">
-    <div class="flex relative flex-wrap justify-center gap-2 transition-all">
+  <div class="text-center">
+    <div class="mt-10 mb-4 text-2xl dark:text-gray-50">
+      {{
+        courseStore.currentStatement?.chinese || "生存还是毁灭，这是一个问题"
+      }}
+    </div>
+    <div class="relative flex flex-wrap justify-center gap-2 transition-all">
       <template
         v-for="(w, i) in courseStore.words"
         :key="i"
       >
         <div
-          class="h-[4.8rem] border-solid rounded-[2px] border-b-2 text-[3.2em] transition-all"
+          class="h-[4rem] leading-none border-solid rounded-[2px] border-b-2 text-[3em] transition-all"
           :class="getWordsClassNames(i)"
           :style="{ minWidth: `${inputWidth(w)}ch` }"
         >
@@ -15,7 +20,7 @@
       </template>
       <input
         ref="inputEl"
-        class="absolute h-full w-full opacity-0"
+        class="absolute w-full h-full opacity-0"
         type="text"
         v-model="inputValue"
         @keydown="handleKeydown"
@@ -26,11 +31,6 @@
         autoFocus
       />
     </div>
-    <div class="mt-12 text-xl dark:text-gray-50">
-      {{
-        courseStore.currentStatement?.chinese || "生存还是毁灭，这是一个问题"
-      }}
-    </div>
   </div>
 </template>
 

apps/client/components/main/Tips.vue

@@ -1,43 +1,46 @@
 <template>
-  <div class="absolute left-0 right-0 bottom-[12vh] flex flex-col items-center">
-    <div class="mb-4">
-      <button
-        class="btn btn-ghost"
-        @click="playSound"
-      >
-        <div class="flex items-center justify-center gap-2 text-center">
-          <div
-            v-for="key in parseShortcutKeys(shortcutKeys.sound)"
-            class="kbd"
-          >
-            {{ key }}
+  <div class="relative flex items-center justify-center my-8">
+    <div class="z-10 flex items-center justify-center">
+      <div>
+        <button
+          class="btn btn-ghost"
+          @click="playSound"
+        >
+          <div class="flex items-center justify-center gap-2 text-center">
+            <div
+              v-for="key in parseShortcutKeys(shortcutKeys.sound)"
+              class="kbd"
+            >
+              {{ key }}
+            </div>
           </div>
-        </div>
-        <span>播放发音</span>
-      </button>
-    </div>
-    <div class="mb-4">
-      <button
-        class="btn btn-ghost"
-        @click="toggleGameMode"
-      >
-        <div class="flex items-center justify-center gap-2 text-center">
-          <div
-            v-for="key in parseShortcutKeys(shortcutKeys.answer)"
-            class="kbd"
-          >
-            {{ key }}
+          <span>播放发音</span>
+        </button>
+      </div>
+      <div>
+        <button
+          class="btn btn-ghost"
+          @click="toggleGameMode"
+        >
+          <div class="flex items-center justify-center gap-2 text-center">
+            <div
+              v-for="key in parseShortcutKeys(shortcutKeys.answer)"
+              class="kbd"
+            >
+              {{ key }}
+            </div>
           </div>
-        </div>
-        <span>{{ toggleTipText }}</span>
-      </button>
-    </div>
-    <div>
-      <button class="btn btn-ghost">
-        <span class="kbd">Space</span>
-        <span>{{ spaceTipText }} </span>
-      </button>
+          <span>{{ toggleTipText }}</span>
+        </button>
+      </div>
+      <div>
+        <button class="btn btn-ghost">
+          <span class="kbd">Space</span>
+          <span>{{ spaceTipText }} </span>
+        </button>
+      </div>
     </div>
+    <PrevAndNextBtn />
   </div>
 </template>
 
@@ -53,6 +56,8 @@ import {
   parseShortcutKeys,
   registerShortcut,
 } from "~/utils/keyboardShortcuts";
+import PrevAndNextBtn from "./PrevAndNextBtn.vue";
+
 const { shortcutKeys } = useShortcutKeyMode();
 const { playSound } = usePlaySound(shortcutKeys.value.sound);
 const { toggleGameMode } = useShowAnswer(shortcutKeys.value.answer);