Last active
August 31, 2026 01:05
-
-
Save Rplus/d5428e41f918d4b9440dbc042bda287a to your computer and use it in GitHub Desktop.
Hunter x Hunter nen servivor codex
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /data |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hunter x Hunter nen servivor picker</title> | |
| <style> | |
| :root { | |
| background-color: #333; | |
| color-scheme: dark; | |
| color: #ccc; | |
| } | |
| body { | |
| width: fit-content; | |
| margin: 0 auto; | |
| padding-top: 2vh; | |
| padding-bottom: 3em; | |
| } | |
| table { | |
| table-layout: fixed; | |
| background-color: #eee; | |
| color-scheme: light; | |
| } | |
| tr { | |
| background-color: #cccc; | |
| } | |
| img { | |
| display: inline-flex; | |
| background-color: #0002; | |
| box-shadow: 2px 2px 4px var(--shadow-color, #0006); | |
| &:hover { | |
| --shadow-color: #0009; | |
| } | |
| & + img { | |
| margin-left: 4px; | |
| } | |
| } | |
| td { | |
| padding-left: 8px; | |
| padding-right: 8px; | |
| } | |
| .flex { | |
| display: flex; | |
| } | |
| img { | |
| width: 60px; | |
| aspect-ratio: 1; | |
| @media (max-width: 400px) { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| } | |
| .img-box { | |
| position: relative; | |
| display: block; | |
| &:not(:last-of-type) { | |
| margin-right: 8px; | |
| } | |
| &:hover { | |
| --opacity: 1; | |
| } | |
| &::before, | |
| &::after { | |
| content: ''; | |
| position: absolute; | |
| width: 1em; | |
| height: 1em; | |
| font-size: 1rem; | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| transition: opacity .3s; | |
| opacity: var(--opacity, 0.5); | |
| } | |
| &[data-tier]::after { | |
| top: 0; | |
| right: 0; | |
| background-image: var(--tier-icon); | |
| } | |
| &[data-tier="S"] { | |
| --tier-icon: url('https://wsrv.nl/?&il&output=webp&w=32&h=32&url=https://img.game8.jp/12272656/979d5fb26fcbac2a711e4285c1de7768.webp/show'); | |
| } | |
| &[data-tier="A"] { | |
| --tier-icon: url('https://wsrv.nl/?&il&output=webp&w=32&h=32&url=https://img.game8.jp/12272655/72883e774c4ad8b515516d5d492baf4a.webp/show'); | |
| } | |
| &[data-type]::before { | |
| bottom: 0; | |
| right: 0; | |
| font-size: 1rem; | |
| background-image: var(--type-icon); | |
| } | |
| &[data-type="Healer"] { | |
| --type-icon: url('https://wsrv.nl/?&il&output=webp&w=32&h=32&url=https://img.game8.jp/12326423/fe618881f7353d3177f8fa2bb980ae62.webp/show'); | |
| } | |
| &[data-type="Attacker"] { | |
| --type-icon: url('https://wsrv.nl/?&il&output=webp&w=32&h=32&url=https://img.game8.jp/12272658/39f65b3bf2a64db93451730b7826c984.webp/show'); | |
| } | |
| &[data-type="Defender"] { | |
| --type-icon: url('https://wsrv.nl/?&il&output=webp&w=32&h=32&url=https://img.game8.jp/12326420/909c1f6c889b289c4fdd0f5e45968130.webp/show'); | |
| } | |
| &[data-type="Supporter"] { | |
| --type-icon: url('https://wsrv.nl/?&il&output=webp&w=32&h=32&url=https://img.game8.jp/12326419/daf3d4f414805971c35e36a24d5783c7.webp/show'); | |
| } | |
| } | |
| .img-box { | |
| user-select: none; | |
| opacity: var(--ii-op); | |
| } | |
| table:has(input:checked) { | |
| --ii-op: .2; | |
| &:hover { | |
| --ii-op: .5; | |
| & .img-box:hover { | |
| --ii-op: .8; | |
| } | |
| } | |
| & .img-box.img-box:has(input:checked) { | |
| --ii-op: 1; | |
| } | |
| } | |
| tbody label { | |
| position: relative; | |
| cursor: pointer; | |
| & input { | |
| position: absolute; | |
| bottom: 7px; | |
| left: 3px; | |
| margin: 0; | |
| padding: 0; | |
| transition: opacity .2s; | |
| } | |
| &:not(:hover) input:not(:checked) { | |
| opacity: 0.1; | |
| } | |
| } | |
| #filterform { | |
| position: relative; | |
| } | |
| .filter-cate { | |
| } | |
| .filter-options { | |
| margin-left: .5em; | |
| margin-bottom: .5em; | |
| user-select: none; | |
| } | |
| #filter_reset { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| } | |
| h1 { | |
| } | |
| h1 sub { | |
| display: block; | |
| font-size: .5em; | |
| opacity: 0.5; | |
| font-family: monospace; | |
| text-transform: capitalize; | |
| } | |
| @media (min-width: 1000px) { | |
| body { | |
| display: flex; | |
| gap: 3em; | |
| padding-top: 3em; | |
| flex-direction: row-reverse; | |
| align-items: flex-start; | |
| } | |
| .header { | |
| position: sticky; | |
| top: 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <h1 align="center"> | |
| <sub>Hunter × Hunter nen servivor</sub> | |
| Skill Picker | |
| </h1> | |
| <hr style="opacity: 0.5; border-style: dotted; "> | |
| <form id="filterform"> | |
| <div class="filter-row"> | |
| <div class="filter-cate">Type:</div> | |
| <div class="filter-options"> | |
| <label> | |
| <input type="checkbox" name="type_Attacker"> | |
| Attacker | |
| </label> | |
| <label> | |
| <input type="checkbox" name="type_Healer"> | |
| Healer | |
| </label> | |
| <label> | |
| <input type="checkbox" name="type_Defender"> | |
| Defender | |
| </label> | |
| <label> | |
| <input type="checkbox" name="type_Supporter"> | |
| Supporter | |
| </label> | |
| </div> | |
| </div> | |
| <div class="filter-row"> | |
| <div class="filter-cate">Tier:</div> | |
| <div class="filter-options"> | |
| <label> | |
| <input type="checkbox" name="tier_A"> | |
| A | |
| </label> | |
| <label> | |
| <input type="checkbox" name="tier_S"> | |
| S | |
| </label> | |
| </div> | |
| </div> | |
| <input type="reset" id="filter_reset"> | |
| <style id="filter_style"></style> | |
| </form> | |
| </header> | |
| <table id="table"> | |
| <tbody> | |
| <tr> | |
| <th></th> | |
| <td></td> | |
| <td></td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <!-- JS_INLINE_START --> | |
| <script> | |
| const itemData = | |
| [{"name":"卞氏刀","src":"https://img.game8.jp/12279779/daa5b0307ef1b25298093c1a66b237f3.webp/original","image":"","effect\nper tier":"傷害+5%"},{"name":"軍儀","src":"https://img.game8.jp/12279808/39d65cd24c2ed8e2c7497a482b7e0eae.webp/original","image":"","effect\nper tier":"攻速+5%"},{"name":"水煮蛋","src":"https://img.game8.jp/12279793/047b2d2a9b19f086ffc6ab632a069161.webp/original","image":"","effect\nper tier":"HP +0.5%/5s"},{"name":"火箭筒","src":"https://img.game8.jp/12279807/ef675855745b38ec674a6ca2eaf50b1a.webp/original","image":"","effect\nper tier":"技能尺寸+5%"},{"name":"烤全豬","src":"https://img.game8.jp/12286789/8dc25f00d2c2b30612fafebc7fa94ab6.webp/original","image":"","effect\nper tier":"HP+5%"},{"name":"滑板","src":"https://img.game8.jp/12279777/a5dabaf559af1bb66dece79ebe470f53.webp/original","image":"","effect\nper tier":"移速+5%"},{"name":"獵人執照","src":"https://img.game8.jp/12279839/0b5be4b09da3c796ea0aee26f1dbbcbc.webp/original","image":"","effect\nper tier":"經驗+5%"},{"name":"手機","src":"https://img.game8.jp/12279838/87c4eabe75f015519af0139aec4a474f.webp/original","image":"","effect\nper tier":"吸取範圍+5%"},{"name":"步槍彈","src":"https://img.game8.jp/12279841/b444959cad9fa01438ce2befd9efb6b0.webp/original","image":"","effect\nper tier":"彈道速度+5%"},{"name":"武術服","src":"https://img.game8.jp/12279791/0631e48d83de8a44c9e5d350c3cc3a7f.webp/original","image":"","effect\nper tier":"免傷+5%"},{"name":"腕錶","src":"https://img.game8.jp/12279792/016545d309c091980b8f27e610537b02.webp/original","image":"","effect\nper tier":"技能\n持續時間+5%"},{"name":"木造蔵","src":"https://img.game8.jp/12279840/50609747ed743663450bf1912f7c8bd5.webp/original","image":"","effect\nper tier":"金幣+5%"}]; | |
| const roleData = | |
| [{"tier":"S","name":"甘舒","title":"炸彈魔","image_src":"https://img.game8.jp/12914705/0d7a600af9379ffbf9d6addae1b04985.webp/show","image":"","type":"Attacker","evolve":"滑板","evolve\nicon":"","":"","⭐︎":"扇形爆炸","⭐︎⭐︎":"尺寸+","⭐︎⭐︎⭐︎":"CD-","⭐︎⭐︎\n⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"CD-","★":"CD-","uncommon":"暴擊率+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"\n減少距離衰減\n\n+2 [普攻+10%傷]\n+4 [atk+10% hp+10%]\n+6 [普攻+15%傷]\n+8 [atk+15% hp+15%]\n+10 [自身暴擊率+10%、暴擊傷害+60%]","skill":"炸200人"},{"tier":"S","name":"庫洛洛 Chrollo","title":"旅團之首","image_src":"https://img.game8.jp/12852820/caa9c0656b77170bb2ad4360634edbc6.webp/show","image":"","type":"Supporter","evolve":"卞氏刀","evolve\nicon":"","":"","⭐︎":"念魚亂飛\n飛刀補刀","⭐︎⭐︎":"念魚數量+1","⭐︎⭐︎⭐︎":"飛刀尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"念魚數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"念魚數量+1\n飛刀尺寸+","★":"念魚數量+1\n飛刀尺寸+\n隨機BUFF","uncommon":"CD-10%","rare":"ATK +5%\nHP +5%","elite":"","epic":"念魚尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"\n念魚數量+1\n\n+2 [CD-5%]\n+4 [atk+10% hp+10%]\n+6 [CD-10%]\n+8 [atk+15% hp+15%]\n+10 [友方傷害+20%]","skill":"AOE秒殺非頭目單位\n單點傷害頭目\n普攻+"},{"tier":"S","name":"凱特 Kite","title":"死神之鐮","image_src":"https://img.game8.jp/12763964/1a80e22447f32e521b6531bd11edbb35.webp/show","image":"","type":"Healer","evolve":"火箭筒","evolve\nicon":"","":"","⭐︎":"大弧形斬擊\n可回血","⭐︎⭐︎":"間隔-","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"間隔-","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"斬擊後射擊","uncommon":"回血量+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"\nHP 70%+\n傷害+30%\n\n+2 [暴率+20%]\n+4 [ATK+10% HP+10%]\n+6 [DMG+10%]\n+8 [ATK+15% HP+15%]\n+10 [HP+20% DMG+15%]","skill":"死神圓舞曲\nAOE龍卷風\n可回血"},{"tier":"S","name":"信長 Nobunaga","title":"煞那的劍豪","image_src":"https://img.game8.jp/12663795/87c9b89336d75418e8e85506de9a23b7.webp/show","image":"","type":"Defender","evolve":"武術服","evolve\nicon":"","":"","⭐︎":"圓領域\n可擋子彈","⭐︎⭐︎":"感知間隔-","⭐︎⭐︎⭐︎":"感知間隔-","⭐︎⭐︎\n⭐︎⭐︎":"感知間隔-","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"感知間隔-","★":"感知間隔-\n尺寸+","uncommon":"免傷+10%","rare":"ATK +5%\nHP +5%","elite":"靜立1s發動圓\n傷害+30%","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"\n頻率+\n\n+2 [移速+15%]\n+4 [ATK+10% HP+10%]\n+6 [承傷-10%]\n+8 [ATK+15% HP+15%]\n+10 [友方普攻尺寸+15%]","skill":"不准動\n近敵AOE\n傷害+"},{"tier":"S","name":"桀諾 Zeno","title":"終身現役","image_src":"https://img.game8.jp/12565423/3ef6cc1c2d06e55731fdb9f61c6851db.webp/show","image":"","type":"Supporter","evolve":"步槍彈","evolve\nicon":"","":"","⭐︎":"龍氣波\n可追蹤","⭐︎⭐︎":"龍飛速+","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"龍飛速+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"龍飛速+\n尺寸+","uncommon":"CD-10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"龍氣飛速+25%","epic+2":"ATK +10%\nHP +10%","legendary":"可減速","skill":"龍星群\n廣域AOE\n+ 收尾一擊"},{"tier":"S","name":"窩金 Uvogin","title":"一騎當千的豪傑","image_src":"https://img.game8.jp/12506191/3fda27fd4dc23db5454789c3de098121.webp/show","image":"","type":"Attacker","evolve":"手機","evolve\nicon":"","":"","⭐︎":"上勾拳碎岩\n扇形AOE","⭐︎⭐︎":"尺寸+","⭐︎⭐︎⭐︎":"CD-","⭐︎⭐︎\n⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"CD-","★":"尺寸+\n獅吼砲 /3 hits","uncommon":"暴擊率+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"BOSS戰\n傷害+30%","skill":"超破壞拳\n放射狀AOE\n窩金普攻範圍+"},{"tier":"S","name":"小滴 Shizuku","title":"純真的清掃員","image_src":"https://img.game8.jp/12397577/04086591888bc1902135b13bad9440f2.webp/show","image":"","type":"Supporter","evolve":"火箭筒","evolve\nicon":"","":"","⭐︎":"弧形斬擊\n可排毒","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"尺寸+\n吸力攻擊","uncommon":"CD-10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"可擊退","skill":"打掃完畢\n持續型AOE\n可擋子彈"},{"tier":"S","name":"華石鬥郎 Kastro","title":"虎咬真拳的好手","image_src":"https://img.game8.jp/12357640/37656f06074ac4d15cca3215cd877ce0.webp/show","image":"","type":"Defender","evolve":"武術服","evolve\nicon":"","":"","⭐︎":"面前爪AOE\n可擊退","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"尺寸+\n數量+1","uncommon":"免傷+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"攻擊數+1","skill":"分身\nAOE\n分身協同攻擊"},{"tier":"S","name":"瑪奇 Machi","title":"蜘蛛的縫合師","image_src":"https://img.game8.jp/12284573/911c98e0501c12a07c1375eebc7ed511.webp/show","image":"","type":"Healer","evolve":"水煮蛋","evolve\nicon":"","":"","⭐︎":"縫合線阱區\n回血","⭐︎⭐︎":"尺寸+","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"擊中減速","uncommon":"回血量+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"可暈眩","epic+2":"ATK +10%\nHP +10%","legendary":"暈眩時間+","skill":"念線針線展開\n全圖AOE\n+減速陷阱"},{"tier":"S","name":"比斯吉 Biscuit","title":"隱藏的力量","image_src":"https://img.game8.jp/12279769/dc10b6aecc4770ed903c6a2b56d07334.webp/show","image":"","type":"Healer","evolve":"軍儀","evolve\nicon":"","":"","⭐︎":"近身拳擊\n可回血","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"尺寸+\n數量+1","uncommon":"回血量+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"超額補血+20%","epic+2":"ATK +10%\nHP +10%","legendary":"HP 80%+\n我方傷害+30%","skill":"桃色氣息\n回血+ 護盾+\n移速+ "},{"tier":"S","name":"尼特羅 Netero","title":"獵人協會會長","image_src":"https://img.game8.jp/12279768/15d816c13d48a1221aca1bae4932f22e.webp/show","image":"","type":"Supporter","evolve":"軍儀","evolve\nicon":"","":"","⭐︎":"排球風壓\n可擊退\n可穿透","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"數量+1\n尺寸+","uncommon":"CD-10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸x2","epic+2":"ATK +10%\nHP +10%","legendary":"我方技能尺寸+","skill":"感謝的正拳\n廣域AOE\n短時CD-"},{"tier":"S","name":"西索 Hisoka","title":"狂愛死神","image_src":"https://img.game8.jp/12284574/3b8b798795deb5daa29c04a97b4bf16c.webp/show","image":"","type":"Attacker","evolve":"卞氏刀","evolve\nicon":"","":"","⭐︎":"卡牌\n扇形AOE","⭐︎⭐︎":"範圍+","⭐︎⭐︎⭐︎":"範圍+","⭐︎⭐︎\n⭐︎⭐︎":"投擲次數+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"範圍+","★":"投擲次數+1\n邊界可反彈","uncommon":"暴擊率+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"牌數+1","epic+2":"ATK +10%\nHP +10%","legendary":"投擲數+1","skill":"伸縮自在的愛\n射牌、延遲收回\n移速+"},{"tier":"S","name":"奇犽 Killua","title":"紫電一閃","image_src":"https://img.game8.jp/12284577/13ebffa9ef77ebea60b2f0e71cd81b08.webp/show","image":"","type":"Supporter","evolve":"卞氏刀","evolve\nicon":"","":"","⭐︎":"電弧跳躍\n可連鎖\n可排毒","⭐︎⭐︎":"閃電數量+1","⭐︎⭐︎⭐︎":"連鎖數+1","⭐︎⭐︎\n⭐︎⭐︎":"閃電數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"連鎖數+1","★":"閃電數量x3","uncommon":"CD-10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"數量+1","epic+2":"ATK +10%\nHP +10%","legendary":"可暈眩","skill":"落雷\n廣域AOE\n可擊暈"},{"tier":"S","name":"雷歐力 Leorio","title":"憤怒一拳","image_src":"https://img.game8.jp/12284578/c3d5f43ba8529da323fc9de58e8b17fd.webp/show","image":"","type":"Attacker","evolve":"水煮蛋","evolve\nicon":"","":"","⭐︎":"遙距念拳","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"數量+2","uncommon":"暴擊率+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"念拳數量+1","epic+2":"ATK +10%\nHP +10%","legendary":"念拳目標+1","skill":"受死吧\n廣域AOE\n可擊退"},{"tier":"S","name":"酷拉皮卡 Kurapika","title":"火紅眼的復仇者","image_src":"https://img.game8.jp/12279767/529c5c25b4d5b4eaf7610055d531458c.webp/show","image":"","type":"Defender","evolve":"烤全豬","evolve\nicon":"","":"","⭐︎":"鎖鍊橫掃\n可擋子彈","⭐︎⭐︎":"範圍+","⭐︎⭐︎⭐︎":"CD-","⭐︎⭐︎\n⭐︎⭐︎":"範圍+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"CD-","★":"CD-\n尺寸+","uncommon":"免傷+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"可排毒","epic+2":"ATK +10%\nHP +10%","legendary":"可擊退","skill":"絕對時間\n攻速+ 移速+\n副作用：疲勞"},{"tier":"S","name":"小傑 Gon","title":"無限的原石","image_src":"https://img.game8.jp/12270211/4fc93a91fc969d394b6318e1f64dd573.webp/show","image":"","type":"Attacker","evolve":"卞氏刀","evolve\nicon":"","":"","⭐︎":"剪刀手斬擊","⭐︎⭐︎":"尺寸+","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"尺寸+\n擊退量+","uncommon":"暴擊率+10%","rare":"ATK +5%\nHP +5%","elite":"-","epic":"尺寸+25%","epic+2":"ATK +10%\nHP +10%","legendary":"暴擊率+10%\n暴擊傷害+100%","skill":"猜猜拳‧石頭\nAOE\n小傑暴擊率+"},{"tier":"A","name":"小傑 Gon","title":"立志當獵人的少年","image_src":"https://img.game8.jp/12284575/979c493b1842544849487a88e4ac92af.webp/show","image":"","type":"Attacker","evolve":"獵人執照","evolve\nicon":"","":"","⭐︎":"踢擊AOE\n可擊退","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"數量+1\n尺寸+","uncommon":"暴擊率+10%","rare":"ATK +20\nHP +100","elite":"尺寸x2","epic":"擊退距離+","epic+2":"ATK +40\nHP +200","legendary":"攻擊數+1","skill":"-"},{"tier":"A","name":"酷拉皮卡 Kurapika","title":"堅定不移的決心","image_src":"https://img.game8.jp/12284579/9a04456f62466cf24b61c1514bae1c1a.webp/show","image":"","type":"Supporter","evolve":"軍儀","evolve\nicon":"","":"","⭐︎":"劍擊AOE\n可穿透","⭐︎⭐︎":"數量+2","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+2","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"尺寸+\n速度+","uncommon":"CD-10%","rare":"ATK +20\nHP +100","elite":"可排毒","epic":"尺寸x2","epic+2":"ATK +40\nHP +200","legendary":"可穿透","skill":"-"},{"tier":"A","name":"奇犽 Killua","title":"走在影中的少年","image_src":"https://img.game8.jp/12284576/7434af90df7a2504e8d38ba2b6ea5549.webp/show","image":"","type":"Defender","evolve":"滑板","evolve\nicon":"","":"","⭐︎":"旋轉溜溜球\n可擋子彈","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"尺寸+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"尺寸+","★":"轉速x2","uncommon":"免傷+10%","rare":"ATK +20\nHP +100","elite":"可擊退","epic":"轉速+20%","epic+2":"ATK +40\nHP +200","legendary":"尺寸+25%","skill":"-"},{"tier":"A","name":"雷歐力 Leorio","title":"準醫生","image_src":"https://img.game8.jp/12279772/f870c32858d3561ad9b2b36a5f8a55ca.webp/show","image":"","type":"Healer","evolve":"烤全豬","evolve\nicon":"","":"","⭐︎":"短距毆打\n可回血","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"回血量+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"回血量+","★":"數量+1\n回血量+","uncommon":"回血量+10%","rare":"ATK +20\nHP +100","elite":"可擊退","epic":"靜立時\n回血量+20%","epic+2":"ATK +40\nHP +200","legendary":"回血量x2","skill":"-"},{"tier":"SKILL","name":"磊札 Razor","title":"速攻","image_src":"https://img.game8.jp/12286805/c262b687ac828d939f1e78b4d44be7a9.webp/original","image":"","type":"SKILL","evolve":"滑板","evolve\nicon":"","":"","⭐︎":"可反彈\n可擊退","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"球速+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"球速+","★":"數量x2 [6]"},{"tier":"SKILL","name":"梧桐 Gotoh","title":"管家彈丸","image_src":"https://img.game8.jp/12286713/cd981de62f6faa119a2f57adf22b689d.webp/original","image":"","type":"SKILL","evolve":"步槍彈","evolve\nicon":"","":"","⭐︎":"硬幣直射","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"傷害+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"傷害+","★":"數量+1 [6]\n射速+"},{"tier":"SKILL","name":"秀托 Shoot","title":"漂浮的三隻左手","image_src":"https://img.game8.jp/12286714/be3a28c085e2447fe35ee5549114b322.webp/original","image":"","type":"SKILL","evolve":"獵人執照","evolve\nicon":"","":"","⭐︎":"浮游手\n可追蹤","⭐︎⭐︎":"手速+","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"手速+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"手速+"},{"tier":"SKILL","name":"果列奴 Goreinu","title":"","image_src":"https://img.game8.jp/12286715/716ecbd6b8ba830a8644855f8d1a7f21.webp/original","image":"","type":"SKILL","evolve":"木造蔵","evolve\nicon":"","":"","⭐︎":"白色賢人亂衝\n可擊退","⭐︎⭐︎":"攻擊範圍+","⭐︎⭐︎⭐︎":"衝速+","⭐︎⭐︎\n⭐︎⭐︎":"攻擊範圍+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"衝速+","★":"黑色賢人\n定點AOE"},{"tier":"SKILL","name":"爆庫兒 Pokkle","title":"飛翔之矢","image_src":"https://img.game8.jp/12286813/68505d5ccce594aa365408a9c21d696f.webp/original","image":"","type":"SKILL","evolve":"武術服","evolve\nicon":"","":"","⭐︎":"隨機箭雨","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"數量x2 [10]"},{"tier":"SKILL","name":"半藏 Hanzo","title":"手裏劍亂舞","image_src":"https://img.game8.jp/12286809/b3d891eb246553fe79917e2086af3922.webp/original","image":"","type":"SKILL","evolve":"腕錶","evolve\nicon":"","":"","⭐︎":"隨機手裏劍\n可穿透","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"飛速+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"飛速+","★":"射速++\n集火"},{"tier":"SKILL","name":"門琪 Menchi","title":"切絲","image_src":"https://img.game8.jp/12287052/aac15a550facfcb4ded586c173675df6.webp/original","image":"","type":"SKILL","evolve":"水煮蛋","evolve\nicon":"","":"","⭐︎":"正面多次斬擊","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"數量x2 [10]\n範圍+"},{"tier":"SKILL","name":"柯特 Kalluto","title":"","image_src":"https://img.game8.jp/12287051/faae5b27309eab0e8b8a9d454b8523ce.webp/original","image":"","type":"SKILL","evolve":"手機","evolve\nicon":"","":"","⭐︎":"螺旋紙屑攻擊","⭐︎⭐︎":"速度+\n尺寸+","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"速度+\n尺寸+","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"速度+\n尺寸+\n數量+1"},{"tier":"SKILL","name":"伊加路哥 Ikalgo","title":"狙擊","image_src":"https://img.game8.jp/12287257/59458c68874b51f694fa68409b673ab3.webp/original","image":"","type":"SKILL","evolve":"步槍彈","evolve\nicon":"","":"","⭐︎":"視界外狙擊\n可穿透","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"速度+","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"速度+","★":"數量x2 [6]"},{"tier":"SKILL","name":"芭蕉 Basho","title":"火候不足啊","image_src":"https://img.game8.jp/12288029/a071223d42f74647c179deb6bf1b5793.webp/original","image":"","type":"SKILL","evolve":"木造蔵","evolve\nicon":"","":"","⭐︎":"隨機火圈\n可排毒","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"數量x2 [10]"},{"tier":"SKILL","name":"莫老五 Morel","title":"紫煙拳","image_src":"https://img.game8.jp/12288030/e2e546cf2877050e1a18acd4a652bf9d.webp/original","image":"","type":"SKILL","evolve":"火箭筒","evolve\nicon":"","":"","⭐︎":"定點煙圈\n紫煙兵衝擊\n可穿透","⭐︎⭐︎":"紫煙兵+1","⭐︎⭐︎⭐︎":"煙圈\n數量+1","⭐︎⭐︎\n⭐︎⭐︎":"紫煙兵+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"煙圈\n數量+1","★":"紫煙兵+1\n尺寸+"},{"tier":"SKILL","name":"彭絲 Ponzu","title":"蜂群指揮","image_src":"https://img.game8.jp/12288031/7d3f968a90be9b298bc4157d04b471e2.webp/original","image":"","type":"SKILL","evolve":"腕錶","evolve\nicon":"","":"","⭐︎":"旋轉蜂群\n可擋子彈","⭐︎⭐︎":"數量+1","⭐︎⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎":"數量+1","⭐︎⭐︎\n⭐︎⭐︎⭐︎":"數量+1","★":"蜂群不斷"}]; | |
| </script> | |
| <!-- JS_INLINE_END --> | |
| <script> | |
| console.log(123, itemData, roleData); | |
| let dd = roleData.reduce((all, i) => { | |
| if (!all[i.evolve]) { | |
| let _item = itemData.find(ii => ii.name === i.evolve); | |
| all[i.evolve] = { | |
| roles: [], | |
| skills: [], | |
| info: _item, | |
| }; | |
| } | |
| if (i.type === 'SKILL') { | |
| all[i.evolve].skills.push(i); | |
| } else { | |
| all[i.evolve].roles.push(i); | |
| } | |
| return all; | |
| }, {}); | |
| const table_data = Object.values(dd).sort((a, b) => { | |
| let index_a = itemData.findIndex(_i => _i.name === a.info.name) || 0; | |
| let index_b = itemData.findIndex(_i => _i.name === b.info.name) || 0; | |
| return index_a - index_b; | |
| }) | |
| table.querySelector('tbody').innerHTML = table_data.map(i => ` | |
| <tr> | |
| <th> | |
| <div class="img-box"> | |
| <label> | |
| <input type="checkbox"> | |
| <img src="https://wsrv.nl/?&il&output=webp&w=60&h=60&default=1&url=${i.info.src}" title="${i.info.name}" width="60" height="60" /> | |
| </label> | |
| </div> | |
| </th> | |
| <td><div class="flex">${i.roles.map(gen_td).join('')}</div></td> | |
| <td><div class="flex">${i.skills.map(gen_td).join('')}</div></td> | |
| </tr>`).join(''); | |
| function gen_td(_data) { | |
| let img = ` | |
| <label> | |
| <input type="checkbox"> | |
| <img src="https://wsrv.nl/?&il&output=webp&w=60&h=60&default=1&url=${_data.image_src}" title="${_data.name} - ${_data.title}" width="60" height=60 /> | |
| </label>`; | |
| if (_data.type === 'SKILL') { | |
| // return img; | |
| } | |
| return `<div class="img-box" data-type="${_data.type}" data-tier="${_data.tier}">${img}</div>`; | |
| } | |
| const filter_groups = [ | |
| ['type_Attacker', 'type_Healer', 'type_Defender', 'type_Supporter'], | |
| ['tier_A', 'tier_S'] | |
| ]; | |
| const filter_init_value = Object.fromEntries( | |
| filter_groups.flat().map(i => [i, false]) | |
| ); | |
| filterform.onchange = update_filter_style; | |
| filterform.onreset = reset_filter_style; | |
| function update_filter_style() { | |
| const values = { | |
| ...filter_init_value, | |
| ...Object.fromEntries(new FormData(filterform)), | |
| }; | |
| // 2. ⚡ 一個迴圈，直接辦完所有分類的檢查與剃除 | |
| filter_groups.forEach(keys => { | |
| if (new Set(keys.map(k => values[k])).size === 1) { | |
| keys.forEach(k => delete values[k]); | |
| } | |
| }); | |
| console.log(121, Object.keys(values)); | |
| // reset | |
| if (Object.keys(values).length === 0) { | |
| reset_filter_style(); | |
| return; | |
| } | |
| const result_groups = [[], []]; // 索引 0 放 FALSE (空字串)，索引 1 放 ON | |
| for (let key in values) { | |
| // 如果值是 'on' ➡️ 結果是 1 ➡️ 丟進 result_groups[1] | |
| // 如果值是 '' ➡️ 結果是 0 ➡️ 丟進 result_groups[0] | |
| const index = +(values[key] === 'on'); | |
| result_groups[index].push(key); | |
| } | |
| console.log(22, result_groups); | |
| let selectors = result_groups[0].map(k => { | |
| let [cate, value] = k.split('_'); | |
| return `.img-box[data-${cate}="${value}"]`; | |
| }); | |
| filter_style.textContent = selectors.join() + `{ opacity: .2;}` | |
| } | |
| function reset_filter_style() { | |
| console.log('reset_filter_style'); | |
| filter_style.textContent = ''; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 定義目標資料夾與檔案名稱 | |
| DATA_DIR = data | |
| ITEM_JSON = $(DATA_DIR)/item.json | |
| ROLE_JSON = $(DATA_DIR)/role.json | |
| COMBINED_JS = $(DATA_DIR)/data.js | |
| INDEX_HTML = index.html | |
| # 定義網址 | |
| ITEM_URL = https://opensheet.elk.sh/1PcUFHm4EoTOx4X78DEx-49yPCsR7jLxkvnGEp1oAoOI/'item' | |
| ROLE_URL = https://opensheet.elk.sh/1PcUFHm4EoTOx4X78DEx-49yPCsR7jLxkvnGEp1oAoOI/'role' | |
| # 關鍵設定：將 all、下載規則都宣告為 .PHONY，確保每次執行 make 都一定會跑 curl 覆蓋舊檔 | |
| .PHONY: all clean download-item download-role | |
| all: download-item download-role combine inline | |
| @echo "所有 JSON 檔案已嘗試更新並覆蓋！" | |
| # 建立資料夾（這個保留非 .PHONY，有資料夾就不重複建立） | |
| $(DATA_DIR): | |
| mkdir -p $(DATA_DIR) | |
| # 強制下載並覆蓋 item.json | |
| download-item: | $(DATA_DIR) | |
| @echo "正在下載並覆蓋 item.json..." | |
| curl -s "$(ITEM_URL)" -o $(ITEM_JSON) | |
| # 強制下載並覆蓋 role.json | |
| download-role: | $(DATA_DIR) | |
| @echo "正在下載並覆蓋 role.json..." | |
| curl -s "$(ROLE_URL)" -o $(ROLE_JSON) | |
| combine: | |
| @echo "正在合併 JSON 檔案至 $(COMBINED_JS)..." | |
| @echo "const itemData = " > $(COMBINED_JS) | |
| @cat $(ITEM_JSON) >> $(COMBINED_JS) | |
| @echo ";" >> $(COMBINED_JS) | |
| @echo "const roleData = " >> $(COMBINED_JS) | |
| @cat $(ROLE_JSON) >> $(COMBINED_JS) | |
| @echo ";" >> $(COMBINED_JS) | |
| inline: | |
| @echo "正在更新內嵌 JS..." | |
| @awk -v js_file="$(COMBINED_JS)" ' \ | |
| /<!-- JS_INLINE_START -->/ { \ | |
| print $$0; # 保留開始標籤 \ | |
| print "<script>"; \ | |
| while ((getline line < js_file) > 0) { print line } \ | |
| close(js_file); \ | |
| print "</script>"; \ | |
| skip = 1; # 開啟跳過模式 \ | |
| next \ | |
| } \ | |
| /<!-- JS_INLINE_END -->/ { \ | |
| skip = 0; # 關閉跳過模式 \ | |
| print $$0; # 保留結束標籤 \ | |
| next \ | |
| } \ | |
| skip == 1 { next } # 跳過中間舊的內容 \ | |
| { print } \ | |
| ' "$(INDEX_HTML)" > "$(INDEX_HTML).tmp" && \ | |
| mv "$(INDEX_HTML).tmp" "$(INDEX_HTML)" | |
| # 如果真的有需要手動完整清空時才使用的指令 | |
| clean: | |
| rm -rf $(DATA_DIR) | |
| @echo "已清理下載的資料。" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment