组件化两栏显示

components.d.ts

@@ -14,6 +14,7 @@ declare module '@vue/runtime-core' {
     ASlider: typeof import('ant-design-vue/es')['Slider']
     Box: typeof import('./src/components/box.vue')['default']
     BoxAnimate: typeof import('./src/components/boxAnimate.vue')['default']
+    Colomn: typeof import('./src/components/colomn.vue')['default']
     EnemyOne: typeof import('./src/components/enemyOne.vue')['default']
     Scroll: typeof import('./src/components/scroll.vue')['default']
   }

public/project/items.js

@@ -345,7 +345,7 @@ var items_296f5d02_12fd_4166_a7c1_b5e830c9ee3a =
 		"name": "查看技能",
 		"text": "查看勇士的技能",
 		"canUseItemEffect": true,
-		"useItemEffect": "core.openSkills();"
+		"useItemEffect": "core.openSkill();"
 	},
 	"dagger": {
 		"cls": "constants",

public/project/plugins.js

@@ -6262,6 +6262,11 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
             core.plugin.chapterContent.value = chapter;
             core.plugin.chapterShowed.value = true;
         };
+
+        this.openSkill = function () {
+            if (main.replayChecking) return;
+            core.plugin.skillOpened.value = true;
+        };
     },
     remainEnemy: function () {
         /**
@@ -6343,5 +6348,19 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
             flags[setting] = v;
             return true;
         });
+    },
+    skillTree: function () {
+        /**
+         * @type {number[]}
+         */
+        const levels = [];
+
+        /**
+         * 获取技能等级
+         * @param {number} skill
+         */
+        this.getSkillLevel = function (skill) {
+            return (levels[skill] ??= 0);
+        };
     }
 };

src/components/colomn.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="colomn">
+        <div class="tools">
+            <span class="button-text" @click="emits('close')"
+                ><left-outlined /> 返回游戏</span
+            >
+        </div>
+        <div class="column-main" :id="`column-${id}`">
+            <Scroll class="column-left" :id="`column-left-${id}`">
+                <slot name="left"></slot>
+            </Scroll>
+            <a-divider
+                class="divider"
+                :type="isMobile ? 'horizontal' : 'vertical'"
+            ></a-divider>
+            <Scroll class="column-right" :id="`column-right-${id}`"
+                ><slot name="right"></slot
+            ></Scroll>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUpdated, ref } from 'vue';
+import { LeftOutlined } from '@ant-design/icons-vue';
+import Scroll from './scroll.vue';
+import { isMobile } from '../plugin/use';
+import { has } from '../plugin/utils';
+
+const emits = defineEmits<{
+    (e: 'close'): void;
+}>();
+
+const props = defineProps<{
+    width?: number;
+    height?: number;
+    left?: number;
+    right?: number;
+}>();
+
+const id = (1e8 * Math.random()).toFixed(0);
+
+let main: HTMLDivElement;
+let left: HTMLDivElement;
+let right: HTMLDivElement;
+
+function resize() {
+    main = document.getElementById(`column-${id}`) as HTMLDivElement;
+    left = document.getElementById(`column-left-${id}`) as HTMLDivElement;
+    right = document.getElementById(`column-right-${id}`) as HTMLDivElement;
+
+    if (has(props.width)) main.style.width = `${props.width}%`;
+    if (has(props.height)) main.style.height = `${props.height}%`;
+    if (has(props.left)) left.style.flexBasis = `${props.left}%`;
+    if (has(props.right)) right.style.flexBasis = `${props.right}%`;
+}
+
+onMounted(resize);
+onUpdated(resize);
+</script>
+
+<style lang="less" scoped>
+.colomn {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'normal';
+    font-size: 2.7vh;
+    user-select: none;
+}
+
+.column {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: 'normal';
+    font-size: 2.7vh;
+    user-select: none;
+}
+
+.column-main {
+    width: 70%;
+    height: 70%;
+    display: flex;
+    flex-direction: row;
+}
+
+.column-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.column-item {
+    width: 100%;
+    padding: 1% 3% 1% 3%;
+}
+
+.column-item[selectable='false'] {
+    color: gray;
+}
+
+.column-left {
+    flex-basis: 40%;
+    height: 100%;
+}
+
+.column-right {
+    flex-basis: 60%;
+    height: 100%;
+}
+
+.divider {
+    height: 100%;
+}
+
+.tools {
+    width: 100%;
+    font-family: 'normal';
+    font-size: 3.2vh;
+    height: 5vh;
+    position: fixed;
+    left: 10vw;
+    top: 5vh;
+}
+
+@media screen and (max-width: 600px) {
+    .column-main {
+        flex-direction: column;
+        width: 90%;
+        height: 75%;
+    }
+
+    .divider {
+        height: auto;
+        width: 100%;
+        margin: 5% 0 5% 0;
+    }
+
+    .column-left {
+        height: 40%;
+    }
+
+    .column-right {
+        height: 50%;
+    }
+}
+</style>

src/data/skill.json

@@ -0,0 +1,29 @@
+{
+    "none": {
+        "text": "无",
+        "opened": "true",
+        "desc": [
+            "当前未选择技能"
+        ]
+    },
+    "blade": {
+        "text": "断灭之刃",
+        "opened": "core.getSkillLevel(2) > 0",
+        "desc": [
+            "<span style=\"color: gold\">快捷键1</span>，开启后勇士攻击增加${level:2 * 10}%，",
+            "同时防御减少${level:2 * 10}%。",
+            "<br>",
+            "<br>",
+            "当前等级：${level:2}"
+        ]
+    },
+    "jump": {
+        "text": "跳跃",
+        "opened": "flags.skill2 === true",
+        "desc": [
+            "<span style=\"color: gold\">快捷键2</span>，消耗200点生命值，困难消耗400点，一个地图只能使用3次，",
+            "如果前方为可通行的地面，则不能使用该技能，如果前方为怪物，则将怪物移至勇士视线上第一个不能通行的方块后",
+            "如果前方为障碍物，则直接跳到该障碍物的后方。"
+        ]
+    }
+}

src/plugin/uiController.ts

@@ -5,6 +5,7 @@ import Toolbox from '../ui/toolbox.vue';
 import Equipbox from '../ui/equipbox.vue';
 import Settings from '../ui/settings.vue';
 import Desc from '../ui/desc.vue';
+import Skill from '../ui/skill.vue';
 
 export const bookOpened = ref(false);
 export const toolOpened = ref(false);
@@ -12,6 +13,7 @@ export const equipOpened = ref(false);
 export const showStatusBar = ref(false);
 export const settingsOpened = ref(false);
 export const descOpened = ref(false);
+export const skillOpened = ref(false);
 
 export const transition = ref(true);
 export const noClosePanel = ref(false);
@@ -24,7 +26,8 @@ const UI_LIST: [Ref<boolean>, Component][] = [
     [toolOpened, Toolbox],
     [equipOpened, Equipbox],
     [settingsOpened, Settings],
-    [descOpened, Desc]
+    [descOpened, Desc],
+    [skillOpened, Skill]
 ];
 
 /** ui栈 */
@@ -55,7 +58,8 @@ export default function init() {
         equipOpened,
         showStatusBar,
         settingsOpened,
-        descOpened
+        descOpened,
+        skillOpened
     };
 }
 

src/types/plugin.d.ts

@@ -139,6 +139,9 @@ interface PluginUis {
     /** 百科全书是否打开了 */
     readonly descOpened: Ref<boolean>;
 
+    /** 技能查看界面是否打开 */
+    readonly skillOpened: Ref<boolean>;
+
     /** ui栈 */
     readonly uiStack: Ref<Component[]>;
 
@@ -147,6 +150,11 @@ interface PluginUis {
      * @param chapter 显示的文字
      */
     showChapter(chapter: string): void;
+
+    /**
+     * 打开技能查看界面
+     */
+    openSkill(): void;
 }
 
 interface PluginUse {
@@ -192,6 +200,14 @@ interface PluginUse {
     useUp(ele: HTMLElement, fn: DragFn): void;
 }
 
+interface SkillTree {
+    /**
+     * 获取技能等级
+     * @param skill 技能索引
+     */
+    getSkillLevel(skill: number): number;
+}
+
 type Forward<T> = {
     [K in keyof T as T[K] extends Function
         ? K extends `_${string}`

src/ui/desc.vue

@@ -1,40 +1,25 @@
 <template>
-    <div id="desc">
-        <div id="tools">
-            <span class="button-text" @click="exit"
-                ><left-outlined /> 返回游戏</span
-            >
-        </div>
-        <div id="desc-main">
-            <Scroll id="desc-left">
-                <div id="desc-list">
-                    <span
-                        v-for="(data, k) in desc"
-                        class="selectable desc-item"
-                        :selected="selected === k"
-                        @click="selected = k"
-                        >{{ data.text }}</span
-                    >
-                </div>
-            </Scroll>
-            <a-divider
-                id="divider"
-                :type="isMobile ? 'horizontal' : 'vertical'"
-            ></a-divider>
-            <div id="desc-right">
-                <Scroll><span v-html="content"></span></Scroll>
-            </div>
-        </div>
-    </div>
+    <Colomn @close="exit" :width="80" :height="80" :left="30" :right="70"
+        ><template #left
+            ><div id="desc-list">
+                <span
+                    v-for="(data, k) in desc"
+                    class="selectable desc-item"
+                    :selected="selected === k"
+                    @click="selected = k"
+                    >{{ data.text }}</span
+                >
+            </div></template
+        >
+        <template #right><span v-html="content"></span></template
+    ></Colomn>
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import desc from '../data/desc.json';
-import { LeftOutlined } from '@ant-design/icons-vue';
-import Scroll from '../components/scroll.vue';
 import { has } from '../plugin/utils';
-import { isMobile } from '../plugin/use';
+import Colomn from '../components/colomn.vue';
 
 type DescKey = keyof typeof desc;
 
@@ -60,25 +45,6 @@ const content = computed(() => {
 </script>
 
 <style lang="less" scoped>
-#desc {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    font-size: 2.7vh;
-    font-family: 'normal';
-    user-select: none;
-}
-
-#desc-main {
-    width: 80%;
-    height: 80%;
-    display: flex;
-    justify-content: center;
-}
-
 #desc-left {
     flex-basis: 30%;
 }
@@ -88,47 +54,7 @@ const content = computed(() => {
     flex-direction: column;
 }
 
-#desc-right {
-    flex-basis: 70%;
-}
-
-#divider {
-    height: 100%;
-}
-
 .desc-item {
     padding: 1% 3% 1% 3%;
 }
-
-#tools {
-    width: 100%;
-    font-family: 'normal';
-    font-size: 3.2vh;
-    height: 5vh;
-    position: fixed;
-    left: 10vw;
-    top: 5vh;
-}
-
-@media screen and (max-width: 600px) {
-    #desc-main {
-        flex-direction: column;
-        width: 90%;
-        height: 75%;
-    }
-
-    #divider {
-        height: auto;
-        width: 100%;
-        margin: 5% 0 5% 0;
-    }
-
-    #desc-left {
-        height: 40%;
-    }
-
-    #desc-right {
-        height: 50%;
-    }
-}
 </style>

src/ui/settings.vue

@@ -1,50 +1,35 @@
 <template>
-    <div id="settings">
-        <div id="tools">
-            <span class="button-text tools" @click="exit"
-                ><left-outlined /> 返回游戏</span
-            >
-        </div>
-        <div id="settings-main">
-            <Scroll id="setting-left">
-                <div id="setting-list">
-                    <span
-                        class="selectable setting-item"
-                        :selected="selected === 'transition'"
-                        @click="click('transition')"
-                        >界面动画:&nbsp;&nbsp;&nbsp;{{
-                            transition ? 'ON' : 'OFF'
-                        }}</span
-                    >
-                    <span
-                        class="selectable setting-item"
-                        :selected="selected === 'itemDetail'"
-                        @click="click('itemDetail')"
-                        >宝石血瓶显伤:&nbsp;&nbsp;&nbsp;{{
-                            itemDetail ? 'ON' : 'OFF'
-                        }}</span
-                    >
-                    <span
-                        class="selectable setting-item"
-                        :selected="selected === 'autoSkill'"
-                        @click="click('autoSkill')"
-                        >自动切换技能:&nbsp;&nbsp;&nbsp;{{
-                            autoSkill ? 'ON' : 'OFF'
-                        }}</span
-                    >
-                </div>
-            </Scroll>
-            <a-divider
-                id="divider"
-                :type="isMobile ? 'horizontal' : 'vertical'"
-            ></a-divider>
-            <div id="setting-right">
-                <Scroll style="height: 100%">
-                    <span v-html="descText"></span>
-                </Scroll>
-            </div>
-        </div>
-    </div>
+    <Column :width="60" :height="60" @close="exit"
+        ><template #left
+            ><div id="setting-list">
+                <span
+                    class="selectable setting-item"
+                    :selected="selected === 'transition'"
+                    @click="click('transition')"
+                    >界面动画:&nbsp;&nbsp;&nbsp;{{
+                        transition ? 'ON' : 'OFF'
+                    }}</span
+                >
+                <span
+                    class="selectable setting-item"
+                    :selected="selected === 'itemDetail'"
+                    @click="click('itemDetail')"
+                    >宝石血瓶显伤:&nbsp;&nbsp;&nbsp;{{
+                        itemDetail ? 'ON' : 'OFF'
+                    }}</span
+                >
+                <span
+                    class="selectable setting-item"
+                    :selected="selected === 'autoSkill'"
+                    @click="click('autoSkill')"
+                    >自动切换技能:&nbsp;&nbsp;&nbsp;{{
+                        autoSkill ? 'ON' : 'OFF'
+                    }}</span
+                >
+            </div></template
+        >
+        <template #right><span v-html="descText"></span></template
+    ></Column>
 </template>
 
 <script lang="ts" setup>
@@ -52,9 +37,7 @@ import { computed, ref } from 'vue';
 import { transition, itemDetail, autoSkill } from '../plugin/settings';
 import settingInfo from '../data/settings.json';
 import { has } from '../plugin/utils';
-import Scroll from '../components/scroll.vue';
-import { LeftOutlined } from '@ant-design/icons-vue';
-import { isMobile } from '../plugin/use';
+import Column from '../components/colomn.vue';
 
 type Settings = typeof settingInfo;
 
@@ -94,24 +77,6 @@ function click(id: keyof Settings) {
 </script>
 
 <style lang="less" scoped>
-#settings {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-family: 'normal';
-    font-size: 2.7vh;
-    user-select: none;
-}
-
-#settings-main {
-    width: 60%;
-    height: 60%;
-    display: flex;
-    flex-direction: row;
-}
-
 #setting-list {
     display: flex;
     flex-direction: column;
@@ -121,50 +86,4 @@ function click(id: keyof Settings) {
     width: 100%;
     padding: 1% 3% 1% 3%;
 }
-
-#setting-left {
-    flex-basis: 40%;
-    height: 100%;
-}
-
-#setting-right {
-    flex-basis: 60%;
-    height: 100%;
-}
-
-#divider {
-    height: 100%;
-}
-
-#tools {
-    width: 100%;
-    font-family: 'normal';
-    font-size: 3.2vh;
-    height: 5vh;
-    position: fixed;
-    left: 10vw;
-    top: 5vh;
-}
-
-@media screen and (max-width: 600px) {
-    #settings-main {
-        flex-direction: column;
-        width: 90%;
-        height: 75%;
-    }
-
-    #divider {
-        height: auto;
-        width: 100%;
-        margin: 5% 0 5% 0;
-    }
-
-    #setting-left {
-        height: 40%;
-    }
-
-    #setting-right {
-        height: 50%;
-    }
-}
 </style>

src/ui/skill.vue

@@ -0,0 +1,78 @@
+<template>
+    <Column @close="exit" :width="70" :height="70"
+        ><template #left
+            ><div id="skill-list">
+                <span
+                    v-for="(v, k) in skills"
+                    class="selectable skill-item"
+                    :selected="k === selected"
+                    :selectable="skillOpened(k)"
+                    @click="select(k)"
+                    >{{ v.text }}</span
+                >
+            </div></template
+        >
+        <template #right><span v-html="content"></span></template
+    ></Column>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import skills from '../data/skill.json';
+import { has } from '../plugin/utils';
+import Column from '../components/colomn.vue';
+
+type Skills = keyof typeof skills;
+
+const selected = ref<Skills>('none');
+
+function skillOpened(skill: Skills) {
+    return eval(skills[skill].opened) as boolean;
+}
+
+function select(skill: Skills) {
+    if (!skillOpened(skill)) return;
+    selected.value = skill;
+}
+
+const content = computed(() => {
+    return eval(
+        '`' +
+            skills[selected.value].desc
+                .map((v, i, a) => {
+                    if (/^\d+\./.test(v)) return `${'&nbsp;'.repeat(12)}${v}`;
+                    else if (
+                        (has(a[i - 1]) &&
+                            v !== '<br>' &&
+                            a[i - 1] === '<br>') ||
+                        i === 0
+                    ) {
+                        return `${'&nbsp;'.repeat(8)}${v}`;
+                    } else return v;
+                })
+                .join('')
+                .replace(/level:(\d+)/g, 'core.getSkillLevel($1)') +
+            '`'
+    );
+});
+
+function exit() {
+    core.plugin.skillOpened.value = false;
+}
+</script>
+
+<style lang="less" scoped>
+#skill-list {
+    display: flex;
+    flex-direction: column;
+}
+
+.skill-item {
+    width: 100%;
+    padding: 1% 3% 1% 3%;
+}
+
+.skill-item[selectable='false'] {
+    color: gray;
+}
+</style>