From 95db5a48aff79b5edb333265f43812b5d54313af Mon Sep 17 00:00:00 2001
From: wally <18603454788@163.com>
Date: Mon, 20 Dec 2021 16:36:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E8=AE=AD=E7=BB=83?=
 =?UTF-8?q?=E9=83=A8=E4=BD=8D=E5=8F=8A=E5=90=84=E9=83=A8=E4=BD=8D=E5=AF=B9?=
 =?UTF-8?q?=E5=BA=94=E6=B8=B8=E6=88=8F=E9=85=8D=E7=BD=AE;=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=B7=B3=E8=BD=AC=E9=80=BB=E8=BE=91=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                 |  6 +++---
 src/config/gameList.js      | 40 +++++++++++++++++++++++++++++++++++++
 src/config/trainSite.js     |  7 +++++++
 src/routers/index.js        |  3 ++-
 src/store/index.js          | 26 ++++++++++++++----------
 src/views/GameList.vue      | 22 ++++++++++++++++----
 src/views/Index.vue         |  7 ++-----
 src/views/TrainSiteList.vue | 24 ++++++++++++++++++----
 8 files changed, 108 insertions(+), 27 deletions(-)
 create mode 100644 src/config/gameList.js
 create mode 100644 src/config/trainSite.js

diff --git a/src/App.vue b/src/App.vue
index 279c91b..07f1866 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -39,9 +39,9 @@ body,
 }
 
 html {
-  background-size: cover;
-  background: url('@/assets/bg.png') no-repeat fixed center center;
-  overflow: hidden;
+  /*background-size: cover;*/
+  /*background: url('@/assets/bg.png') no-repeat fixed center center;*/
+  /*overflow: hidden;*/
 }
 
 .clear:after {
diff --git a/src/config/gameList.js b/src/config/gameList.js
new file mode 100644
index 0000000..e8b1832
--- /dev/null
+++ b/src/config/gameList.js
@@ -0,0 +1,40 @@
+// 游戏列表
+export const GAME_LIST = [
+  { id: '1', name: 'balloon', text: '踩气球', order: 1, site: 'LowerLimb' },
+  { id: '2', name: 'tomato', text: '番茄炒蛋', order: 2, site: 'Hand' },
+  { id: '3', name: 'hurdle', text: '跨栏', order: 3, site: 'LowerLimb' },
+  { id: '4', name: 'basketball', text: '投篮', order: 4, site: 'UpperLimb' },
+  { id: '5', name: 'bird', text: '鸟妈妈回家', order: 5, site: 'UpperLimb' },
+  { id: '6', name: 'bomb', text: '太空战机', order: 6, site: 'Hand' },
+  { id: '7', name: 'football', text: '踢足球', order: 7, site: 'LowerLimb' },
+  { id: '8', name: 'apple', text: '摘苹果', order: 8, site: 'Hand' },
+  { id: '9', name: 'orange-juice', text: '挤橙汁', order: 9, site: 'Hand' },
+  { id: '10', name: 'golf', text: '高尔夫', order: 10, site: 'UpperLimb' },
+  { id: '11', name: 'fish', text: '大鱼吃小鱼', order: 11, site: 'Hand' },
+  { id: '12', name: 'radish', text: '拔萝卜', order: 12, site: 'UpperLimb' },
+];
+
+/**
+ * 游戏列表 按分类展示
+ * @returns {{LowerLimb: Object[], Hand: Object[], UpperLimb: Object[]}}
+ * @constructor
+ */
+export function getAllGames() {
+  const result = {};
+  GAME_LIST.forEach(item => {
+    if (result[item.site]) {
+      result[item.site].push(item);
+    } else {
+      result[item.site] = [item];
+    }
+  });
+  return result;
+}
+
+/* eslint-disable max-len */
+/**
+ * 获取某个分类下游戏列表
+ * @param { string } siteName 训练部位name
+ * @returns {({site: string, name: string, id: string, text: string, order: number}|{site: string, name: string, id: string, text: string, order: number}|{site: string, name: string, id: string, text: string, order: number}|{site: string, name: string, id: string, text: string, order: number}|{site: string, name: string, id: string, text: string, order: number})[]}
+ */
+export const getGamesBySite = siteName => GAME_LIST.filter(item => item.site === siteName);
diff --git a/src/config/trainSite.js b/src/config/trainSite.js
new file mode 100644
index 0000000..6310ff9
--- /dev/null
+++ b/src/config/trainSite.js
@@ -0,0 +1,7 @@
+// 训练列表
+// eslint-disable-next-line import/prefer-default-export
+export const TRAIN_SITE_LIST = [
+  { id: '1', name: 'UpperLimb', text: '上肢训练', order: 1 },
+  { id: '2', name: 'Hand', text: '手部训练', order: 2 },
+  { id: '3', name: 'LowerLimb', text: '下肢训练', order: 3 },
+];
diff --git a/src/routers/index.js b/src/routers/index.js
index 25f84f0..262b209 100644
--- a/src/routers/index.js
+++ b/src/routers/index.js
@@ -14,7 +14,8 @@ const router = createRouter({
       path: '/',
       redirect: '/kangfu/game/start',
     },
-  ].concat(routes),
+    ...routes,
+  ],
 });
 
 export default router;
diff --git a/src/store/index.js b/src/store/index.js
index 4d6cf1f..cc3c57f 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,20 +1,26 @@
 import { createStore } from 'vuex';
+import { getGamesBySite } from 'config/gameList';
 
 export default createStore({
-  state: { modal: false, monitor: true },
-  getters: {},
+  state: { selectedSite: '' },
+  getters: {
+    /**
+     * 当前选中的训练部位下的 游戏列表
+     * @param {string} selectedSite
+     * @returns {{site: string, name: string, id: string, text: string, order: number}[]|*[]}
+     */
+    selectedGames({ selectedSite }) {
+      return getGamesBySite(selectedSite) || [];
+    },
+  },
   mutations: {
     /**
-     * 设置modal是否显示
+     * 设置选中的训练部位
      * @param state
-     * @param {Boolean} display
+     * @param {string} site
      */
-    setModal(state, display) {
-      state.modal = display;
-    },
-
-    setMonitor(state, display) {
-      state.monitor = display;
+    setSelectedSite(state, site) {
+      state.selectedSite = site;
     },
   },
   actions: {},
diff --git a/src/views/GameList.vue b/src/views/GameList.vue
index bdd3840..ff10ab2 100644
--- a/src/views/GameList.vue
+++ b/src/views/GameList.vue
@@ -1,11 +1,25 @@
 <template>
+  <button @click="$router.back()">返回</button>
   游戏列表选择
+  <div v-for="item in games" :key="item.id" @click="openGame(item.name)">
+    {{ item.text }}
+  </div>
 </template>
 
-<script>
-export default {
-  name: 'GameList',
-};
+<script setup>
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const games = computed(() => store.getters.selectedGames);
+
+/**
+ * 根据game.name 跳转到对应的游戏界面
+ * @param {string} gameName 游戏name与服务器路径对应
+ */
+function openGame(gameName) {
+  window.location.href = `https://www.tall.wiki/kangfu/game/${gameName}/win`;
+}
 </script>
 
 <style scoped></style>
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 7aa688f..adb93f6 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -1,11 +1,8 @@
 <template>
   入口页
+  <button @click="$router.push({ name: 'Train' })">进入游戏</button>
 </template>
 
-<script>
-export default {
-  name: 'Index',
-};
-</script>
+<script setup></script>
 
 <style scoped></style>
diff --git a/src/views/TrainSiteList.vue b/src/views/TrainSiteList.vue
index b5f38f1..b9643f0 100644
--- a/src/views/TrainSiteList.vue
+++ b/src/views/TrainSiteList.vue
@@ -1,11 +1,27 @@
 <template>
   训练部位选择
+  <div v-for="item in TRAIN_SITE_LIST" :key="item.id" @click="selectSite(item)">
+    {{ item.text }}
+  </div>
 </template>
 
-<script>
-export default {
-  name: 'TrainSite',
-};
+<script setup>
+import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
+import { TRAIN_SITE_LIST } from 'config/trainSite';
+
+const store = useStore();
+const router = useRouter();
+
+/**
+ * 设置选中的训练部位名称存到store里
+ * 跳转到游戏列表界面
+ * @param {Object} site 训练部位配置对象
+ */
+function selectSite(site) {
+  store.commit('setSelectedSite', site.name);
+  router.push({ name: 'Game' });
+}
 </script>
 
 <style scoped></style>