Merge pull request #158 from lfmnovaes/feat/infernalist-webp

Ascendancies webp version
marcoaaguiar · Dec 4, 2024 · e2f1c72 · e2f1c72
2 parents 0bc9573 + 8aeac8f
commit e2f1c72
Show file tree

Hide file tree

Showing 14 changed files with 26 additions and 21 deletions.
diff --git a/src/lib/data/nodes.json b/src/lib/data/nodes.json
@@ -15390,8 +15390,8 @@
 		},
 		{
 			"id": "AS10",
-			"x": 0.5194545454545455,
-			"y": 0.4812614525139665,
+			"x": 0.5196403418306645,
+			"y": 0.47886322739524173,
 			"kind": "small",
 			"class": "infernalist"
 		},
@@ -15467,8 +15467,8 @@
 		},
 		{
 			"id": "AN10",
-			"x": 0.5219545454545455,
-			"y": 0.4910614525139665,
+			"x": 0.5232346776432371,
+			"y": 0.488551374200091,
 			"kind": "notable",
 			"class": "infernalist"
 		},

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -649,6 +649,8 @@
 				onmousedown={handleContainerMousedown}
 				onwheel={handleWheel}
 			>
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<div
 					bind:this={imageWrapperEl}
 					class="absolute top-0 left-0"
@@ -673,23 +675,26 @@
 				  height: {imageEl ? imageEl.naturalHeight * scale + 'px' : 'auto'};
 			  "
 					/>
-
-					<img
-						class="pointer-events-none absolute"
-						bind:this={ascImageEl}
-						src="{base}/ascendancies/{selectedAscendancy}.png"
-						alt="Interactive"
-						draggable="false"
-						style="
-				  width: {320 * scale + 'px'};
-				  top: 50%;
-				  left: 50%;
-				  margin-top: -{320 * scale * 0.46 + 'px'};
-				  margin-left: -{320 * scale * 0.487 + 'px'};
-				  height: {320 * scale + 'px'};
-			  "
-					/>
-
+					<picture>
+						<!-- Attempt to load the .webp version -->
+						<source srcset="{base}/ascendancies/{selectedAscendancy}.webp" type="image/webp" />
+						<!-- Fallback to the .png version -->
+						<img
+							class="pointer-events-none absolute"
+							bind:this={ascImageEl}
+							src="{base}/ascendancies/{selectedAscendancy}.png"
+							alt="Interactive"
+							draggable="false"
+							style="
+                width: {320 * scale + 'px'};
+                top: 50%;
+                left: 50%;
+                margin-top: -{320 * scale * 0.46 + 'px'};
+                margin-left: -{320 * scale * 0.487 + 'px'};
+                height: {320 * scale + 'px'};
+              "
+						/>
+					</picture>
 					<!-- Display hoverable regions with lighter color -->
 					{#if hasLoaded}
 						{#each Object.values(nodes).filter(filterNodes) as node}

diff --git a/static/ascendancies/acolyte.webp b/static/ascendancies/acolyte.webp
diff --git a/static/ascendancies/bloodmage.webp b/static/ascendancies/bloodmage.webp
diff --git a/static/ascendancies/chronomancer.webp b/static/ascendancies/chronomancer.webp
diff --git a/static/ascendancies/deadeye.webp b/static/ascendancies/deadeye.webp
diff --git a/static/ascendancies/gemling.webp b/static/ascendancies/gemling.webp
diff --git a/static/ascendancies/infernalist.webp b/static/ascendancies/infernalist.webp
diff --git a/static/ascendancies/invoker.webp b/static/ascendancies/invoker.webp
diff --git a/static/ascendancies/pathfinder.webp b/static/ascendancies/pathfinder.webp
diff --git a/static/ascendancies/stormweaver.webp b/static/ascendancies/stormweaver.webp
diff --git a/static/ascendancies/titan.webp b/static/ascendancies/titan.webp
diff --git a/static/ascendancies/warbringer.webp b/static/ascendancies/warbringer.webp
diff --git a/static/ascendancies/witchhunter.webp b/static/ascendancies/witchhunter.webp