From 28824a6fd965fd2a3a3fe843e76b7fec6f8d5a46 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Sat, 18 Jul 2026 12:31:29 -0400
Subject: [PATCH] Add initial chara load support to popn music

---
 src/components/Cards/ProfileCard.vue | 17 +++++++++++++++--
 src/components/GeneralTable.vue      |  7 +++++++
 src/constants/index.js               |  1 +
 src/views/Game/GameView.vue          | 11 ++++++++++-
 4 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Cards/ProfileCard.vue b/src/components/Cards/ProfileCard.vue
index 605a593..f076bf2 100644
--- a/src/components/Cards/ProfileCard.vue
+++ b/src/components/Cards/ProfileCard.vue
@@ -7,6 +7,7 @@ import UserEmblem from "@/components/UserEmblem.vue";
 import UserQpro from "@/components/UserQpro.vue";
 import { getGitadoraColor, getJubilityColor } from "@/constants/skillColor.js";
 import { getFlareLevel } from "@/helpers/flare";
+const GAME_ASSET_PATH = import.meta.env.VITE_GAME_ASSET_PATH;
 
 const props = defineProps({
   game: {
@@ -89,7 +90,7 @@ onMounted(async () => {
 <template>
   <div class="content-center justify-center items-center">
     <div
-      class="md:flex md:space-x-12 md:justify-center md:items-center grid grid-cols-1 text-center"
+      class="md:flex md:space-x-2 md:justify-center md:items-center grid grid-cols-1 text-center"
     >
       <UserEmblem
         v-if="
@@ -103,8 +104,20 @@ onMounted(async () => {
         v-if="game == GameConstants.IIDX && version >= 20 && profile.qpro"
         :version="version"
         :profile="profile"
-        class="place-self-center md:mt-10 mb-10 md:mb-0"
+        class="place-self-center md:mt-10 mb-10 md:mb-0 md:mr-10"
       />
+      <div
+        v-if="
+          game == GameConstants.POPN_MUSIC && version >= 20 && profile.chara
+        "
+        class="place-self-center w-[80px]"
+      >
+        <img
+          :src="`${GAME_ASSET_PATH}/chara/popn/${profile.chara}.png`"
+          width="80"
+          height="80"
+        />
+      </div>
       <div class="drop-shadow-2xl">
         <p
           v-if="profile.title && game != GameConstants.JUBEAT"
diff --git a/src/components/GeneralTable.vue b/src/components/GeneralTable.vue
index a321bda..0bfd830 100644
--- a/src/components/GeneralTable.vue
+++ b/src/components/GeneralTable.vue
@@ -4,6 +4,7 @@ import BaseButton from "@/components/BaseButton.vue";
 import UserAvatar from "@/components/UserAvatar.vue";
 import { useRoute } from "vue-router";
 import { exportJSON } from "@/helpers/contentExport";
+const GAME_ASSET_PATH = import.meta.env.VITE_GAME_ASSET_PATH;
 
 const $route = useRoute();
 
@@ -114,6 +115,12 @@ function downloadJSON() {
       </div>
     </template>
 
+    <template #item-chara="{ chara }">
+      <div class="chara-wrapper w-[25px]">
+        <img :src="`${GAME_ASSET_PATH}/chara/popn/${chara}.png`" width="80" />
+      </div>
+    </template>
+
     <slot />
   </EasyDataTable>
   <div class="p-2 w-full flex md:justify-end">
diff --git a/src/constants/index.js b/src/constants/index.js
index bbab344..1044437 100644
--- a/src/constants/index.js
+++ b/src/constants/index.js
@@ -1928,6 +1928,7 @@ export const gameData = [
     icon: `${ASSET_PATH}/icon/popn.webp`,
     cardBG: `${ASSET_PATH}/card/popn.webp`,
     assetId: "popn",
+    playerChara: true,
     useUnicode: true,
     maxLength: 6,
     gameOptions: PopnMusicOptions,
diff --git a/src/views/Game/GameView.vue b/src/views/Game/GameView.vue
index 3cdf962..ef20a7f 100644
--- a/src/views/Game/GameView.vue
+++ b/src/views/Game/GameView.vue
@@ -16,7 +16,7 @@ import SongCardSmall from "@/components/Cards/SongCardSmall.vue";
 
 import { APIGetProfile, APIGetGame } from "@/stores/api/profile";
 import { APIGetMusicData } from "@/stores/api/music";
-import { getGameInfo } from "@/constants";
+import { GameConstants, getGameInfo } from "@/constants";
 import { dashCode } from "@/constants/userData";
 import { getIIDXDan } from "@/constants/danClass";
 import { formatSortableDate } from "@/constants/date";
@@ -107,6 +107,14 @@ async function loadProfile() {
 }
 
 const headers = [];
+if (thisGame.playerChara) {
+  headers.push({
+    text: "Chara",
+    value: "chara",
+    width: 10,
+  });
+}
+
 headers.push({
   text: "Player",
   value: "username",
@@ -440,6 +448,7 @@ function formatHitchart(data) {
             <GeneralTable
               :headers="headers"
               :items="profiles"
+              :has-popn-chara="thisGame.id === GameConstants.POPN_MUSIC"
               @row-clicked="navigateToProfile"
             />
           </div>