Merge branch 'master' of https://github.com/PhaseII-eAmusement-Network/PhaseWeb3-Vue

public/data-sources/customizations/ddr/20/appeal.json

@@ -4,126 +4,216 @@
       "name": "Appeal Board",
       "help": "Choose your appeal board",
       "options": [
-        { "id": 9000, "label": "Blank" },
+        { "id": 9000, "label": "Blank/Default" },
         { "id": 1, "label": "プレーン (パターン1)" },
         { "id": 2, "label": "プレーン (パターン2)" },
         { "id": 3, "label": "プレーン (パターン3)" },
-        { "id": 4, "label": "EMI" },
-        { "id": 5, "label": "RAGE" },
-        { "id": 6, "label": "ALICE" },
-        { "id": 7, "label": "BABY-LON" },
-        { "id": 8, "label": "みゅ、みゅ、Müllる" },
-        { "id": 9, "label": "Astrogazer" },
-        { "id": 10, "label": "Don't Stop The HYPERCORE" },
-        { "id": 11, "label": "Steps for Victory" },
-        { "id": 12, "label": "メテオラ-meteor" },
-        { "id": 13, "label": "Wizards!" },
-        { "id": 14, "label": "THUNDERSTRIKE" },
-        { "id": 15, "label": "blue anthem" },
-        { "id": 16, "label": "Get Into The Groove feat.WaMi" },
-        { "id": 17, "label": "ESPRIT ONE" },
-        { "id": 18, "label": "Mighty Beat Monsterz" },
-        { "id": 19, "label": "ひなビタ♪" },
-        { "id": 20, "label": "ここなつ" },
-        { "id": 21, "label": "山形まり花" },
-        { "id": 22, "label": "和泉一舞" },
-        { "id": 23, "label": "春日咲子" },
-        { "id": 24, "label": "芽兎めう" },
-        { "id": 25, "label": "霜月凛" },
-        { "id": 26, "label": "東雲夏陽" },
-        { "id": 27, "label": "東雲心菜" },
-        { "id": 28, "label": "久領堤纒" },
-        { "id": 29, "label": "星見日向" },
-        { "id": 30, "label": "YUNI" },
-        { "id": 31, "label": "AKIRA" },
-        { "id": 32, "label": "Destination" },
-        { "id": 33, "label": "HyperTwist" },
-        { "id": 34, "label": "Cosy Catastrophe" },
-        { "id": 35, "label": "New York EVOLVED" },
-        { "id": 36, "label": "天戸紺 (Amado Kon)" },
-        { "id": 37, "label": "小舞桜 (Komai Sakura)" },
-        { "id": 38, "label": "Deep tenDon Reflex" },
-        { "id": 39, "label": "ROCK THE PARTY" },
-        { "id": 40, "label": "エンドルフィン" },
-        { "id": 41, "label": "TSUGARU (春のコナステ大感謝祭2024)" },
-        { "id": 42, "label": "GRACE (春のコナステ大感謝祭2024)" },
-        { "id": 43, "label": "RINON (春のコナステ大感謝祭2024)" },
-        { "id": 44, "label": "MIMI (春のコナステ大感謝祭2024)" },
-        { "id": 45, "label": "RIO (春のコナステ大感謝祭2024)" },
-        { "id": 46, "label": "DDR System Songs + Replicant Mix" },
-        { "id": 47, "label": "YUNI (SUMMER)" },
-        { "id": 48, "label": "ALICE (SUMMER)" },
-        { "id": 49, "label": "Reach the Sky, Without You" },
-        { "id": 50, "label": "†渚の小悪魔ラヴリィ～レイディオ†" },
-        { "id": 51, "label": "天空の華" },
-        { "id": 52, "label": "灰庭まよい" },
-        { "id": 53, "label": "ヒネリ" },
-        { "id": 54, "label": "Beluga" },
-        { "id": 55, "label": "Unreality" },
-        { "id": 56, "label": "Come Back to Me (Feel It)" },
-        { "id": 57, "label": "博麗 霊夢" },
-        { "id": 58, "label": "東風谷 早苗" },
-        { "id": 59, "label": "古明地 こいし" },
-        { "id": 60, "label": "フランドール・スカーレット" },
-        { "id": 61, "label": "残像ニ繋ガレタ追憶ノHIDEAWAY" },
-        { "id": 62, "label": "弾幕信仰" },
-        { "id": 63, "label": "東堂コハク" },
-        { "id": 64, "label": "山神カルタ" },
-        { "id": 65, "label": "レイン・パターソン" },
-        { "id": 66, "label": "東堂コハク (DDR)" },
-        { "id": 67, "label": "山神カルタ (DDR)" },
-        { "id": 68, "label": "レイン・パターソン (DDR)" },
-        { "id": 69, "label": "東堂コハク (DDR デフォルメ)" },
-        { "id": 70, "label": "東堂コハク (DDR 山神カルタ)" },
-        { "id": 71, "label": "レイン・パターソン (DDR デフォルメ)" },
-        { "id": 72, "label": "倉持めると" },
-        { "id": 73, "label": "セラフ・ダズルガーデン" },
-        { "id": 74, "label": "長尾景" },
-        { "id": 75, "label": "倉持めると (DDR)" },
-        { "id": 76, "label": "セラフ・ダズルガーデン (DDR)" },
-        { "id": 77, "label": "長尾景 (DDR)" },
-        { "id": 78, "label": "倉持めると (DDR デフォルメ)" },
-        { "id": 79, "label": "セラフ・ダズルガーデン (DDR デフォルメ)" },
-        { "id": 80, "label": "弾長尾景 (DDR デフォルメ)幕信仰" },  
-        { "id": 81, "label": "山形まり花 (音戯探偵)" },
-        { "id": 82, "label": "和泉一舞 (音戯探偵)" },
-        { "id": 83, "label": "春日咲子 (音戯探偵)" },
-        { "id": 84, "label": "霜月凛 (音戯探偵)" },
-        { "id": 85, "label": "芽兎めう (音戯探偵)" },
-        { "id": 86, "label": "菫平すみれ (音戯探偵)" },
-        { "id": 87, "label": "璃音" },
-        { "id": 88, "label": "響香" },
-        { "id": 89, "label": "キヤロラ衛星の軌跡" },
-        { "id": 90, "label": "MODEL FT2 Miracle Version" },
-        { "id": 91, "label": "Timepiece phase Ⅱ" },
-        { "id": 92, "label": "ミミ" },
-        { "id": 93, "label": "ニャミ" },
-        { "id": 94, "label": "僕の気持ちを描く" },
-        { "id": 95, "label": "BILLION MONEY BAZOOKA" },
-        { "id": 96, "label": "Fragarach" },
-        { "id": 97, "label": "エリカ (秋のコナステ大感謝祭2024)" },
-        { "id": 98, "label": "EMI (秋のコナステ大感謝祭2024)" },
-        { "id": 99, "label": "響香 (秋のコナステ大感謝祭2024)" },
-        { "id": 100, "label": "紅刃 (秋のコナステ大感謝祭2024)" },
-        { "id": 101, "label": "ニャミ (秋のコナステ大感謝祭2024)" },
-        { "id": 102, "label": "わたこ (秋のコナステ大感謝祭2024)" },
-        { "id": 103, "label": "不知火フレア" },
-        { "id": 104, "label": "不知火フレア (ルミナス)" },
-        { "id": 105, "label": "不知火フレア (清楚少女風)" },
-        { "id": 106, "label": "僕の飛行機 (covered by 不知火フレア)" },
-        { "id": 107, "label": "Homesick Pt.2&3 (covered by 不知火フレア)" },
-        { "id": 108, "label": "Silent Flame,Never Fade" },
-        { "id": 109, "label": "RINON" },
-        { "id": 110, "label": "RINON (Superior MAXXX)" },
-        { "id": 111, "label": "ACE FOR ACES" },
-        { "id": 112, "label": "Over The \"Period\"" },
-        { "id": 100001, "label": "APINA VRAMeS" },
-        { "id": 100002, "label": "GiGO" },
-        { "id": 100003, "label": "GamePanic" },
-        { "id": 100004, "label": "Silk Hat" },
-        { "id": 100005, "label": "TAITO STATION Tradz" },
-        { "id": 100006, "label": "ROUND1" },
-        { "id": 100007, "label": "Leisureland" }
+        {
+          "label": "第1弾 (2024-12-23)", 
+          "options": [
+            { "id": 4, "label": "EMI" },
+            { "id": 5, "label": "RAGE" },
+            { "id": 6, "label": "ALICE" },
+            { "id": 7, "label": "BABY-LON" },
+            { "id": 8, "label": "みゅ、みゅ、Müllる" },
+            { "id": 9, "label": "Astrogazer" },
+            { "id": 10, "label": "Don't Stop The HYPERCORE" }
+          ]
+        },
+        {
+          "label": "BPL -SEASON 4- DanceDanceRevolution (2025-01-28)",
+          "options": [
+            { "id": 11, "label": "Steps for Victory" },
+            { "id": 12, "label": "メテオラ-meteor" },
+            { "id": 13, "label": "Wizards!" },
+            { "id": 14, "label": "THUNDERSTRIKE" },
+            { "id": 15, "label": "blue anthem" },
+            { "id": 16, "label": "Get Into The Groove feat.WaMi" },
+            { "id": 17, "label": "ESPRIT ONE" },
+            { "id": 18, "label": "Mighty Beat Monsterz" }
+          ]
+        },
+        {
+          "label": "「ひなビタ♪」 第1弾 (2025-01-28)",
+          "options": [
+            { "id": 19, "label": "ひなビタ♪" },
+            { "id": 20, "label": "ここなつ" },
+            { "id": 21, "label": "山形まり花" },
+            { "id": 22, "label": "和泉一舞" },
+            { "id": 23, "label": "春日咲子" },
+            { "id": 24, "label": "芽兎めう" },
+            { "id": 25, "label": "霜月凛" },
+            { "id": 26, "label": "東雲夏陽" },
+            { "id": 27, "label": "東雲心菜" },
+            { "id": 28, "label": "久領堤纒" },
+            { "id": 29, "label": "星見日向" }
+          ]
+        },
+        {
+          "label": "第2弾 (2025-06-10)",
+          "options": [
+            { "id": 30, "label": "YUNI" },
+            { "id": 31, "label": "AKIRA" },
+            { "id": 32, "label": "Destination" },
+            { "id": 33, "label": "HyperTwist" },
+            { "id": 34, "label": "Cosy Catastrophe" },
+            { "id": 35, "label": "New York EVOLVED" }
+          ]
+        },
+        {
+          "label": "第3弾 (2025-06-10)",
+          "options": [
+            { "id": 36, "label": "天戸紺 (Amado Kon)" },
+            { "id": 37, "label": "小舞桜 (Komai Sakura)" },
+            { "id": 38, "label": "Deep tenDon Reflex" },
+            { "id": 39, "label": "ROCK THE PARTY" },
+            { "id": 40, "label": "エンドルフィン" }
+          ]
+        },
+        {
+          "label": "春のコナステ大感謝祭2024 (2025-07-09)",
+          "options": [
+            { "id": 41, "label": "TSUGARU (春のコナステ大感謝祭2024)" },
+            { "id": 42, "label": "GRACE (春のコナステ大感謝祭2024)" },
+            { "id": 43, "label": "RINON (春のコナステ大感謝祭2024)" },
+            { "id": 44, "label": "MIMI (春のコナステ大感謝祭2024)" },
+            { "id": 45, "label": "RIO (春のコナステ大感謝祭2024)" },
+            { "id": 46, "label": "DDR System Songs + Replicant Mix" }
+          ]
+        },
+        {
+          "label": "第4弾 (2025-08-05)",
+          "options": [
+            { "id": 47, "label": "YUNI (SUMMER)" },
+            { "id": 48, "label": "ALICE (SUMMER)" },
+            { "id": 49, "label": "Reach the Sky, Without You" },
+            { "id": 50, "label": "†渚の小悪魔ラヴリィ～レイディオ†" },
+            { "id": 51, "label": "天空の華" }
+          ]
+        },
+        {
+          "label": "第5弾 (2025-09-16)",
+          "options": [
+            { "id": 52, "label": "灰庭まよい" },
+            { "id": 53, "label": "ヒネリ" },
+            { "id": 54, "label": "Beluga" },
+            { "id": 55, "label": "Unreality" },
+            { "id": 56, "label": "Come Back to Me (Feel It)" }
+          ]
+        },
+        {
+          "label": "「東方Project」 第1弾 (2025-10-21)",
+          "options": [
+            { "id": 57, "label": "博麗 霊夢" },
+            { "id": 58, "label": "東風谷 早苗" },
+            { "id": 59, "label": "古明地 こいし" },
+            { "id": 60, "label": "フランドール・スカーレット" },
+            { "id": 61, "label": "残像ニ繋ガレタ追憶ノHIDEAWAY" },
+            { "id": 62, "label": "弾幕信仰" }
+          ]
+        },
+        {
+          "label": "「にじさんじダンス部」 第1弾 (2025-11-18)",
+          "options": [
+            { "id": 63, "label": "東堂コハク" },
+            { "id": 64, "label": "山神カルタ" },
+            { "id": 65, "label": "レイン・パターソン" },
+            { "id": 66, "label": "東堂コハク (DDR)" },
+            { "id": 67, "label": "山神カルタ (DDR)" },
+            { "id": 68, "label": "レイン・パターソン (DDR)" },
+            { "id": 69, "label": "東堂コハク (DDR デフォルメ)" },
+            { "id": 70, "label": "東堂コハク (DDR 山神カルタ)" },
+            { "id": 71, "label": "レイン・パターソン (DDR デフォルメ)" }
+          ]
+        },
+        {
+          "label": "「にじさんじダンス部」 第2弾 (2025-11-18)",
+          "options": [
+            { "id": 72, "label": "倉持めると" },
+            { "id": 73, "label": "セラフ・ダズルガーデン" },
+            { "id": 74, "label": "長尾景" },
+            { "id": 75, "label": "倉持めると (DDR)" },
+            { "id": 76, "label": "セラフ・ダズルガーデン (DDR)" },
+            { "id": 77, "label": "長尾景 (DDR)" },
+            { "id": 78, "label": "倉持めると (DDR デフォルメ)" },
+            { "id": 79, "label": "セラフ・ダズルガーデン (DDR デフォルメ)" },
+            { "id": 80, "label": "長尾景 (DDR デフォルメ)" }
+          ]
+        },
+        {
+          "label": "音戯探偵ひなビタ♫ 調査依頼:BEMANI (2025-12-23)",
+          "options": [
+            { "id": 81, "label": "山形まり花 (音戯探偵)" },
+            { "id": 82, "label": "和泉一舞 (音戯探偵)" },
+            { "id": 83, "label": "春日咲子 (音戯探偵)" },
+            { "id": 84, "label": "霜月凛 (音戯探偵)" },
+            { "id": 85, "label": "芽兎めう (音戯探偵)" },
+            { "id": 86, "label": "菫平すみれ (音戯探偵)" }
+          ]
+        },
+        {
+          "label": "「GITADORA」 第1弾 (2025-12-23)",
+          "options": [
+            { "id": 87, "label": "璃音" },
+            { "id": 88, "label": "響香" },
+            { "id": 89, "label": "キヤロラ衛星の軌跡" },
+            { "id": 90, "label": "MODEL FT2 Miracle Version" },
+            { "id": 91, "label": "Timepiece phase Ⅱ" }
+          ]
+        },
+        {
+          "label": "「pop'n music」 第1弾 (2026-02-24)",
+          "options": [
+            { "id": 92, "label": "ミミ" },
+            { "id": 93, "label": "ニャミ" },
+            { "id": 94, "label": "僕の気持ちを描く" },
+            { "id": 95, "label": "BILLION MONEY BAZOOKA" },
+            { "id": 96, "label": "Fragarach" }
+          ]
+        },
+        {
+          "label": "秋のコナステ大感謝祭2024 (2026-03-24)",
+          "options": [
+            { "id": 97, "label": "エリカ (秋のコナステ大感謝祭2024)" },
+            { "id": 98, "label": "EMI (秋のコナステ大感謝祭2024)" },
+            { "id": 99, "label": "響香 (秋のコナステ大感謝祭2024)" },
+            { "id": 100, "label": "紅刃 (秋のコナステ大感謝祭2024)" },
+            { "id": 101, "label": "ニャミ (秋のコナステ大感謝祭2024)" },
+            { "id": 102, "label": "わたこ (秋のコナステ大感謝祭2024)" }
+          ]
+        },
+        {
+          "label": "不知火フレア (2026-04-21)",
+          "options": [
+            { "id": 103, "label": "不知火フレア" },
+            { "id": 104, "label": "不知火フレア (ルミナス)" },
+            { "id": 105, "label": "不知火フレア (清楚少女風)" },
+            { "id": 106, "label": "僕の飛行機 (covered by 不知火フレア)" },
+            { "id": 107, "label": "Homesick Pt.2&3 (covered by 不知火フレア)" },
+            { "id": 108, "label": "Silent Flame,Never Fade" }
+          ]
+        },
+        {
+          "label": "第6弾 (2026-06-16)",
+          "options": [
+            { "id": 109, "label": "RINON" },
+            { "id": 110, "label": "RINON (Superior MAXXX)" },
+            { "id": 111, "label": "ACE FOR ACES" },
+            { "id": 112, "label": "Over The \"Period\"" }
+          ]
+        },
+        {
+          "label": "BPL Team Banner",
+          "options": [
+            { "id": 100001, "label": "APINA VRAMeS" },
+            { "id": 100002, "label": "GiGO" },
+            { "id": 100003, "label": "GamePanic" },
+            { "id": 100004, "label": "Silk Hat" },
+            { "id": 100005, "label": "TAITO STATION Tradz" },
+            { "id": 100006, "label": "ROUND1" },
+            { "id": 100007, "label": "Leisureland" }
+          ]
+        }
       ]
     }
 ]

src/components/Cards/DdrAppealCardBox.vue

@@ -35,6 +35,7 @@ const loading = ref(false);
 const optionForm = ref({});
 
 const APPEAL_ID = "customize.1_0";
+const appealId = ref(APPEAL_ID);
 
 loadCustomizations();
 function loadCustomizations() {
@@ -85,6 +86,21 @@ function revertCustomizations() {
 
   isModified.value = false;
 }
+
+// TODO: switch to spritesheet/actual font?
+function getLetterUrl(type, file) {
+  const ASSET_PATH = import.meta.env.VITE_GAME_ASSET_PATH;
+  return `${ASSET_PATH}/font/ddr/${version.value}/${type}/${file}.png`;
+}
+const replacements = new Map([
+  [" ", "blank"],
+  ["&", "ampersand"],
+  ["-", "hyphen"],
+  ["?", "question"],
+  ["!", "exclamation"],
+  [".", "period"],
+  ["$", "dollar"],
+]);
 </script>
 
 <template>
@@ -108,23 +124,87 @@ function revertCustomizations() {
           />
         </FormField>
       </form>
-      <div class="place-self-center">
+
+      <div
+        class="flex flex-col items-center justify-center w-full max-w-111 justify-self-center"
+      >
         <label class="block mb-2 text-center">
           Previewing:
           <strong class="font-bold">Appeal Board</strong>
         </label>
-        <img
-          :src="getUrl('appeal_login')"
-          class="object-contain"
-          :width="444"
-          :height="200"
-        />
-        <img
-          :src="getUrl('appeal')"
-          class="pt-4 object-contain"
-          :width="444"
-          :height="58"
-        />
+
+        <div class="relative w-full aspect-444/58">
+          <img
+            :src="getUrl('appeal_login')"
+            class="absolute inset-0 w-full h-full object-contain"
+          />
+
+          <!-- area label + shadow -->
+          <img
+            :src="getLetterUrl('area', profile.area)"
+            class="absolute object-right object-contain bottom-[14%] right-[1.75%] scale-80 z-10"
+          />
+          <img
+            :src="getLetterUrl('area', profile.area)"
+            class="absolute object-right object-contain bottom-[11%] right-[1.25%] scale-80 brightness-0"
+          />
+
+          <!-- dancer name -->
+          <div
+            class="relative h-full"
+            :style="{
+              marginLeft:
+                (getNestedValue(optionForm, appealId) ?? 0) >= 100000
+                  ? '30.25%'
+                  : '3.6%',
+            }"
+          >
+            <div
+              v-for="layer in [
+                'bottom-[18%] left-[0.7%] brightness-0',
+                'bottom-[20.75%] left-[0.3%] z-10',
+              ]"
+              :class="[
+                'w-full absolute flex items-center justify-start h-[33.5%]',
+                layer,
+              ]"
+            >
+              <img
+                v-for="character of profile.username.split('')"
+                class="object-contain h-full ml-[-0.175%]"
+                :src="
+                  getLetterUrl(
+                    'entry',
+                    replacements.get(character) ?? character.toLowerCase(),
+                  )
+                "
+              />
+            </div>
+          </div>
+        </div>
+
+        <div class="relative w-full aspect-444/200 mt-1">
+          <img
+            :src="getUrl('appeal')"
+            class="absolute inset-0 w-full h-full object-contain"
+          />
+
+          <!-- dancer name -->
+          <div
+            class="w-full h-[28%] absolute flex items-center justify-center bottom-2 left-0"
+          >
+            <img
+              v-for="character of profile.username.split('')"
+              class="object-contain h-[65.5%]"
+              :src="
+                getLetterUrl(
+                  'result',
+                  replacements.get(character) ?? character.toLowerCase(),
+                )
+              "
+            />
+          </div>
+        </div>
       </div>
     </div>
 

src/components/FormControl.vue

@@ -150,13 +150,20 @@ if (props.ctrlKFocus) {
       :name="name"
       :class="inputElClass"
     >
-      <option
-        v-for="option in options"
-        :key="option.id ?? option"
-        :value="option.id ?? option"
-      >
-        {{ option.label ?? option }}
-      </option>
+      <template v-for="option in options" :key="option.id ?? option">
+        <optgroup v-if="Array.isArray(option.options)" :label="option.label">
+          <option
+            v-for="child in option.options"
+            :key="child.id ?? child"
+            :value="child.id ?? child"
+          >
+            {{ child.label ?? child }}
+          </option>
+        </optgroup>
+        <option v-else :value="option.id ?? option">
+          {{ option.label ?? option }}
+        </option>
+      </template>
     </select>
     <textarea
       v-else-if="computedType === 'textarea'"