From e189e1ea06341cc3ec06e8dfd8ce487b47f9a1f9 Mon Sep 17 00:00:00 2001
From: Libon <bon.li@outlook.com>
Date: Sun, 7 Apr 2024 18:04:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=B0=E7=8A=B6=E6=80=81=E7=BC=93=E5=AD=98=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                          |  2 +-
 src/components/ToggleDark.vue      |  2 +-
 src/composables/use-game-score.ts  | 18 ++++++++
 src/composables/use-game-sounds.ts |  2 +-
 src/composables/use-game-status.ts | 19 ---------
 src/composables/use-local-cache.ts |  2 +-
 src/views/game/[level].vue         | 68 +++++++++++++++++++++++++-----
 7 files changed, 80 insertions(+), 33 deletions(-)

diff --git a/README.md b/README.md
index 0e7eb4e..6e8ec73 100644
--- a/README.md
+++ b/README.md
@@ -17,7 +17,7 @@
 - [x] 练习模式
 - [x] 历史最高分
 - [ ] 游玩热力图
-- [ ] 本地缓存
+- [x] 本地缓存
 - [ ] 彩色方块
 - [x] 游戏音效
 - [ ] i18n
diff --git a/src/components/ToggleDark.vue b/src/components/ToggleDark.vue
index 6f2bead..f41f467 100644
--- a/src/components/ToggleDark.vue
+++ b/src/components/ToggleDark.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useDark, useToggle } from '@vueuse/core'
-import { name } from '../../package.json'
+import { name } from '@/../package.json'
 import Button from '@/components/Button.vue'
 
 // 如果用户没有设置过主题选项(包含第一次进入系统)，那么就使用系统的明暗主题设置
diff --git a/src/composables/use-game-score.ts b/src/composables/use-game-score.ts
index d0cd987..5354c6d 100644
--- a/src/composables/use-game-score.ts
+++ b/src/composables/use-game-score.ts
@@ -1,4 +1,5 @@
 import type { GameLevel, LEVEL_GRIDS } from '@/config/game'
+import { getHighestScoreInHistory } from '@/composables/use-local-cache'
 
 export function useGameScore(
   { rate: multiplier }: typeof LEVEL_GRIDS[GameLevel],
@@ -11,6 +12,9 @@ export function useGameScore(
   const deltaScore = shallowRef(0)
   const showDeltaScore = shallowRef(false)
 
+  const highestScore = shallowRef(0)
+  const showScoreBadge = shallowRef(false)
+
   let lastTimestamp = 0
   let timestampId = -1
 
@@ -53,14 +57,28 @@ export function useGameScore(
     showDeltaScore.value = false
   }
 
+  // 更新历史最高分状态
+  function updateHighestScoreStatus(level: GameLevel) {
+    showScoreBadge.value = false
+
+    getHighestScoreInHistory(level).then((v) => {
+    // 更新历史最高分
+      highestScore.value = v || 0
+    })
+  }
+
   return {
     timestamp,
     gameScore,
     deltaScore,
+    highestScore,
     showDeltaScore,
+    showScoreBadge,
+
     setGameScore,
     stopRecording,
     startRecording,
     onEndHideDeltaScore,
+    updateHighestScoreStatus,
   }
 }
diff --git a/src/composables/use-game-sounds.ts b/src/composables/use-game-sounds.ts
index 9d625ba..c58c73b 100644
--- a/src/composables/use-game-sounds.ts
+++ b/src/composables/use-game-sounds.ts
@@ -1,5 +1,5 @@
 import { useStorage, useToggle } from '@vueuse/core'
-import { name } from '../../package.json'
+import { name } from '@/../package.json'
 
 interface GameSounds {
   enableSounds: Ref<boolean>
diff --git a/src/composables/use-game-status.ts b/src/composables/use-game-status.ts
index 63e55ab..d2bb16d 100644
--- a/src/composables/use-game-status.ts
+++ b/src/composables/use-game-status.ts
@@ -1,7 +1,5 @@
 import { type GameLevel, LEVEL_GRIDS } from '@/config/game'
 
-import { getHighestScoreInHistory } from '@/composables/use-local-cache'
-
 // 游戏核心状态管理，分数、生命值、目标方块等
 export function useGameStatus() {
   const route = useRoute()
@@ -43,19 +41,6 @@ export function useGameStatus() {
   const gameHealth = shallowRef(levelConfig.health)
   const gameHealthList = computed(() => Array.from({ length: levelConfig.health + 1 }, (_, i) => i))
 
-  const highestScore = shallowRef(0)
-  const showHighestScoreBadge = shallowRef(false)
-
-  // 更新历史最高分状态
-  function updateHighestScoreStatus() {
-    showHighestScoreBadge.value = false
-
-    getHighestScoreInHistory(level).then((v) => {
-    // 更新历史最高分
-      highestScore.value = v || 0
-    })
-  }
-
   // 生成目标方块
   function generateRandomTargetBlock() {
     const { min, max, grid } = levelConfig
@@ -90,11 +75,7 @@ export function useGameStatus() {
     gameHealth,
     levelConfig,
     targetBlocks,
-    highestScore,
     gameHealthList,
-    showHighestScoreBadge,
-
-    updateHighestScoreStatus,
     generateRandomTargetBlock,
   }
 }
diff --git a/src/composables/use-local-cache.ts b/src/composables/use-local-cache.ts
index fecfa9c..dfc48a8 100644
--- a/src/composables/use-local-cache.ts
+++ b/src/composables/use-local-cache.ts
@@ -1,5 +1,5 @@
 import localforage from 'localforage'
-import { name } from '../../package.json'
+import { name } from '@/../package.json'
 import type { GameLevel } from '@/config/game'
 
 localforage.config({
diff --git a/src/views/game/[level].vue b/src/views/game/[level].vue
index 21040e3..07bb573 100644
--- a/src/views/game/[level].vue
+++ b/src/views/game/[level].vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import confetti from 'canvas-confetti'
 
+import { name } from '@/../package.json'
+
 import { useGameStatus } from '@/composables/use-game-status'
 import { useGameScore } from '@/composables/use-game-score'
 import { useCheckedBlocks } from '@/composables/use-checked-blocks'
@@ -27,11 +29,7 @@ const {
   gameHealth,
   levelConfig,
   targetBlocks,
-  highestScore,
   gameHealthList,
-  showHighestScoreBadge,
-
-  updateHighestScoreStatus,
   generateRandomTargetBlock,
 } = useGameStatus()
 
@@ -46,11 +44,14 @@ const {
   timestamp,
   gameScore,
   deltaScore,
+  highestScore,
   showDeltaScore,
+  showScoreBadge,
   setGameScore,
   stopRecording,
   startRecording,
   onEndHideDeltaScore,
+  updateHighestScoreStatus,
 } = useGameScore(levelConfig, targetBlocks)
 
 const {
@@ -85,8 +86,8 @@ function onFinishedPreviewCountdown() {
 }
 
 async function startGame() {
-  updateHighestScoreStatus()
   generateRandomTargetBlock()
+  updateHighestScoreStatus(level)
 
   // 重置所有错误块的选中
   uncheckAllBlocks()
@@ -112,14 +113,14 @@ function onCheckResult() {
 
   // 如果匹配成功
   if (matched) {
-    playSuccessSound()
-    setGameScore()
     startGame()
+    setGameScore()
+    playSuccessSound()
 
     return
   }
 
-  // 如果上一步是选错的
+  // 如果上一步是选错的, 那么游戏状态会被设置为暂停
   if (gameStatus.value.pause) {
     startGame()
     return
@@ -158,7 +159,7 @@ function gameOver() {
   // 如果分数比历史最高分高, 更新历史最高分, 并播放纸屑
   if (gameScore.value > highestScore.value) {
     highestScore.value = gameScore.value
-    showHighestScoreBadge.value = true
+    showScoreBadge.value = true
 
     playOverSound()
     confetti({ spread: 120, particleCount: 300 })
@@ -202,15 +203,62 @@ function onGameTabVisibilityChange() {
   startPreviewCountdown()
 }
 
+// 当在当前页面刷新或退出的时候保存本地状态以便于恢复上次的状态
+// 但是只保存游戏的分数、生命值和选中的方块的状态，重新进入后会重新进入预览模式
+const savedLocalStatusKey = `${name}.fe.game-status.${level}`
+
+// 从本地恢复游戏状态
+function onRestoreLocalStatus() {
+  const localCache = localStorage.getItem(savedLocalStatusKey)
+
+  if (!localCache) {
+    return
+  }
+
+  try {
+    const { _score, _health, _blocks } = JSON.parse(localCache)
+
+    gameScore.value = _score
+    gameHealth.value = _health
+    targetBlocks.value = new Set(_blocks)
+
+    uncheckAllBlocks()
+    checkedTargetBlock()
+
+    // 恢复后进入预览模式, 重新开始读秒，主要是需要恢复分数和血量
+    setGameStatus('previewing')
+    resetPrewiewCountdown()
+    startPreviewCountdown()
+
+    // 恢复后删除本地缓存
+    localStorage.removeItem(savedLocalStatusKey)
+  } catch (e) { }
+}
+
+// 保存游戏状态到本地
+function onPageHideSaveLocalStatus() {
+  // 保存游戏状态
+  localStorage.setItem(savedLocalStatusKey, JSON.stringify({
+    _score: gameScore.value,
+    _health: gameHealth.value,
+    _blocks: [...targetBlocks.value],
+  }))
+}
+
 onMounted(() => {
   startGame()
+  onRestoreLocalStatus()
 
   document.addEventListener('visibilitychange', onGameTabVisibilityChange)
+  window.addEventListener('pagehide', onPageHideSaveLocalStatus, { once: true })
 })
 
 onBeforeUnmount(() => {
   stopRecording()
+
   document.removeEventListener('visibilitychange', onGameTabVisibilityChange)
+  // 如果是退出了当前页面再刷新的则不保存状态
+  window.removeEventListener('pagehide', onPageHideSaveLocalStatus)
 })
 </script>
 
@@ -263,7 +311,7 @@ onBeforeUnmount(() => {
       <div class="relative mb-6 text-5xl text-center">
         <span class="z-10 font-mono font-medium">{{ formatScore(gameScore) }}</span>
 
-        <span v-if="showHighestScoreBadge" class="absolute -translate-x-2 text-xs rotate-45 inline-block font-bold px-2 rounded-full border-2 border-red-500 text-red-500">BEST</span>
+        <span v-if="showScoreBadge" class="absolute -translate-x-2 text-xs rotate-45 inline-block font-bold px-2 rounded-full border-2 border-red-500 text-red-500">BEST</span>
 
         <Transition name="increase-score">
           <span

From ce9500d5c9d6ea3fe9439fd324d9d682db159f4b Mon Sep 17 00:00:00 2001
From: libondev <bon.li@outlook.com>
Date: Sun, 7 Apr 2024 21:46:48 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81PC=20=E7=AB=AF?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E6=93=8D=E4=BD=9C=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                  |  1 +
 src/views/game/[level].vue | 25 ++++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6e8ec73..31c7425 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@
 - [x] 本地缓存
 - [ ] 彩色方块
 - [x] 游戏音效
+- [x] 游戏界面增加键盘操作
 - [ ] i18n
 - [ ] 积分商店，积分收集、兑换
 - [ ] 道具系统
diff --git a/src/views/game/[level].vue b/src/views/game/[level].vue
index 07bb573..c57b605 100644
--- a/src/views/game/[level].vue
+++ b/src/views/game/[level].vue
@@ -104,6 +104,10 @@ async function startGame() {
 }
 
 function onCheckResult() {
+  if (!gameStatus.value.playing) {
+    return
+  }
+
   const { matched, blocks } = getAllCheckedResult()
 
   if (!matched && !blocks.length) {
@@ -245,10 +249,25 @@ function onPageHideSaveLocalStatus() {
   }))
 }
 
+// PC 端监听键盘按下事件
+function onBoardKeyDown({ code }: KeyboardEvent) {
+  const KEY_EVENTS_MAP = {
+    Enter: onCheckResult,
+    Delete: onResetBlocks,
+  } as const
+
+  KEY_EVENTS_MAP[code as keyof typeof KEY_EVENTS_MAP]?.()
+}
+
 onMounted(() => {
   startGame()
   onRestoreLocalStatus()
 
+  // 非移动端增加键盘事件
+  if (!window.ontouchstart) {
+    document.addEventListener('keydown', onBoardKeyDown)
+  }
+
   document.addEventListener('visibilitychange', onGameTabVisibilityChange)
   window.addEventListener('pagehide', onPageHideSaveLocalStatus, { once: true })
 })
@@ -256,9 +275,13 @@ onMounted(() => {
 onBeforeUnmount(() => {
   stopRecording()
 
-  document.removeEventListener('visibilitychange', onGameTabVisibilityChange)
+  if (!window.ontouchstart) {
+    document.removeEventListener('keydown', onBoardKeyDown)
+  }
+
   // 如果是退出了当前页面再刷新的则不保存状态
   window.removeEventListener('pagehide', onPageHideSaveLocalStatus)
+  document.removeEventListener('visibilitychange', onGameTabVisibilityChange)
 })
 </script>