add 添加自定义游戏配置

This commit is contained in:
yupi 2022-09-16 22:17:31 +08:00
parent d03ef31503
commit 7d73c64d62
5 changed files with 87 additions and 5 deletions

View File

@ -24,7 +24,7 @@
#app {
padding: 16px 16px 50px;
background: url("assets/bg.jpeg");
height: 100vh;
min-height: 100vh;
background-size: 100% 100%;
}

View File

@ -1,6 +1,7 @@
import { RouteRecordRaw } from "vue-router";
import IndexPage from "../pages/IndexPage.vue";
import GamePage from "../pages/GamePage.vue";
import ConfigPage from "../pages/ConfigPage.vue";
export default [
{
@ -11,4 +12,8 @@ export default [
path: "/game",
component: GamePage,
},
{
path: "/config",
component: ConfigPage,
},
] as RouteRecordRaw[];

75
src/pages/ConfigPage.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div id="customConfigPage">
<h2>
自定义难度
<a-button style="float: right" @click="doBack">返回</a-button>
</h2>
<a-form
ref="formRef"
label-align="left"
:label-col="{ style: { width: '120px' } }"
:model="config"
@finish="handleFinish"
>
<a-form-item label="槽容量" name="slotNum">
<a-input-number v-model:value="config.slotNum" />
</a-form-item>
<a-form-item label="合成数" name="composeNum">
<a-input-number v-model:value="config.composeNum" />
</a-form-item>
<a-form-item label="动物数" name="typeNum">
<a-input-number v-model:value="config.typeNum" />
</a-form-item>
<a-form-item label="总层数" name="levelNum">
<a-input-number v-model:value="config.levelNum" />
</a-form-item>
<a-form-item label="每层块数" name="levelBlockNum">
<a-input-number v-model:value="config.levelBlockNum" />
</a-form-item>
<a-form-item label="边界收缩" name="borderStep">
<a-input-number v-model:value="config.borderStep" />
</a-form-item>
<a-form-item>
<a-button
type="primary"
html-type="submit"
style="margin-bottom: 12px"
block
>
开始
</a-button>
<a-button block @click="resetForm">重置</a-button>
</a-form-item>
</a-form>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance } from "ant-design-vue";
import { useRouter } from "vue-router";
import { useGlobalStore } from "../core/globalStore";
import { defaultGameConfig } from "../core/gameConfig";
const formRef = ref<FormInstance>();
const router = useRouter();
const { setGameConfig, setCustomConfig } = useGlobalStore();
const config = reactive<GameConfig>({ ...defaultGameConfig });
const handleFinish = (values: GameConfig) => {
setGameConfig(config);
setCustomConfig(config);
router.push("/game");
};
const resetForm = () => {
formRef?.value?.resetFields();
};
/**
* 回上一页
*/
const doBack = () => {
router.back();
};
</script>
<style></style>

View File

@ -1,6 +1,6 @@
<template>
<div id="gamePage">
<a-button @click="doBack"> 返回</a-button>
<a-button style="margin-bottom: 8px" @click="doBack"> 返回</a-button>
<a-row align="center">
<!-- 分层选块 -->
<div class="level-board">

View File

@ -30,8 +30,8 @@
>
地域模式
</a-button>
<a-button block style="margin-bottom: 16px" disabled @click="toGamePage">
自定义暂未开放
<a-button block style="margin-bottom: 16px" @click="toGamePage(null)">
自定义
</a-button>
</div>
</template>
@ -53,8 +53,10 @@ const { setGameConfig } = useGlobalStore();
const toGamePage = (config?: GameConfig) => {
if (config) {
setGameConfig(config);
router.push("/game");
} else {
router.push("/config");
}
router.push("/game");
};
</script>