Load game settings, add new game cards

src/App.vue

@@ -33,6 +33,7 @@ import { RouterView } from "vue-router";
 
   --easy-table-footer-background-color: #0f172a;
   --easy-table-footer-font-color: #c0c7d2;
+  --easy-table-footer-click-button-color: #c0c7d2;
   --easy-table-footer-font-size: 14px;
   --easy-table-footer-padding: 0px 10px;
   --easy-table-footer-height: 50px;

src/components/Cards/ProfileCard.vue

@@ -62,7 +62,7 @@ const thisGame = getGameInfo(props.game);
         <BaseButton
           v-if="!useSmall && game"
           :icon="mdiCog"
-          :href="`/#/games/${game}/profiles/${profile.userId}/edit`"
+          :href="`/#/games/${game}/edit`"
           :outline="false"
           color="info"
           label="Edit Profile"

src/components/GeneralTable.vue

@@ -14,7 +14,7 @@ const handleRowClick = (item) => {
   <EasyDataTable
     :headers="headers"
     :items="items"
-    theme-color="#1e293b"
+    theme-color="#c0c7d2"
     table-class-name="customize-table"
     header-text-direction="left"
     body-text-direction="left"

src/constants/ddrSettings.js

@@ -0,0 +1,40 @@
+export const DDRSettings = [
+  {
+    id: "fastSlow",
+    name: "Fast/Slow Display",
+    help: "Enable or disable displaying of Fast/Slow",
+    type: Boolean,
+  },
+  {
+    id: "comboPosition",
+    name: "Combo Position",
+    help: "Change order of the combo and notes",
+    type: Boolean,
+  },
+  {
+    id: "weight",
+    name: "Weight (kg)",
+    help: "Set your weight for in-game workout mode",
+    type: Number,
+  },
+  {
+    id: "dancer",
+    name: "Character",
+    help: "Set your background dancer",
+    type: Array,
+    options: [
+      { id: 0, label: "Afro" },
+      { id: 1, label: "Emi" },
+    ],
+  },
+  {
+    id: "arrow",
+    name: "Arrow Skin",
+    help: "Set your arrow skin",
+    type: Array,
+    options: [
+      { id: 0, label: "Normal" },
+      { id: 1, label: "Classic" },
+    ],
+  },
+];

src/constants/iidxSettings.js

@@ -0,0 +1,40 @@
+export const IIDXSettings = [
+  {
+    id: "fastSlow",
+    name: "Fast/Slow Display",
+    help: "Enable or disable displaying of Fast/Slow",
+    type: Boolean,
+  },
+  {
+    id: "comboPosition",
+    name: "Combo Position",
+    help: "Change order of the combo and notes",
+    type: Boolean,
+  },
+  {
+    id: "weight",
+    name: "Weight (kg)",
+    help: "Set your weight for in-game workout mode",
+    type: Number,
+  },
+  {
+    id: "dancer",
+    name: "Character",
+    help: "Set your background dancer",
+    type: Array,
+    options: [
+      { id: 0, label: "Afro" },
+      { id: 1, label: "Emi" },
+    ],
+  },
+  {
+    id: "arrow",
+    name: "Arrow Skin",
+    help: "Set your arrow skin",
+    type: Array,
+    options: [
+      { id: 0, label: "Normal" },
+      { id: 1, label: "Classic" },
+    ],
+  },
+];

src/constants/index.js

@@ -1564,6 +1564,16 @@ export const gameData = [
     noScores: false,
     noRecords: true,
   },
+  {
+    id: GameConstants.ROAD_FIGHTERS,
+    name: "Road Fighters 3D",
+    icon: "/assets/icon/rf.png",
+    cardBG: "/assets/card/rf.png",
+    skip: true,
+    noRivals: true,
+    noScores: true,
+    noRecords: true,
+  },
 ];
 
 export function getGameInfo(game) {

src/router/index.js

@@ -168,7 +168,7 @@ const routes = [
     meta: {
       title: "Edit Profile",
     },
-    path: "/games/:game/profiles/:userId/edit",
+    path: "/games/:game/edit",
     name: "edit_profile",
     component: () => import("@/views/Game/EditView.vue"),
     options: {

src/views/Game/EditView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { reactive, onMounted } from "vue";
+import { reactive, onMounted, watch, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useMainStore } from "@/stores/main";
 import { mdiAccountTieHat, mdiBackburger } from "@mdi/js";
@@ -24,85 +24,12 @@ const versionForm = reactive({
   currentVersion: null,
 });
 
-const settings = [
-  {
-    id: "username",
-    name: "Username",
-    help: "Set your username for this profile",
-    type: String,
-  },
-  {
-    id: "fastSlow",
-    name: "Fast/Slow Display",
-    help: "Enable or disable displaying of Fast/Slow",
-    type: Boolean,
-  },
-  {
-    id: "comboPosition",
-    name: "Combo Position",
-    help: "Change order of the combo and notes",
-    type: Boolean,
-  },
-  {
-    id: "weight",
-    name: "Weight (kg)",
-    help: "Set your weight for in-game workout mode",
-    type: Number,
-  },
-  {
-    id: "dancer",
-    name: "Character",
-    help: "Set your background dancer",
-    type: Array,
-    options: [
-      { id: 0, label: "Afro" },
-      { id: 1, label: "Emi" },
-    ],
-  },
-  {
-    id: "arrow",
-    name: "Arrow Skin",
-    help: "Set your arrow skin",
-    type: Array,
-    options: [
-      { id: 0, label: "Normal" },
-      { id: 1, label: "Classic" },
-    ],
-  },
-];
-
-const profile = {
-  id: 1,
-  name: "Trmazi",
-  extid: 12345678,
-  avatar:
-    "https://static.wikia.nocookie.net/dancedancerevolutionddr/images/3/3b/Yuni_img1.gif/",
-  last: {
-    arcade: "GhettoCade",
-    date: "7/16/2023",
-  },
-  stats: {
-    firstPlay: "1/14/2021",
-    singlePlays: 165,
-    singleDan: 1900,
-    singlePoint: 1877,
-    doublePlays: 15,
-    doubleDan: 0,
-    doublePoint: 187,
-    skillPoints: 950000,
-  },
-};
-
-const userSettings = reactive({
-  username: "TRMAZI",
-  fastSlow: true,
-  comboPosition: false,
-  weight: 100,
-  dancer: 0,
-  arrow: 1,
-  guideLines: 0,
-  filter: 3,
-});
+watch(
+  () => versionForm.currentVersion,
+  () => {
+    loadProfile();
+  }
+);
 
 gameID = $route.params.game;
 thisGame = getGameInfo(gameID);
@@ -120,15 +47,21 @@ if (!thisGame.versions) {
   versionForm.currentVersion = 1;
 }
 
-var userVersions = {};
+const myProfile = ref(null);
+
 onMounted(() => {
-  userVersions = mainStore.profiles[gameID];
-  console.log(userVersions);
-  if (userVersions != undefined) {
-    versionForm.currentVersion = Math.max(...userVersions);
-  }
+  loadProfile();
 });
 
+var settings = [
+  {
+    id: "name",
+    name: "Username",
+    help: "Set your username for this profile",
+    type: String,
+  },
+];
+
 function getSources() {
   var sources = null;
   if (!versionForm.currentVersion) {
@@ -146,6 +79,32 @@ function getCardStyle() {
       background-repeat: no-repeat;
     `;
 }
+
+function filterVersions(haveVersions) {
+  var filtered = [];
+  for (const version of thisGame.versions) {
+    if (haveVersions.includes(version.id)) {
+      filtered.push(version);
+    }
+  }
+  return filtered;
+}
+
+async function loadProfile() {
+  try {
+    const data = await mainStore.getUserProfile(
+      gameID,
+      versionForm.currentVersion
+    );
+    myProfile.value = data;
+
+    if (data && !versionForm.currentVersion) {
+      versionForm.currentVersion = data.versions[data.versions.length - 1];
+    }
+  } catch (error) {
+    console.error("Failed to fetch user profile data:", error);
+  }
+}
 </script>
 
 <template>
@@ -160,7 +119,7 @@ function getCardStyle() {
           label="Go Back"
         />
         <div
-          v-if="thisGame.versions && profile && userVersions"
+          v-if="thisGame.versions && myProfile"
           class="mt-2 md:mt-0 md:w-1/3 md:text-right"
         >
           <h2 class="text-md sm:text-lg md:text-xl font-bold p-2">
@@ -168,7 +127,7 @@ function getCardStyle() {
           </h2>
           <FormControl
             v-model="versionForm.currentVersion"
-            :options="thisGame.versions"
+            :options="filterVersions(myProfile.versions)"
           />
         </div>
       </div>
@@ -185,16 +144,12 @@ function getCardStyle() {
       >
         <div class="bg-white dark:bg-slate-900/90 rounded-2xl pt-6 p-3">
           <div class="w-full">
-            <ProfileCard
-              v-if="profile && userVersions"
-              use-small
-              :profile="profile"
-            />
+            <ProfileCard v-if="myProfile" use-small :profile="myProfile" />
           </div>
         </div>
       </div>
 
-      <div v-if="versionForm.currentVersion && profile && userVersions">
+      <div v-if="versionForm.currentVersion && myProfile">
         <CardBox>
           <div>
             <FormField
@@ -205,29 +160,29 @@ function getCardStyle() {
             >
               <FormControl
                 v-if="setting.type == String"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
               />
 
               <FormControl
                 v-if="setting.type == Number"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
                 type="number"
               />
 
               <FormControl
                 v-if="setting.type == Array"
                 :options="setting.options"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
-                :selected="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
+                :selected="myProfile[setting.id]"
               />
 
               <FormCheckRadio
                 v-if="setting.type == Boolean"
-                :v-model="userSettings[setting.id]"
-                :model-value="userSettings[setting.id]"
+                :v-model="myProfile[setting.id]"
+                :model-value="myProfile[setting.id]"
                 type="switch"
               />
             </FormField>