副本调整，新增秘境

1.副本位置全地图随机改为调整在地图特定位置随机
2.更改世界地图图片
3.新增大秘境和小秘境
4.副本难度由数字改为字符

src/assets/css/base.scss

@@ -143,19 +143,19 @@ button {
 // }
 
 .shabby {
-  color: #a1a1a1;
+  color: #a1a1a1 !important;
 }
 .ordinary {
-  color: #fff;
+  color: #fff !important;
 }
 .artifact {
-  color: #ff00ff;
+  color: #ff00ff !important;
 }
 .epic {
-  color: #f78918;
+  color: #f78918 !important;
 }
 .unique {
-  color: #ff0000;
+  color: #ff0000 !important;
 }
 .colorful {
   background-image: -webkit-linear-gradient(
@@ -171,9 +171,9 @@ button {
     #ffff00 80%,
     #00ff00 90%,
     #4cfdfd 100%
-  );
+  ) !important;
-  -webkit-background-clip: text;
+  -webkit-background-clip: text !important;
-  color: transparent;
+  color: transparent !important;
 }
 
 .fade-enter-active,

src/config/assets.ts

@@ -48,12 +48,14 @@ export const colorful_gif = root + '/img/colorful.gif';
 export const warning_icon = root + '/img/tip/warning.png';
 
 export const dungeon_icon = {
-  map: root + '/img/map/map.jpg',
+  map: root + '/img/map/map.png',
   player: root + '/img/map/player-s.png',
   monster: root + '/img/map/monster.png',
   boss: root + '/img/map/boss.png',
-  0: root + '/img/map/d1.png',
+  normal: root + '/img/map/d1.png',
-  1: root + '/img/map/d1.png',
+  hard: root + '/img/map/d2.png',
-  2: root + '/img/map/d2.png',
+  pain: root + '/img/map/d3.png',
-  3: root + '/img/map/d3.png',
+  xiaomi: root + '/img/map/xiaomi.png',
+  dami: root + '/img/map/dami.png',
+  6: root + '/img/map/boss_warrior.png',
 };

src/config/beings.ts

@@ -1,7 +1,11 @@
 import { initialWeapon, initialArmor, initialNeck, initialRing, initialJewelry, initialpants, initialshoes, initialbracers, Equip } from '@/config';
-const monster_attr_factor = [0.9, 1, 1.15, 1.4];
 export const type_monster = 'monster';
 export const type_boss = 'boss';
+export const difficultys = ['normal', 'hard', 'pain', 'xiaomi', 'dami'];
+export const show_lv_df = ['normal', 'hard', 'pain'];
+const base_attr_factor = { normal: 1, hard: 1.15, pain: 1.4, xiaomi: 1.6, dami: 3 };
+const extra_factor = { normal: 0, hard: 0, pain: 0, xiaomi: 1, dami: 2 };
+const rate_factor = { normal: 1, hard: 2, pain: 3, xiaomi: 4, dami: 5 };
 
 export class Attribute {
   lv: number = 1;
@@ -43,6 +47,7 @@ export class Attribute {
 
 export class Player {
   lv: number = 1;
+  layer: number = 1;
   coins: number = 0;
   weapon: Equip = initialWeapon();
   armor: Equip = initialArmor();
@@ -73,58 +78,92 @@ export class RebornPoints extends RebornAttribute {
 }
 
 export class Monster extends Attribute {
-  difficulty: number;
+  difficulty: string;
   type: string = type_monster;
   equipRates: number[];
-  extraRate: number;
+  extraRate: number[];
+  df: number;
+  ef: number;
+  lf: number;
 
-  constructor(lv, difficulty) {
+  constructor(lv, difficulty: string, layer?: number) {
     super();
     this.lv = lv;
     this.difficulty = difficulty;
-    const df = monster_attr_factor[this.difficulty];
+    this.df = base_attr_factor[this.difficulty];
-    this.baseAtk = Math.ceil(lv * lv ** 1.1 * (Math.random() * 1 + 2) * df);
+    this.ef = extra_factor[difficulty];
-    this.atk = this.baseAtk;
+    layer = layer || 0;
-    this.hp = Math.ceil(lv * lv ** 1.1 * (Math.random() * 5 + 16) * df);
+    this.lf = ((this.lv + layer) / this.lv) ** 2;
-    this.coins = Math.ceil(lv ** 1.16 * (Math.random() * 5 + 11) * df);
+    this.callAtk(2.5);
-    this.equipRates = [0.2 * df, 0.08 * df, 0.03 * df];
+    this.callHp(17);
-    this.extraRate = 0;
+    this.callCoins(11);
+    this.callCrit(5);
+    this.callDef();
+    this.equipRates = [0.2 * this.df, 0.08 * this.df, 0.03 * this.df];
+    this.extraRate = [0, 0];
   }
+  callAtk = (variable) => {
+    this.baseAtk = Math.ceil(this.lv ** 2.1 * (Math.random() * 0.2 + variable) * this.df * this.lf);
+    this.atk = this.baseAtk;
+  };
+  callHp = (variable) => {
+    this.hp = Math.ceil(this.lv ** 2.1 * (Math.random() * 3 + variable) * this.df * this.lf);
+  };
+  callCoins = (variable) => {
+    this.coins = Math.ceil(this.lv ** 1.16 * (Math.random() * 5 + variable) * this.df * this.lf);
+  };
+  callDef = () => {
+    this.def = Math.ceil(50 * this.ef * this.lf);
+  };
+  callCrit = (variable) => {
+    this.crit = Math.ceil(variable * this.ef * this.lf);
+    this.critDmg = Math.ceil((150 + 50 * this.ef) * this.lf ** 0.5);
+  };
 }
 
 export class BossMonster extends Monster {
   type: string = type_boss;
-  constructor(lv, difficulty) {
+  constructor(lv, difficulty, layer?: number) {
-    super(lv, difficulty);
+    super(lv, difficulty, layer);
-    const df = monster_attr_factor[this.difficulty];
+    this.callAtk(3.5);
-    this.baseAtk = Math.ceil(lv * lv ** 1.1 * (Math.random() * 1 + 3) * df);
+    this.callHp(31);
-    this.atk = this.baseAtk;
+    this.callCoins(30.5);
-    this.hp = Math.ceil(lv * lv ** 1.1 * (Math.random() * 5 + 30) * df);
+    this.callCrit(15);
-    this.coins = Math.ceil(lv ** 1.16 * (Math.random() * 10 + 28) * df);
+    const rf = rate_factor[difficulty];
-    this.equipRates = [0.25 - 0.05 * df, 0.55 - 0.15 * df, 0.15 + 0.15 * df, 0.05 + 0.05 * df];
+    this.equipRates = [0.25 - 0.05 * rf, 0.55 - 0.1 * rf, 0.15 + 0.1 * rf, 0.05 + 0.05 * rf];
-    this.extraRate = 0.02 * ((this.difficulty - 1) * 5 + 1);
+    let uniqueRate = 0.02 * ((rf - 1) * 5 + 1);
+    const colorfulRate = 0.04 * (rf - 3) * this.lf;
+    if (uniqueRate + colorfulRate > 1) {
+      uniqueRate = 1 - colorfulRate;
+    }
+    this.extraRate = [uniqueRate, colorfulRate];
   }
 }
 
 export class Dungeon {
   lv: number;
-  difficulty?: number;
+  difficulty: string;
   monsters?: Monster[] = new Array();
   needDps?: number;
+  left: string = '';
+  right: string = '';
+  top: string = '';
 
-  constructor(lv, difficulty) {
+  constructor(lv: number, difficulty: string, layer?: number) {
     this.lv = lv;
-    this.setDifficulty(difficulty);
+    this.difficulty = difficulty;
+    this.setDifficulty(difficulty, layer);
   }
-  setDifficulty(difficulty) {
+  setDifficulty(difficulty: string, layer?: number) {
     const lv = this.lv;
     this.difficulty = difficulty;
     this.monsters = new Array();
     for (let i = 0; i < 4; i++) {
-      this.monsters.push(new Monster(lv, difficulty));
+      this.monsters.push(new Monster(lv, this.difficulty, layer));
     }
-    this.monsters.push(new BossMonster(lv, difficulty));
+    const boss = new BossMonster(lv, difficulty, layer);
-    this.needDps = lv * lv ** 1.3 * 2 * difficulty;
+    this.monsters.push(boss);
+    this.needDps = Math.ceil(lv * lv ** 1.1 * 32.5 * base_attr_factor[this.difficulty]);
   }
 }
 

src/config/i18n/zh/index.ts

@@ -97,13 +97,30 @@ export default class Zh {
   autoSell = ['自动出售设置', '若勾选会在副本获得该品质装备时自动出售，背包满时自动出售所有品质装备', '自动出售装备'];
 
   dungeon = '副本(T)';
-  difficulty = ['简单', '普通', '困难', '极难'];
+  //   difficulty = ['简单', '普通', '困难', '极难', '小秘境', '大秘境'];
-  dungeonTips = ['当前副本难度', '双击或右键开始挑战副本'];
+  difficulty = {
+    normal: '普通',
+    hard: '困难',
+    pain: '极难',
+    xiaomi: '小秘境',
+    dami: '大秘境',
+  };
+  layer = '层';
+  dungeonTips = [
+    '当前副本',
+    '当前副本BOSS额外爆率',
+    '正常副本难度等级为：普通、困难、极难',
+    'BOSS有概率额外掉落独特装备，难度越高爆率越高',
+    '100以后开放小秘境和大秘境',
+    '大小秘境有概率掉落多彩品质装备',
+    '多彩品质装备有概率提升为远古(lv+20)或太古(lv+20且满ROLL)',
+    '大秘境有概率掉落强化保护卷',
+  ];
+  dungeonAction = ['重复挑战', '向上挑战', '开始挑战'];
 
   player = '你';
   monster = '小怪';
   boss = '首领';
-  eliteMonster = '无尽模式精英怪';
   startDungeon = '你已进入';
   battle = '你遭遇了(lv${0}${1}),正在战斗中...';
   bouts = '点击查看战斗过程';

src/config/skill/base.ts

@@ -1,4 +1,4 @@
-import { BattleRole, replace } from '@/tool';
+import { BattleRole, callReducPercent, replace } from '@/tool';
 import { type_boss } from '@/config';
 import i18n from '../i18n';
 const { t } = i18n;
@@ -171,11 +171,15 @@ export class Attack extends ActionSkill {
     const attr = owner.attr;
     const baseAtk = attr.baseAtk + this.extraAtk;
     let dmg = ((baseAtk * (1 + attr.atkPercent / 100) * this.precent) / 100) * (1 + attr.dmgPercent / 100);
-    dmg = dmg * (1 - target.attr.reducPercent) * (1 - target.attr.dmgReduc / 100) - target.attr.bloc;
+    // const reducPercent = callReducPercent(target.attr.def);
-    owner.crit = Math.random() < owner.attr.crit / 100;
+    const reducPercent = target.attr.reducPercent;
+    dmg = dmg * (1 - reducPercent) * (1 - target.attr.dmgReduc / 100) - target.attr.bloc;
+    owner.crit = Math.random() < (owner.attr.crit - target.attr.critAvoid) / 100;
     let critLog = '';
     if (owner.crit) {
-      dmg *= owner.attr.critDmg / 100;
+      let critDmg = owner.attr.critDmg - target.attr.critDmgReduc;
+      critDmg < 100 ? 100 : critDmg;
+      dmg *= critDmg / 100;
       critLog = t('skill.crit.0');
     }
     dmg = dmg < 1 ? 1 : dmg;

src/store/action.ts

@@ -88,6 +88,7 @@ const loadArchive = (commit, data) => {
   } else {
     commit('set_player_equips', data.equips);
     commit('set_player_lv', data.lv || 1);
+    commit('set_player_layer', data.layer || 1);
     commit('set_player_coins', data.coins || 0);
     commit('set_backpack', data.grid);
     commit('set_auto_sell', data.autoSell);

src/store/mutation.ts

@@ -83,6 +83,10 @@ export const set_player_lv = (state, data) => {
   data = data < 1 ? 1 : data;
   state.playerAttribute.lv = parseInt(data || 1);
 };
+export const set_player_layer = (state, data) => {
+  data = data < 1 ? 1 : data;
+  state.playerAttribute.layer = parseInt(data);
+};
 export const set_reborn_points = (state, rebornPoints) => {
   state.rebornPoints = rebornPoints;
   const rebornAttribute = {};

src/store/state.ts

@@ -36,5 +36,7 @@ export default {
     //   backgroundPosition: '0px 96px',
     // },
     battleShow: false,
+    repeat: true,
+    upward: true,
   },
 };

src/tool/archive.ts

@@ -1,7 +1,6 @@
 import { Equip, Player, RebornPoints } from '@/config';
 import { getFromStore, insertToStore, store_name_archive } from './IndexedDB';
 import { uuid } from './random';
-import { version } from 'vue';
 const archive_version = '1.0';
 const archive_version_strengthen = '1.0_flag';
 
@@ -9,6 +8,7 @@ export class GameArchive {
   version: String;
   equips: Equip[];
   lv: number;
+  layer: number;
   coins: number;
   grid: any[];
   autoSell: string[];
@@ -19,6 +19,7 @@ export class GameArchive {
     this.version = archive_version;
     this.equips = [player.weapon, player.armor, player.ring, player.neck, player.jewelry, player.pants, player.shoes, player.bracers];
     this.lv = player.lv;
+    this.layer = player.layer;
     this.coins = player.coins;
     this.grid = grid;
     this.autoSell = autoSell;
@@ -39,7 +40,6 @@ export const saveArchive = (state) => {
     Array.prototype.push.apply(equips, archive.grid);
     equips.forEach((equip) => {
       if (!equip) return;
-
       if (equip.strengthenLv > 0 && !equip.id) {
         equip.id = uuid();
       }

src/tool/caller/attribute.ts

@@ -51,12 +51,16 @@ export const callPlayerAttribute = (player: Player, rA: any) => {
     dmgPercent = attribute.dmgPercent / 100;
   attribute.dps = Math.ceil((1 - crit + crit * critdmg) * atk * (1 + dmgPercent));
   //计算减伤比例
-  attribute.reducPercent = attribute.def / (200 + 1.1111 * attribute.def);
+  attribute.reducPercent = callReducPercent(attribute.def);
   //   attribute.reducPercent = attribute.def / (200 + 1.1 * attribute.def) + (0.09 * attribute.def) / (attribute.def + 200);
   //   attribute.reducPercent = (0.5 * attribute.def) / (200 + 0.502 * attribute.def);
   player.attribute = attribute;
 };
 
+export const callReducPercent = (def) => {
+  return def / (200 + 1.1111 * def);
+};
+
 /**
  * 计算装备强化后的基础属性
  * @param equip 装备

src/tool/random.ts

@@ -1,3 +1,4 @@
+import { difficultys } from '@/config';
 import { qualitys, createWeapon, createArmor, createNeck, createRing, createJewelry, createpants, createshoes, createbracers } from '@/config/equips';
 
 const creators = new Array();
@@ -14,7 +15,12 @@ export const randonBootyEquip = (monster) => {
   const equips = new Array();
   const equip = randomEquip(monster.equipRates, monster.lv);
   equip && equips.push(equip);
-  const extraRates = [0, 0, 0, 0, monster.extraRate];
+  const extraRates = new Array();
+  monster.equipRates.forEach((e) => {
+    extraRates.push(0);
+  });
+  extraRates.push(monster.extraRate[0]);
+  extraRates.push(monster.extraRate[1]);
   const extraEquip = randomEquip(extraRates, monster.lv);
   extraEquip && equips.push(extraEquip);
   return equips;
@@ -31,13 +37,13 @@ export const randomEquip = (rates, lv) => {
       break;
     }
   }
-//   quality = qualitys[4];
   if (quality) {
     if (quality == qualitys[4]) {
       lv += Math.floor(Math.random() * 6);
     } else {
       lv += Math.floor(Math.random() * 3);
     }
+    lv = lv > 100 ? 100 : lv;
     const creator = creators[Math.floor(Math.random() * creators.length)];
     return creator(quality, lv);
   } else {
@@ -51,16 +57,16 @@ export const randomEquipQuality = (lv) => {
 };
 
 export const randomDungeonDifficulty = () => {
-  const rates = [0.01, 0.84, 0.1, 0.05];
+  const rates = [0.85, 0.1, 0.05];
   const r = Math.random();
   let tmp = 0;
   for (let i = 0; i < rates.length; i++) {
     tmp += rates[i];
     if (r < tmp) {
-      return i;
+      return difficultys[i];
     }
   }
-  return 1;
+  return difficultys[0];
 };
 
 export const uuid = () => {

src/views/dungeon/battle.vue

@@ -16,14 +16,17 @@
 import { useStore } from "vuex";
 import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue3-i18n";
-import { dungeon_icon, player_move_time, player_battle_time } from "@/config";
+import { dungeon_icon, player_move_time, player_battle_time, difficultys } from "@/config";
-import { randonBootyEquip, createBattleRole, BattleRole, replace } from "@/tool";
+import { createBattleRole, BattleRole, replace } from "@/tool";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
 const battle = computed(() => {
     return state.battle;
 })
+const layer = computed(() => {
+    return state.playerAttribute.layer;
+})
 
 const props = defineProps({
     dungeon: {
@@ -70,12 +73,22 @@ const exploreDungeon = (monsterIdx) => {
                 commit('set_player_lv', dungeon.lv)
                 commit('set_sys_info', { msg: t('upgrade'), type: 'win' })
             }
-            if (dungeon.difficulty != 1) {
+            if (dungeon.difficulty == difficultys[1] || dungeon.difficulty == 2) {
-                dungeon.setDifficulty(1);
+                dungeon.setDifficulty(difficultys[0]);
                 battle.value.battleShow = false;
                 dispatch('play_music', 'backgound');
-            } else {
+                return;
+            } else if (dungeon.difficulty == difficultys[4]) {
+                commit('set_player_layer', dungeon.layer);
+            }
+            if (state.battle.repeat) {
+                if (dungeon.difficulty == difficultys[4] && state.battle.upward) {
+                    dungeon.setDifficulty(dungeon.difficulty, layer.value + 1);
+                }
                 playerMove(0, 0);
+            } else {
+                battle.value.battleShow = false;
+                dispatch('play_music', 'backgound');
             }
         }
     })
@@ -116,6 +129,9 @@ const battleWithMonster = (monster) => {
         oneBout(player, monster1, battleTime).then(rsp => {
             if (player.isDeath()) {
                 commit("set_sys_info", { msg: t('bout.1'), type: 'warning' });
+                if (props.dungeon?.difficulty == difficultys[4] && state.battle.upward) {
+                    props.dungeon?.setDifficulty(props.dungeon?.difficulty, layer.value);
+                }
                 battle.value.battleShow = false;
                 dispatch('play_music', 'backgound');
             } else {

src/views/dungeon/dungeon.vue

@@ -1,14 +1,11 @@
 <template>
-    <div :class="['dungeon', 'df' + dungeon.difficulty]" @contextmenu.prevent.stop="emit('battle')"
+    <div :class="['dungeon', dungeon.difficulty]">
-        @dblclick="emit('battle')" @mouseover="showTips" @mouseleave="closeTips">
         <div class="icon">
             <img class="icon-img" :src="dungeon_icon[dungeon.difficulty]">
         </div>
-        <div class="lv">lv{{ dungeon.lv }}</div>
+        <div class="lv">
-        <!--  -->
+            <span v-if="show_lv_df.includes(dungeon.difficulty)">lv{{ dungeon.lv }}</span>
-        <div class="tip" v-if="tipsShow" :style='tipsStyle'>
+            <span v-else>{{ t('difficulty.' + dungeon.difficulty) }}</span>
-            <div>{{ t('dungeonTips.0') }}：lv{{ dungeon.lv }}_{{ t('difficulty.' + dungeon.difficulty) }} </div>
-            <div>{{ t('dungeonTips.1') }}</div>
         </div>
     </div>
 
@@ -18,71 +15,32 @@
 import { useStore } from "vuex";
 import { computed, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue3-i18n";
-import { dungeon_icon } from "@/config";
+import { show_lv_df, dungeon_icon } from "@/config";
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
-const tipsShow = ref(false);
-const tipsStyle = ref({});
-const left = ref('0rem');
-const top = ref('0rem');
-const emit = defineEmits(['battle'])
 
 const props = defineProps({
     dungeon: {
         type: Object,
         default: null
     },
-    battleDungeon: {
-        type: Boolean,
-        default: true
-    }
-})
-
-watch(() => props.dungeon, () => {
-    ramdonPosition();
 })
 
-const ramdonPosition = () => {
+onMounted(() => { });
-    if (state.mobile) {
-        left.value = Math.random() * 80 + 5 + 'vw';
-        top.value = Math.random() * 70 + 5 + 'vh';
-    } else {
-        left.value = Math.random() * 64 + 2.5 + 'rem';
-        top.value = Math.random() * 50 + 2.5 + 'rem';
-    }
-}
-
-const showTips = (e) => {
-    const x = e.pageX, y = e.pageY, maxH = window.innerHeight, maxW = window.innerWidth;
-    // const xt = x < 200 ? '15%' :  < maxH - 200 ? '0%' : '-40%';
-    const xt = '-33%';
-    const yt = y < maxH / 2 ? '100%' : '-100%';
-    tipsStyle.value = {
-        top: y > maxH / 2 ? '-6rem' : '5rem',
-        left: x < maxW / 2 ? '-2rem' : '-10rem'
-    }
-    tipsShow.value = true
-}
-const closeTips = () => {
-    tipsShow.value = false;
-}
-
-onMounted(() => {
-    ramdonPosition();
-});
 </script>
 <style lang="scss" scoped>
 .dungeon {
     box-shadow: 0 0 4px 4px rgba(100, 255, 36, 0.6);
     border-radius: 5%;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.3);
     width: 3.4rem;
     float: left;
     cursor: pointer;
     position: absolute;
-    left: v-bind('left');
+    left: v-bind('dungeon.left');
-    top: v-bind('top');
+    right: v-bind('dungeon.right');
+    top: v-bind('dungeon.top');
 
     .icon {
         display: flex;
@@ -125,7 +83,7 @@ onMounted(() => {
     transform: scale(1.2); //设置图片按照比例放大1.2倍
 }
 
-.df2 {
+.hard {
     box-shadow: 0 0 4px 4px rgba(245, 241, 0, 0.6);
 
     .icon {
@@ -134,12 +92,40 @@ onMounted(() => {
 
 }
 
-.df3 {
+.pain {
     box-shadow: 0 0 4px 4px rgba(245, 54, 54, 0.5);
 
     .icon {
         background-color: rgba(245, 54, 54, 0.6);
     }
 
+}
+
+.xiaomi,
+.dami {
+    width: 4.4rem;
+
+    .icon {
+        width: 4rem;
+        height: 4rem;
+    }
+}
+
+.xiaomi {
+    box-shadow: 0 0 4px 4px rgba(37, 247, 248, 0.5);
+
+    .icon {
+        background-color: rgba(37, 247, 248, 0.6);
+    }
+
+}
+
+.dami {
+    box-shadow: 0 0 4px 4px rgba(38, 173, 203, 0.5);
+
+    .icon {
+        background-color: rgba(38, 173, 203, 0.6);
+    }
+
 }
 </style>

src/views/dungeon/dungeonMap.vue

@@ -7,11 +7,16 @@
         <div id="map" class="map">
             <img class="map-img" :src="dungeon_icon.map">
             <span v-if="!state.battle.battleShow">
-                <DungeonView v-for="item in dungeons" :dungeon="item" :key="item.lv" @battle="startBattle(item)" />
+                <DungeonView v-for="item in dungeons" :dungeon="item" :key="item.lv"
+                    @click="curDungeon = item; tipsShow = true" />
+                <DungeonView v-if="xiaomi" :dungeon="xiaomi" @click="curDungeon = xiaomi; tipsShow = true" />
+                <DungeonView v-if="dami" :dungeon="dami" @click="curDungeon = dami; tipsShow = true" />
                 <img :src="refresh_icon" class="refresh" @click="refreshDungeons"></img>
             </span>
             <BattleView :dungeon="curDungeon" v-if="state.battle.battleShow" ref="battle" />
             <img v-if="state.mobile" :src="close_icon" class="close" @click="showMenu"></img>
+            <DungeonTips v-if="tipsShow" @close="tipsShow = false" :dungeon="curDungeon" @battle="startBattle" />
+
         </div>
     </teleport>
 
@@ -24,14 +29,17 @@ import { onBeforeUnmount, onMounted, ref, computed, watch } from "vue";
 import { useI18n } from "vue3-i18n";
 import { Tooltip, Dialog } from "@/components"
 import { menu_icons, Dungeon, refresh_icon, close_icon, dungeon_icon } from "@/config";
-import { randomDungeonDifficulty } from "@/tool";
+import { deepCopy, randomDungeonDifficulty } from "@/tool";
 import DungeonView from "./dungeon.vue"
+import DungeonTips from "./dungeonTips.vue"
 import BattleView from "./battle.vue"
 
 const { t } = useI18n();
 const { state, commit, dispatch } = useStore();
 const showMap = ref(false);
 const dungeons = ref<Dungeon[]>()
+const xiaomi = ref<Dungeon>();
+const dami = ref<Dungeon>();
 const battle = ref();
 const curDungeon = ref();
 const min = computed(() => {
@@ -42,32 +50,63 @@ const max = computed(() => {
     const lv = state.playerAttribute.lv;
     return lv + 5 > 100 ? 100 : lv + 5;
 })
+const tipsShow = ref(false);
+const layer = computed(() => {
+    return state.playerAttribute.layer;
+})
 
 const showMenu = () => {
     showMap.value = !showMap.value;
 }
 
-const startBattle = (dungeon) => {
+const startBattle = () => {
+    tipsShow.value = false;
     state.battle.battleShow = true;
-    curDungeon.value = dungeon;
     if (battle.value) {
         battle.value?.startDungeon();
     } else {
         setTimeout(() => {
-            startBattle(dungeon);
+            startBattle();
         }, 50);
     }
 }
-
+const locations = [
+    ['20%', '85%'], ['37%', '80%'], ['20%', '68%'], ['25%', '55%'],
+    ['39%', '52%'], ['50%', '70%'], ['60%', '60%'], ['80%', '80%'],
+    ['30%', '44%'], ['20%', '18%'], ['27%', '10%'], ['45%', '20%'],
+    ['57%', '16%'], ['54%', '30%'], ['70%', '14%'], ['89%', '63%'],
+]
 const refreshDungeons = () => {
     const tmp = new Array();
+    const arr = deepCopy(locations);
     for (let i = min.value; i <= max.value; i++) {
         const df = randomDungeonDifficulty();
-        tmp.push(new Dungeon(i, df));
+        const dugeon = new Dungeon(i, df);
+        const idx = Math.floor((Math.random() * arr.length));
+        const locate = arr.splice(idx, 1)[0];
+        dugeon.left = locate[0];
+        dugeon.top = locate[1];
+        tmp.push(dugeon);
     }
     dungeons.value = tmp;
+    refreshSecret();
 }
 
+const refreshSecret = () => {
+    if (state.playerAttribute.lv >= 100) {
+        xiaomi.value = new Dungeon(100, 'xiaomi');
+        xiaomi.value.right = '4%';
+        xiaomi.value.top = '43%';
+        dami.value = new Dungeon(100, 'dami', layer.value);
+        // dami.value = new Dungeon(100, 'dami', 100);
+        dami.value.right = '9%';
+        dami.value.top = '29%';
+    }
+}
+watch(layer, () => {
+    dami.value?.setDifficulty(dami.value.difficulty, layer.value);
+})
+
 const setStype = () => {
     if (showMap.value) {
         showMap.value = false;

src/views/dungeon/dungeonTips.vue

@@ -0,0 +1,127 @@
+<template>
+    <div class="tips" v-if="dungeon">
+        <img :src="close_icon" class="close" @click="emit('close')"></img>
+        <div class="title">
+            {{ t('dungeonTips.0') }}:
+            <span v-if="show_lv_df.includes(dungeon.difficulty)">lv_{{ dungeon.lv }}</span>
+            {{ t('difficulty.' + dungeon.difficulty) }}
+            <span v-if="dungeon.difficulty == 'dami'">({{ layer }}{{ t('layer') }})</span>
+        </div>
+        <div class="tip">
+            <p>- {{ t('dungeonTips.2') }}</p>
+            <p>- {{ t('dungeonTips.3') }}</p>
+            <p>- {{ t('dungeonTips.4') }}</p>
+            <p>- {{ t('dungeonTips.5') }}</p>
+            <p>- {{ t('dungeonTips.6') }}</p>
+            <p>- {{ t('dungeonTips.7') }}</p>
+        </div>
+        <div class="rates">
+            {{ t('dungeonTips.1') }}:
+            <p :class="qualitys[4]">- {{ t('quality.' + qualitys[4]) }}:{{ rate4 }}</p>
+            <p v-if="!show_lv_df.includes(dungeon.difficulty)" :class="qualitys[5]">
+                - {{ t('quality.' + qualitys[5]) }}:{{ rate5 }}
+            </p>
+        </div>
+        <div class="actions">
+            <input type="checkbox" v-model="battle.repeat" id="repeat">
+            <label for="repeat">{{ t('dungeonAction.0') }}</label>
+            <span v-if="dungeon.difficulty == 'dami'">
+                <input type="checkbox" v-model="battle.upward" id="upward">
+                <label for="upward">{{ t('dungeonAction.1') }}</label>
+            </span>
+            <button class="button" @click="emit('battle')">{{ t('dungeonAction.2') }}</button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useStore } from "vuex";
+import { reactive, onMounted, ref, computed } from "vue";
+import { useI18n } from "vue3-i18n";
+import { close_icon, qualitys, show_lv_df } from "@/config";
+
+const { t } = useI18n();
+const { state, commit, dispatch } = useStore();
+const emit = defineEmits(['close', 'battle'])
+const rate4 = computed(() => {
+    if (!props.dungeon) {
+        return '';
+    }
+    const boss = props.dungeon.monsters[4];
+    return boss.extraRate[0] * 100 + '%';
+})
+const rate5 = computed(() => {
+    if (!props.dungeon) {
+        return '';
+    }
+    const boss = props.dungeon.monsters[4];
+    return boss.extraRate[1] * 100 + '%';
+})
+const battle = computed(() => {
+    return state.battle;
+})
+const layer = computed(() => {
+    return state.playerAttribute.layer;
+})
+
+const props = defineProps({
+    dungeon: {
+        type: Object,
+        default: null
+    },
+})
+
+onMounted(() => { });
+</script>
+<style lang="scss" scoped>
+.tips {
+    background: rgba(0, 0, 0, 0.6);
+    position: absolute;
+    left: calc(50% - 10rem);
+    top: calc(50% - 8rem);
+    width: 20rem;
+    text-align: left;
+    padding: 0.4rem;
+
+    .close {
+        cursor: pointer;
+        width: 2rem;
+        height: 2rem;
+        float: right;
+    }
+
+    .title {
+        height: 3rem;
+        line-height: 3rem;
+        font-size: 1.2rem;
+    }
+
+    .tip {
+        padding-left: 0.4rem;
+
+        p {
+            color: #999;
+            font-size: 0.8rem;
+            margin: 0rem;
+        }
+    }
+
+    .rates {
+        margin-top: 0.5rem;
+
+        p {
+            padding-left: 0.4rem;
+        }
+    }
+
+    .actions {
+        position: relative;
+        bottom: 0;
+        margin-top: 0.5rem;
+
+        button {
+            float: right;
+        }
+    }
+}
+</style>

src/views/illustrated/illustrated.vue

@@ -20,7 +20,7 @@ import { useStore } from "vuex";
 import { computed, onMounted, ref, onBeforeUnmount } from "vue";
 import { useI18n } from "vue3-i18n";
 import { Tooltip, Drawer, Tabs, Tab } from "@/components";
-import { menu_icons, weaponSamples, armorSamples, jewelrySamples, neckSamples, ringSamples, pantsSamples, shoesSamples } from "@/config";
+import { menu_icons, weaponSamples, armorSamples, jewelrySamples, neckSamples, ringSamples, pantsSamples, shoesSamples, bracersSamples } from "@/config";
 import Equips from "./equips.vue";
 
 const { t } = useI18n();
@@ -36,6 +36,7 @@ const colorful = {
     jewelry: jewelrySamples.colorful,
     pants: pantsSamples.colorful,
     shoes: shoesSamples.colorful,
+    bracers: bracersSamples.colorful,
 }
 const uniques = {
     weapon: weaponSamples.unique,
@@ -45,6 +46,7 @@ const uniques = {
     jewelry: jewelrySamples.unique,
     pants: pantsSamples.unique,
     shoes: shoesSamples.unique,
+    bracers: bracersSamples.unique,
 }
 const epics = {
     weapon: weaponSamples.epic,
@@ -54,6 +56,7 @@ const epics = {
     jewelry: jewelrySamples.epic,
     pants: pantsSamples.epic,
     shoes: shoesSamples.epic,
+    bracers: bracersSamples.epic,
 }
 
 const tabs = [