Add initial chara load support to popn music

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"

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">

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,

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>