<div class="challApp" x-data="challApp" lang="ja">
  <div class="cats">
    <div class="filler"></div>
    <button :class="{selected: category === null}" @click="updateCategory(null)">All</button>
    <button :class="{selected: category === 'Crypton'}" @click="updateCategory('Crypton')">Crypton</button>
    <button :class="{selected: category === 'Internet'}" @click="updateCategory('Internet')">Internet</button>
    <button :class="{selected: category === 'Gynoid'}" @click="updateCategory('Gynoid')">Gynoid</button>
    <button :class="{selected: category === '1st Place'}" @click="updateCategory('1st Place')">1st PLACE</button>
    <button :class="{selected: category === 'YAMAHA'}" @click="updateCategory('YAMAHA')">YAMAHA</button>
    <button :class="{selected: category === 'AHS'}" @click="updateCategory('AHS')">AHS</button>
    <button :class="{selected: category === 'Others'}" @click="updateCategory('Others')">Others</button>
    <div class="filler"></div>
  </div>
  <div id="challs" x-ref="listNode">
    <template x-for="(ch, idx) in repeatArray(filteredChallenges, repeatTimes)" :key="`a${ch.id}-${idx}`">
      <div :data-id="ch.id" :style="{backgroundColor: ch.color}" class="challItem" @click="select(idx % filteredChallenges.length, $event.target)">
        <div class="counter" x-text="ch.count">
        </div>
        <img :src="coverURL(ch)" :alt="ch.title" class="itemCover">
        <div class="info">
          <p x-text="ch.title"></p>
          <p x-text="'Vo. '+ch.vocal_types.join(', ')"></p>
        </div>
      </div>
    </template>
    <template x-for="(ch, idx) in filteredChallenges" :key="`c${ch.id}-${idx}`">
      <div :data-id="ch.id" :data-is-center="idx" :data-index="idx" :class="{ 'challItem': true, 'selected': openedId && ch.id === openedId }" @click="select(idx, $event.target)">
        <div class="counter" x-text="ch.count">
        </div>
        <img :src="coverURL(ch)" :alt="ch.title" class="itemCover">
        <div class="info">
          <p x-text="ch.title"></p>
          <p x-text="'Vo. '+ch.vocal_types.join(', ')"></p>
        </div>
      </div>
    </template>
    <template x-for="(ch, idx) in repeatArray(filteredChallenges, repeatTimes)" :key="`b2-${ch.id}-${idx}`" id="bottomRepeatTemplate">
      <div :data-id="ch.id" :style="{backgroundColor: ch.color}" class="challItem" @click="select(idx % filteredChallenges.length, $event.target)">
        <div class="counter" x-text="ch.count">
        </div>
        <img :src="coverURL(ch)" :alt="ch.title" class="itemCover">
        <div class="info">
          <p x-text="ch.title"></p>
          <p x-text="'Vo. '+ch.vocal_types.join(', ')"></p>
        </div>
      </div>
    </template>
  </div>
  <div id="opened" x-show="opened != null">
    <img :src="opened && coverURL(opened)" :alt="opened && opened.title" class="openedCover">
    <h2 x-text="opened && opened.title"></h2>
    <p>Composer: <span x-text="opened && opened.composer"></span>; Lyricist: <span x-text="opened && opened.lyricist"></span>; Arranger: <span x-text="opened && opened.arranger"></span></p>
    <p>Vocals: <span x-text="opened && opened.vocal_types.join(', ')"></span></p>
  </div>
</div>

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: Inter, Source Han Sans, Noto Sans CJK, Noto Sans JP, sans-serif;
}

.challApp {
  display: flex;
  flex-direction: row;
  gap: 10px;
  height: 100%;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #dddddd, #c6fdf1);
}

.cats {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-right: -10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-right: 5px solid white;
}

.filler {
  flex-grow: 1;
}

.cats button {
  background-color: #75fbde;
  color: $444463;
  min-height: 5rem;
  min-width: 12rem;
  font-size: 1rem;
  background-repeat: no-repeat;
  background-position: top;
  border: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.cats button.selected {
  background: #f9de6c;
}

#challs {
  width: 500px;
  height: 100%;
  overflow: auto;
  scroll-behavior: auto;
}

#challs::-webkit-scrollbar {
  display: none;
}

#challs {
  scrollbar-width: none;
}

#challs p {
  margin: 0;
}

.itemCover {
  height: 80%;
  margin-right: 10px;
}

.challItem {
  height: 100px;
  border-bottom: 1px solid black;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 2px solid #858390;
  background-color: #444463cc;
  color: white;
}

.challItem p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.challItem p:nth-child(1) {
  font-size: 1.2em;
}

.counter {
  margin: 1rem;
  color: #75fbde;
  font-weight: 600;
  background-color: #444463;
  font-size: 1.8rem;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  text-align: center;
}

.info {
  width: 0;
  flex-grow: 1;
  margin-right: 10px;
}

.challItem.selected .counter::after {
  content: "Clicks";
  position: absolute;
  bottom: 0;
  font-size: 0.8rem;
  filter: drop-shadow(0 1px 0 #444463) drop-shadow(-1px 1px 0 #444463)
    drop-shadow(1px 1px 0 #444463) drop-shadow(2px 1px 0 #444463)
    drop-shadow(-2px 1px 0 #444463);
}

#opened {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-grow: 1;
  color: #444463;
  gap: 15px;
  width: 0;
  text-align: center;
}
#opened h2,
#opened p {
  margin: 0;
}

.openedCover {
  width: 90%;
  max-width: 400px;
}

.selected {
  /* text-decoration: underline; */
  background-color: #ec6198;
}

const challenges = [
  {
    id: 1,
    title: "Tell Your World",
    lyricist: "kz",
    composer: "kz",
    arranger: "kz",
    assetbundleName: "jacket_s_001",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 2,
    title: "ロキ",
    lyricist: "みきとP",
    composer: "みきとP",
    arranger: "みきとP",
    assetbundleName: "jacket_s_002",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 3,
    title: "テオ",
    lyricist: "Sakurai",
    composer: "Omoi",
    arranger: "Omoi",
    assetbundleName: "jacket_s_003",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 6,
    title: "ヒバナ -Reloaded-",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "Rockwell",
    assetbundleName: "jacket_s_006",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 8,
    title: "タイムマシン",
    lyricist: "164",
    composer: "40mP",
    arranger: "1640mP",
    assetbundleName: "jacket_s_008",
    vocal_types: ["MEIKO", "巡音ルカ", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 10,
    title: "ハッピーシンセサイザ",
    lyricist: "EasyPop",
    composer: "EasyPop",
    arranger: "-",
    assetbundleName: "jacket_s_010",
    vocal_types: ["MEIKO", "巡音ルカ", "初音ミク", "鏡音リン", "GUMI"],
    categories: ["Crypton", "Crypton", "Crypton", "Crypton", "Internet"],
    count: 0
  },
  {
    id: 11,
    title: "ビバハピ",
    lyricist: "Mitchie M",
    composer: "Mitchie M",
    arranger: "Mitchie M",
    assetbundleName: "jacket_s_011",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 13,
    title: "Nostalogic",
    lyricist: "yuukiss",
    composer: "yuukiss",
    arranger: "-",
    assetbundleName: "jacket_s_013",
    vocal_types: ["MEIKO"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 15,
    title: "drop pop candy",
    lyricist: "れをる",
    composer: "ギガ",
    arranger: "ギガ",
    assetbundleName: "jacket_s_015",
    vocal_types: ["鏡音リン", "巡音ルカ"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 18,
    title: "アスノヨゾラ哨戒班",
    lyricist: "Orangestar",
    composer: "Orangestar",
    arranger: "Rockwell",
    assetbundleName: "jacket_s_018",
    vocal_types: ["IA"],
    categories: ["1st Place"],
    count: 0
  },
  {
    id: 19,
    title: "シャルル",
    lyricist: "バルーン",
    composer: "バルーン",
    arranger: "バルーン",
    assetbundleName: "jacket_s_019",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 21,
    title: "脱法ロック",
    lyricist: "Neru",
    composer: "Neru",
    arranger: "-",
    assetbundleName: "jacket_s_021",
    vocal_types: ["鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 22,
    title: "命に嫌われている",
    lyricist: "カンザキイオリ",
    composer: "カンザキイオリ",
    arranger: "カンザキイオリ",
    assetbundleName: "jacket_s_022",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 26,
    title: "劣等上等",
    lyricist: "Reol",
    composer: "Giga",
    arranger: "Giga",
    assetbundleName: "jacket_s_026",
    vocal_types: ["鏡音リン", "鏡音レン"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 27,
    title: "Just Be Friends",
    lyricist: "Dixie Flatline",
    composer: "Dixie Flatline",
    arranger: "-",
    assetbundleName: "jacket_s_027",
    vocal_types: ["巡音ルカ"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 28,
    title: "ドクター=ファンクビート",
    lyricist: "nyanyannya",
    composer: "nyanyannya",
    arranger: "-",
    assetbundleName: "jacket_s_028",
    vocal_types: ["KAITO"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 36,
    title: "ミラクルペイント",
    lyricist: "OSTER project",
    composer: "OSTER project",
    arranger: "OSTER project",
    assetbundleName: "jacket_s_036",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 38,
    title: "ブリキノダンス",
    lyricist: "日向電工",
    composer: "日向電工",
    arranger: "日向電工",
    assetbundleName: "jacket_s_038",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 41,
    title: "スイートマジック",
    lyricist: "Junky",
    composer: "Junky",
    arranger: "-",
    assetbundleName: "jacket_s_041",
    vocal_types: ["KAITO", "MEIKO", "初音ミク", "鏡音レン", "鏡音リン"],
    categories: ["Crypton", "Crypton", "Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 43,
    title: "ネクストネスト",
    lyricist: "さつき が てんこもり",
    composer: "さつき が てんこもり",
    arranger: "-",
    assetbundleName: "jacket_s_043",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 44,
    title: "Hand in Hand",
    lyricist: "kz",
    composer: "kz",
    arranger: "kz",
    assetbundleName: "jacket_s_044",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 45,
    title: "39みゅーじっく！",
    lyricist: "みきとP",
    composer: "みきとP",
    arranger: "-",
    assetbundleName: "jacket_s_045",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 46,
    title: "グリーンライツ・セレナーデ",
    lyricist: "Sakurai",
    composer: "Omoi",
    arranger: "Omoi",
    assetbundleName: "jacket_s_046",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 47,
    title: "メルト",
    lyricist: "ryo",
    composer: "ryo",
    arranger: "ryo",
    assetbundleName: "jacket_s_047",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 48,
    title: "ワールドイズマイン",
    lyricist: "ryo",
    composer: "ryo",
    arranger: "ryo",
    assetbundleName: "jacket_s_048",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 49,
    title: "初音ミクの消失",
    lyricist: "cosMo@暴走P",
    composer: "cosMo@暴走P",
    arranger: "-",
    assetbundleName: "jacket_s_049",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 50,
    title: "Blessing",
    lyricist: "halyosy",
    composer: "halyosy",
    arranger: "-",
    assetbundleName: "jacket_s_050",
    vocal_types: [
      "KAITO",
      "MEIKO",
      "初音ミク",
      "巡音ルカ",
      "鏡音レン",
      "鏡音リン"
    ],
    categories: [
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton"
    ],
    count: 0
  },
  {
    id: 51,
    title: "セカイはまだ始まってすらいない",
    lyricist: "ピノキオピー",
    composer: "ピノキオピー",
    arranger: "ピノキオピー",
    assetbundleName: "jacket_s_051",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 52,
    title: "potatoになっていく",
    lyricist: "Neru",
    composer: "Neru",
    arranger: "Neru",
    assetbundleName: "jacket_s_052",
    vocal_types: [
      "KAITO",
      "MEIKO",
      "巡音ルカ",
      "初音ミク",
      "鏡音リン",
      "鏡音レン"
    ],
    categories: [
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton"
    ],
    count: 0
  },
  {
    id: 54,
    title: "Ready Steady",
    lyricist: "q*Left",
    composer: "Giga",
    arranger: "Giga",
    assetbundleName: "jacket_s_054",
    vocal_types: ["鏡音リン", "鏡音レン", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 55,
    title: "Forward",
    lyricist: "R Sound Design",
    composer: "R Sound Design",
    arranger: "R Sound Design",
    assetbundleName: "jacket_s_055",
    vocal_types: ["KAITO", "MEIKO", "初音ミク", "鏡音レン", "鏡音リン"],
    categories: ["Crypton", "Crypton", "Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 57,
    title: "アイドル新鋭隊",
    lyricist: "Mitchie M",
    composer: "Mitchie M",
    arranger: "Mitchie M",
    assetbundleName: "jacket_s_057",
    vocal_types: ["鏡音リン", "MEIKO", "巡音ルカ", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 60,
    title: "悔やむと書いてミライ",
    lyricist: "まふまふ",
    composer: "まふまふ",
    arranger: "まふまふ",
    assetbundleName: "jacket_s_060",
    vocal_types: ["Various"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 61,
    title: "携帯恋話",
    lyricist: "まふまふ",
    composer: "まふまふ",
    arranger: "まふまふ",
    assetbundleName: "jacket_s_061",
    vocal_types: ["Various"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 62,
    title: "ジャックポットサッドガール",
    lyricist: "syudou",
    composer: "syudou",
    arranger: "syudou",
    assetbundleName: "jacket_s_062",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 63,
    title: "needLe",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "Rockwell",
    assetbundleName: "jacket_s_063",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 64,
    title: "ステラ",
    lyricist: "じん",
    composer: "じん",
    arranger: "-",
    assetbundleName: "jacket_s_064",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 66,
    title: "ハロ／ハワユ",
    lyricist: "ナノウ",
    composer: "ナノウ",
    arranger: "-",
    assetbundleName: "jacket_s_066",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 67,
    title: "自傷無色",
    lyricist: "ササノマリイ",
    composer: "ササノマリイ",
    arranger: "-",
    assetbundleName: "jacket_s_067",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 68,
    title: "ダンスロボットダンス",
    lyricist: "ナユタン星人",
    composer: "ナユタン星人",
    arranger: "ナユタン星人",
    assetbundleName: "jacket_s_068",
    vocal_types: ["鏡音リン", "巡音ルカ", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 69,
    title: "フラジール",
    lyricist: "ぬゆり",
    composer: "ぬゆり",
    arranger: "ぬゆり",
    assetbundleName: "jacket_s_069",
    vocal_types: ["GUMI", "KAITO", "鏡音レン"],
    categories: ["Internet", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 70,
    title: "メルティランドナイトメア",
    lyricist: "はるまきごはん",
    composer: "はるまきごはん",
    arranger: "はるまきごはん",
    assetbundleName: "jacket_s_070",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 71,
    title: "ツギハギスタッカート",
    lyricist: "とあ",
    composer: "とあ",
    arranger: "とあ",
    assetbundleName: "jacket_s_071",
    vocal_types: ["鏡音リン", "MEIKO", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 72,
    title: "ブレス・ユア・ブレス",
    lyricist: "和田たけあき",
    composer: "和田たけあき",
    arranger: "和田たけあき",
    assetbundleName: "jacket_s_072",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 73,
    title: "ニア",
    lyricist: "夏代孝明",
    composer: "夏代孝明",
    arranger: "渡辺拓也",
    assetbundleName: "jacket_s_073",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 74,
    title: "独りんぼエンヴィー",
    lyricist: "koyori",
    composer: "koyori",
    arranger: "koyori",
    assetbundleName: "jacket_s_074",
    vocal_types: ["鏡音リン", "巡音ルカ", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 75,
    title: "ウミユリ海底譚",
    lyricist: "n-buna",
    composer: "n-buna",
    arranger: "n-buna",
    assetbundleName: "jacket_s_075",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 76,
    title: "セカイ",
    lyricist: "DECO*27",
    composer: "堀江晶太(kemu)",
    arranger: "Rockwell",
    assetbundleName: "jacket_s_076",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 77,
    title: "ワーワーワールド",
    lyricist: "Mitchie M",
    composer: "Giga & Mitchie M",
    arranger: "Giga",
    assetbundleName: "jacket_s_077",
    vocal_types: ["鏡音リン", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 78,
    title: "ぼうけんのしょがきえました！",
    lyricist: "じーざす",
    composer: "じーざす",
    arranger: "ワンダフル☆オポチュニティ！",
    assetbundleName: "jacket_s_078",
    vocal_types: ["鏡音リン", "鏡音レン"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 81,
    title: "夜咄ディセイブ",
    lyricist: "じん",
    composer: "じん",
    arranger: "じん",
    assetbundleName: "jacket_s_081",
    vocal_types: ["IA"],
    categories: ["1st Place"],
    count: 0
  },
  {
    id: 82,
    title: "alive",
    lyricist: "市瀬るぽ",
    composer: "市瀬るぽ",
    arranger: "-",
    assetbundleName: "jacket_s_082",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 83,
    title: "Gimme×Gimme",
    lyricist: "q*Left",
    composer: "八王子P / Giga",
    arranger: "八王子P / Giga",
    assetbundleName: "jacket_s_083",
    vocal_types: ["鏡音リン", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 84,
    title: "ジャンキーナイトタウンオーケストラ",
    lyricist: "すりぃ",
    composer: "すりぃ",
    arranger: "-",
    assetbundleName: "jacket_s_084",
    vocal_types: ["鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 85,
    title: "Leia - Remind",
    lyricist: "ゆよゆっぺ",
    composer: "ゆよゆっぺ",
    arranger: "ゆよゆっぺ",
    assetbundleName: "jacket_s_085",
    vocal_types: ["巡音ルカ"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 86,
    title: "on the rocks",
    lyricist: "OSTER project",
    composer: "OSTER project",
    arranger: "OSTER project",
    assetbundleName: "jacket_s_086",
    vocal_types: ["KAITO", "MEIKO"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 87,
    title: "恋愛裁判",
    lyricist: "40mP",
    composer: "40mP",
    arranger: "40mP",
    assetbundleName: "jacket_s_087",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 88,
    title: "チュルリラ・チュルリラ・ダッダッダ！",
    lyricist: "和田たけあき(くらげP)",
    composer: "和田たけあき(くらげP)",
    arranger: "和田たけあき(くらげP)",
    assetbundleName: "jacket_s_088",
    vocal_types: ["結月ゆかり"],
    categories: ["AHS"],
    count: 0
  },
  {
    id: 89,
    title: "Color of Drops",
    lyricist: "40mP",
    composer: "40mP",
    arranger: "40mP",
    assetbundleName: "jacket_s_089",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 90,
    title: "限りなく灰色へ",
    lyricist: "すりぃ",
    composer: "すりぃ",
    arranger: "すりぃ",
    assetbundleName: "jacket_s_090",
    vocal_types: ["鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 91,
    title: "ドラマツルギー",
    lyricist: "Eve",
    composer: "Eve",
    arranger: "Numa",
    assetbundleName: "jacket_s_091",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 92,
    title: "乙女解剖",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "emon(Tes.) & Rockwell",
    assetbundleName: "jacket_s_092",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 93,
    title: "青く駆けろ！",
    lyricist: "まらしぃ",
    composer: "まらしぃ",
    arranger: "-",
    assetbundleName: "jacket_s_093",
    vocal_types: ["Various"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 94,
    title: "とても痛い痛がりたい",
    lyricist: "EZFG",
    composer: "EZFG",
    arranger: "EZFG",
    assetbundleName: "jacket_s_094",
    vocal_types: ["VY2V3"],
    categories: ["YAMAHA"],
    count: 0
  },
  {
    id: 95,
    title: "威風堂々",
    lyricist: "梅とら",
    composer: "梅とら",
    arranger: "梅とら",
    assetbundleName: "jacket_s_095",
    vocal_types: ["IA", "巡音ルカ", "初音ミク", "鏡音リン", "GUMI"],
    categories: ["1st Place", "Crypton", "Crypton", "Crypton", "Internet"],
    count: 0
  },
  {
    id: 96,
    title: "from Y to Y",
    lyricist: "ジミーサムP",
    composer: "ジミーサムP",
    arranger: "-",
    assetbundleName: "jacket_s_096",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 97,
    title: "霽れを待つ",
    lyricist: "Orangestar",
    composer: "Orangestar",
    arranger: "Orangestar",
    assetbundleName: "jacket_s_097",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 98,
    title: "ロストワンの号哭",
    lyricist: "Neru",
    composer: "Neru",
    arranger: "-",
    assetbundleName: "jacket_s_098",
    vocal_types: ["鏡音リン", "巡音ルカ", "MEIKO"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 99,
    title: "モア！ジャンプ！モア！",
    lyricist: "ナユタン星人",
    composer: "ナユタン星人",
    arranger: "ナユタン星人",
    assetbundleName: "jacket_s_099",
    vocal_types: ["Various"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 100,
    title: "ECHO",
    lyricist: "Crusher P",
    composer: "Crusher P",
    arranger: "-",
    assetbundleName: "jacket_s_100",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 101,
    title: "RAD DOGS",
    lyricist: "q*Left",
    composer: "八王子P",
    arranger: "八王子P",
    assetbundleName: "jacket_s_101",
    vocal_types: ["Various"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 102,
    title: "幽霊東京",
    lyricist: "Ayase",
    composer: "Ayase",
    arranger: "Ayase",
    assetbundleName: "jacket_s_102",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 103,
    title: "ニジイロストーリーズ",
    lyricist: "OSTER project",
    composer: "OSTER project",
    arranger: "OSTER project",
    assetbundleName: "jacket_s_103",
    vocal_types: [
      "KAITO",
      "MEIKO",
      "初音ミク",
      "巡音ルカ",
      "鏡音レン",
      "鏡音リン"
    ],
    categories: [
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton"
    ],
    count: 0
  },
  {
    id: 104,
    title: "サンドリヨン 10th Anniversary",
    lyricist: "orange",
    composer: "Dios/シグナルP",
    arranger: "Dios/シグナルP",
    assetbundleName: "jacket_s_104",
    vocal_types: ["KAITO", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 105,
    title: "ワンスアポンアドリーム",
    lyricist: "YASUHIRO(康寛)",
    composer: "YASUHIRO(康寛)",
    arranger: "YASUHIRO(康寛)",
    assetbundleName: "jacket_s_105",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 106,
    title: "お気に召すまま",
    lyricist: "Eve",
    composer: "Eve",
    arranger: "Numa",
    assetbundleName: "jacket_s_106",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 107,
    title: "ミルククラウン・オン・ソーネチカ",
    lyricist: "ユジー",
    composer: "ユジー",
    arranger: "ユジー",
    assetbundleName: "jacket_s_107",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 108,
    title: "愛されなくても君がいる",
    lyricist: "ピノキオピー",
    composer: "ピノキオピー",
    arranger: "ピノキオピー",
    assetbundleName: "jacket_s_108",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 109,
    title: "ヒビカセ",
    lyricist: "れをる",
    composer: "ギガ",
    arranger: "ギガ",
    assetbundleName: "jacket_s_109",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 110,
    title: "千本桜",
    lyricist: "黒うさ",
    composer: "黒うさ",
    arranger: "黒うさ",
    assetbundleName: "jacket_s_110",
    vocal_types: [
      "KAITO",
      "MEIKO",
      "初音ミク",
      "巡音ルカ",
      "鏡音レン",
      "鏡音リン"
    ],
    categories: [
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton"
    ],
    count: 0
  },
  {
    id: 111,
    title: "カトラリー",
    lyricist: "有機酸",
    composer: "有機酸",
    arranger: "有機酸",
    assetbundleName: "jacket_s_111",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 112,
    title: "天使のクローバー",
    lyricist: "DIVELA",
    composer: "DIVELA",
    arranger: "DIVELA",
    assetbundleName: "jacket_s_112",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 113,
    title: "ローリンガール",
    lyricist: "wowaka",
    composer: "wowaka",
    arranger: "wowaka",
    assetbundleName: "jacket_s_113",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 114,
    title: "裏表ラバーズ",
    lyricist: "wowaka",
    composer: "wowaka",
    arranger: "wowaka",
    assetbundleName: "jacket_s_114",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 115,
    title: "アンノウン・マザーグース",
    lyricist: "wowaka",
    composer: "wowaka",
    arranger: "wowaka",
    assetbundleName: "jacket_s_115",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 116,
    title: "アイディスマイル",
    lyricist: "とあ",
    composer: "とあ",
    arranger: "とあ",
    assetbundleName: "jacket_s_116",
    vocal_types: ["鏡音リン", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 117,
    title: "ODDS＆ENDS",
    lyricist: "ryo",
    composer: "ryo",
    arranger: "ryo",
    assetbundleName: "jacket_s_117",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 118,
    title: "＊ハロー、プラネット。",
    lyricist: "sasakure.UK",
    composer: "sasakure.UK",
    arranger: "sasakure.UK",
    assetbundleName: "jacket_s_118",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 119,
    title: "ワールズエンド・ダンスホール",
    lyricist: "wowaka",
    composer: "wowaka",
    arranger: "wowaka",
    assetbundleName: "jacket_s_119",
    vocal_types: ["巡音ルカ", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 120,
    title: "いかないで",
    lyricist: "想太",
    composer: "想太",
    arranger: "-",
    assetbundleName: "jacket_s_120",
    vocal_types: ["歌愛ユキ"],
    categories: ["AHS"],
    count: 0
  },
  {
    id: 121,
    title: "ロミオとシンデレラ",
    lyricist: "doriko",
    composer: "doriko",
    arranger: "doriko",
    assetbundleName: "jacket_s_121",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 122,
    title: "ポジティブ☆ダンスタイム",
    lyricist: "キノシタ",
    composer: "キノシタ",
    arranger: "キノシタ",
    assetbundleName: "jacket_s_122",
    vocal_types: ["音街ウナ", "鏡音リン"],
    categories: ["Internet", "Crypton"],
    count: 0
  },
  {
    id: 123,
    title: "どりーみんチュチュ",
    lyricist: "emon(Tes.)",
    composer: "emon(Tes.)",
    arranger: "emon(Tes.)",
    assetbundleName: "jacket_s_123",
    vocal_types: ["巡音ルカ"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 124,
    title: "みくみくにしてあげる♪【してやんよ】",
    lyricist: "ika_mo",
    composer: "ika_mo",
    arranger: "ika_mo",
    assetbundleName: "jacket_s_124",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 125,
    title: "ボッカデラベリタ",
    lyricist: "柊キライ",
    composer: "柊キライ",
    arranger: "柊キライ",
    assetbundleName: "jacket_s_125",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 126,
    title: "シネマ",
    lyricist: "Ayase",
    composer: "Ayase",
    arranger: "Ayase",
    assetbundleName: "jacket_s_126",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 127,
    title: "トンデモワンダーズ",
    lyricist: "sasakure.UK",
    composer: "sasakure.UK",
    arranger: "sasakure.UK(Key 岸田勇気(有形ランペイジ))",
    assetbundleName: "jacket_s_127",
    vocal_types: ["KAITO", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 128,
    title: "Brand New Day",
    lyricist: "いるかアイス",
    composer: "いるかアイス",
    arranger: "いるかアイス",
    assetbundleName: "jacket_s_128",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 129,
    title: "ビターチョコデコレーション",
    lyricist: "syudou",
    composer: "syudou",
    arranger: "syudou",
    assetbundleName: "jacket_s_129",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 130,
    title: "フロムトーキョー",
    lyricist: "夏代孝明",
    composer: "夏代孝明・渡辺拓也",
    arranger: "渡辺拓也",
    assetbundleName: "jacket_s_130",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 131,
    title: "初音ミクの激唱",
    lyricist: "GAiA",
    composer: "cosMo@暴走P",
    arranger: "cosMo@暴走P",
    assetbundleName: "jacket_s_131",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 132,
    title: "「１」",
    lyricist: "164",
    composer: "164",
    arranger: "164",
    assetbundleName: "jacket_s_132",
    vocal_types: ["巡音ルカ"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 133,
    title: "悪魔の踊り方",
    lyricist: "キタニタツヤ",
    composer: "キタニタツヤ",
    arranger: "-",
    assetbundleName: "jacket_s_133",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 134,
    title: "テレキャスタービーボーイ",
    lyricist: "すりぃ",
    composer: "すりぃ",
    arranger: "すりぃ",
    assetbundleName: "jacket_s_134",
    vocal_types: ["鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 135,
    title: "六兆年と一夜物語",
    lyricist: "kemu",
    composer: "kemu",
    arranger: "kemu",
    assetbundleName: "jacket_s_135",
    vocal_types: ["IA"],
    categories: ["1st Place"],
    count: 0
  },
  {
    id: 136,
    title: "チルドレンレコード",
    lyricist: "じん",
    composer: "じん",
    arranger: "じん",
    assetbundleName: "jacket_s_136",
    vocal_types: ["IA"],
    categories: ["1st Place"],
    count: 0
  },
  {
    id: 137,
    title: "花を唄う",
    lyricist: "シノ",
    composer: "シノ",
    arranger: "シノ",
    assetbundleName: "jacket_s_137",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 138,
    title: "KING",
    lyricist: "Kanaria",
    composer: "Kanaria",
    arranger: "-",
    assetbundleName: "jacket_s_138",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 139,
    title: "夜に駆ける",
    lyricist: "Ayase",
    composer: "Ayase",
    arranger: "Ayase",
    assetbundleName: "jacket_s_139",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 140,
    title: "アイスドロップ",
    lyricist: "aqu3ra",
    composer: "aqu3ra",
    arranger: "aqu3ra",
    assetbundleName: "jacket_s_140",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 141,
    title: "群青讃歌",
    lyricist: "Eve",
    composer: "Eve",
    arranger: "Numa",
    assetbundleName: "jacket_s_141",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 142,
    title: "再生",
    lyricist: "Picon",
    composer: "Picon",
    arranger: "Picon",
    assetbundleName: "jacket_s_142",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 143,
    title: "トラフィック・ジャム",
    lyricist: "煮ル果実",
    composer: "煮ル果実",
    arranger: "煮ル果実",
    assetbundleName: "jacket_s_143",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 144,
    title: "アイノマテリアル",
    lyricist: "Junky",
    composer: "Junky",
    arranger: "Junky",
    assetbundleName: "jacket_s_144",
    vocal_types: ["鏡音リン", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 145,
    title: "ベノム",
    lyricist: "かいりきベア",
    composer: "かいりきベア",
    arranger: "-",
    assetbundleName: "jacket_s_145",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 146,
    title: "リモコン",
    lyricist: "じーざす",
    composer: "じーざす",
    arranger: "ワンダフル☆オポチュニティ！",
    assetbundleName: "jacket_s_146",
    vocal_types: ["鏡音リン", "鏡音レン"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 147,
    title: "からくりピエロ",
    lyricist: "40mP",
    composer: "40mP",
    arranger: "40mP",
    assetbundleName: "jacket_s_147",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 148,
    title: "ray",
    lyricist: "藤原 基央",
    composer: "藤原 基央",
    arranger: "-",
    assetbundleName: "jacket_s_148",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 149,
    title: "カナデトモスソラ",
    lyricist: "Sasanomaly",
    composer: "Sasanomaly",
    arranger: "Sasanomaly",
    assetbundleName: "jacket_s_149",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 150,
    title: "トキヲ・ファンカ",
    lyricist: "takamatt",
    composer: "takamatt",
    arranger: "takamatt",
    assetbundleName: "jacket_s_150",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 151,
    title: "泡沫未来",
    lyricist: "加賀（ネギシャワーＰ）",
    composer: "加賀（ネギシャワーＰ）",
    arranger: "加賀（ネギシャワーＰ）",
    assetbundleName: "jacket_s_151",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 152,
    title: "だれかの心臓になれたなら",
    lyricist: "ユリイ・カノン",
    composer: "ユリイ・カノン",
    arranger: "ユリイ・カノン",
    assetbundleName: "jacket_s_152",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 153,
    title: "Miku",
    lyricist: "Peter B, Ary W, Josh K, David M, & Stella M",
    composer: "Anamanaguchi",
    arranger: "Anamanaguchi",
    assetbundleName: "jacket_s_153",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 154,
    title: "地球最後の告白を",
    lyricist: "kemu",
    composer: "kemu",
    arranger: "kemu",
    assetbundleName: "jacket_s_154",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 155,
    title: "心拍数♯0822",
    lyricist: "蝶々P",
    composer: "蝶々P",
    arranger: "蝶々P",
    assetbundleName: "jacket_s_155",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 156,
    title: "Beat Eater",
    lyricist: "ポリスピカデリー",
    composer: "ポリスピカデリー",
    arranger: "ポリスピカデリー",
    assetbundleName: "jacket_s_156",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 157,
    title: "マシュマリー",
    lyricist: "MIMI",
    composer: "MIMI",
    arranger: "MIMI",
    assetbundleName: "jacket_s_157",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 158,
    title: "ナンセンス文学",
    lyricist: "Eve",
    composer: "Eve",
    arranger: "Numa",
    assetbundleName: "jacket_s_158",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 159,
    title: "STAGE OF SEKAI",
    lyricist: "針原翼（はりーP）",
    composer: "針原翼（はりーP）",
    arranger: "棚橋 EDDY テルアキ",
    assetbundleName: "jacket_s_159",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 160,
    title: "ショウタイム・ルーラー",
    lyricist: "烏屋茶房",
    composer: "烏屋茶房",
    arranger: "烏屋茶房",
    assetbundleName: "jacket_s_160",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 161,
    title: "magic number",
    lyricist: "伊東 健人",
    composer: "伊東 健人",
    arranger: "OSTER project",
    assetbundleName: "jacket_s_161",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 162,
    title: "エンドマークに希望と涙を添えて",
    lyricist: "-",
    composer: "cosMo@暴走P",
    arranger: "cosMo@暴走P",
    assetbundleName: "jacket_s_162",
    vocal_types: ["-"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 163,
    title: "the EmpErroR",
    lyricist: "-",
    composer: "sasakure.UK",
    arranger: "sasakure.UK",
    assetbundleName: "jacket_s_163",
    vocal_types: ["-"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 164,
    title: "Don't Fight The Music",
    lyricist: "-",
    composer: "黒魔",
    arranger: "黒魔",
    assetbundleName: "jacket_s_164",
    vocal_types: ["-"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 165,
    title: "そうだった！！",
    lyricist: "タケノコ少年",
    composer: "タケノコ少年",
    arranger: "タケノコ少年",
    assetbundleName: "jacket_s_165",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 166,
    title: "Glory Steady Go!",
    lyricist: "キノシタ",
    composer: "キノシタ",
    arranger: "キノシタ",
    assetbundleName: "jacket_s_166",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 167,
    title: "オルターエゴ",
    lyricist: "Misumi",
    composer: "Misumi",
    arranger: "Misumi",
    assetbundleName: "jacket_s_167",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 168,
    title: "ダーリンダンス",
    lyricist: "かいりきベア",
    composer: "かいりきベア",
    arranger: "-",
    assetbundleName: "jacket_s_168",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 169,
    title: "少女レイ",
    lyricist: "みきとP",
    composer: "みきとP",
    arranger: "-",
    assetbundleName: "jacket_s_169",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 170,
    title: "ヴィラン",
    lyricist: "てにをは",
    composer: "てにをは",
    arranger: "てにをは",
    assetbundleName: "jacket_s_170",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 171,
    title: "カゲロウデイズ",
    lyricist: "じん",
    composer: "じん",
    arranger: "じん",
    assetbundleName: "jacket_s_171",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 172,
    title: "Happy Halloween",
    lyricist: "Junky",
    composer: "Junky",
    arranger: "Junky",
    assetbundleName: "jacket_s_172",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 173,
    title: "流星のパルス",
    lyricist: "*Luna",
    composer: "*Luna",
    arranger: "*Luna",
    assetbundleName: "jacket_s_173",
    vocal_types: [
      "KAITO",
      "MEIKO",
      "巡音ルカ",
      "初音ミク",
      "鏡音リン",
      "鏡音レン"
    ],
    categories: [
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton",
      "Crypton"
    ],
    count: 0
  },
  {
    id: 174,
    title: "いーあるふぁんくらぶ",
    lyricist: "みきとP",
    composer: "みきとP",
    arranger: "みきとP",
    assetbundleName: "jacket_s_174",
    vocal_types: ["鏡音リン", "GUMI"],
    categories: ["Crypton", "Internet"],
    count: 0
  },
  {
    id: 175,
    title: "拝啓ドッペルゲンガー",
    lyricist: "kemu",
    composer: "kemu",
    arranger: "kemu",
    assetbundleName: "jacket_s_175",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 176,
    title: "マシンガンポエムドール",
    lyricist: "cosMo@暴走P",
    composer: "cosMo@暴走P",
    arranger: "cosMo@暴走P",
    assetbundleName: "jacket_s_176",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 177,
    title: "右肩の蝶",
    lyricist: "水野悠良",
    composer: "のりぴー",
    arranger: "のりぴー",
    assetbundleName: "jacket_s_177",
    vocal_types: ["鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 178,
    title: "にっこり^^調査隊のテーマ",
    lyricist: "じーざす",
    composer: "じーざす",
    arranger: "ワンダフル☆オポチュニティ！",
    assetbundleName: "jacket_s_178",
    vocal_types: ["鏡音リン", "鏡音レン"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 179,
    title: "炉心融解",
    lyricist: "kuma(alfred)",
    composer: "iroha(sasaki)",
    arranger: "-",
    assetbundleName: "jacket_s_179",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 180,
    title: "ミライ",
    lyricist: "有機酸",
    composer: "有機酸",
    arranger: "有機酸",
    assetbundleName: "jacket_s_180",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 181,
    title: "愛して愛して愛して",
    lyricist: "きくお",
    composer: "きくお",
    arranger: "きくお",
    assetbundleName: "jacket_s_181",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 182,
    title: "Flyer!",
    lyricist: "Chinozo",
    composer: "Chinozo",
    arranger: "Chinozo",
    assetbundleName: "jacket_s_182",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 183,
    title: "フィクサー",
    lyricist: "ぬゆり",
    composer: "ぬゆり",
    arranger: "ぬゆり",
    assetbundleName: "jacket_s_183",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 184,
    title: "Hello,world!",
    lyricist: "藤原 基央",
    composer: "藤原 基央",
    arranger: "-",
    assetbundleName: "jacket_s_184",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 185,
    title: "しっくおぶはうす！",
    lyricist: "オゾン",
    composer: "オゾン",
    arranger: "オゾン",
    assetbundleName: "jacket_s_185",
    vocal_types: ["鏡音リン", "鏡音レン"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 186,
    title: "初音天地開闢神話",
    lyricist: "cosMo@暴走P",
    composer: "cosMo@暴走P",
    arranger: "cosMo@暴走P",
    assetbundleName: "jacket_s_186",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 187,
    title: "ロウワー",
    lyricist: "ぬゆり",
    composer: "ぬゆり",
    arranger: "ぬゆり",
    assetbundleName: "jacket_s_187",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 188,
    title: "心予報",
    lyricist: "Eve",
    composer: "Eve",
    arranger: "TAKU INOUE、Numa",
    assetbundleName: "jacket_s_188",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 189,
    title: "ノマド",
    lyricist: "バルーン",
    composer: "バルーン",
    arranger: "バルーン",
    assetbundleName: "jacket_s_189",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 190,
    title: "悪ノ娘",
    lyricist: "mothy",
    composer: "mothy",
    arranger: "mothy",
    assetbundleName: "jacket_s_190",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 191,
    title: "悪ノ召使",
    lyricist: "mothy",
    composer: "mothy",
    arranger: "mothy",
    assetbundleName: "jacket_s_191",
    vocal_types: ["鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 192,
    title: "去り人達のワルツ",
    lyricist: "mothy",
    composer: "mothy",
    arranger: "mothy",
    assetbundleName: "jacket_s_192",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 193,
    title: "ワールドワイドワンダー",
    lyricist: "TOKOTOKO",
    composer: "TOKOTOKO",
    arranger: "TOKOTOKO",
    assetbundleName: "jacket_s_193",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 194,
    title: "妄想感傷代償連盟",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "emon(Tes.)",
    assetbundleName: "jacket_s_194",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 195,
    title: "PaⅢ.SENSATION",
    lyricist: "牛肉",
    composer: "雄之助",
    arranger: "雄之助",
    assetbundleName: "jacket_s_195",
    vocal_types: ["鏡音リン", "GUMI", "初音ミク"],
    categories: ["Crypton", "Internet", "Crypton"],
    count: 0
  },
  {
    id: 196,
    title: "オーダーメイド",
    lyricist: "傘村トータ（LIVE LAB.）",
    composer: "傘村トータ（LIVE LAB.）",
    arranger: "村田祐一（LIVE LAB.）",
    assetbundleName: "jacket_s_196",
    vocal_types: [
      "Fukase, IA, KAITO, Kaori, Ken, kokone, Mew, flower, GUMI, 初音ミク, 巡音ルカ, 洛天依, 猫村いろは, 紲星あかり, 結月ゆかり, 鏡音リン, 鏡音レン"
    ],
    categories: ["Others", "Internet", "AHS", "Crypton"],
    count: 0
  },
  {
    id: 197,
    title: "ラストスコア",
    lyricist: "せきこみごはん",
    composer: "せきこみごはん",
    arranger: "せきこみごはん",
    assetbundleName: "jacket_s_197",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 198,
    title: "グッバイ宣言",
    lyricist: "Chinozo",
    composer: "Chinozo",
    arranger: "Chinozo",
    assetbundleName: "jacket_s_198",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 199,
    title: "ゴーストルール",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "Naoki Itai(MUSIC FOR MUSIC)",
    assetbundleName: "jacket_s_199",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 200,
    title: "ガランド",
    lyricist: "ピコン",
    composer: "ピコン",
    arranger: "ピコン",
    assetbundleName: "jacket_s_200",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 201,
    title: "神のまにまに",
    lyricist: "れるりり",
    composer: "れるりり",
    arranger: "-",
    assetbundleName: "jacket_s_201",
    vocal_types: ["鏡音リン", "GUMI", "初音ミク"],
    categories: ["Crypton", "Internet", "Crypton"],
    count: 0
  },
  {
    id: 203,
    title: "トリコロージュ",
    lyricist: "煮ル果実",
    composer: "煮ル果実",
    arranger: "煮ル果実",
    assetbundleName: "jacket_s_203",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 204,
    title: "うっせぇわ",
    lyricist: "syudou",
    composer: "syudou",
    arranger: "syudou",
    assetbundleName: "jacket_s_204",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 205,
    title: "踊",
    lyricist: "DECO*27",
    composer: "Giga、TeddyLoid",
    arranger: "Giga、TeddyLoid",
    assetbundleName: "jacket_s_205",
    vocal_types: ["鏡音リン", "鏡音レン"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 206,
    title: "君色マリンスノウ",
    lyricist: "カルロス袴田(サイゼP)",
    composer: "カルロス袴田(サイゼP)",
    arranger: "カルロス袴田(サイゼP)",
    assetbundleName: "jacket_s_206",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 207,
    title: "Peaky Peaky",
    lyricist: "みきとP",
    composer: "みきとP",
    arranger: "みきとP",
    assetbundleName: "jacket_s_207",
    vocal_types: ["鏡音リン", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 208,
    title: "僕らまだアンダーグラウンド",
    lyricist: "Eve",
    composer: "Eve",
    arranger: "Numa",
    assetbundleName: "jacket_s_208",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 209,
    title: "メタモリボン",
    lyricist: "emon(Tes.)・Tudiken",
    composer: "emon(Tes.)",
    arranger: "emon(Tes.)",
    assetbundleName: "jacket_s_209",
    vocal_types: ["鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 210,
    title: "雨とペトラ",
    lyricist: "バルーン",
    composer: "バルーン",
    arranger: "バルーン",
    assetbundleName: "jacket_s_210",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 211,
    title: "イフ",
    lyricist: "ユリイ・カノン",
    composer: "ユリイ・カノン",
    arranger: "月詠み",
    assetbundleName: "jacket_s_211",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 212,
    title: "星空のメロディー",
    lyricist: "ぽりふぉ",
    composer: "ぽりふぉ",
    arranger: "ぽりふぉ",
    assetbundleName: "jacket_s_212",
    vocal_types: ["KAITO, MEIKO, 初音ミク, 鏡音リン, 鏡音レン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 213,
    title: "ヴァンパイア",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "Rockwell",
    assetbundleName: "jacket_s_213",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 215,
    title: "ジウダス",
    lyricist: "すこやか大聖堂",
    composer: "すこやか大聖堂",
    arranger: "すこやか大聖堂",
    assetbundleName: "jacket_s_215",
    vocal_types: ["KAITO"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 216,
    title: "ルカルカ★ナイトフィーバー",
    lyricist: "SAM（samfree）",
    composer: "SAM（samfree）",
    arranger: "SAM（samfree）",
    assetbundleName: "jacket_s_216",
    vocal_types: ["巡音ルカ"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 218,
    title: "メリュー",
    lyricist: "n-buna",
    composer: "n-buna",
    arranger: "n-buna",
    assetbundleName: "jacket_s_218",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 219,
    title: "砂の惑星",
    lyricist: "ハチ",
    composer: "ハチ",
    arranger: "ハチ",
    assetbundleName: "jacket_s_219",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 220,
    title: "ドーナツホール",
    lyricist: "ハチ",
    composer: "ハチ",
    arranger: "ハチ",
    assetbundleName: "jacket_s_220",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 221,
    title: "マトリョシカ",
    lyricist: "ハチ",
    composer: "ハチ",
    arranger: "ハチ",
    assetbundleName: "jacket_s_221",
    vocal_types: ["GUMI", "初音ミク"],
    categories: ["Internet", "Crypton"],
    count: 0
  },
  {
    id: 222,
    title: "ピアノ×フォルテ×スキャンダル",
    lyricist: "OSTER project",
    composer: "OSTER project",
    arranger: "OSTER project",
    assetbundleName: "jacket_s_222",
    vocal_types: ["MEIKO"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 223,
    title: "千年の独奏歌",
    lyricist: "yanagi",
    composer: "yanagi",
    arranger: "-",
    assetbundleName: "jacket_s_223",
    vocal_types: ["KAITO"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 224,
    title: "88☆彡",
    lyricist: "まらしぃ",
    composer: "まらしぃ、堀江晶太(kemu)",
    arranger: "堀江晶太(kemu)",
    assetbundleName: "jacket_s_224",
    vocal_types: ["KAITO", "初音ミク"],
    categories: ["Crypton", "Crypton"],
    count: 0
  },
  {
    id: 227,
    title: "ONESELF",
    lyricist: "Twinfield",
    composer: "Twinfield",
    arranger: "Twinfield",
    assetbundleName: "jacket_s_227",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 229,
    title: "脳漿炸裂ガール",
    lyricist: "れるりり",
    composer: "れるりり",
    arranger: "れるりり",
    assetbundleName: "jacket_s_229",
    vocal_types: ["GUMI", "初音ミク"],
    categories: ["Internet", "Crypton"],
    count: 0
  },
  {
    id: 230,
    title: "サラマンダー",
    lyricist: "DECO*27",
    composer: "DECO*27",
    arranger: "Rockwell",
    assetbundleName: "jacket_s_230",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 231,
    title: "アイデンティティ",
    lyricist: "Kanaria",
    composer: "Kanaria",
    arranger: "-",
    assetbundleName: "jacket_s_231",
    vocal_types: ["GUMI", "初音ミク"],
    categories: ["Internet", "Crypton"],
    count: 0
  },
  {
    id: 232,
    title: "青色絵具",
    lyricist: "くじら",
    composer: "くじら",
    arranger: "くじら",
    assetbundleName: "jacket_s_232",
    vocal_types: ["MEIKO", "巡音ルカ", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 233,
    title: "コスモスパイス",
    lyricist: "ピノキオピー",
    composer: "ピノキオピー",
    arranger: "ピノキオピー",
    assetbundleName: "jacket_s_233",
    vocal_types: ["鏡音リン", "鏡音レン", "初音ミク"],
    categories: ["Crypton", "Crypton", "Crypton"],
    count: 0
  },
  {
    id: 234,
    title: "徳川カップヌードル禁止令",
    lyricist: "Mitchie M",
    composer: "Mitchie M",
    arranger: "Mitchie M",
    assetbundleName: "jacket_s_234",
    vocal_types: ["Various"],
    categories: ["Others"],
    count: 0
  },
  {
    id: 238,
    title: "ブラック★ロックシューター",
    lyricist: "ryo",
    composer: "ryo",
    arranger: "ryo",
    assetbundleName: "jacket_s_238",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 239,
    title: "月光",
    lyricist: "キタニタツヤ / はるまきごはん",
    composer: "キタニタツヤ / はるまきごはん",
    arranger: "キタニタツヤ / はるまきごはん",
    assetbundleName: "jacket_s_239",
    vocal_types: ["初音ミク, 鏡音リン"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 241,
    title: "アサガオの散る頃に",
    lyricist: "ぷす(fromツユ)",
    composer: "ぷす(fromツユ)",
    arranger: "ぷす(fromツユ)",
    assetbundleName: "jacket_s_241",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 244,
    title: "Awake Now",
    lyricist: "牛肉",
    composer: "雄之助",
    arranger: "雄之助",
    assetbundleName: "jacket_s_244",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 245,
    title: "阿吽のビーツ",
    lyricist: "羽生まゐご",
    composer: "羽生まゐご",
    arranger: "羽生まゐご",
    assetbundleName: "jacket_s_245",
    vocal_types: ["flower"],
    categories: ["Gynoid"],
    count: 0
  },
  {
    id: 248,
    title: "バグ",
    lyricist: "かいりきベア",
    composer: "かいりきベア",
    arranger: "-",
    assetbundleName: "jacket_s_248",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  },
  {
    id: 249,
    title: "ぼくらの16bit戦争",
    lyricist: "sasakure.UK",
    composer: "sasakure.UK",
    arranger: "sasakure.UK(Gt 佐々木秀尚 Ba 二家本亮介(有形ランペイジ))",
    assetbundleName: "jacket_s_249",
    vocal_types: ["GUMI"],
    categories: ["Internet"],
    count: 0
  },
  {
    id: 254,
    title: "未完成讃歌",
    lyricist: "しゃいと",
    composer: "しゃいと",
    arranger: "しゃいと",
    assetbundleName: "jacket_s_254",
    vocal_types: ["初音ミク"],
    categories: ["Crypton"],
    count: 0
  }
];

var ua = navigator.userAgent;
const isWinGecko = !!/Windows NT .* rv:([^\)]+)\) Gecko\/\d{8}/.test(ua);

const itemHeight = 100;
const repeatArray = (arr, repeats) =>
  Array.from({ length: repeats }, () => arr).flat();

function setScrollOffset(node, val) {
  console.log(
    `Set scroll offset: ${node.scrollTop} & ${val} = ${node.scrollTop + val}`
  );
  node.scrollTop += val;
}

function scrollUpdate() {
  if (performance.now() - window.lastClick < 500) return;

  const listNode = document.getElementById("challs");
  const centerNodes = [...document.querySelectorAll("[data-is-center]")];
  var centerProbe = centerNodes;
  var probe = false;
  if (document.querySelectorAll(".challItem.selected").length) {
    probe = true;
    centerProbe = [...document.querySelectorAll(".challItem.selected")];
  }
  const centerTop = Math.min(...centerNodes.map((v) => v.offsetTop));
  const centerBottom = Math.max(
    ...centerNodes.map((v) => v.offsetTop + v.offsetHeight)
  );
  const probeTop = Math.min(...centerProbe.map((v) => v.offsetTop));
  const probeBottom = Math.max(
    ...centerProbe.map((v) => v.offsetTop + v.offsetHeight)
  );
  const viewTop = listNode.scrollTop;
  const viewBottom = listNode.scrollTop + listNode.clientHeight;
  const viewHeight = listNode.clientHeight;
  const centerHeight = itemHeight * centerNodes.length;
  const viewCenter = (viewTop + viewBottom) / 2;

  if (!probe) {
    if (centerBottom < viewCenter) {
      setScrollOffset(listNode, -centerHeight);
    } else if (centerTop > viewCenter) {
      setScrollOffset(listNode, centerHeight);
    }
  } else {
    // screen between two probes
    if (
      (probeBottom < viewTop && probeTop + centerHeight > viewBottom) ||
      (probeTop > viewBottom && probeBottom - centerHeight < viewTop)
    ) {
      if (centerBottom < viewCenter) {
        setScrollOffset(listNode, -centerHeight);
      } else if (centerTop > viewCenter) {
        setScrollOffset(listNode, centerHeight);
      }
    } else if (probeBottom < viewTop && probeTop + centerHeight <= viewBottom) {
      // center out above, next is visible
      var offset =
        Math.max(Math.ceil(viewHeight / centerHeight), 1) * centerHeight;
      setScrollOffset(listNode, -offset);
    } else if (probeTop > viewBottom && probeBottom - centerHeight >= viewTop) {
      // center out below, next is visible
      var offset =
        Math.max(Math.ceil(viewHeight / centerHeight), 1) * centerHeight;
      setScrollOffset(listNode, offset);
    }
  }
}
if (isWinGecko) {
  scrollUpdate = _.debounce(scrollUpdate, 150);
}
document.addEventListener("alpine:init", () => {
  Alpine.data("challApp", () => ({
    challenges: challenges,
    category: null,
    openedId: null,
    get opened() {
      return this.openedId === null
        ? null
        : this.challenges.find((v) => v.id === this.openedId);
    },
    repeatTimes: 1,
    filteredChallenges: [],
    repeatArray(arr, repeats) {
      console.log(`repeat array ${arr.length} x ${repeats}`);
      return Array.from({ length: repeats }, () => arr).flat();
    },
    async updateCategory(catName) {
      console.log(`Update category: ${catName}`);
      this.category = catName;
      this.filteredChallenges = this.getDisplayedChallenges();
      this.repeatTimes = Math.max(
        Math.ceil(
          window.screen.height / (this.filteredChallenges.length * itemHeight)
        ),
        1
      );
      this.openedId = null;
      await Alpine.nextTick();
      this.centerNode(0);
    },
    centerNode(id, tgt) {
      const list = this.$refs.listNode;
      const center = list.querySelector(`[data-is-center="${id}"]`);
      if (center === null) return;

      if (tgt) {
        const isCenter = tgt.isEqualNode(center);
        if (!isCenter) {
          var diff = tgt.offsetTop - list.scrollTop;
          list.scrollTop = center.offsetTop - diff;
        }
        list.scrollTo({
          top: center.offsetTop - (list.clientHeight - center.clientHeight) / 2,
          behavior: "smooth"
        });
      } else {
        list.scrollTop =
          center.offsetTop - (list.clientHeight - center.clientHeight) / 2;
      }
    },
    getDisplayedChallenges() {
      const cat = this.category;
      return challenges.filter(
        (v) => cat === null || v.categories.includes(cat)
      );
    },
    async init() {
      this.filteredChallenges = this.getDisplayedChallenges();
      this.repeatTimes = Math.max(
        Math.floor(
          window.screen.height / (this.filteredChallenges.length * itemHeight)
        ),
        1
      );
      await Alpine.nextTick();
      this.centerNode(0);
      this.$refs.listNode.addEventListener(
        "scroll",
        function () {
          window.requestAnimationFrame(scrollUpdate);
        },
        false
      );
    },
    async select(idx, tgt) {
      window.lastClick = performance.now();
      tgt = tgt.closest(".challItem");
      const opened = this.filteredChallenges[idx];
      this.openedId = opened.id;
      var origChalIdx = this.challenges.findIndex(
        (v) => v.title === opened.title
      );
      this.challenges[origChalIdx] = {
        ...this.challenges[origChalIdx],
        count: this.challenges[origChalIdx].count + 1
      };
      this.filteredChallenges = this.getDisplayedChallenges();
      this.centerNode(idx, tgt);
    },
    coverURL(song) {
      return `https://assets.pjsek.ai/file/pjsekai-assets/startapp/music/jacket/${song.assetbundleName}/${song.assetbundleName}.png`;
    }
  }));
});