Use loading area component in other places.

Damnae · Apr 3, 2024 · 7a7fcf9 · 7a7fcf9
1 parent f61ee18
commit 7a7fcf9
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 80 deletions.
diff --git a/src/components/LoadingArea.vue b/src/components/LoadingArea.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import LoadingNav from './LoadingNav.vue';
-
+  import LoadingNav from './LoadingNav.vue';
   defineProps<{loading:boolean}>()
 </script>
 

diff --git a/src/views/aside/AvatarAI.vue b/src/views/aside/AvatarAI.vue
@@ -5,7 +5,7 @@
   import { Avatar, getAvatar } from '@/sources/avatar';
   import { Character, getCharacterByAvatar } from '@/sources/character';
 
-  import LoadingNav from '@/components/LoadingNav.vue';
+  import LoadingArea from '@/components/LoadingArea.vue';
   import ProvideAvatarContext from '@/views/abilities/components/ProvideAvatarContext.vue';
   import AIWeights from './components/AIWeights.vue';
 
@@ -24,53 +24,51 @@
     avatar.value = await getAvatar(commitId, objectId.value)
     character.value = avatar.value ? await getCharacterByAvatar(commitId, avatar.value) : undefined
     loading.value = false
-  }, 
-  { immediate:true })
+  }, { immediate:true })
 
   const hashStore = useHashStore();
 </script>
 
 <template>
-  <div v-if="loading">
-    <LoadingNav />
-  </div>
-  <template v-else-if="avatar && character">
-    <header>
-      <h1>
-        <span class="pretitle">Auto AI:</span>
-        {{ avatar.AvatarName.Text }}
-      </h1>
-    </header>
-    <section>
-
-      <template v-if="character?.AITagList">
-        <h2>AI Tags</h2>
-        {{ Object.keys(character.AITagList.Values).map(hash => hashStore.translate(parseInt(hash)) ?? hash).join(', ') }}
-      </template>
+  <LoadingArea :loading="loading">
+    <template v-if="avatar && character">
+      <header>
+        <h1>
+          <span class="pretitle">Auto AI:</span>
+          {{ avatar.AvatarName.Text }}
+        </h1>
+      </header>
+      <section>
+
+        <template v-if="character?.AITagList">
+          <h2>AI Tags</h2>
+          {{ Object.keys(character.AITagList.Values).map(hash => hashStore.translate(parseInt(hash)) ?? hash).join(', ') }}
+        </template>
 
-      <ProvideAvatarContext :commitId="commitId" :objectId="objectId">
-        <template v-for="skill in character.SkillList">
-          <template v-if="skill.ComplexSkillAIPreCheck || skill.ComplexSkillAI">
-            <h2>{{ skill.Name }}</h2>
+        <ProvideAvatarContext :commitId="commitId" :objectId="objectId">
+          <template v-for="skill in character.SkillList">
+            <template v-if="skill.ComplexSkillAIPreCheck || skill.ComplexSkillAI">
+              <h2>{{ skill.Name }}</h2>
 
-            <template v-if="skill.ComplexSkillAIPreCheck">
-              <h3>Precheck Weights</h3>
-              <AIWeights :weightData="skill.ComplexSkillAIPreCheck" />
-            </template>
+              <template v-if="skill.ComplexSkillAIPreCheck">
+                <h3>Precheck Weights</h3>
+                <AIWeights :weightData="skill.ComplexSkillAIPreCheck" />
+              </template>
 
-            <template v-if="skill.ComplexSkillAI">
-              <h3>Weights</h3>
-              <AIWeights :weightData="skill.ComplexSkillAI" />
-            </template>
+              <template v-if="skill.ComplexSkillAI">
+                <h3>Weights</h3>
+                <AIWeights :weightData="skill.ComplexSkillAI" />
+              </template>
 
-            <div class="minor" v-if="skill.AIUltraSkillPriority">
-              Priority: {{ skill.AIUltraSkillPriority }}
-            </div>
+              <div class="minor" v-if="skill.AIUltraSkillPriority">
+                Priority: {{ skill.AIUltraSkillPriority }}
+              </div>
 
+            </template>
           </template>
-        </template>
-      </ProvideAvatarContext>
+        </ProvideAvatarContext>
 
-    </section>
-  </template>
+      </section>
+    </template>
+  </LoadingArea>
 </template>
diff --git a/src/views/aside/MonsterAI.vue b/src/views/aside/MonsterAI.vue
@@ -6,8 +6,8 @@
   import { CharacterAI, getCharacterAIByMonster } from '@/sources/characterai';
   import { MonsterSkill, getMonsterSkillsByIds } from '@/sources/monsterskill';
 
+  import LoadingArea from '@/components/LoadingArea.vue';
   import ProvideMonsterContext from '@/views/abilities/components/ProvideMonsterContext.vue';
-  import LoadingNav from '@/components/LoadingNav.vue';
   import AnyTask from '@/gamecore/AnyTask.vue';
 
   const commitId = inject<string>('commitId') as string
@@ -53,48 +53,47 @@
 </script>
 
 <template>
-  <div v-if="loading">
-    <LoadingNav />
-  </div>
-  <template v-else-if="characterAI">
-    <header>
-      <h1>
-        <span class="pretitle">AI:</span>
-        {{ characterAI.AIName }}
-      </h1>
-    </header>
-    <section>
-      <ProvideMonsterContext :commitId="commitId" :objectId="objectId">
+  <LoadingArea :loading="loading">
+    <template v-if="characterAI">
+      <header>
+        <h1>
+          <span class="pretitle">AI:</span>
+          {{ characterAI.AIName }}
+        </h1>
+      </header>
+      <section>
+        <ProvideMonsterContext :commitId="commitId" :objectId="objectId">
 
-        <h2>Variables</h2>
-        <div>
-          <div v-if="monster" v-for="variable in monster.CustomValues">
-            {{ variable.Property }} = {{ variable.Value }}
+          <h2>Variables</h2>
+          <div>
+            <div v-if="monster" v-for="variable in monster.CustomValues">
+              {{ variable.Property }} = {{ variable.Value }}
+            </div>
+            <div v-if="character" v-for="name, value in character.CustomValues">
+              {{ value }} = {{ name }}
+            </div>
+            <div v-for="variable in characterAI.VariableList">
+              {{ variable.Name }} = {{ variable.Value }}
+            </div>
           </div>
-          <div v-if="character" v-for="name, value in character.CustomValues">
-            {{ value }} = {{ name }}
+
+          <h2>Decisions</h2>
+          <div v-for="decision in characterAI.DecisionList">
+            <AnyTask :node="decision" />
           </div>
-          <div v-for="variable in characterAI.VariableList">
-            {{ variable.Name }} = {{ variable.Value }}
-          </div>
-        </div>
-
-        <h2>Decisions</h2>
-        <div v-for="decision in characterAI.DecisionList">
-          <AnyTask :node="decision" />
-        </div>
 
-        <template v-if="skillSequence.length > 0">
-          <h2>Skill Sequence</h2>
-          <ul>
-            <li v-for="skill in skillSequence">
-              {{ skill.SkillTriggerKey }}
-              <span class="minor">{{ skill.SkillName.Text }}</span>
-            </li>
-          </ul>
-        </template>
+          <template v-if="skillSequence.length > 0">
+            <h2>Skill Sequence</h2>
+            <ul>
+              <li v-for="skill in skillSequence">
+                {{ skill.SkillTriggerKey }}
+                <span class="minor">{{ skill.SkillName.Text }}</span>
+              </li>
+            </ul>
+          </template>
 
-      </ProvideMonsterContext>
-    </section>
-  </template>
+        </ProvideMonsterContext>
+      </section>
+    </template>
+  </LoadingArea>
 </template>