diff --git a/images/orb-small-dark.png b/images/orb-small-dark.png new file mode 100644 index 00000000..dba966b8 Binary files /dev/null and b/images/orb-small-dark.png differ diff --git a/images/orb-small-fire.png b/images/orb-small-fire.png new file mode 100644 index 00000000..b6c3dc2a Binary files /dev/null and b/images/orb-small-fire.png differ diff --git a/images/orb-small-light.png b/images/orb-small-light.png new file mode 100644 index 00000000..9e639e4b Binary files /dev/null and b/images/orb-small-light.png differ diff --git a/images/orb-small-water.png b/images/orb-small-water.png new file mode 100644 index 00000000..38b0dd08 Binary files /dev/null and b/images/orb-small-water.png differ diff --git a/images/orb-small-wood.png b/images/orb-small-wood.png new file mode 100644 index 00000000..bd7b970a Binary files /dev/null and b/images/orb-small-wood.png differ diff --git a/languages/zh.css b/languages/zh.css index f8c4380b..ebe098f7 100644 --- a/languages/zh.css +++ b/languages/zh.css @@ -38,7 +38,7 @@ .edit-box .edit-box-title.edit-box-title-assist::before{ content: "修改辅助"; } -.edit-box .search-box::before{ +.edit-box .setting-box .row-mon-id::before{ content: "▼怪物ID"; } .monsterinfo-box .monster-id::before{ @@ -162,15 +162,45 @@ content: "总回复(队伍觉醒和徽章)："; } -.search-box .open-search::before{ +.setting-box .row-mon-id .open-search::before{ content: "搜索怪物"; } +.search-box::before{ + content: "▼简易搜索"; +} +.search-box .attrs .attr-list-1::before{ + content: "属性1"; +} +.search-box .attrs .attr-list-2::before{ + content: "属性2"; +} +.search-box .attrs .fix-main-color-label::after{ + content: "限制属性1为主属性，属性2为副属性"; +} .attrs .attr-all::before{ content: "不限"; } .attrs .attr-none::before{ content: "无"; } +.search-box .types-div::before{ + content: "类型"; +} +.search-box .awoken-div::before{ + content: "觉醒"; +} +.search-box .sawoken-div::before{ + content: "超觉醒"; +} +.control-div .search-start::before{ + content: "🔍开始搜索"; +} +.control-div .search-clear::before{ + content: "清空搜索条件"; +} +.control-div .search-close::before{ + content: "关闭搜索"; +} /*Some icons, style different from the Japanese version*/ .awoken-46, diff --git a/script.js b/script.js index 05c5c911..c20382ca 100644 --- a/script.js +++ b/script.js @@ -464,9 +464,127 @@ function initialize() controlBox.classList.remove("blur-bg"); } + const searchBox = editBox.querySelector(".search-box"); + let s_attr1s = Array.prototype.slice.call(searchBox.querySelectorAll(".attrs .attr-list-1 .attr-radio")); + let s_attr2s = Array.prototype.slice.call(searchBox.querySelectorAll(".attrs .attr-list-2 .attr-radio")); + let s_fixMainColor = searchBox.querySelector(".attrs .fix-main-color"); + let s_types = Array.prototype.slice.call(searchBox.querySelectorAll(".types-div .type-check")); + let s_awokensItem = Array.prototype.slice.call(searchBox.querySelectorAll(".awoken-div .awoken-count")); + let s_awokensIcon = s_awokensItem.map(it=>{ + return it.querySelector(".awoken-icon"); + }) + let s_awokensCount = s_awokensItem.map(it=>{ + return it.querySelector(".count"); + }) + /*let s_awokensIcon = Array.prototype.slice.call(searchBox.querySelectorAll(".awoken-div .awoken-icon")); + let s_awokensCount = Array.prototype.slice.call(searchBox.querySelectorAll(".awoken-div .count"));*/ + let s_sawokens = Array.prototype.slice.call(searchBox.querySelectorAll(".sawoken-div .sawoken-check")); + s_awokensIcon.forEach((b,idx)=>{ //每种觉醒增加1 + b.onclick = ()=>{ + const countDom = s_awokensCount[idx]; + let count = parseInt(countDom.innerHTML,10); + if (count<9) + { + count++; + countDom.innerHTML = count; + b.parentNode.classList.remove("zero"); + } + }; + }) + function searchSubAwoken() + { + let count = parseInt(this.innerHTML,10); + if (count>0) + { + count--; + this.innerHTML = count; + if (count === 0) + { + this.parentNode.classList.add("zero"); + } + } + } + s_awokensCount.forEach((b,idx)=>{ //每种觉醒减少1 + b.onclick = searchSubAwoken; + }) + + + const searchStart = searchBox.querySelector(".control-div .search-start"); + const searchClose = searchBox.querySelector(".control-div .search-close"); + const searchClear = searchBox.querySelector(".control-div .search-clear"); + function returnCheckedInput(ipt) + { + return ipt.checked == true; + } + function returnInputValue(ipt) + { + return ipt.value; + } + function Str2Int(str) + { + return parseInt(str, 10); + } + searchStart.onclick = ()=>{ + const attr1Filter = s_attr1s.filter(returnCheckedInput).map(returnInputValue); + const attr2Filter = s_attr2s.filter(returnCheckedInput).map(returnInputValue); + const fixMainColor = s_fixMainColor.checked; + let attr1,attr2; + if (attr1Filter.length>0) + { + if (!isNaN(attr1Filter[0])) + { + attr1 = parseInt(attr1Filter[0],10); + }else + { + attr1 = null; + } + } + if (attr2Filter.length>0) + { + if (!isNaN(attr2Filter[0])) + { + attr2 = parseInt(attr2Filter[0],10); + }else + { + attr2 = null; + } + } + const typesFilter = s_types.filter(returnCheckedInput).map(returnInputValue).map(Str2Int); + const sawokensFilter = s_sawokens.filter(returnCheckedInput).map(returnInputValue).map(Str2Int); + const awokensFilter = s_awokensCount.filter(btn=>{return parseInt(btn.innerHTML,10)>0;}).map(btn=>{ + return [parseInt(btn.value,10),parseInt(btn.innerHTML,10)]; + }); + let searchResult = searchCards(Cards,attr1,attr2,fixMainColor,typesFilter,awokensFilter,sawokensFilter); + //console.log(Cards,attr1,attr2,fixMainColor,typesFilter,awokensFilter,sawokensFilter) + } + + searchClose.onclick = ()=>{ + searchBox.classList.add("display-none"); + } + searchClear.onclick = ()=>{ //清空搜索选项 + s_attr1s[0].checked = true; + s_attr2s[0].checked = true; + s_types.forEach(t=>{ + t.checked = false; + }); + s_awokensCount.forEach(t=>{ + t.innerHTML = 0; + }); + s_awokensItem.forEach(t=>{ + t.classList.add("zero"); + }); + s_sawokens.forEach(t=>{ + t.checked = false; + }); + } const settingBox = editBox.querySelector(".setting-box") + const searchOpen = settingBox.querySelector(".row-mon-id .open-search"); + searchOpen.onclick = ()=>{ + searchBox.classList.remove("display-none"); + } + //id搜索 - const monstersID = editBox.querySelector(".edit-box .m-id"); + const monstersID = settingBox.querySelector(".row-mon-id .m-id"); monstersID.onchange = function(){ if (/^\d+$/.test(this.value)) { @@ -1113,10 +1231,10 @@ function editMon(AorB,isAssist,tempIdx) editBox.latentBox = latentBox; } - var monstersID = editBox.querySelector(".search-box .m-id"); + var settingBox = editBox.querySelector(".setting-box"); + var monstersID = settingBox.querySelector(".row-mon-id .m-id"); monstersID.value = mon.id>0?mon.id:0; monstersID.onchange(); - var settingBox = editBox.querySelector(".setting-box"); //觉醒 var monEditAwokens = settingBox.querySelectorAll(".row-mon-awoken .awoken-ul .awoken-icon"); if (mon.awoken>0 && monEditAwokens[mon.awoken]) monEditAwokens[mon.awoken].onclick(); @@ -1169,7 +1287,7 @@ function editBoxChangeMonId(id) const settingBox = editBox.querySelector(".setting-box"); //id搜索 - const monstersID = searchBox.querySelector(".m-id"); + const monstersID = settingBox.querySelector(".row-mon-id .m-id"); const monHead = monInfoBox.querySelector(".monster"); changeid({id:id},monHead); //改变图像 const mId = monInfoBox.querySelector(".monster-id"); @@ -1179,7 +1297,7 @@ function editBoxChangeMonId(id) const mName = monInfoBox.querySelector(".monster-name"); mName.innerHTML = returnMonsterNameArr(card, currentLanguage.searchlist, currentDataSource.code)[0]; - const evoCardUl = searchBox.querySelector(".evo-card-list"); + const evoCardUl = settingBox.querySelector(".row-mon-id .evo-card-list"); evoCardUl.style.display = "none"; evoCardUl.innerHTML = ""; //据说直接清空HTML性能更好 diff --git a/solo.html b/solo.html index 3ae107d2..b5e6863f 100644 --- a/solo.html +++ b/solo.html @@ -378,203 +378,208 @@ var formation = new Formation(1,6);
- -
-
-
    -
    • -
    • -
    • -
    • -
    • -
    • -
-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
-
-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
-
-
    -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
  • 0
    • -
-
-
-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
- -
-
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    + +
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    +
    +
    +
      +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
      • +
    - - -
      +
      + + + +
      +
        +
        + + + +
          +
            diff --git a/style-monsterimages.css b/style-monsterimages.css index 94537add..9c209454 100644 --- a/style-monsterimages.css +++ b/style-monsterimages.css @@ -866,4 +866,21 @@ var sawokens = [ } .badge-13{ background-position-y: -390px; +} + +/*搜索框中用到的属性图片*/ +.attrs .attr-t0::before{ + content: url(images/orb-small-fire.png); +} +.attrs .attr-t1::before{ + content: url(images/orb-small-water.png); +} +.attrs .attr-t2::before{ + content: url(images/orb-small-wood.png); +} +.attrs .attr-t3::before{ + content: url(images/orb-small-light.png); +} +.attrs .attr-t4::before{ + content: url(images/orb-small-dark.png); } \ No newline at end of file diff --git a/style.css b/style.css index e25f2ace..0b561254 100644 --- a/style.css +++ b/style.css @@ -9,8 +9,12 @@ url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'), url("fonts/FOT-KurokaneStd-EB.svg") format('svg'); } + body{ font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif; + --search-list-title-width: 50px; + --search-list-title-font-size: 16px; + --search-icon-unchecked: 0.3; } .display-none{ display:none !important; @@ -417,80 +421,210 @@ ul{ box-shadow: black 0 3px 3px; padding: 5px 10px; } -/*.edit-box .search-box::before{ +.edit-box .search-box, +.edit-box .setting-box{ + padding: 0 10px; +} +/*.edit-box .setting-box .row-mon-id::before{ content: "▼怪物ID"; }*/ -.edit-box .search-box .m-id{ +.edit-box .setting-box .row-mon-id .m-id{ box-sizing: border-box; font-size: 25px; height: 40px; width: 100%; } -.edit-box .search-box .unable-monster{ +.edit-box .setting-box .row-mon-id .unable-monster{ pointer-events: none; opacity: 0.5; } -.edit-box .search-box .unable-monster .monster{ +.edit-box .setting-box .row-mon-id .unable-monster .monster{ box-sizing: border-box; border: 5px solid red; border-radius: 10px; overflow: hidden; } -.edit-box .search-box .unable-monster .id{ +.edit-box .setting-box .row-mon-id .unable-monster .id{ display: none; } -.edit-box .search-box .search-button{ +.edit-box .setting-box .row-mon-id .search-button{ width: 100%; height: 40px; font-size: 25px; } -.edit-box .search-box,.edit-box .setting-box{ - padding: 0 10px; -} -.edit-box .search-box .evo-card-list li{ +.edit-box .setting-box .row-mon-id .evo-card-list li{ display: inline-block; vertical-align: top; top: 0; width: 75px; height: 75px; } -.edit-box .search-box .evo-card-list .monster{ +.edit-box .setting-box .row-mon-id .evo-card-list .monster{ float: none; transform: scale(0.75) translate(-13px,-13px); } -.edit-box .search-box .evo-card-list .monster .id{ +.edit-box .setting-box .row-mon-id .evo-card-list .monster .id{ bottom: 5px; font-size: 20px; } -/* -.attr-radio{ +/*.setting-box .row-mon-id .open-search::before{ + content: "搜索怪物"; +} +.search-box::before{ + content: "▼简易搜索"; +} +.attrs .attr-all::before{ + content: "不限"; +} +.attrs .attr-none::before{ + content: "无"; +}*/ +.search-box>div{ + margin-bottom: 5px; +} +.search-box>div ul{ + display: inline-block; +} +.search-box .attrs ul{ + display: block; +} +.search-box>div ul>li{ + display: inline-block; + vertical-align: top; + font-size:16px; + overflow: hidden; +} +.search-box>div ul>li>label{ + cursor: pointer; + display: block; + text-align: center; +} + +.attrs .attr-list-1::before, +.attrs .attr-list-2::before, +.types-div::before, +.awoken-div::before, +.sawoken-div::before{ + /*float: left;*/ + font-size: 16px; + width: 55px; + display: inline-block; +} +/*.search-box .attrs .attr-list-1::before{ + content: "属性1"; +} +.search-box .attrs .attr-list-2::before{ + content: "属性2"; +} +.search-box .attrs .fix-main-color-label::after{ + content: "限制属性1为主属性，属性2为副属性"; +}*/ +.attr-radio,.type-check,.sawoken-check{ display: none; } +.attrs .attr-list{ + font-size:0; +} .attrs .attr-list li{ - display: inline-block; + border: 1px solid white; + border-left: none; + background: #947244; +} +.attrs .attr-list li:hover{ + background: #E9CB9E; +} +.attrs .attr-list li:first-of-type{ + border-radius: 8px 0 0 8px; + border-left: 1px solid white; +} +.attrs .attr-list li:last-of-type{ + border-radius: 0 8px 8px 0; +} +.attrs .attr-list li label{ + line-height: 30px; + width: 55px; + height: 30px; +} +.attrs .attr-list input:checked~label{ + background-color:#8C4242; + box-shadow: inset black 0 0 5px; + cursor: auto; +} +.attr-list-1{ + margin-bottom: 5px; +} +/*.search-box .types-div::before{ + content: "类型"; }*/ -/*.attrs .attr-all::after{ - content: "不限"; +.types-div .type-list li label{ + opacity: var(--search-icon-unchecked); } -.attrs .attr-none::after{ - content: "无"; +.types-div .type-list input:checked~label{ + opacity: 1; +} +/*.search-box .awoken-div::before{ + content: "觉醒"; }*/ -.attrs .attr-t0::before{ - content: url(images/orb-small-fire.png); +.search-box .awoken-list .awoken-count{ + float: none; } -.attrs .attr-t1::before{ - content: url(images/orb-small-water.png); +.search-box .awoken-list button{ + border: none; + background-color: unset; + font-family: 'FOT-KurokaneStd-EB'; + color: white; + line-height: 32px; + font-size: 16px; + padding: 0; +} +.search-box .awoken-list .awoken-count.zero{ + opacity: var(--search-icon-unchecked); } -.attrs .attr-t2::before{ - content: url(images/orb-small-wood.png); +.search-box .awoken-list .count{ + width: 30px; } -.attrs .attr-t3::before{ - content: url(images/orb-small-light.png); +.search-box .awoken-list .awoken-count .awoken-icon{ + cursor: pointer; } -.attrs .attr-t4::before{ - content: url(images/orb-small-dark.png); +.search-box .awoken-list .awoken-count .count{ + cursor: pointer; } +.search-box .awoken-list .awoken-count.zero .count{ + cursor: auto; +} +/*.search-box .sawoken-div::before{ + content: "超觉醒"; +}*/ +.sawoken-div .sawoken-list li label{ + opacity: var(--search-icon-unchecked); +} +.sawoken-div .sawoken-list input:checked~label{ + opacity: 1; +} + +.control-div button{ + font-size: 20px; +} +.control-div .search-start{ + float: right; + margin-left: 5px; +} +/*.control-div .search-start::before{ + content: "开始搜索"; +} +.control-div .search-clear::before{ + content: "清空搜索条件"; +} +.control-div .search-close::before{ + content: "关闭搜索"; +}*/ +.search-box .search-mon-list{ + border: 1px solid white; +} +.setting-box .row-mon-id .open-search{ + float: right; +} .edit-box .setting-row{ width: 100%; @@ -749,7 +883,7 @@ ul{ margin-top:5px; } .awoken-total-box .awoken-ul .awoken-count, -.search-mon-control-box .awoken-list .awoken-count{ +.search-box .awoken-list .awoken-count{ font-size: 16px; line-height: 32px; font-family: 'FOT-KurokaneStd-EB'; @@ -757,14 +891,14 @@ ul{ margin-right: 3px; } .awoken-total-box .awoken-ul .count, -.search-mon-control-box .awoken-list .count{ +.search-box .awoken-list .count{ height: 32px; width: 37px; display: inline-block; vertical-align: middle; } .awoken-total-box .awoken-ul .count::before, -.search-mon-control-box .awoken-list .count::before{ +.search-box .awoken-list .count::before{ content: "×"; } /*控制框*/ @@ -774,9 +908,7 @@ ul{ .control-box .languages-label::before{ content: "Lanuage:"; } -.control-box .solo-link,.control-box .multi-link{ - /*margin-left: 10px;*/ -} + .control-box .solo-link::before{ content: "Jump To Solo Version"; } diff --git a/universal_function.js b/universal_function.js index e25ebea1..c49dfe6c 100644 --- a/universal_function.js +++ b/universal_function.js @@ -207,4 +207,8 @@ function calculateAbility(monid = 0,level = 1,plus = [0,0,0],awoken = 0,latent = return reValue; }) return abilitys; +} +function searchCards(cards,attr1,attr2,fixMainColor,types,awokens,sawokens) +{ + } \ No newline at end of file