add 支持选关

src/pages/IndexPage.vue

@@ -1,119 +1,65 @@
 <template>
   <div id="indexPage">
-    <a-row align="center">
-      <a-button
-        type="primary"
-        block
-        style="margin-bottom: 16px"
-        @click="doStart"
-      >
-        开始
-      </a-button>
-      <!-- 分层选块 -->
-      <div class="level-board">
-        <div
-          v-for="(block, idx) in levelBlocksVal"
-          v-show="gameStatus > 0"
-          :key="idx"
-          class="block level-block"
-          :class="{ disabled: block.lowerThanBlocks.length > 0 }"
-          :data-id="block.id"
-          :style="{
-            zIndex: 100 + block.level,
-            left: block.x * widthUnit + 'px',
-            top: block.y * heightUnit + 'px',
-          }"
-          @click="(e) => doClickBlock(block, e)"
-        >
-          {{ block.type }}
-        </div>
-      </div>
-      <!-- 随机选块 -->
-      <div class="random-board">
-        <div
-          v-for="(randomBlock, index) in randomBlocksVal"
-          :key="index"
-          class="random-area"
-        >
-          <div
-            v-if="randomBlock.length > 0"
-            class="block"
-            @click="(e) => doClickBlock(randomBlock[0], e, index)"
-          >
-            {{ randomBlock[0].type }}
-          </div>
-          <div
-            v-for="num in Math.max(randomBlock.length - 1, 0)"
-            :key="num"
-            class="block disabled"
-          ></div>
-        </div>
-      </div>
-      <!-- 槽位 -->
-      <div v-if="slotAreaVal.length > 0" class="slot-board">
-        <div
-          v-for="(slotBlock, index) in slotAreaVal"
-          :key="index"
-          class="block"
-        >
-          {{ slotBlock?.type }}
-        </div>
-      </div>
-    </a-row>
+    <h1>🐟 鱼了个鱼</h1>
+    <div style="margin-bottom: 16px">低配版羊了个羊小游戏，仅供消遣</div>
+    <a-button
+      block
+      style="margin-bottom: 16px"
+      @click="toGamePage(easyGameConfig)"
+    >
+      简单模式
+    </a-button>
+    <a-button
+      block
+      style="margin-bottom: 16px"
+      @click="toGamePage(middleGameConfig)"
+    >
+      中等模式
+    </a-button>
+    <a-button
+      block
+      style="margin-bottom: 16px"
+      @click="toGamePage(hardGameConfig)"
+    >
+      困难模式
+    </a-button>
+    <a-button
+      block
+      style="margin-bottom: 16px"
+      @click="toGamePage(lunaticGameConfig)"
+    >
+      地域模式
+    </a-button>
+    <a-button block style="margin-bottom: 16px" disabled @click="toGamePage">
+      自定义（暂未开放）
+    </a-button>
   </div>
 </template>
 
 <script setup lang="ts">
-import useGame from "../core/game";
+import { useRouter } from "vue-router";
+import {
+  easyGameConfig,
+  middleGameConfig,
+  hardGameConfig,
+  lunaticGameConfig,
+} from "../core/gameConfig";
+import { useGlobalStore } from "../core/globalStore";
 
-const {
-  gameStatus,
-  levelBlocksVal,
-  randomBlocksVal,
-  slotAreaVal,
-  widthUnit,
-  heightUnit,
-  doClickBlock,
-  doStart,
-} = useGame();
+const router = useRouter();
+
+const { setGameConfig } = useGlobalStore();
+
+const toGamePage = (config?: GameConfig) => {
+  if (config) {
+    setGameConfig(config);
+  }
+  router.push("/game");
+};
 </script>
 
 <style scoped>
-.level-board {
-  position: relative;
-}
-
-.level-block {
-  position: absolute;
-}
-
-.random-board {
-  margin-top: 8px;
-}
-
-.random-area {
-  margin-top: 8px;
-}
-
-.slot-board {
-  margin-top: 24px;
-  border: 10px solid saddlebrown;
-}
-
-.block {
-  font-size: 28px;
-  width: 42px;
-  height: 42px;
-  line-height: 42px;
-  border: 1px solid #eee;
-  background: white;
+#indexPage {
   text-align: center;
-  vertical-align: top;
-  display: inline-block;
-}
-
-.disabled {
-  background: grey;
-  cursor: not-allowed;
 }
 </style>