clapans.github.io/maple.html at master · clapans/clapans.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
  <title>Document</title>
  <link href="./css/main.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid m-auto" id="nav-container">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">Features</a>
          <a class="nav-link" href="#">Pricing</a>
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </div>
  </nav>
  <div class="m-auto d-flex" id="container">
    <div class="equipment-area area">
      <div class="item-pot" id="item-pot-1" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot empty-pot" id="item-pot-2"></div>
      <div class="item-pot" id="item-pot-3" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot empty-pot" id="item-pot-4"></div>
      <div class="item-pot" id="item-pot-5" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-6" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-7" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-8" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot empty-pot" id="item-pot-9"></div>
      <div class="item-pot" id="item-pot-10" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-11" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-12" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-13" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-14" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-15" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-16" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-17" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-18" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-19" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-20" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-21" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-22" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-23" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-24" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot" id="item-pot-25" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot empty-pot" id="item-pot-26"></div>
      <div class="item-pot empty-pot" id="item-pot-27"></div>
      <div class="item-pot" id="item-pot-28" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
      <div class="item-pot empty-pot" id="item-pot-29"></div>
      <div class="item-pot" id="item-pot-30" data-bs-toggle="modal" data-bs-target="#itemSelectModal"></div>
    </div>
    <div class="monster-area area">
      <div class="w-75 m-auto shadow-lg select-container" id="monster-category-container"></div>
    </div>
    <div class="skill-area area"></div>
  </div>
  <div class="modal fade" id="itemSelectModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="m-auto">아이템을 골라주세요</h3>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16" data-bs-dismiss="modal" aria-label="Close">
            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
          </svg>
        </div>
        <div class="modal-body">
          <div class="w-75 m-auto shadow-lg" id="item-select-select"></div>
        </div>
        <button type="button" class="myButton mx-auto" id="item-select-btn" data-bs-dismiss="modal">선택완료</button>
      </div>
    </div>
  </div>
  <script>
    let container = document.querySelector("#container")
    window.addEventListener("resize",() => {
      if (window.innerWidth < 1200) {
        if (container.classList.contains("d-flex"))
          container.classList.remove("d-flex")
      } else {
        if (!container.classList.contains("d-flex"))
          container.classList.add("d-flex")
      }
    })

    let itemList = []
    let curSelectedMonster = null
    let monsterCategoryContainer = document.querySelector("#monster-category-container")

    for (let i = 0; i < 30; i++) itemList.push("")

    let monsterCategoryList = ["카르시온","아르테리아","도원경","오디움","아르크스","세르니움(후)","세르니움(전)","리멘","고통의 미궁","문브릿지"]
    let monsterMap = {
      "카르시온" : ["절망의 파수꾼", "어둠이 파고든 괴조", "심연의 파수꾼", "절망의 사냥꾼", "어둠이 스며든 흑표", "심연의 사냥꾼",
                   "근원에 다다른 기사", "근원에 다가간 사제"]
    }

    for (let i = 0; i < monsterCategoryList.length; i++) {
      let option = document.createElement("button")
      let categoryWrpr = document.createElement("div")
      let chevron = document.createElementNS("http://www.w3.org/2000/svg","svg")
      let path = document.createElementNS("http://www.w3.org/2000/svg","path")

      chevron.setAttribute("width","16")
      chevron.setAttribute("height","16")
      chevron.setAttribute("fill","currentColor")
      chevron.setAttribute("viewBox","0 0 16 16")
      chevron.classList.add("bi")
      chevron.classList.add("bi-chevron-right")
      chevron.classList.add("chevron")

      path.setAttribute("d","M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z")
      path.setAttribute("fill-rule","evenodd")

      chevron.appendChild(path)

      let text = document.createElement("div")

      text.innerText = monsterCategoryList[i]
      text.classList.add("monster-category")

      categoryWrpr.appendChild(chevron)
      categoryWrpr.appendChild(text)

      option.classList.add("option")
      option.appendChild(categoryWrpr)

      monsterCategoryContainer.appendChild(option)

      categoryWrpr.addEventListener("click",(event) => {
        document.querySelector(".selected").classList.remove("selected")
        option.classList.add("selected")

        if (chevron.classList.contains("bi-chevron-right")) {
          chevron.classList.remove("bi-chevron-right")
          chevron.classList.add("bi-chevron-down")

          path.setAttribute("d","M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z")

          //나중에 db에서 받아오는 걸로 바꿔야함
          //이미 db에서 받아온 category면 따로 저장한 map에서 받아오고 아니면 받아온다.
          for (let monster of monsterMap[monsterCategoryList[i]]) {
            let tmp = document.createElement("div")
            let optionTmp = document.createElement("div")
            let textTmp = document.createElement("div")

            textTmp.innerText = monster

            optionTmp.classList.add("option")
            optionTmp.appendChild(textTmp)
            tmp.appendChild(optionTmp)
            tmp.classList.add("monster-info")
            if (curSelectedMonster == monster)
              tmp.classList.add("selected-monster")

            tmp.addEventListener("click", () => {
              if (tmp.classList.contains("selected-monster")) return

              document.querySelectorAll(".monster-info").forEach(el => {
                if (el.classList.contains("selected-monster"))
                  el.classList.remove("selected-monster")
              })
              tmp.classList.add("selected-monster")
              curSelectedMonster = monster
            })
            option.appendChild(tmp)
          }
        } else {
          chevron.classList.remove("bi-chevron-down")
          chevron.classList.add("bi-chevron-right")

          path.setAttribute("d","M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z")

          while (option.hasChildNodes())
            option.removeChild(option.firstChild)

          option.appendChild(categoryWrpr)
        }
      })
    }

    monsterCategoryContainer.firstChild.classList.add("selected")

    const numToCategory = ["","ring","","cap","","emblem","ring","pendant","forehead","","badge","ring","pendant","eyeacc","earacc","medal","ring","weapon","clothes","shoulder","subweapon","pocket","belt","pants","gloves","cape","","","shoes","","heart"]
    const category = {
      "cap" : ["하이네스 워리어헬름","하이네스 레인져베레","하이네스 던위치햇", "하이네스 어새신보닛", "하이네스 원더러햇",
               "앱솔랩스 나이트헬름","앱솔랩스 아처후드","앱솔랩스 메이지크라운","앱솔랩스 시프캡","앱솔랩스 파이렛페도라",
               "카오스 벨름의 헬름","카오스 피에르 모자","카오스 퀸의 티아라","카오스 반반 투구",
               "에테르넬 나이트헬름","에테르넬 메이지햇","에테르넬 아처햇","에테르넬 시프반다나","에테르넬 파이렛햇"],
      "ring" : ["실버블라썸 링","거대한 공포","가디언 엔젤 링","고귀한 이피아의 반지","스칼렛 링","마이스터링","벤젼스 링",
                "코스모스 링","SS급 마스터 쥬얼링","결속의 반지","어드벤쳐 딥다크 크리티컬 링","카오스 링","테네브리스 원정대 반지",
                "글로리온 링","어웨이크 링","이터널 플레임 링","시드링"],
      "emblem" : ["미트라의 분노","엠블렘"],
      "pendant" : ["매커네이터 펜던트","도미네이터 펜던트","130제 펜던트(STR)","130제 펜던트(DEX)","130제 펜던트(INT)",
                   "130제 펜던트(LUK)","데이브레이크 펜던트","고통의 근원","라이징썬 펜던트","블레이징썬 펜던트","피어리스 펜던트",
                  "카오스 혼테일의 목걸이"],
      "forehead" : ["응축된 힘의 결정석","샤이니 레드 워리어 심볼","샤이니 레드 아처 심볼",
                    "샤이니 레드 매지션 심볼","샤이니 레드 파이렛 심볼","샤이니 레드 시프 심볼",
                    "트와일라이트 마크","루즈 컨트롤 머신 마크"],
      "badge" : ["크리스탈 웬투스 뱃지","칠요의 뱃지","창세의 뱃지"],
      "eyeacc" : ["아쿠아틱 레터 눈장식","블랙빈 마크","카오스 핑크빈 마크","파풀라투스 마크","마력이 깃든 안대"],
      "earacc" : ["데아 시두스 이어링","마이스터 이어링","오션글로우 이어링","에스텔라 이어링","커맨더 포스 이어링"],
      "medal" : ["칠요의 몬스터파커","카오스 벨룸 킬러"],
      "weapon" : ["제네시스 세이버","파프니르 미스틸테인","앱솔랩스 세이버","아케인셰이드 세이버",
                  "제네시스 엑스","파프니르 트윈클리버","앱솔랩스 엑스","아케인셰이드 엑스",
                  "제네시스 해머","파프니르 골디언해머","앱솔랩스 비트해머","아케인셰이드 해머",
                  "제네시스 스태프","파프니르 마나크라운","앱솔랩스 스펠링스태프","아케인셰이드 스태프",
                  "제네시스 완드","파프니르 마나테이커","앱솔랩스 스펠링완드","아케인셰이드 완드",
                  "제네시스 샤이닝로드","파프니르 마나크래들","앱솔랩스 샤이닝로드","아케인셰이드 샤이닝로드",
                  "제네시스 대거","파프니르 다마스커스","앱솔랩스 슬래셔","아케인셰이드 대거",
                  "제네시스 케인","파프니르 클레르시엘","앱솔랩스 핀쳐케인","아케인셰이드 케인",
                  "제네시스 데스페라도","파프니르 데스브링어","앱솔랩스 데스페라도","아케인셰이드 데스페라도",
                  "제네시스 에너지체인","파프니르 스플릿엣지","앱솔랩스 에너지소드","아케인셰이드 에너지체인",
                  "제네시스 소울슈터","파프니르 엔젤릭슈터","앱솔랩스 소울슈터","아케인셰이드 소울슈터",
                  "제네시스 ESP리미터","파프니르 ESP리미터","앱솔랩스 ESP리미터","아케인셰이드 ESP리미터",
                  "제네시스 체인","파프니르 체인","앱솔랩스 체인","아케인셰이드 체인",
                  "제네시스 매직 건틀렛","파프니르 매직 건틀렛","앱솔랩스 매직 건틀렛","아케인셰이드 매직 건틀렛",
                  "제네시스 튜너","파프니르 포기브니스","앱솔랩스 튜너","아케인셰이드 튜너",
                  "제네시스 브레스 슈터","아케인셰이드 브레스 슈터","앱솔랩스 브레스 슈터","파프니르 나이트체이서",
                  "제네시스 창세선","아케인셰이드 초선","앱솔랩스 괴선","파프니르 용선",
                  "제네시스 투핸드소드","아케인셰이드 투핸드소드","앱솔랩스 브로드세이버","파프니르 페니텐시아",
                  "제네시스 투핸드해머","아케인셰이드 투핸드해머","앱솔랩스 브로드해머","파프니르 라이트닝어",
                  "제네시스 스피어","아케인셰이드 스피어","앱솔랩스 피어싱스피어","파프니르 브류나크",
                  "제네시스 폴암","아케인셰이드 폴암","앱솔랩스 핼버드","파프니르 문글레이브",
                  "제네시스 투핸드엑스","아케인셰이드 투핸드엑스","앱솔랩스 브로드엑스","파프니르 배틀클리버",
                  "제네시스 라즐리","라즐리 9형","라즐리 8형","라즐리 7형",
                  "제네시스 보우","아케인셰이드 보우","앱솔랩스 슈팅보우","파프니르 윈드체이서",
                  "제네시스 크로스보우","아케인셰이드 크로스보우", "앱솔랩스 크로스보우","파프니르 윈드윙슈터",
                  "제네시스 엘라하","아케인셰이드 엘라하","앱솔랩스 파일 갓","파프니르 빅 마운틴",
                  "제네시스 듀얼보우건","아케인셰이드 듀얼보우건","앱솔랩스 듀얼보우건","파프니르 듀얼윈드윙",
                  "제네시스 에이션트 보우","아케인셰이드 에이션트 보우","앱솔랩스 에이션트 보우","파프니르 에이션트 보우",
                  "제네시스 가즈","아케인셰이드 가즈","앱솔랩스 리벤지가즈","파프니르 리스크홀더",
                  "제네시스 피스톨","아케인셰이드 피스톨","앱솔랩스 포인팅건","파프니르 첼리스카",
                  "제네시스 시즈건","아케인셰이드 시즈건","앱솔랩스 블래스트캐논","파프니르 러스터캐논",
                  "제네시스 클로","아케인셰이드 클로","앱솔랩스 블로우너클","파프니르 펜리르탈론",
                  "제네시스 이클립스","아케인셰이드 차크람","앱솔랩스 차크람","파프니르 차크람"
                ],
      "subweapon" : ["제네시스 라피스","라피스 9형","라피스 8형","라피스 7형",
                     "버츄스 메달","이볼빙 버츄스 메달","블랙 메달",
                     "세이크리드 로자리오","이볼빙 세이크리드 로자리오","블랙 로자리오",
                     "버서크 체인","이볼빙 버서크 체인","블랙 체인",
                     "적녹의 서<종장>","이볼빙 적녹의 서<종장>","적녹의 서<블랙>",
                     "청은의 서<종장>","이볼빙 청은의 서<종장>","청은의 서<블랙>",
                     "백금의 서<종장>","이볼빙 백금의 서<종장>","백금의 서<블랙>",
                     "블라스트 페더","이볼빙 블라스트 페더","블랙 페더",
                     "리스트 아머","이볼빙 리스트 아머","블랙 리스트 아머",
                     "맥시마이즈 볼","이볼빙 맥시마이즈 볼","블랙 맥시마이즈 볼",
                     "봄버드 센터파이어","이볼빙 봄버드 센터파이어","블랙 센터파이어",
                     "슬래싱 섀도우","이볼빙 슬래싱 섀도우","블랙 섀도우",
                     "팔콘아이","이볼빙 팔콘아이","블랙 팔콘아이",
                     "전발적중","이볼빙 전발적중","블랙 전발적중",
                     "에레브의 광휘","이볼빙 에레브의 광휘","블랙 에레브의 광휘",
                     "파사부","이볼빙 파사부","블랙 파사부",
                     "퍼펙트 렐릭","이볼빙 퍼펙트 렐릭","블랙 렐릭",
                     "익스플로시브 필<3호>","이볼빙 익스플로시브 필<3호>","블랙 익스플로시브 필",
                     "이터널 매그넘","이볼빙 이터널 매그넘","블랙 매그넘",
                     "정의의 소울실드","이볼빙 정의의 소울실드","블랙 소울실드",
                     "와일드 팡","이볼빙 와일드 팡","블랙 와일드 팡",
                     "그린 소울링","이볼빙 그린 소울링","블랙 소울링",
                     "황금빛 여우구슬","이볼빙 황금빛 여우구슬","블랙 여우구슬",
                     "카르마 오브","이볼빙 카르마 오브","블랙 오브",
                     "옥타코어 컨트롤러","이볼빙 옥타코어 컨트롤러","블랙 옥타코어 컨트롤러",
                     "인피니트 헥스시커","이볼빙 인피니트 헥스시커","블랙 인피니트 헥스시커",
                     "천룡추","이볼빙 천룡추","블랙 천룡추",
                     "빛나는 사옥 노리개","이볼빙 빛나는 사옥 노리개","블랙 사옥 노리개",
                     "극한의 포스실드","이볼빙 극한의 포스실드","블랙 포스실드",
                     "체스피스 디 퀸","이볼빙 체스피스 디 퀸","체스피스 블랙 퀸",
                     "트랜스미터 type:A","이볼빙 트랜스미터 type:A","블랙 트랜스미터",
                     "노블 브레이슬릿","이볼빙 노블 브레이슬릿","블랙 샤이니 브레이슬릿",
                     "글로리 매직윙","이볼빙 글로리 매직윙","블랙 매직윙",
                     "얼티밋 패스","이볼빙 얼티밋 패스","블랙 패스",
                     "월장석 선추","이볼빙 월장석 선추","블랙 황수정 선추",
                     "D100 커스텀 웨폰벨트","이볼빙 D100 커스텀웨폰벨트","블랙 D100 웨폰벨트",
                     "진리의 노바의 정수","이볼빙 진리의 노바의 정수","블랙 노바의 정수",
                     "데르니에 카르트","이볼빙 데르니에 카르트","블랙 카르트",
                     "무한의 마법 화살","이볼빙 무한의 마법 화살","블랙 마법 화살",
                     "드래곤마스터의 유산","이볼빙 드래곤마스터의 유산","블랙 드래곤마스터의 유산",
                    ],
      "clothes" : ["이글아이 워리어아머","이글아이 레인져후드","이글아이 던위치로브","이글아이 어새신셔츠","이글아이 원더러코트",
                   "에테르넬 나이트아머","에테르넬 메이지로브","에테르넬 아처후드","에테르넬 시프셔츠","에테르넬 파이렛코트"],
      "shoulder" : ["앱솔랩스 나이트숄더","앱솔랩스 메이지숄더","앱솔랩스 아처숄더","앱솔랩스 시프숄더","앱솔랩스 파이렛숄더",
                    "아케인셰이드 나이트숄더","아케인셰이드 메이지숄더","아케인셰이드 아처숄더","아케인셰이드 시프숄더","아케인셰이드 파이렛숄더"],
      "pocket" : [],
      "belt" : [],
      "pants" : ["트릭스터 워리어팬츠","트릭스터 레인져팬츠","트릭스터 던위치팬츠","트릭스터 어새신팬츠","트릭스터 원더러팬츠",
                 "에테르넬 나이트팬츠","에테르넬 메이지팬츠","에테르넬 아처팬츠","에테르넬 시프팬츠","에테르넬 파이렛팬츠"],
      "gloves" : ["앱솔랩스 나이트글러브","앱솔랩스 메이지글러브","앱솔랩스 아처글러브","앱솔랩스 시프글러브","앱솔랩스 파이렛글러브",
                  "아케인셰이드 나이트글러브","아케인셰이드 메이지글러브","아케인셰이드 아처글러브","아케인셰이드 시프글러브","아케인셰이드 파이렛글러브"],
      "cape" : ["앱솔랩스 나이트케이프","앱솔랩스 메이지케이프","앱솔랩스 아처케이프","앱솔랩스 시프케이프","앱솔랩스 파이렛케이프",
                "아케인셰이드 나이트케이프","아케인셰이드 메이지케이프","아케인셰이드 아처케이프","아케인셰이드 시프케이프","아케인셰이드 파이렛케이프"],
      "shoes" : ["앱솔랩스 나이트슈즈","앱솔랩스 메이지슈즈","앱솔랩스 아처슈즈","앱솔랩스 시프슈즈","앱솔랩스 파이렛슈즈",
                 "아케인셰이드 나이트슈즈","아케인셰이드 메이지슈즈","아케인셰이드 아처슈즈","아케인셰이드 시프슈즈","아케인셰이드 파이렛슈즈"],
      "heart" : []
    }
    let equipmentImgMap = {
      }

    document.querySelector("#item-select-btn").addEventListener("click", () => {
      let idx = document.querySelector("#item-select-select").attributes.idx.nodeValue
      let itemPot = document.querySelector("#item-pot-" + idx)
      while (itemPot.hasChildNodes() )
          itemPot.removeChild( itemPot.firstChild)
      let img = document.createElement("img")
      let itemName = document.querySelector(".selected-item > div").innerText
      img.src = equipmentImgMap[itemName]
      itemPot.appendChild(img)
    })

    for (let i = 1; i < 31; i++) {
      if (i == 2 || i == 4 || i == 9 || i == 26 || i == 27) continue
      document.querySelector("#item-pot-" + i).addEventListener("click",() => {
        let itemSelect = document.querySelector("#item-select-select")
        while (itemSelect.hasChildNodes() )
          itemSelect.removeChild( itemSelect.firstChild )
        itemSelect.setAttribute("idx",i)

        for (let t of category[numToCategory[i]]) {
          let option = document.createElement("div")
          let text = document.createElement("div")
          let img = document.createElement("img")
          img.setAttribute("style","height: 50px")
          let tSplit = t.split(" ")
          /*if (tSplit.length > 3) {
            let first = ""
            let second = ""
            for (let i = 0; i < 3; i++) first += tSplit[i] + " "
            for (let i = 3; i < tSplit.length; i++) second += tSplit[i] + " "
            text.innerText = first + "\n" + second
          } else*/
          text.innerText = t
          text.setAttribute("style","padding-left: 10px; font-weight: bold; margin-left : 10px; display: inline; overflow : hidden")
          img.src = equipmentImgMap[t]
          option.classList.add("option")
          option.appendChild(img)
          option.appendChild(text)
          option.addEventListener("click",() => {
            document.querySelector(".selected-item").classList.remove("selected-item")
            option.classList.add("selected-item")
          })
          itemSelect.appendChild(option)
        }
        itemSelect.firstChild.classList.add("selected-item")
      })
    }
  </script>
</body>
</html>