overall waveset viewer update #2

- show general waveset info (authors, item on win) if it exists
- show loading icon :D
- multiply wave xp by 5
- moved all images to gh-pages for easier local testing
    - requires workflow update on master branch

Author: squarebracket-s

.github/workflows/generate-pages.yml

@@ -26,12 +26,6 @@ jobs:
     - name: Parse ZR repo code
       run: ./venv/bin/python main.py
 
-    - name: Move repo_img and builtin_img to wiki
-      run: |
-        mv repo_img/ ./gh-pages/repo_img/
-        mv builtin_img/ ./gh-pages/builtin_img/
-        mv premedia_icons/ ./gh-pages/premedia_icons/
-    
     - name: Upload static files as artifact
       id: deployment
       uses: actions/upload-pages-artifact@v4

.gitignore

@@ -6,7 +6,6 @@ __pycache__/
 venv/
 TF2-Zombie-Riot/
 
-repo_img/
 premedia_icons_unused/
 npcs_by_category.json
 

builtin_img/download.svg

@@ -85,6 +85,8 @@ def draw_npc(drawable, img, pos, npc):
     left,top = pos[0]-(ICON_SIZE/2), pos[1]-(ICON_SIZE/2)
     drawable.rounded_rectangle([(left,top), (left+ICON_SIZE,top+ICON_SIZE)], 4, color["bg_light"])
     icon_filepath = npc["img"][10:-14]
+    if icon_filepath.startswith("./"): # only missing.png paths start with ./
+        icon_filepath = icon_filepath.replace("./","gh-pages/")
     icon = Image.open(icon_filepath, 'r')
     s = ICON_SIZE-(ICON_INNER_PADDING*2)
     icon = icon.resize((s,s))

builtin_img/missing.png

@@ -84,7 +84,7 @@ h3, .h3 {
 }
 
 .hidden {
-    display:none;
+    display:none !important;
 }
 
 /* swap out dots in lists */
@@ -135,9 +135,33 @@ li:before {
     color: rgb(83, 123, 22);
 }
 
-
 @media screen and (max-width: 700px) {
     body {
         padding: 25px;
     }
+}
+
+/* https://stackoverflow.com/a/21320622 */
+@keyframes rotating {
+  from {
+    -ms-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -ms-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+.rotating {
+  -webkit-animation: rotating 2s linear infinite;
+  -moz-animation: rotating 2s linear infinite;
+  -ms-animation: rotating 2s linear infinite;
+  -o-animation: rotating 2s linear infinite;
+  animation: rotating 2s linear infinite;
 }