New options engine, fully working reads

src/components/FormControl.vue

@@ -24,6 +24,14 @@ const props = defineProps({
     type: String,
     default: null,
   },
+  max: {
+    type: String,
+    default: null,
+  },
+  min: {
+    type: String,
+    default: null,
+  },
   placeholder: {
     type: String,
     default: null,
@@ -154,6 +162,8 @@ if (props.ctrlKFocus) {
       :name="name"
       :maxlength="maxlength"
       :minlength="minlength"
+      :min="min"
+      :max="max"
       :placeholder="placeholder"
       :required="required"
     />
@@ -165,6 +175,8 @@ if (props.ctrlKFocus) {
       :name="name"
       :maxlength="maxlength"
       :minlength="minlength"
+      :min="min"
+      :max="max"
       :inputmode="inputmode"
       :autocomplete="autocomplete"
       :required="required"

src/constants/options/ddrOptions.js

@@ -4,25 +4,25 @@ export const DDROptions = {
       id: "early_late",
       name: "Fast/Slow Display",
       help: "Enable or disable displaying of Fast/Slow",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "combo",
       name: "Combo Position",
       help: "Change order of the combo and notes",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "weight",
       name: "Weight (kg)",
       help: "Set your weight for in-game workout mode",
-      type: Number,
+      type: "Number",
     },
     {
       id: "character",
       name: "Character",
       help: "Select your character",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "All Character Random" },
         { id: 1, label: "Male Random" },
@@ -59,7 +59,7 @@ export const DDROptions = {
       id: "arrowskin",
       name: "Arrow Skin",
       help: "Set your arrow skin",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Normal" },
         { id: 1, label: "New" },
@@ -74,7 +74,7 @@ export const DDROptions = {
       id: "guidelines",
       name: "Guidelines",
       help: "Set the guideline style",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Border" },
@@ -85,7 +85,7 @@ export const DDROptions = {
       id: "filter",
       name: "Filter",
       help: "Set the filter intensity",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Dark" },
@@ -99,25 +99,25 @@ export const DDROptions = {
       id: "early_late",
       name: "Fast/Slow Display",
       help: "Enable or disable displaying of Fast/Slow",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "combo",
       name: "Combo Position",
       help: "Change order of the combo and notes",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "weight",
       name: "Weight (kg)",
       help: "Set your weight for in-game workout mode",
-      type: Number,
+      type: "Number",
     },
     {
       id: "character",
       name: "Character",
       help: "Select your character",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "All Character Random" },
         { id: 1, label: "Male Random" },
@@ -141,7 +141,7 @@ export const DDROptions = {
       id: "arrowskin",
       name: "Arrow Skin",
       help: "Set your arrow skin",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Normal" },
         { id: 1, label: "New" },
@@ -156,7 +156,7 @@ export const DDROptions = {
       id: "guidelines",
       name: "Guidelines",
       help: "Set the guideline style",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Border" },
@@ -167,7 +167,7 @@ export const DDROptions = {
       id: "filter",
       name: "Filter",
       help: "Set the filter intensity",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Dark" },
@@ -181,25 +181,25 @@ export const DDROptions = {
       id: "early_late",
       name: "Fast/Slow Display",
       help: "Enable or disable displaying of Fast/Slow",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "combo",
       name: "Combo Position",
       help: "Change order of the combo and notes",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "weight",
       name: "Weight (kg)",
       help: "Set your weight for in-game workout mode",
-      type: Number,
+      type: "Number",
     },
     {
       id: "character",
       name: "Character",
       help: "Select your character",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "All Character Random" },
         { id: 1, label: "Male Random" },
@@ -223,7 +223,7 @@ export const DDROptions = {
       id: "arrowskin",
       name: "Arrow Skin",
       help: "Set your arrow skin",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Normal" },
         { id: 1, label: "New" },
@@ -238,7 +238,7 @@ export const DDROptions = {
       id: "guidelines",
       name: "Guidelines",
       help: "Set the guideline style",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Border" },
@@ -249,7 +249,7 @@ export const DDROptions = {
       id: "filter",
       name: "Filter",
       help: "Set the filter intensity",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Dark" },
@@ -263,25 +263,25 @@ export const DDROptions = {
       id: "early_late",
       name: "Fast/Slow Display",
       help: "Enable or disable displaying of Fast/Slow",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "combo",
       name: "Combo Position",
       help: "Change order of the combo and notes",
-      type: Boolean,
+      type: "Boolean",
     },
     {
       id: "weight",
       name: "Weight (kg)",
       help: "Set your weight for in-game workout mode",
-      type: Number,
+      type: "Number",
     },
     {
       id: "character",
       name: "Character",
       help: "Select your character",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "All Character Random" },
         { id: 1, label: "Male Random" },
@@ -305,7 +305,7 @@ export const DDROptions = {
       id: "arrowskin",
       name: "Arrow Skin",
       help: "Set your arrow skin",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Normal" },
         { id: 1, label: "New" },
@@ -320,7 +320,7 @@ export const DDROptions = {
       id: "guidelines",
       name: "Guidelines",
       help: "Set the guideline style",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Border" },
@@ -331,7 +331,7 @@ export const DDROptions = {
       id: "opt_appearance",
       name: "Appearance Option",
       help: "Set your appearance option",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Normal" },
         { id: 1, label: "Hidden" },
@@ -346,7 +346,7 @@ export const DDROptions = {
       id: "filter",
       name: "Filter",
       help: "Set the filter intensity",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Dark" },
@@ -358,7 +358,7 @@ export const DDROptions = {
       id: "bpl_flag",
       name: "BPL Flag",
       help: "Choose your BPL flag",
-      type: Array,
+      type: "Array",
       options: [
         { id: 0, label: "Off" },
         { id: 1, label: "Apina Vrames" },

src/constants/options/index.js

@@ -1,5 +1,7 @@
 import { GameConstants } from "..";
 import { DDROptions } from "./ddrOptions";
+import { SDVXOptions } from "./sdvxOptions";
+import { IIDXOptions } from "./iidxOptions";
 
 export function getGameOptions(game, version) {
   var options = [
@@ -7,7 +9,7 @@ export function getGameOptions(game, version) {
       id: "username",
       name: "Username",
       help: "Set your username for this profile",
-      type: String,
+      type: "String",
     },
   ];
 
@@ -18,5 +20,19 @@ export function getGameOptions(game, version) {
     }
   }
 
+  if ([GameConstants.IIDX, GameConstants.IIDXCLASS].includes(game.id)) {
+    const gameOptions = IIDXOptions[version];
+    if (gameOptions != undefined) {
+      options = options.concat(gameOptions);
+    }
+  }
+
+  if (game.id == GameConstants.SDVX) {
+    const gameOptions = SDVXOptions[version];
+    if (gameOptions != undefined) {
+      options = options.concat(gameOptions);
+    }
+  }
+
   return options;
 }

src/views/Game/EditView.vue

@@ -52,6 +52,7 @@ if (!thisGame.versions) {
   versionForm.currentVersion = 1;
 }
 
+const optionForm = ref(null);
 const myProfile = ref(null);
 
 onMounted(() => {
@@ -71,11 +72,13 @@ function filterVersions(haveVersions) {
 async function loadProfile() {
   try {
     myProfile.value = null;
+    optionForm.value = null;
     const data = await mainStore.getUserProfile(
       gameID,
       versionForm.currentVersion
     );
     myProfile.value = data;
+    optionForm.value = data;
 
     if (data && !versionForm.currentVersion) {
       versionForm.currentVersion = data.versions[data.versions.length - 1];
@@ -84,6 +87,10 @@ async function loadProfile() {
     console.error("Failed to fetch user profile data:", error);
   }
 }
+
+function getNestedValue(obj, path) {
+  return path.split(".").reduce((acc, part) => acc && acc[part], obj);
+}
 </script>
 
 <template>
@@ -144,61 +151,61 @@ async function loadProfile() {
         </div>
       </div>
 
-      <div v-if="versionForm.currentVersion && myProfile">
+      <div v-if="versionForm.currentVersion && myProfile && optionForm">
         <CardBox>
-          <div>
-            <PillTag color="info" label="General" class="mb-2" />
-            <FormField
-              v-for="setting of getGameOptions(
-                thisGame,
-                versionForm.currentVersion
-              )"
-              :key="setting.id"
-              :label="setting.name"
-              :help="setting.help"
-            >
-              <FormControl
-                v-if="setting.type == String"
-                v-model="myProfile[setting.id]"
-                :name="setting.id"
-                :model-value="myProfile[setting.id]"
-              />
+          <form>
+            <div>
+              <PillTag color="info" label="General" class="mb-2" />
+              <FormField
+                v-for="setting of getGameOptions(
+                  thisGame,
+                  versionForm.currentVersion
+                )"
+                :key="setting.id"
+                :label="setting.name"
+                :help="setting.help"
+              >
+                <FormControl
+                  v-if="setting.type == 'String'"
+                  :name="setting.id"
+                  :model-value="getNestedValue(optionForm, setting.id)"
+                />
 
-              <FormControl
-                v-if="setting.type == Number"
-                v-model="myProfile[setting.id]"
-                :name="setting.id"
-                :model-value="myProfile[setting.id]"
-                type="number"
-              />
+                <FormControl
+                  v-if="setting.type == 'Number'"
+                  :name="setting.id"
+                  :model-value="getNestedValue(optionForm, setting.id)"
+                  type="number"
+                  onkeypress="return event.charCode >= 48 && event.charCode <= 57"
+                  min="0"
+                  max="999"
+                />
 
-              <FormControl
-                v-if="setting.type == Array"
-                v-model="myProfile[setting.id]"
-                :options="setting.options"
-                :name="setting.id"
-                :model-value="myProfile[setting.id]"
-                :selected="myProfile[setting.id]"
-              />
+                <FormControl
+                  v-if="setting.type == 'Array'"
+                  :options="setting.options"
+                  :name="setting.id"
+                  :model-value="getNestedValue(optionForm, setting.id)"
+                  :selected="getNestedValue(optionForm, setting.id)"
+                />
 
-              <FormCheckRadio
-                v-if="setting.type == Boolean"
-                v-model="myProfile[setting.id]"
-                :name="setting.id"
-                :input-value="Boolean(myProfile[setting.id])"
-                :model-value="Boolean(myProfile[setting.id])"
-                type="switch"
-              />
-            </FormField>
-          </div>
+                <FormCheckRadio
+                  v-if="setting.type == 'Boolean'"
+                  :name="setting.id"
+                  :input-value="Boolean(getNestedValue(optionForm, setting.id))"
+                  :model-value="Boolean(getNestedValue(optionForm, setting.id))"
+                  type="switch"
+                />
+              </FormField>
+            </div>
 
-          <template #footer>
-            <div class="space-x-2">
+            <div class="space-x-2 mt-6">
               <BaseButton type="submit" color="success" label="Save" />
               <BaseButton type="submit" color="danger" label="Revert" />
             </div>
-          </template>
+          </form>
         </CardBox>
+
         <EmblemCardBox
           v-if="
             gameID == 'jubeat' &&