Merge pull request #49 from glaciyan/sword-icon

Fix Sword icon
glaciyan · Dec 30, 2021 · 5ccc80f · 5ccc80f · vercel · Dec 30, 2021
2 parents b617575 + e331108
commit 5ccc80f
Show file tree

Hide file tree

Showing 8 changed files with 17 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "gscale",
   "license": "MIT",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "scripts": {
     "pre": "yarn genver",
     "dev": "yarn pre && vite",

diff --git a/src/components/character/CharacterBuildPreview.vue b/src/components/character/CharacterBuildPreview.vue
@@ -100,21 +100,9 @@ const edit = () => {
                 <div class="-m-1">
                   <RangeLevelDisplay class="m-1" :range="data.level" />
                   <div class="flex flex-wrap">
-                    <RangeTalentDisplay class="m-1" title="Normal" :range="data.normal">
-                      <template #icon>
-                        <Sword class="h-[26px] -m-0.5 w-[26px]" />
-                      </template>
-                    </RangeTalentDisplay>
-                    <RangeTalentDisplay class="m-1" title="Elemental" :range="data.elemental">
-                      <template #icon>
-                        <Elemental class="-m-0.5" />
-                      </template>
-                    </RangeTalentDisplay>
-                    <RangeTalentDisplay class="m-1" title="Burst" :range="data.burst">
-                      <template #icon>
-                        <Fire class="-m-0.5" />
-                      </template>
-                    </RangeTalentDisplay>
+                    <RangeTalentDisplay class="m-1" title="Normal" :range="data.normal" :icon="Sword" />
+                    <RangeTalentDisplay class="m-1" title="Elemental" :range="data.elemental" :icon="Elemental" />
+                    <RangeTalentDisplay class="m-1" title="Burst" :range="data.burst" :icon="Fire" />
                   </div>
                 </div>
               </div>

diff --git a/src/components/icons/SwordIcon.vue b/src/components/icons/SwordIcon.vue
@@ -1,10 +1,9 @@
 <template>
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M9.05827 14.9414L5.69652 18.3031M7.39168 13.2748L14.9699 5.69656L18.3031 5.69656L18.3031 9.02974L10.7249 16.608L7.39168 13.2748ZM5.69652 11.5796L12.42 18.3031L5.69652 11.5796Z"
+      d="M4 20L7.96667 16.0333M7.96667 16.0333L6.26667 14.3333M7.96667 16.0333L9.66667 17.7333M11.9333 20L9.66667 17.7333M4 12.0667L6.26667 14.3333M6.26667 14.3333L17.6 3H21V6.4L9.66667 17.7333"
       stroke="currentColor"
       stroke-width="1.5"
-      stroke-miterlimit="1.5"
       stroke-linecap="round"
       stroke-linejoin="round"
     />

diff --git a/src/components/levelRange/RangeBurst.vue b/src/components/levelRange/RangeBurst.vue
diff --git a/src/components/levelRange/RangeElemental.vue b/src/components/levelRange/RangeElemental.vue
diff --git a/src/components/levelRange/RangeNormal.vue → src/components/levelRange/RangeTalent.vue b/src/components/levelRange/RangeNormal.vue → src/components/levelRange/RangeTalent.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
+import type { Component } from "vue";
 import SelectorGroup from "../levelSelector/SelectorGroup.vue";
-import SelectorTalentLevel from "../levelSelector/SelectorTalentLevel.vue";
 import SelectorIconSeperator from "../levelSelector/SelectorIconSeperator.vue";
-import Sword from "../icons/SwordIcon.vue";
+import SelectorTalentLevel from "../levelSelector/SelectorTalentLevel.vue";
 
-// TODO model with start goal range
-defineProps<{ start: number; goal: number; element?: string }>();
+defineProps<{ start: number; goal: number; icon: Component; element?: string }>();
 
 defineEmits(["update:start", "update:goal"]);
 </script>
@@ -14,7 +13,7 @@ defineEmits(["update:start", "update:goal"]);
   <SelectorGroup legend="Normal Attack">
     <SelectorTalentLevel class="rounded-l-md" :modelValue="start" @update:modelValue="$emit('update:start', $event)" />
     <SelectorIconSeperator :element="element">
-      <Sword class="h-[26px] -m-0.5 w-[26px]" />
+      <component :is="icon" class="-m-0.5" />
     </SelectorIconSeperator>
     <SelectorTalentLevel class="rounded-r-md" :modelValue="goal" @update:modelValue="$emit('update:goal', $event)" />
   </SelectorGroup>

diff --git a/src/components/levelRange/display/RangeTalentDisplay.vue b/src/components/levelRange/display/RangeTalentDisplay.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { Component } from "vue";
 import StartGoalRange from "~/lib/types/StartGoalRange";
 import SelectorIconSeperator from "../../levelSelector/SelectorIconSeperator.vue";
 
-defineProps<{ range: StartGoalRange<number>; title: string }>();
+defineProps<{ range: StartGoalRange<number>; title: string; icon: Component }>();
 
 const className = "flex bg-dark-400 pl-3 items-center w-15 <lg:(w-9 pl-2)";
 </script>
@@ -15,7 +16,7 @@ const className = "flex bg-dark-400 pl-3 items-center w-15 <lg:(w-9 pl-2)";
         {{ range.start }}
       </div>
       <SelectorIconSeperator class="!w-9">
-        <slot name="icon" />
+        <component :is="icon" class="-m-0.5" />
       </SelectorIconSeperator>
       <div :class="className">
         {{ range.goal }}

diff --git a/src/pages/BuildCharacter.vue b/src/pages/BuildCharacter.vue
@@ -3,10 +3,7 @@ import TheCharacterDetailPanel from "~/components/BuildCharacter/TheCharacterDet
 import EButton from "~/components/ElementButton.vue";
 import Container from "~/components/PageContainer";
 import ElementProvider from "~/components/ElementProvider.vue";
-import RangeBurst from "~/components/levelRange/RangeBurst.vue";
-import RangeElemental from "~/components/levelRange/RangeElemental.vue";
 import RangeLevel from "~/components/levelRange/RangeLevel.vue";
-import RangeNormal from "~/components/levelRange/RangeNormal.vue";
 import ItemList from "~/components/ItemList.vue";
 import ItemListHeader from "~/components/ItemListHeader.vue";
 import { useAscensionLevelRange } from "~/composites/useAscensionLevelRange";
@@ -26,6 +23,7 @@ import Fire from "../components/icons/FireIcon.vue";
 import ItemPreviewSection from "~/components/ItemPreviewSection.vue";
 import getAllCharacterItems from "~/lib/item/getAllCharacterItems";
 import { getItemImage } from "~/lib/data/util/getItemImage";
+import RangeTalent from "~/components/levelRange/RangeTalent.vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -158,9 +156,9 @@ getAllCharacterItems(character.value).map((item) => {
               <div>
                 <div class="space-y-6">
                   <RangeLevel v-model:start="level.start" v-model:goal="level.goal" />
-                  <RangeNormal v-model:start="normal.start" v-model:goal="normal.goal" />
-                  <RangeElemental v-model:start="elemental.start" v-model:goal="elemental.goal" />
-                  <RangeBurst v-model:start="burst.start" v-model:goal="burst.goal" />
+                  <RangeTalent v-model:start="normal.start" v-model:goal="normal.goal" :icon="Sword" />
+                  <RangeTalent v-model:start="elemental.start" v-model:goal="elemental.goal" :icon="Elemental" />
+                  <RangeTalent v-model:start="burst.start" v-model:goal="burst.goal" :icon="Fire" />
                 </div>
                 <div class="mt-6">
                   <div class="mb-2">
@@ -213,7 +211,7 @@ getAllCharacterItems(character.value).map((item) => {
               </template>
             </ItemListHeader>
             <ItemPreviewSection :items="ascItems" title="Ascension" :icon="Growth" />
-            <ItemPreviewSection :items="normalItems" title="Normal Attack" :icon="Sword" noResize />
+            <ItemPreviewSection :items="normalItems" title="Normal Attack" :icon="Sword" />
             <ItemPreviewSection :items="emItems" title="Elemental Attack" :icon="Elemental" />
             <ItemPreviewSection :items="burstItems" title="Ascension" :icon="Fire" />
           </div>