Merge pull request #29 from libondev/dev

style: 调整商店界面样式，增加header logo

src/components/Button.vue

@@ -14,6 +14,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  btnClassName: {
+    type: String,
+    default: '',
+  },
 })
 
 const emits = defineEmits(['click'])
@@ -29,7 +33,7 @@ function onClick(event: MouseEvent) {
     <component
       :is="as"
       class="inline-block px-3 py-1.5 select-none rounded-lg text-sm shadow-sm border-[rgba(0,0,0,.2)] border-x-[1.5px] border-t-[1.5px] border-b-4 active:border-b-[1.5px] active:translate-y-1 active:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
-      :class="VARIANT[type]"
+      :class="[VARIANT[type], btnClassName]"
       v-bind="$attrs"
     >
       <slot />

src/components/GridItem.vue

@@ -34,7 +34,7 @@ function handleChange(e: Event) {
   <label class="block select-none" :class="[color, size]">
     <input type="checkbox" class="peer hidden" v-bind="$attrs" @change="handleChange">
 
-    <i class="bubbly relative inline-block w-full h-full rounded-lg text-transparent bg-current hover:transition-all peer-checked:text-inherit peer-checked:shadow-[0_0_8px_currentColor]" />
+    <i class="bubbly relative inline-block w-full h-full rounded-xl text-transparent bg-current hover:transition-all peer-checked:text-inherit peer-checked:shadow-[0_0_8px_currentColor]" />
   </label>
 </template>
 

src/components/NavHeader.vue

@@ -14,20 +14,21 @@ const { lang, setLanguage, $t } = inject(i18NInjectionKey)!
 
 <template>
   <header class="relation z-10 mb-4 px-3 sm:px-6 border-b dark:border-gray-700 bg-[hsl(var(--background))] flex items-center justify-between">
-    <h1 class="text-lg font-medium">
+    <h1 class="flex items-center text-lg font-medium">
+      <img class="inline-block size-6 mr-0.5 translate-y-[1px]" width="24" src="/res/logo.svg" alt="">
       <RouterLink to="/" class="truncate">
         {{ $t('memory-block', 'Memory Block') }}
       </RouterLink>
     </h1>
 
-    <div class="pt-2 flex items-center gap-1.5">
+    <div class="pt-2 flex items-center gap-1.5 ml-1">
       <Select v-model="lang" :options="languages" @update:model-value="(e: unknown) => setLanguage(e as Language)" />
 
-      <Button as="RouterLink" to="/store">
+      <Button btn-class-name="!px-2" as="RouterLink" to="/store">
         <i class="block i-carbon-store" />
       </Button>
 
-      <Button @click="toggleSounds()">
+      <Button btn-class-name="!px-2" @click="toggleSounds()">
         <i class="block" :class="enableSounds ? 'i-solar-volume-loud-broken' : 'i-solar-volume-cross-broken text-red-500'" />
       </Button>
 
@@ -37,7 +38,7 @@ const { lang, setLanguage, $t } = inject(i18NInjectionKey)!
 
       <ToggleDark />
 
-      <Button as="a" href="https://github.com/libondev/memory-block" target="_project">
+      <Button btn-class-name="!px-2" as="a" href="https://github.com/libondev/memory-block" target="_project">
         <i class="block i-carbon-logo-github" />
       </Button>
     </div>

src/components/Select.vue

@@ -25,10 +25,8 @@ const modelValue = defineModel < string > ()
 
 <template>
   <Listbox v-model="modelValue" as="div" class="relative h-10">
-    <ListboxButton>
-      <span class="inline-flex truncate items-center justify-center px-3 h-[31px] select-none rounded-lg text-sm shadow-sm dark:bg-gray-700 border-[rgba(0,0,0,.2)] border-x-[1.5px] border-t-[1.5px] border-b-4 active:border-b-[1.5px] active:h-[26px] active:translate-y-1 active:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1">
-        {{ optionsMap[modelValue!] }}
-      </span>
+    <ListboxButton class="inline-flex truncate items-center justify-center px-2 h-[31px] select-none rounded-lg text-sm shadow-sm dark:bg-gray-700 border-[rgba(0,0,0,.2)] border-x-[1.5px] border-t-[1.5px] border-b-4 active:border-b-[1.5px] active:h-[26px] active:translate-y-1 active:shadow-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1">
+      {{ optionsMap[modelValue!] }}
     </ListboxButton>
 
     <transition leave-active-class="transition duration-100 ease-in" leave-from-class="opacity-100" leave-to-class="opacity-0">

src/components/ToggleDark.vue

@@ -9,7 +9,7 @@ const toggleDark = useToggle(isDark)
 </script>
 
 <template>
-  <Button @click="toggleDark()">
+  <Button btn-class-name="!px-2" @click="toggleDark()">
     <i class="block pointer-events-none" :class="isDark ? 'i-solar-moon-bold' : 'i-solar-sun-bold'" />
   </Button>
 </template>

src/composables/use-local-cache.ts

@@ -53,7 +53,7 @@ export function getGameGoods() {
 
 // 更新游戏道具数量
 export function setGameGoods(goods: GameGood[]) {
-  localforage.setItem(GAME_GOODS_KEY, toRaw(goods))
+  localforage.setItem(GAME_GOODS_KEY, goods.map(toRaw))
 }
 
 export function appendRecordToStore(record: RecordItem) {

src/config/goods.ts

@@ -2,30 +2,39 @@
 
 export const GAME_GOODS = [
   {
-    id: 'randomGenerate',
+    id: 'regenerate',
     name: '再来一次',
     icon: 'i-game-icons-perspective-dice-six-faces-random',
-    description: '说不上来，但感觉哪里不对劲。（重新生成方块数量及位置）',
+    description: '说不上来为什么，但总感觉哪里不对劲（重新生成方块数量及位置）',
     color: 'text-orange-600',
     price: 300,
     count: 0,
   },
   {
     id: 'ignoreError',
     name: '走个后门',
-    icon: 'i-game-icons-angel-outfit',
-    description: '尽情犯错吧，但这可不是长久之计。（本次可以选择任意方块作为结果）',
+    icon: 'i-game-icons-broken-shield',
+    description: '尽情犯错吧，但这可不是长久之计（可以选择任意方块作为结果）',
     color: 'text-teal-600',
     price: 500,
     count: 0,
   },
+  {
+    id: 'lookAgain',
+    name: '再看一遍',
+    icon: 'i-game-icons-brain',
+    description: '刚刚发生了什么？（增加 5 秒预览时间【仅在预览模式可用】）',
+    color: 'text-indigo-600',
+    price: 500,
+    count: 0,
+  },
   {
     id: 'restoreLife',
     name: '打个补丁',
     icon: 'i-game-icons-arm-bandage',
-    description: '休息一下，做你想做的事。（回复 1 点生命值）',
+    description: '休息一下，做些你想做的事（回复 1 点生命值）',
     color: 'text-sky-600',
-    price: 500,
+    price: 300,
     count: 0,
   },
 ]

src/views/index.vue

@@ -9,11 +9,11 @@ const key = computed(() => lang.value.split('-')[0])
 
 <template>
   <div className="h-full flex flex-col items-center justify-center">
-    <h2 className="-mt-32 text-center text-3xl text-medium font-mono">
+    <h2 className="-mt-24 mb-12 text-center text-4xl text-medium font-mono">
       {{ $t('memory-block', '记忆方块') }}
     </h2>
 
-    <div className="mt-20 flex items-center flex-col gap-2">
+    <div className="flex items-center flex-col gap-2">
       <Button v-for="btn of GAME_LEVELS" :key="btn.path" :to="btn.path" :type="btn.type" as="RouterLink">
         {{ (btn as any)[key] }}
       </Button>

src/views/store/index.vue

@@ -7,7 +7,7 @@ import {
   setGameMoney,
 } from '@/composables/use-local-cache'
 
-const gameGoods = ref<GameGood[]>(GAME_GOODS)
+const gameGoods = ref<GameGood[]>([])
 
 const gameMoney = shallowRef(0)
 
@@ -33,9 +33,7 @@ function buyGood(good: typeof GAME_GOODS[number]) {
 }
 
 function saveGoodsToLocalStorage() {
-  setGameGoods(
-    gameGoods.value,
-  )
+  setGameGoods(gameGoods.value)
 }
 
 onMounted(() => {
@@ -47,54 +45,64 @@ onMounted(() => {
     goods ??= []
 
     if (goods.length === 0) {
+      gameGoods.value = GAME_GOODS
       return
     }
 
-    gameGoods.value = goods.reduce<GameGood[]>((list, good) => {
-      const targetGood = GAME_GOODS.find(g => g.id === good.id)
+    gameGoods.value = GAME_GOODS.reduce<GameGood[]>((list, good) => {
+      // 从本地存储中找到对应的商品
+      const targetLocalGood = goods.find(g => g.id === good.id)
 
       // 以最新的配置为准
-      if (targetGood) {
-        Object.assign(targetGood, good)
-
-        list.push(targetGood)
+      if (targetLocalGood) {
+        // 更新为本地道具的购买数量
+        good.count = Math.max(targetLocalGood.count, 0)
       }
 
+      list.push(good)
+
       return list
     }, [])
   })
 })
 </script>
 
 <template>
-  <div class="h-full w-full max-w-[700px] px-4 select-none mx-auto overflow-auto">
+  <div class="h-full w-full max-w-[700px] px-4 mx-auto overflow-auto">
     <div class="w-full flex items-center justify-center mt-4 mb-8 text-3xl font-mono">
       <i class="i-solar-chat-round-money-bold mr-1.5 text-yellow-400" />
       {{ gameMoney }}
     </div>
 
     <ul class="flex flex-wrap items-center gap-4 w-full">
-      <li v-for="good of gameGoods" :key="good.id" class="flex w-full sm:w-80 overflow-hidden dark:border-white/20 border cursor-pointer" @click="buyGood(good)">
-        <div class="min-w-[100px] w-[100px] h-[100px] flex items-center justify-center relative before:absolute before:inset-0 before:bg-current before:z-0 before:opacity-15" :class="good.color">
+      <li v-for="good of gameGoods" :key="good.id" class="flex w-full rounded-lg p-2 sm:w-80 overflow-hidden dark:border-white/20 border">
+        <div class="min-w-[100px] w-[100px] h-[100px] flex items-center justify-center relative before:absolute before:rounded-md before:inset-0 before:bg-current before:z-0 before:opacity-15" :class="good.color">
           <i :class="good.icon" class="text-6xl relative z-10" />
+
+          <span class="absolute bottom-0.5 right-0.5 z-10 select-none flex items-center text-sm font-medium rounded-sm px-1 text-foreground bg-white/70 dark:bg-white/20">
+            <i class="i-solar-chat-round-money-bold mr-0.5 text-yellow-400" />
+            {{ good.price }}
+          </span>
         </div>
 
-        <div class="pt-2 px-3">
-          <span class="font-medium">{{ good.name }}</span>
+        <div class="flex flex-col pl-3">
+          <span class="font-medium">
+            {{ good.name }}
+
+            <span class="text-sm font-normal">
+              x{{ good.count }}
+            </span>
+          </span>
 
-          <p class="h-9 text-xs opacity-60 text-pretty">
+          <p class="mt-1 flex-1 text-xs opacity-60 text-pretty">
             {{ good.description }}
           </p>
 
-          <div class="flex items-center justify-between">
-            <span class="flex items-center">
-              <i class="i-solar-chat-round-money-bold mr-1 text-yellow-400" />
-              {{ good.price }}
-            </span>
-
-            <span class="flex items-center">
-              x{{ good.count }}
-            </span>
+          <div class="flex items-center justify-between gap-2 select-none">
+            <button class="flex items-center justify-center w-full text-sm rounded-md py-1 px-2 text-white font-medium bg-emerald-500 active:bg-emerald-600 dark:bg-emerald-600 dark:active:bg-emerald-700 shadow-sm cursor-pointer" @click="buyGood(good)">
+              <i class="i-solar-bag-3-bold-duotone translate-y-[1px] text-lg mr-1" />
+              Buy
+            </button>
           </div>
         </div>
       </li>