feat: 添加训练部位及各部位对应游戏配置;页面跳转逻辑实现

src/App.vue

@@ -39,9 +39,9 @@ body,
 }
 
 html {
-  background-size: cover;
+  /*background-size: cover;*/
-  background: url('@/assets/bg.png') no-repeat fixed center center;
+  /*background: url('@/assets/bg.png') no-repeat fixed center center;*/
-  overflow: hidden;
+  /*overflow: hidden;*/
 }
 
 .clear:after {

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);

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 },
+];

src/routers/index.js

@@ -14,7 +14,8 @@ const router = createRouter({
       path: '/',
       redirect: '/kangfu/game/start',
     },
-  ].concat(routes),
+    ...routes,
+  ],
 });
 
 export default router;

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 },
+  state: { selectedSite: '' },
-  getters: {},
+  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) {
+    setSelectedSite(state, site) {
-      state.modal = display;
+      state.selectedSite = site;
-    },
-
-    setMonitor(state, display) {
-      state.monitor = display;
     },
   },
   actions: {},

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>
+<script setup>
-export default {
+import { useStore } from 'vuex';
-  name: 'GameList',
+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>

src/views/Index.vue

@@ -1,11 +1,8 @@
 <template>
   入口页
+  <button @click="$router.push({ name: 'Train' })">进入游戏</button>
 </template>
 
-<script>
+<script setup></script>
-export default {
-  name: 'Index',
-};
-</script>
 
 <style scoped></style>

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>
+<script setup>
-export default {
+import { useStore } from 'vuex';
-  name: 'TrainSite',
+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>