Merge pull request #13 from Daschi1/development

1.1.0
Daschi1 · Aug 18, 2024 · d4ce1b9 · d4ce1b9
2 parents 4567483 + 6ccea26
commit d4ce1b9
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 169 deletions.
diff --git a/README.md b/README.md
@@ -28,7 +28,7 @@ generate `licenses.json`.
 license-checker --customPath lc-checker-format.json --json --out static/licenses.json
 ```
 
-### Currently deployed version
+### Current Deployment Command
 
 ```shell
 docker run -d \

diff --git a/package.json b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "green-hell-maps",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Green Hell interactive maps",
   "repository": "https://github.com/Daschi1/green-hell-maps",
   "author": "Daschi",
   "private": false,
-  "packageManager": "pnpm@9.7.0",
+  "packageManager": "pnpm@9.7.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -16,8 +16,8 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-node": "^5.2.1",
-    "@sveltejs/kit": "^2.5.21",
+    "@sveltejs/adapter-node": "^5.2.2",
+    "@sveltejs/kit": "^2.5.22",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
     "@types/eslint": "^9.6.0",
     "autoprefixer": "^10.4.20",
@@ -35,13 +35,13 @@
     "prettier": "^3.3.3",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.6.6",
-    "svelte": "^5.0.0-next.217",
+    "svelte": "^5.0.0-next.224",
     "svelte-check": "^3.8.5",
     "sveltekit-search-params": "^3.0.0",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^3.4.10",
     "typescript": "^5.5.4",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.0"
+    "typescript-eslint": "^8.1.0",
+    "vite": "^5.4.1"
   },
   "type": "module"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/Map.svelte b/src/lib/Map.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
   import Coordinate from "./Coordinate.svelte";
+  import { mapOverlayOpacity } from "$lib/settings";
 
   interface Props {
     src: string;
+    blend?: string;
   }
 
-  let { src }: Props = $props();
+  let { src, blend }: Props = $props();
 
   const westStart = 56;
   const westEnd = 20;
@@ -17,7 +19,20 @@
 </script>
 
 <div class="relative h-[2899px] w-[2751px]">
-  <img class="pointer-events-none" alt={src} {src} />
+  <img
+    style="opacity: {blend ? 1 - $mapOverlayOpacity : '100'}"
+    class="pointer-events-none {blend ? 'opacity-50' : ''}"
+    alt={src}
+    {src}
+  />
+  {#if blend}
+    <img
+      style="opacity: {$mapOverlayOpacity}"
+      class="pointer-events-none absolute left-0 top-0"
+      alt={blend}
+      src={blend}
+    />
+  {/if}
 
   <div
     class="absolute left-0 top-0 grid h-full w-full grid-cols-[repeat(37,_minmax(0,_1fr))] grid-rows-[repeat(39,_minmax(0,_1fr))]"

diff --git a/src/lib/Navbar.svelte b/src/lib/Navbar.svelte
@@ -19,5 +19,10 @@
     pathname="/spirits-of-amazonia"
     ><Span>Spirits of Amazonia</Span>
   </NavbarA>
-  <!-- TODO: add blend map -->
+  <NavbarA {activePathname} href="/comparison{$page.url.search}" pathname="/comparison"
+    ><Span>Comparison</Span>
+  </NavbarA>
+  <NavbarA {activePathname} href="/licenses{$page.url.search}" pathname="/licenses"
+    ><Span>Licenses</Span>
+  </NavbarA>
 </div>
diff --git a/src/lib/Settings.svelte b/src/lib/Settings.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import { Checkbox, Label, Range } from "flowbite-svelte";
   import { CloseOutline, UndoOutline } from "flowbite-svelte-icons";
+  import { page } from "$app/stores";
   import {
     alwaysShowCoordinateOverlay,
     clickedCoordinates,
     coordinateOverlayOpacity,
+    mapOverlayOpacity,
   } from "$lib/settings";
 </script>
 
@@ -30,4 +32,15 @@
     Unselect all coordinates
     <CloseOutline class="-ml-1" />
   </button>
+
+  {#if "/comparison".includes($page.url.pathname)}
+    <Label class="flex items-center gap-2">
+      <span class="flex-shrink-0">Map overlay opacity</span>
+      <span><Range max={1} min={0} step={0.05} bind:value={$mapOverlayOpacity} /></span>
+      <UndoOutline
+        class="cursor-pointer hover:text-red-500"
+        onclick={() => ($mapOverlayOpacity = 0.5)}
+      />
+    </Label>
+  {/if}
 </div>
diff --git a/src/lib/settings.ts b/src/lib/settings.ts
@@ -7,6 +7,7 @@ export const clickedCoordinates = queryParam<number[]>("coordinates", {
   encode: (value: number[]) => clickedCoordinatesEncode(value),
   decode: (value: string | null) => clickedCoordinatesDecode(value),
 });
+export const mapOverlayOpacity = writable(0.5);
 
 /**
  * Encodes an array of four-digit integers into a compact string representation.

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -8,7 +8,7 @@
 <div class="flex flex-col gap-2 p-2">
   <div class="flex flex-row items-center gap-4">
     <Navbar />
-    {#if ["/story-mode", "/spirits-of-amazonia"].includes($page.url.pathname)}
+    {#if ["/story-mode", "/spirits-of-amazonia", "/comparison"].includes($page.url.pathname)}
       <Settings />
     {/if}
   </div>

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -22,7 +22,7 @@
   <br />
   <div>
     <Heading tag="h5">Credits</Heading>
-    <div class="flex flex-col gap-1">
+    <div class="flex flex-col gap-2">
       <div>
         <P>
           Map design by <A href="https://www.reddit.com/user/alex3omg/" target="_blank"
@@ -45,9 +45,11 @@
 
       <div>
         <P class="group flex w-fit items-center gap-1">
-          Created with
+          Created by
+          <A href="https://github.com/Daschi1" target="_blank">Daschi</A>
+          with
           <HeartOutline
-            class="group-hover:motion-safe:animate-pulse group-hover:fill-red-500 group-hover:text-red-500"
+            class="group-hover:fill-red-500 group-hover:text-red-500 group-hover:motion-safe:animate-pulse"
           />
           and many <span><A href="/licenses">open-source projects</A>!</span>
         </P>

diff --git a/src/routes/comparison/+page.svelte b/src/routes/comparison/+page.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Map from "$lib/Map.svelte";
+</script>
+
+<svelte:head>
+  <title>Green Hell Maps - Comparison</title>
+  <meta
+    name="description"
+    content="Green Hell interactive map comparing Story Mode and Spirits of Amazonia"
+  />
+</svelte:head>
+
+<Map blend="soa-map-updated.png" src="sm-map-updated.png" />
diff --git a/static/licenses.json b/static/licenses.json
@@ -50,19 +50,19 @@
     "version": "2.1.4",
     "description": "An object schema merger/validator"
   },
-  "@sveltejs/adapter-node@5.2.1": {
+  "@sveltejs/adapter-node@5.2.2": {
     "licenses": "MIT",
     "repository": "https://github.com/sveltejs/kit",
     "name": "@sveltejs/adapter-node",
-    "version": "5.2.1",
+    "version": "5.2.2",
     "description": "Adapter for SvelteKit apps that generates a standalone Node server",
     "copyright": "Copyright (c) 2020 [these people](https://github.com/sveltejs/kit/graphs/contributors)"
   },
-  "@sveltejs/kit@2.5.21": {
+  "@sveltejs/kit@2.5.22": {
     "licenses": "MIT",
     "repository": "https://github.com/sveltejs/kit",
     "name": "@sveltejs/kit",
-    "version": "2.5.21",
+    "version": "2.5.22",
     "description": "SvelteKit is the fastest way to build Svelte apps",
     "copyright": "Copyright (c) 2020 [these people](https://github.com/sveltejs/kit/graphs/contributors)"
   },
@@ -82,65 +82,65 @@
     "version": "9.6.0",
     "description": "TypeScript definitions for eslint"
   },
-  "@typescript-eslint/eslint-plugin@8.0.1": {
+  "@typescript-eslint/eslint-plugin@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/eslint-plugin",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "TypeScript plugin for ESLint",
     "copyright": "Copyright (c) 2019 typescript-eslint and other contributors"
   },
-  "@typescript-eslint/parser@8.0.1": {
+  "@typescript-eslint/parser@8.1.0": {
     "licenses": "BSD-2-Clause",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/parser",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "An ESLint custom parser which leverages TypeScript ESTree"
   },
-  "@typescript-eslint/scope-manager@8.0.1": {
+  "@typescript-eslint/scope-manager@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/scope-manager",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "TypeScript scope analyser for ESLint",
     "copyright": "Copyright (c) 2019 typescript-eslint and other contributors"
   },
-  "@typescript-eslint/type-utils@8.0.1": {
+  "@typescript-eslint/type-utils@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/type-utils",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "Type utilities for working with TypeScript + ESLint together",
     "copyright": "Copyright (c) 2021 typescript-eslint and other contributors"
   },
-  "@typescript-eslint/types@8.0.1": {
+  "@typescript-eslint/types@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/types",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "Types for the TypeScript-ESTree AST spec",
     "copyright": "Copyright (c) 2019 typescript-eslint and other contributors"
   },
-  "@typescript-eslint/typescript-estree@8.0.1": {
+  "@typescript-eslint/typescript-estree@8.1.0": {
     "licenses": "BSD-2-Clause",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/typescript-estree",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "A parser that converts TypeScript source code into an ESTree compatible form"
   },
-  "@typescript-eslint/utils@8.0.1": {
+  "@typescript-eslint/utils@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/utils",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "Utilities for working with TypeScript + ESLint together",
     "copyright": "Copyright (c) 2019 typescript-eslint and other contributors"
   },
-  "@typescript-eslint/visitor-keys@8.0.1": {
+  "@typescript-eslint/visitor-keys@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "@typescript-eslint/visitor-keys",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "Visitor keys used to help traverse the TypeScript-ESTree AST",
     "copyright": "Copyright (c) 2019 typescript-eslint and other contributors"
   },
@@ -344,11 +344,11 @@
     "description": "Svelte parser for ESLint",
     "copyright": "Copyright (c) 2021 Yosuke Ota"
   },
-  "svelte@5.0.0-next.217": {
+  "svelte@5.0.0-next.224": {
     "licenses": "MIT",
     "repository": "https://github.com/sveltejs/svelte",
     "name": "svelte",
-    "version": "5.0.0-next.217",
+    "version": "5.0.0-next.224",
     "description": "Cybernetically enhanced web apps",
     "copyright": "Copyright (c) 2016-24 [these people](https://github.com/sveltejs/svelte/graphs/contributors)"
   },
@@ -361,19 +361,19 @@
     "description": "The fastest way to read **AND WRITE** from query search params in [sveltekit](https://github.com/sveltejs/kit).",
     "copyright": "Copyright (c) 2022 Paolo Ricciuti"
   },
-  "tailwindcss@3.4.9": {
+  "tailwindcss@3.4.10": {
     "licenses": "MIT",
     "repository": "https://github.com/tailwindlabs/tailwindcss",
     "name": "tailwindcss",
-    "version": "3.4.9",
+    "version": "3.4.10",
     "description": "A utility-first CSS framework for rapidly building custom user interfaces.",
     "copyright": "Copyright (c) Tailwind Labs, Inc."
   },
-  "typescript-eslint@8.0.1": {
+  "typescript-eslint@8.1.0": {
     "licenses": "MIT",
     "repository": "https://github.com/typescript-eslint/typescript-eslint",
     "name": "typescript-eslint",
-    "version": "8.0.1",
+    "version": "8.1.0",
     "description": "Tooling which enables you to use TypeScript with ESLint",
     "copyright": "Copyright (c) 2019 typescript-eslint and other contributors"
   },
@@ -385,12 +385,12 @@
     "version": "5.5.4",
     "description": "TypeScript is a language for application scale JavaScript development"
   },
-  "vite@5.4.0": {
+  "vite@5.4.1": {
     "licenses": "MIT",
     "repository": "https://github.com/vitejs/vite",
     "publisher": "Evan You",
     "name": "vite",
-    "version": "5.4.0",
+    "version": "5.4.1",
     "description": "Native-ESM powered web dev build tool",
     "copyright": "Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors"
   }