云顶模拟器更新

2019专题/云顶之弈模拟器/src/API/index.js

@@ -6,7 +6,7 @@ export const getSimulatorData = () => {
   return new Promise((resolve, reject) => {
     $.ajax(
       {
-        url: 'http://lol.duowan.com/s/ydzySimulator.js',
+        url: 'http://lol.duowan.com/s/2/ydzySimulator.js',
         jsonpCallback: 'ydzySimulator',
         dataType: 'jsonp',
         success: resolve,

2019专题/云顶之弈模拟器/src/components/index.vue

@@ -2,7 +2,6 @@
   <div class="app">
     <div class="container" @dragover="allowDrop" @drop="cancelHeroSelected">
       <div class="title" ></div>
-      <a href=""></a>
       <div class="guide">
         <a href="http://lol.duowan.com/1908/429554416930.html" target="_blank">>>使用指南<<</a>
         <a href="http://lol.duowan.com/" target="_blank">>>联盟专区<<</a>
@@ -16,8 +15,6 @@
           <penguin />
         </div>
 
-
-
       <div class="board-container">
         <div class="board-left">
           <h6>英雄池</h6>
@@ -28,8 +25,7 @@
                 v-for="_hero in heroes.filter(h => h.color === 'white')"
                 :key="_hero.id"
                 :hero="_hero"
-                @addHero='addHero'
-              />
+                @addHero="addHero"/>
             </div>
             <div class="hero-list small">
               <hero
@@ -37,8 +33,7 @@
                 v-for="_hero in heroes.filter(h => h.color === 'green')"
                 :key="_hero.id"
                 :hero="_hero"
-                @addHero='addHero'
-              />
+                @addHero="addHero"/>
             </div>
             <div class="hero-list small">
               <hero
@@ -46,8 +41,7 @@
                 v-for="_hero in heroes.filter(h => h.color === 'blue')"
                 :key="_hero.id"
                 :hero="_hero"
-                @addHero='addHero'
-              />
+                @addHero="addHero"/>
             </div>
             <div class="hero-list small">
               <hero
@@ -55,8 +49,7 @@
                 v-for="_hero in heroes.filter(h => h.color === 'purple')"
                 :key="_hero.id"
                 :hero="_hero"
-                @addHero='addHero'
-              />
+                @addHero="addHero"/>
             </div>
             <div class="hero-list small">
               <hero
@@ -64,8 +57,7 @@
                 v-for="_hero in heroes.filter(h => h.color === 'gold')"
                 :key="_hero.id"
                 :hero="_hero"
-                @addHero='addHero'
-              />
+                @addHero="addHero"/>
             </div>
             <div class="hero-list small">
               <hero
@@ -73,9 +65,24 @@
                 v-for="_hero in heroes.filter(h => h.color === 'colorful')"
                 :key="_hero.id"
                 :hero="_hero"
-                @addHero='addHero'
-              />
+                @addHero="addHero"/>
+            </div>
+          <div class="element-box">
+            <div class="element-wrapper" title="火" draggable="true" @dragstart="selectElement($event, 'fire')" >
+                <div class="element fire"></div>
+            </div>
+            <div class="element-wrapper" title="水" draggable="true" @dragstart="selectElement($event, 'water')" >
+                <div class="element water"></div>
             </div>
+            <div class="element-wrapper" title="风" draggable="true" @dragstart="selectElement($event, 'wind')" >
+                <div class="element wind"></div>
+            </div>
+            <div class="element-wrapper" title="土" draggable="true" @dragstart="selectElement($event, 'earth')" >
+                <div class="element earth"></div>
+            </div>
+
+
+          </div>
           </div>
         </div>
         <img src="../assets/images/arrow.png" alt class="arrow" />
@@ -86,29 +93,37 @@
               <i class="iconfont icon-share"></i>分享
             </span>
 
-
-            <transition name='slide-fade'>
-              <div class="share-container" v-show='sharingPopupVisiable'>
+            <transition name="slide-fade">
+              <div class="share-container" v-show="sharingPopupVisiable">
                 <i class="iconfont icon-close" @click="toggleSharingPopup(false)"></i>
 
                 <div class="little_hero-wrapper">
-                  <img :src="selectedLittleHero ? selectedLittleHero.url : 'http://img.dwstatic.com/lol/1907/427893999988/1563938993304.jpg'"
-                   class="little_hero-image">
+                  <img
+                    :src="selectedLittleHero ? selectedLittleHero.url : 'http://img.dwstatic.com/lol/1907/427893999988/1563938993304.jpg'"
+                    class="little_hero-image"
+                  />
                 </div>
 
-                <input type="text" placeholder="取个什么样的炫酷标题呢..." class="title-input" v-model="shareInfo.title">
+                <input
+                  type="text"
+                  placeholder="取个什么样的炫酷标题呢..."
+                  class="title-input"
+                  v-model="shareInfo.title"
+                />
 
-                <textarea placeholder="介绍下你的心得与想法吧~" class="desc-input" v-model="shareInfo.body.desc"></textarea>
+                <textarea
+                  placeholder="介绍下你的心得与想法吧~"
+                  class="desc-input"
+                  v-model="shareInfo.body.desc"
+                ></textarea>
 
                 <button type="button" class="share-btn" @click="shareTeam">分享</button>
               </div>
             </transition>
-
-
           </h6>
           <div class="board">
             <div class="population">上阵人数: {{currentPopulation}} / {{currentMaxHero}}</div>
-            <div class="reset" @click="reset" >
+            <div class="reset" @click="reset">
               <i class="iconfont icon-reset"></i>
               重置
             </div>
@@ -282,16 +297,16 @@
         <div class="groups-l">
           <div class="sub-title"></div>
           <ul class="share-list">
-            <li v-for="team in powerfulTeamList" :key='team.id'>
-              <shareItem :team='team'/>
+            <li v-for="team in powerfulTeamList" :key="team.id">
+              <shareItem :team="team" />
             </li>
           </ul>
         </div>
         <div class="groups-r">
           <div class="sub-title"></div>
           <ul class="share-list">
-            <li v-for="team in popularTeamList" :key='team.id'>
-              <shareItem :team='team'/>
+            <li v-for="team in popularTeamList" :key="team.id">
+              <shareItem :team="team" />
             </li>
           </ul>
         </div>
@@ -304,14 +319,20 @@
 
 <script>
 import hero from '../components/hero'
-import { findFromTail, genRandomInteger, uuid } from '../utils/helper'
+/* eslint-disable-next-line */
+import { findFromTail, genRandomInteger, uuid } from "../utils/helper";
 import shareItem from './shareItem'
-import {shareTeam, getSimulatorData, getUserInfo, getTopBuilds} from '../API/index'
+import {
+  shareTeam,
+  getSimulatorData,
+  getUserInfo,
+  getTopBuilds
+} from '../API/index'
 import penguin from '../components/penguin'
 
 const HERO_MAX_EUIPMENT = 3 // 英雄最大装备上限
 const INITIAL_MAX_POPULATION = 1 // 初始最大英雄上限
-const MAX_HEROES_COUNT = 21 // 棋盘所能容纳的最大英雄上限
+const MAX_HEROES_COUNT = 28 // 棋盘所能容纳的最大英雄上限
 const MAX_PLAYER_LEVEL = 9 // 玩家最大等级
 const MIN_PLAYER_LEVEL = 1 // 玩家最小等级
 const LOCALSTORAGE_KEY = '__ydzySimulatorUserInfo'
@@ -320,8 +341,6 @@ let fetters
 const original = {}
 let heroCount = {}
 
-
-
 function duplicateHeroes(heroes) {
   const map = {}
   heroes.forEach(hero => {
@@ -342,6 +361,7 @@ export default {
       goals: [], // 待激活的羁绊
       extra_population: 0, // 通过装备额外增加的人口
       level: 1, // 当前玩家等级
+      currentElement: '', // 当前格子元素
       starSelectorVisiable: false, // 控制小小英雄选星级的对话框的显隐
       littleHeroSelectorVisiable: false, // 小小英雄选择框的显隐
       sharingPopupVisiable: false, // 分享对话框显隐
@@ -351,17 +371,19 @@ export default {
       popularTeamList: [], // 最受欢迎的阵容
       // 要分享的阵容信息
       shareInfo: {
-        title: '',  // 阵容标题
+        title: '', // 阵容标题
         body: {
-          desc: '',  // 阵容描述
-          cover: '',  // 封面图 用小小英雄的
+          desc: '', // 阵容描述
+          cover: '', // 封面图 用小小英雄的
           level: 1, // 玩家等级
           selectedHeroes: [], // 阵容的英雄
           activatedFetters: [] // 激活的羁绊效果
         }
       },
       isLogin: !!dwUDBProxy.isLogin(),
-      nickname: localStorage.getItem(LOCALSTORAGE_KEY) ? JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY)).nickname : ''
+      nickname: localStorage.getItem(LOCALSTORAGE_KEY)
+        ? JSON.parse(localStorage.getItem(LOCALSTORAGE_KEY)).nickname
+        : ''
     }
   },
   components: {
@@ -405,7 +427,9 @@ export default {
             ev.target.parentNode.parentNode.classList.contains('board-grid') ? ev.target.parentNode.parentNode : null
           if(!targetNode) { return }
           
-          const targetIndex = Array.from(document.querySelectorAll('.board-grid')).indexOf(targetNode)
+          const targetIndex = Array.from(
+            document.querySelectorAll('.board-grid')
+          ).indexOf(targetNode)
 
           const hero = JSON.parse(ev.dataTransfer.getData('moveHero'))
           this.selectedHeroes.splice(Number(heroIndex),1,this.selectedHeroes[targetIndex])
@@ -467,9 +491,14 @@ export default {
       this.extra_population = 0
       this.level = 1
     },
-    // 拖拽添加英雄到阵容中
+    selectElement(ev, element){
+      this.currentElement = element
+      ev.dataTransfer.setData('element', element)
+    },
+    // 拖拽添加英雄到阵容中 或者 拖拽元素到格子里
     handleDrop(ev, heroIndex) {
       ev.preventDefault()
+      // 拖拽添加英雄
       if (ev.dataTransfer.getData('hero')) {
         if (this.currentPopulation < this.currentMaxHero) {
           const hero = JSON.parse(ev.dataTransfer.getData('hero'))
@@ -478,6 +507,13 @@ export default {
           alert('你该升级啦~点击小小英雄下方的升级按钮提升你的等级吧~')
         }
       }
+
+      // 拖拽添加元素
+      if(ev.dataTransfer.getData('element')) {
+        if(!this.selectedHeroes[heroIndex]) {
+          console.log('空格子')
+        }
+      }
     },
     // 选择小小英雄星级
     selectStarLevel(starLevel) {
@@ -554,7 +590,7 @@ export default {
         this.shareInfo.body.cover = this.selectedLittleHero ? this.selectedLittleHero.url : 'http://img.dwstatic.com/lol/1907/427893999988/1563938993304.jpg'
 
         if(!this.shareInfo.body.desc.trim()) {
-          const defaultDesc = ['“这个人很鸡贼，阵容都不说明白...”', '这个人很懒，什么都没留下...']
+          const defaultDesc = ['这个人很鸡贼，阵容都不说明白...', '这个人很懒，什么都没留下...']
           this.shareInfo.body.desc = defaultDesc[ genRandomInteger(0, 1) ]
         }
 
@@ -588,11 +624,11 @@ export default {
         })
       }
     },
-    login(){
-      if(!this.isLogin) {
+    login() {
+      if (!this.isLogin) {
         dwUDBProxy.multiLogin(() => {
           this.isLogin = true
-          if(!localStorage.getItem(LOCALSTORAGE_KEY)) {
+          if (!localStorage.getItem(LOCALSTORAGE_KEY)) {
             getUserInfo().then(res => {
               localStorage.setItem(LOCALSTORAGE_KEY, JSON.stringify(res.data))
               this.nickname = res.data.nickname
@@ -601,13 +637,13 @@ export default {
         })
       }
     },
-    register(){
+    register() {
       dwUDBProxy.register()
     },
-    logout(){
-      if(this.isLogin) {
+    logout() {
+      if (this.isLogin) {
         const timer = setInterval(() => {
-          if(!dwUDBProxy.isLogin()) {
+          if (!dwUDBProxy.isLogin()) {
             this.isLogin = false
             this.nickname = ''
             localStorage.setItem(LOCALSTORAGE_KEY, '')
@@ -635,12 +671,19 @@ export default {
         let duplicatedHeroes = duplicateHeroes(filteredHero)
 
         duplicatedHeroes.forEach(hero => {
+          // 拉克丝特殊处理一下
+          if (hero.name === '大元素使 拉克丝') {
+            hero.sort.forEach(job => {
+              heroCount[job] += 2
+            })
+          } else {
+            hero.sort.forEach(job => {
+              heroCount[job]++
+            })
+          }
           hero.job.forEach(job => {
             heroCount[job]++
           })
-          hero.sort.forEach(job => {
-            heroCount[job]++
-          })
         })
 
         // 重复的英雄带的装备只有自然之力不是唯一被动
@@ -678,20 +721,20 @@ export default {
           if (count !== 0) {
             fetters.forEach(fetter => {
               // 忍者进行特殊处理
-              if (job === 'heroSort5') {
-                if (
-                  job === fetter.requiredType &&
-                  count === fetter.requiredCount
-                ) {
-                  let _index = copy.findIndex(_f => _f.requiredType === job)
-                  if (_index !== -1) {
-                    copy.splice(_index, 1)
-                  }
-                  fetter.currentCount = count
-                  copy.push(fetter)
-                }
-                return
-              }
+              // if (job === 'heroSort5') {
+              //   if (
+              //     job === fetter.requiredType &&
+              //     count === fetter.requiredCount
+              //   ) {
+              //     let _index = copy.findIndex(_f => _f.requiredType === job)
+              //     if (_index !== -1) {
+              //       copy.splice(_index, 1)
+              //     }
+              //     fetter.currentCount = count
+              //     copy.push(fetter)
+              //   }
+              //   return
+              // }
               // 正常情况
               if (
                 job === fetter.requiredType &&
@@ -712,7 +755,6 @@ export default {
 
         this.activatedFetters = copy
 
-
         // 生成羁绊 end
         // ************************
         // 生成羁绊目标 start
@@ -723,15 +765,15 @@ export default {
             let fetter = fetters.find(f => f.requiredType === job)
 
             // 忍者特殊处理
-            if (fetter.requiredType === 'heroSort5') {
-              fetter = findFromTail(
-                fetters,
-                f => f.requiredType === 'heroSort5'
-              )
-              fetter.currentCount = heroCount[job]
-              goals.push(fetter)
-              return
-            }
+            // if (fetter.requiredType === 'heroSort5') {
+            //   fetter = findFromTail(
+            //     fetters,
+            //     f => f.requiredType === 'heroSort5'
+            //   )
+            //   fetter.currentCount = heroCount[job]
+            //   goals.push(fetter)
+            //   return
+            // }
             fetter.currentCount = heroCount[job]
             goals.push(fetter)
           }
@@ -748,15 +790,14 @@ export default {
       }
     }
   },
-  mounted(){
-
+  mounted() {
     getTopBuilds().then(res => {
       this.popularTeamList = res.data.top_like_builds.slice(0, 4)
       this.powerfulTeamList = res.data.top_star_builds.slice(0, 4)
     })
 
     // 获取模拟器数据
-    getSimulatorData().then((data) => {
+    getSimulatorData().then(data => {
       function initData() {
         data.hero.jobs.forEach(job => {
           original[job.code] = 0
@@ -778,9 +819,7 @@ export default {
       this.simulatorEquipment = data.simulatorEquipment
       this.heroes = data.hero.data
       this.littleHeroes = data.littleHero.data
-
     })
-
   }
 }
 </script>
@@ -808,6 +847,7 @@ export default {
   width: 100%;
   min-height: 1065px;
   background: url("../assets/images/bg.png") no-repeat center;
+  background-attachment: fixed;
   .container {
     width: 1200px;
     margin: 0 auto;
@@ -835,18 +875,18 @@ export default {
         }
       }
     }
-    .user-wrapper{
+    .user-wrapper {
       margin-bottom: 20px;
       text-align: right;
       color: #eee;
-      span{
+      span {
         color: #fff;
         cursor: pointer;
       }
-      a{
+      a {
         color: #fff;
       }
-      p{
+      p {
         display: inline-block;
       }
     }
@@ -890,9 +930,10 @@ export default {
           width: 66%;
         }
       }
+
       .board {
         border: 1px solid #635d60;
-        height: 495px;
+        height: 600px;
         box-sizing: border-box;
         padding: 30px 28px;
         position: relative;
@@ -906,7 +947,7 @@ export default {
         .reset {
           position: absolute;
           right: 26px;
-          top: 260px;
+          top: 360px;
           color: #fff;
           font-size: 14px;
           cursor: pointer;
@@ -940,7 +981,7 @@ export default {
             }
           }
           &.normal {
-            height: 265px;
+            height: 355px;
             .board-grid {
               &:nth-child(14n + 1) {
                 margin-left: 44px;
@@ -954,6 +995,9 @@ export default {
               &:nth-child(n + 15) {
                 transform: translateY(-44px);
               }
+              &:nth-child(n + 22) {
+                transform: translateY(-66px);
+              }
             }
           }
         }
@@ -1011,7 +1055,7 @@ export default {
             width: 235px;
             height: 100%;
             position: relative;
-            @at-root{
+            @at-root {
               .little_hero-wrapper {
                 width: 235px;
                 height: 135px;
@@ -1248,8 +1292,44 @@ export default {
             }
           }
         }
+        .element-box {
+          display: flex;
+          justify-content: space-evenly;
+          .element-wrapper{
+            width: 70px;
+            height: 81px;
+            background-size: 100% 100%;
+            background-position: center center;
+            background: url("../assets/images/icon-colorful.png") no-repeat 100% / 100%;
+            position: relative;
+            z-index: 1;
+          }
+          .element {
+            position: absolute;
+            width: 65px;
+            height: 72px;
+            left: 3px;
+            top: 4px;
+            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+            z-index: -1;
+            background-size: 100% 100%;
+            background-position: center center;
+            &.fire{
+              background: url("../assets/images/fire.png") no-repeat 100% / 100%;
+            }
+            &.wind{
+              background: url("../assets/images/wind.png") no-repeat 100% / 100%;
+            }
+            &.water{
+              background: url("../assets/images/water.png") no-repeat 100% / 100%;
+            }
+            &.earth{
+              background: url("../assets/images/earth.png") no-repeat 100% / 100%;
+            }
+          }
+        }
       }
-      .share-container{
+      .share-container {
         position: absolute;
         width: 318px;
         height: 360px;
@@ -1260,33 +1340,34 @@ export default {
         z-index: 99;
         background-color: black;
         padding: 12px;
-        .icon-close{
+        .icon-close {
           position: absolute;
           right: 5px;
           top: 5px;
           font-size: 20px;
           padding: 5px;
           cursor: pointer;
-          &:hover{
-            color: #ffdb67;;
+          &:hover {
+            color: #ffdb67;
           }
         }
-        .title-input, .desc-input{
+        .title-input,
+        .desc-input {
           background-color: black;
           width: 100%;
           border: 1px solid gray;
           outline: none;
           padding: 10px;
           box-sizing: border-box;
-          color: white;;
+          color: white;
         }
-        .title-input{
+        .title-input {
           margin-bottom: 8px;
         }
-        .desc-input{
+        .desc-input {
           height: 106px;
         }
-        .share-btn{
+        .share-btn {
           display: block;
           width: 100%;
           background-color: #414141;
@@ -1298,7 +1379,7 @@ export default {
           padding: 8px 0;
           cursor: pointer;
           transition: all 0.3s ease;
-          &:hover{
+          &:hover {
             background-color: #666;
           }
         }
@@ -1318,12 +1399,12 @@ export default {
           height: 47px;
           margin: 48px auto 24px auto;
         }
-        .share-list{
+        .share-list {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
-          li{
-            margin-bottom: 8px
+          li {
+            margin-bottom: 8px;
           }
         }
       }
@@ -1351,7 +1432,7 @@ export default {
       background-color: rgba(200, 200, 200, 0.33);
       margin: 54px auto 0 auto;
       transition: all 0.3s ease;
-      &:hover{
+      &:hover {
         background-color: rgba(200, 200, 200, 0.66);
         color: #fff;
       }