[Spells] Update Spell Animations (#15)

* Race inventory parser / map generator * Revert swagger.go * Add static map file serving * Raceviewer work * Improve race viewer algorithms * UI tweaks * Add changes to spells for updated spells by DZ * Fix horrendous git rebase issue
Akkadius · Jan 18, 2022 · bd42d37 · bd42d37
1 parent b885237
commit bd42d37
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+## [1.6.0]
+
+### Updated Spell Animations!
+
+* Special thanks to DeadZergling for all of his effort putting together these high quality preview videos
+
+[![](https://img.youtube.com/vi/7xXoBAWs3n8/0.jpg)](https://www.youtube.com/watch?v=7xXoBAWs3n8)
+
+* Race viewer initial load should now be faster
+* Race viewer now includes a models available by zone filter
+
 ## [1.5.1]
 
 * Changelog page now only autoplays videos that are in the current viewport

diff --git a/Makefile b/Makefile
@@ -209,7 +209,7 @@ build-frontend: ##@build Builds frontend to be packed into binary
 
 build-binary: ##@build Build and packs release binary
 	packr clean
-	packr
+	packr --compress
 	GOOS=linux GOARCH=amd64 go build -o spire-linux-amd64
 	GOOS=windows GOARCH=amd64 go build -o spire-windows-amd64.exe
 	zip spire-linux-amd64.zip spire-linux-amd64

diff --git a/frontend/src/app/eq-assets/spell-animations-map.json b/frontend/src/app/eq-assets/spell-animations-map.json
diff --git a/frontend/src/views/spell-editor/SpellEditor.vue b/frontend/src/views/spell-editor/SpellEditor.vue
@@ -78,7 +78,7 @@
                   <!--                  <spell-deity-selector :spell="spell" @input="spell = $event"/>-->
 
                   <div class="row">
-                    <div class="col-8">
+                    <div class="col-6">
                       <div class="row">
                         <div class="col-6">
                           You Cast
@@ -125,12 +125,12 @@
                       </div>
                     </div>
                     <div
-                      class="col-4"
+                      class="col-6"
                       style="text-align: center"
                       @mouseover="drawSpellAnimationSelector"
                     >
                       <spell-animation-preview
-                        class="mt-4"
+                        class="mt-3 mb-3"
                         :id="spell.spellanim"
                       />
 

diff --git a/frontend/src/views/spell-editor/components/SpellAnimationPreview.vue b/frontend/src/views/spell-editor/components/SpellAnimationPreview.vue
@@ -8,9 +8,9 @@
         muted
         loop
         autoplay
-        :style="'width: ' + this.width + 'px; height: ' + this.height + 'px; border-radius:10px; border: 1px solid;'"
+        :style="'width: ' + this.width + 'px; height: ' + this.height + 'px; border-radius:5px; border: 1px solid rgba(255, 255, 255, .3)'"
         :src="videoSource"
-        class="spell-preview">
+      >
       </video>
     </div>
   </div>
@@ -63,12 +63,12 @@ export default {
       type: Number,
     },
     width: {
-      default: 250,
+      default: 384,
       required: false,
       type: Number,
     },
     height: {
-      default: 332,
+      default: 216,
       required: false,
       type: Number,
     },

diff --git a/frontend/src/views/spell-editor/components/SpellAnimationSelector.vue b/frontend/src/views/spell-editor/components/SpellAnimationSelector.vue
@@ -2,41 +2,54 @@
   <div class="text-center">
     <app-loader :is-loading="!loaded" padding="8"/>
 
-    <input
-      type="text"
-      class="form-control ml-2 mb-4"
-      v-model="search"
-      v-on:keyup="triggerSearch"
-      style="width: 95%"
-      placeholder="Search for spell names to find animations"
-    >
+    <div class="row">
+      <div class="col-12">
+        <input
+          type="text"
+          class="form-control mb-4"
+          v-model="search"
+          v-on:keyup="triggerSearch"
+          placeholder="Search for spell names to find animations"
+        >
+      </div>
+    </div>
 
     <div
       style="height: 85vh; overflow-y: scroll"
       v-on:scroll.passive="render"
+      class="row justify-content-center"
       id="spell-video-view-port"
     >
 
-      <div v-if="filteredAnimations && filteredAnimations.length === 0">
-        No animations found...
-      </div>
+      <div class="col-12">
+        <div v-if="filteredAnimations && filteredAnimations.length === 0">
+          No animations found...
+        </div>
 
-      <div
-        v-for="(animationId) in filteredAnimations"
-        :key="animationId"
-        class="d-inline-block"
-      >
-        <video
-          muted
-          loop
-          style="width: 160px; height: 230px; border-radius: 10px; border: 1px solid;"
-          :id="'spell-' + animationId"
-          :data-src="animBaseUrl + animationId + '.mp4'"
-          @mousedown="selectSpellAnim(animationId)"
-          :class="'video-preview spell-preview ' + classIsPulsating(animationId)"
+        <div
+          v-for="(animationId) in filteredAnimations"
+          :key="animationId"
+          style="display:inline-block; position: relative;"
+          class="d-inline-block"
         >
-        </video>
+          <video
+            muted
+            loop
+            style="height: 146px; width: 259px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .3);"
+            :id="'spell-' + animationId"
+            :data-src="animBaseUrl + animationId + '.mp4'"
+            @mousedown="selectSpellAnim(animationId)"
+            :class="'video-preview ' + classIsPulsating(animationId)"
+          >
+          </video>
+
+          <div class="overlay-spell-anim-selector">
+            <h6 class="eq-header" style="font-size: 21px; ">{{ animationId }}</h6>
+          </div>
+
+        </div>
       </div>
+
     </div>
 
   </div>
@@ -94,7 +107,7 @@ export default {
 
           // 230 is height of video to offset
           if (container && target) {
-            container.scrollTop = target.offsetTop - 80;
+            container.scrollTop = target.getBoundingClientRect().top - 150;
           }
         }, 100)
       }
@@ -171,11 +184,9 @@ export default {
 </script>
 
 <style>
-.spell-preview {
-  height: 250px;
-  min-width: 150px;
-  max-width: 200px;
-  border-radius: 10px;
-  margin: 3px;
+.overlay-spell-anim-selector {
+  position: absolute;
+  bottom: 1px;
+  left: 11px;
 }
 </style>
diff --git a/frontend/src/views/viewers/RaceViewer.vue b/frontend/src/views/viewers/RaceViewer.vue
@@ -1,14 +1,16 @@
 <template>
   <div>
     <div class="container-fluid">
-      <eq-window title="Race Viewer" class="mt-5 text-center">
+      <eq-window title="Race Viewer" class="mt-5">
         <div class="row mb-4">
           <div class="col-6">
 
+            Filter by Race Name
+
             <!-- Input -->
             <input
               type="text"
-              class="form-control form-control-prepended list-search"
+              class="form-control form-control-prepended list-search mt-1"
               v-model="raceSearch"
               @keyup="zoneSearch = 0; triggerStateDebounce()"
               @keyup.enter="zoneSearch = 0; triggerState()"
@@ -18,9 +20,12 @@
           </div>
 
           <div class="col-5">
+            Find Models Available by Zone
+
             <select
               @change="raceSearch = ''; triggerState()"
-              v-model.number="zoneSearch" class="form-control"
+              v-model.number="zoneSearch"
+              class="form-control mt-1"
             >
               <option value="0">--- Select Zone ---</option>
               <option
@@ -36,7 +41,7 @@
           <div class="col-1">
 
             <button
-              class='btn btn-outline-warning btn-sm mb-1 mr-2'
+              class='btn btn-outline-warning btn-sm mb-1 mr-2 mt-4'
               @click="reset"
             >
               <i class="fa fa-refresh"></i> Reset
@@ -52,7 +57,7 @@
             No races found...
           </span>
 
-        <div v-if="loaded" class="row justify-content-center align-items-center">
+        <div v-if="loaded" class="row justify-content-center align-items-center text-center">
           <div
             v-for="race in filteredRaces"
             :key="race"
@@ -102,7 +107,7 @@
           </div>
         </div>
 
-        <div class="mt-5">Images courtesy of Maudigan <3</div>
+        <div class="mt-3 text-center">Images courtesy of Maudigan <3</div>
       </eq-window>
     </div>
 

diff --git a/frontend/src/views/viewers/SpellAnimationViewer.vue b/frontend/src/views/viewers/SpellAnimationViewer.vue
@@ -9,34 +9,43 @@
         class="mt-5 text-center"
       >
 
-        <input
-          type="text"
-          class="form-control ml-2 mb-4"
-          v-model="search"
-          v-on:keyup="triggerSearch"
-          style="width: 95%"
-          placeholder="Search for spell names to find animations"
-        >
+        <div class="row">
+          <div class="col-12">
+            <input
+              type="text"
+              class="form-control ml-2 mb-4"
+              v-model="search"
+              v-on:keyup="triggerSearch"
+              placeholder="Search for spell names to find animations"
+            >
+          </div>
+        </div>
 
         <div v-if="filteredAnimations && filteredAnimations.length === 0">
           No animations found...
         </div>
 
-        <div v-for="(spell) in filteredAnimations" style="display:inline-block; position: relative;">
-          <video
-            muted
-            loop
-            :id="'spell-' + spell"
-            :data-src="animBaseUrl + spell + '.mp4'"
-            class="video-preview spell-preview"
-          >
-          </video>
-          <div class="overlay">
-            <h6 class="eq-header">{{ spell }}</h6>
+        <div class="row">
+          <div class="col-12">
+            <div v-for="(spell) in filteredAnimations" style="display:inline-block; position: relative;">
+              <video
+                muted
+                loop
+                :id="'spell-' + spell"
+                :data-src="animBaseUrl + spell + '.mp4'"
+                class="video-preview spell-preview-viewer"
+              >
+              </video>
+              <div class="overlay">
+                <h6 class="eq-header">{{ spell }}</h6>
+              </div>
+            </div>
+
           </div>
         </div>
 
-        <div class="mt-5">Videos courtesy of Georges <3</div>
+
+        <div class="mt-3">Videos courtesy of DeadZergling <3</div>
       </eq-window>
     </div>
   </div>
@@ -168,7 +177,7 @@ export default {
 </script>
 
 <style>
-.spell-preview {
+.spell-preview-viewer {
   /*height: 250px;*/
   /*min-width: 150px;*/
   /*max-width: 200px;*/

diff --git a/internal/console/cmd/generate_race_model_maps.go b/internal/console/cmd/generate_race_model_maps.go
@@ -221,8 +221,6 @@ func (c *GenerateRaceModelMapsCommand) Handle(cmd *cobra.Command, _ []string) {
 								gender = 0
 							}
 
-							fmt.Println(newText)
-
 							modelCode := modelString
 							// neutral
 							if gender == 2 {
@@ -320,7 +318,7 @@ func (c *GenerateRaceModelMapsCommand) Handle(cmd *cobra.Command, _ []string) {
 
 	// write compressed file
 	file := "internal/http/staticmaps/race-inventory-map.json"
-	_ = ioutil.WriteFile(file,json, 0644)
+	_ = ioutil.WriteFile(file, json, 0644)
 	fmt.Printf("Wrote to [%v]\n", file)
 }
 

diff --git a/internal/http/staticmaps/race-inventory-map.json b/internal/http/staticmaps/race-inventory-map.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "spire",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/Akkadius/spire.git"