fix race condition bug, add new customize

.env.development

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.0.43"
+VITE_APP_VERSION="3.0.44"
 VITE_API_URL="http://localhost:8000/"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="/assets"

.env.production

@@ -1,4 +1,4 @@
-VITE_APP_VERSION="3.0.43"
+VITE_APP_VERSION="3.0.44"
 VITE_API_URL="https://restfulsleep.phaseii.network"
 VITE_API_KEY="your_api_key_should_be_here"
 VITE_ASSET_PATH="https://cdn.phaseii.network/file/PhaseII/web-assets"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "phaseweb3",
-  "version": "3.0.42",
+  "version": "3.0.44",
   "scripts": {
     "dev": "vite --host",
     "build": "vite build",

public/data-sources/changelog.json

@@ -42,5 +42,6 @@
     "3.0.40": ["- (Major) Add banned user filtering on profile lists (SoffiMeower optimized)", "- (Bugfix) Fix rivals loading from incorrect versions"],
     "3.0.41": ["- (Major) Completely refactor user profile schema", "- (Major) Add Hitchart to player view", "- (Major) Add changelog archive view"],
     "3.0.42-oMini": ["- (Major) Refactor loading state", "- (Minor) Add two new customizations, filled/outlined PillTags and Buttons"],
-    "3.0.43": ["- (Major) Add pop'n music Jam&Fizz"]
+    "3.0.43": ["- (Major) Add pop'n music Jam&Fizz"],
+    "3.0.44": ["- (Bugfix) Fix broken race state on game page", "- (Major) Add customization options for BaseIcon fill type", "- (Major) Add pop'n music weekly course song"]
 }

src/colors.js

@@ -11,6 +11,8 @@ export const colorsBgLight = {
   danger: "bg-red-700 border-red-500 text-white",
   warning: "bg-yellow-700 border-yellow-500 text-white",
   info: "bg-blue-700 border-blue-500 text-white",
+  sakura: "bg-pink-700 border-pink-500 text-white",
+  gold: "bg-amber-700 border-amber-500 text-white",
 };
 
 export const colorsText = {

src/components/BaseIcon.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { computed } from "vue";
+import { useMainStore } from "@/stores/main";
+
+const mainStore = useMainStore();
 
 const props = defineProps({
   path: {
@@ -34,6 +37,13 @@ const props = defineProps({
   },
 });
 
+const fillMap = ["regular", "thin", "light", "bold", "fill", "duotone"];
+const userFill = mainStore.userCustomize?.iconFill ?? -1;
+var fullFill = props.fill;
+if (userFill !== -1) {
+  fullFill = fillMap[userFill];
+}
+
 const spanClass = computed(
   () =>
     `inline-flex justify-center items-center ${props.w} ${props.h} ${props.color}`,
@@ -55,7 +65,7 @@ const iconSize = computed(() => props.size ?? (props.icon ? 20 : 18));
       </svg>
     </template>
     <template v-else-if="props.icon">
-      <icon :size="iconSize" :weight="props.fill" />
+      <icon :size="iconSize" :weight="fullFill" />
     </template>
     <slot />
   </span>

src/constants/customizations.js

@@ -35,4 +35,13 @@ export class ProfileCustomizations {
     { id: "lesbian", label: "Lesbian Flag" },
     { id: "leaves", label: "Leaves" },
   ];
+
+  static iconFillList = [
+    { id: 0, label: "Regular" },
+    { id: 1, label: "Thin" },
+    { id: 2, label: "Light" },
+    { id: 3, label: "Bold" },
+    { id: 4, label: "Filled" },
+    { id: 5, label: "Duotone" },
+  ];
 }

src/constants/index.js

@@ -18,6 +18,7 @@ import { SilentScopeOptions } from "@/constants/gameOptions/silentScopeOptions";
 import { DDREvents } from "@/constants/scheduledEvents/ddrEvents";
 import { IIDXEvents } from "@/constants/scheduledEvents/iidxEvents";
 import { JubeatEvents } from "@/constants/scheduledEvents/jubeatEvents";
+import { PopnMusicEvents } from "@/constants/scheduledEvents/popnEvents";
 const ASSET_PATH = import.meta.env.VITE_ASSET_PATH;
 
 export class GameConstants {
@@ -1299,7 +1300,7 @@ export const gameData = [
       50: "NO PLAY",
       100: "FAILED",
       200: "ASSIST CLEAR",
-      300: "EAST CLEAR",
+      300: "EASY CLEAR",
       400: "CLEAR",
       500: "HARD CLEAR",
       600: "EX HARD CLEAR",
@@ -1849,6 +1850,7 @@ export const gameData = [
     useUnicode: true,
     maxLength: 6,
     gameOptions: PopnMusicOptions,
+    scheduledEvents: PopnMusicEvents,
     chartTable: {
       0: "EASY",
       1: "NORMAL",

src/constants/scheduledEvents/popnEvents.js

@@ -0,0 +1,23 @@
+export const PopnMusicEvents = {
+  26: [
+    {
+      id: "course",
+      name: "Weekly Chart",
+      duration: "weekly",
+    },
+  ],
+  27: [
+    {
+      id: "course",
+      name: "Weekly Chart",
+      duration: "weekly",
+    },
+  ],
+  28: [
+    {
+      id: "course",
+      name: "Weekly Chart",
+      duration: "weekly",
+    },
+  ],
+};

src/views/Game/GameView.vue

@@ -45,6 +45,8 @@ watch(
   () => versionForm.currentVersion,
   () => {
     mainStore.continueLoad = true;
+    mainStore.isLoading = true;
+    mainStore.activeRequests = 1;
     loadGame(versionForm.currentVersion, profiles.length != 0);
     loadProfile();
     musicIds.value = [];
@@ -75,10 +77,6 @@ onMounted(async () => {
   mainStore.activeRequests = 0;
 });
 
-if (!thisGame.versions) {
-  versionForm.currentVersion = 1;
-}
-
 async function loadGame(version, noUsers) {
   try {
     const data = await APIGetGame(gameID, version, noUsers);
@@ -86,8 +84,11 @@ async function loadGame(version, noUsers) {
       profiles.value = formatProfiles(data.profiles);
     }
     hitchartData.value = data.hitchart;
-    timeSensitiveData.value = data.scheduledEvents;
-    getVersionEvents();
+
+    if (noUsers) {
+      timeSensitiveData.value = data.scheduledEvents;
+      getVersionEvents();
+    }
     musicIds.value = getHitchartIds(data.hitchart).concat(
       getEventIds(data.scheduledEvents),
     );
@@ -227,9 +228,9 @@ async function getMusicData() {
 
 function getMusic(id) {
   if (!musicData.value) {
-    return null;
+    return {};
   }
-  return musicData.value.find((x) => x.id == id);
+  return musicData.value.find((x) => x.id == id) || {};
 }
 
 function getEventSetting(eventId) {
@@ -327,11 +328,11 @@ function formatHitchart(data) {
       </GameHeader>
 
       <div
-        v-if="versionEvents || !thisGame.noScores"
+        v-if="versionEvents || (!thisGame.noScores && hitchartData?.length)"
         class="grid lg:grid-cols-2 items-stretch w-full gap-6 mb-6"
       >
         <div
-          v-if="!thisGame.noScores && hitchartData"
+          v-if="!thisGame.noScores && hitchartData?.length"
           :class="{
             'md:col-span-2': !versionEvents,
           }"
@@ -347,9 +348,9 @@ function formatHitchart(data) {
             main
           />
           <CardBox>
-            <div v-if="musicData" class="grid gap-6">
+            <template v-if="musicData && musicData?.length" class="grid gap-6">
               <div v-for="event of versionEvents" :key="event.id">
-                <div v-if="getEventSetting(event.id)">
+                <template v-if="getEventSetting(event.id)">
                   <div v-if="event.id">
                     <PillTag color="info" :label="event.duration" />
                     <h1 class="text-xl font-bold">
@@ -379,7 +380,7 @@ function formatHitchart(data) {
                         </span>
                       </h1>
                     </div>
-                    <template
+                    <div
                       v-if="
                         Array.isArray(getEventSetting(event.id)?.data?.music) &&
                         musicData
@@ -393,7 +394,7 @@ function formatHitchart(data) {
                           :music-data="getMusic(musicId)"
                         />
                       </div>
-                    </template>
+                    </div>
                     <template
                       v-else-if="getEventSetting(event.id)?.data?.music"
                     >
@@ -423,9 +424,9 @@ function formatHitchart(data) {
                       />
                     </template>
                   </div>
-                </div>
+                </template>
               </div>
-            </div>
+            </template>
           </CardBox>
         </div>
       </div>

src/views/Profile/CustomizeView.vue

@@ -138,6 +138,15 @@ async function revert() {
               />
             </FormField>
 
+            <FormField label="Icon Fill">
+              <FormControl
+                v-model="userCustomize.iconFill"
+                :options="ProfileCustomizations.iconFillList"
+                :model-value="userCustomize.iconFill ?? 5"
+                name="iconFill"
+              />
+            </FormField>
+
             <div class="space-x-2">
               <BaseButton type="submit" color="success" label="Save" />
               <BaseButton