figure out scope handling, and add EntryStatusLine.

src/app.d.ts

@@ -1,10 +1,15 @@
 /// <reference types="@sveltejs/kit" />
 
+import type Scope from "$lib/models/scope";
+
 // See https://kit.svelte.dev/docs/types#the-app-namespace
 // for information about these interfaces
-declare namespace App {
-	// interface Locals {}
+declare global {
+	declare namespace App {
 		// interface Platform {}
 		// interface Session {}
-	// interface Stuff {}
+		interface Stuff {
+			scope?: Scope
+		}
+	}
 }

src/lib/components/frontpage/RequirementLink.svelte

@@ -9,6 +9,7 @@
   import EntryProgress from "../layout/EntryProgress.svelte";
   import EntryProgressRow from "../layout/EntryProgressRow.svelte";
   import EntryStatusIcon from "../layout/EntryStatusIcon.svelte";
+import EntryStatusLine from "../layout/EntryStatusLine.svelte";
   import Icon from "../layout/Icon.svelte";
 
   export let requirement: StandaloneRequirement
@@ -26,6 +27,7 @@
     <EntryStatusIcon status={requirement.status} />
     <EntryName subtitle={requirement.project.name}>{requirement.name}</EntryName>
     {#if !compact}
+      <EntryStatusLine status={requirement.status} />
       <EntryDescription>{requirement.description}</EntryDescription>
     {/if}
     <EntryProgressRow>

src/lib/components/frontpage/SprintLink.svelte

@@ -50,9 +50,10 @@ import Status from "$lib/models/status";
         break;
       }
       case "requirements": {
+        // Completed, failed or dropped should fix.
         aggregate = calculateAggregate(sprint.requirements.map(r => (
           r.status >= Status.Completed
-          ? r.stats.map(s => ({...s, acquired: s.required}))
+          ? r.stats.map(s => ({...s, acquired: Math.max(s.required, s.acquired)}))
           : r.stats
         )).flat());
         break;

src/lib/components/layout/EntryStatusLine.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type Status from "$lib/models/status";
+import type { IconName } from "./Icon.svelte";
+import Icon from "./Icon.svelte";
+  import StatusColor from "./StatusColor.svelte";
+  export let status: Status
+
+  let statusText: string = "Unknown";
+  let statusIcon: IconName = "question";
+
+  $: switch (status) {
+    case 0: 
+      statusIcon = "hourglass";
+      statusText = "Blocked";
+      break;
+    case 1: 
+      statusIcon = "lightbulb";
+      statusText = "Available";
+      break;
+    case 2: 
+      statusIcon = "calendar";
+      statusText = "Background";
+      break;
+    case 3: 
+      statusIcon = "spinner";
+      statusText = "Active";
+      break;
+    case 4: 
+      statusIcon = "check";
+      statusText = "Completed";
+      break;
+    case 5: 
+      statusIcon = "times";
+      statusText = "Failed";
+      break;
+    case 6: 
+      statusIcon = "times";
+      statusText = "Dropped";
+      break;
+  }
+</script>
+
+<div class="entry-status">
+  <StatusColor status={status}>
+    <Icon name={statusIcon} />
+    <span>{statusText}</span>
+  </StatusColor>
+</div>
+
+<style lang="scss">
+  @import "../colors.sass";
+
+  div.entry-status {
+    font-size: 0.75em;
+    font-weight: 600;
+    opacity: $opacity-entry5;
+
+    :global(.icon) {
+      font-size: 0.75em;
+    }
+  }
+</style>

src/lib/models/scope.ts

@@ -1,7 +1,9 @@
 import type { ProjectEntry } from "./project";
+import type Stat from "./stat";
 
 export default interface Scope extends ScopeEntry {
   activeProjects: ProjectEntry[]
+  stats: Stat[]
 }
 
 export interface ScopeEntry {

src/routes/[scope].json.ts

@@ -0,0 +1,78 @@
+import type { RequestHandler } from "@sveltejs/kit"
+import Status from "$lib/models/status"
+import type Scope from "$lib/models/scope"
+
+export const get: RequestHandler = async({params}) => {
+  const scopeId = parseInt(params.scope);
+  const scope = scopes.find(s => s.id === scopeId);
+  if (scope === null) {
+    return {
+      status: 404,
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        message: "Scope not found",
+      }),
+    }
+  }
+
+  return {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      scope
+    }),
+  }
+}
+
+const scopes: Scope[] = [
+  {
+    id: 1, name: "3D Modeling", abbreviation: "3D",
+    stats: [
+      {id: 101, name: "Asset", weight: 0.1, description: "Some description"},
+      {id: 102, name: "Tweak", weight: 0.2, description: "Some description"},
+      {
+        id: 103, name: "Complexity", weight: 1, description: "Some description",
+        allowedAmounts: {
+          "Basic": 1,
+          "Medium": 3,
+          "Complex": 6,
+          "Excessive": 12,
+        }
+      },
+      {id: 104, name: "Hard Surface", weight: 0.4, description: "Some description"},
+      {id: 105, name: "UV Mapping", weight: 0.2, description: "Some description"},
+      {id: 106, name: "Third-Party Asset", weight: 0.1, description: "Some description"},
+      {id: 107, name: "Material", weight: 0.1, description: "Some description"},
+    ],
+    activeProjects: [
+      {id: 1001, name: "3D Maps: Proving the Concept", status: Status.Active},
+      {id: 1002, name: "Redrock HQ", status: Status.Active},
+      {id: 1003, name: "Tutorial: Realistic Environments", status: Status.Background},
+    ]
+  },
+  {
+    id: 2, name: "Roleplay", abbreviation: "RP",
+    stats: [
+      {id: 201, name: "Story", weight: 3, description: "Some description"},
+      {id: 202, name: "Story Word", weight: 0.002, description: "Some description"},
+      {id: 203, name: "Worldbuilding", weight: 0.50, description: "Some description"},
+      {id: 204, name: "Characterbuilding", weight: 0.50, description: "Some description"},
+      {id: 205, name: "Note", weight: 1, description: "Some description"},
+      {id: 206, name: "Wiki Section", weight: 1, description: "Some description"},
+      {id: 207, name: "Wiki Research", weight: 0.5, description: "Some description"},
+      {id: 208, name: "Wiki Complexity", weight: 0.5, description: "Some description"},
+    ],
+    activeProjects: [
+      {id: 2001, name: "Ilyna T'Rea", status: Status.Active},
+      {id: 2002, name: "Renala T'Iavay", status: Status.Active},
+      {id: 2003, name: "Background Stories", status: Status.Background},
+    ]
+  },
+  //{id: 3, name: "Minecraft", abbreviation: "MC"},
+  //{id: 4, name: "Coding", abbreviation: "CODE"},
+  //{id: 5, name: "System Administration", abbreviation: "SA"},
+]

src/routes/[scope]/__layout.svelte

@@ -0,0 +1,32 @@
+<script lang="ts" context="module">
+  import type { Load } from "@sveltejs/kit/types/internal";
+
+  export const load: Load = async({ fetch, params }) => {
+		const res = await fetch(`/${params.scope}.json`);
+
+		if (res.ok) {
+			const data = await res.json();
+
+			return {
+				props: {
+          ...data,
+        },
+        stuff: {
+          scope: data.scope,
+        }
+			};
+		}
+
+		return;
+	}
+</script>
+
+<script lang="ts">
+  import type Scope from "$lib/models/scope";
+
+  export let scope: Scope;
+</script>
+
+<h1>{scope.name}</h1>
+
+<slot></slot>

src/routes/[scope]/index.svelte

@@ -0,0 +1,20 @@
+<script lang="ts" context="module">
+  import type { Load, LoadInput } from "@sveltejs/kit/types/internal";
+
+  export const load: Load = async({ stuff }) => {
+		return {
+			props: {
+				scope: stuff.scope,
+			}
+		};
+	}
+</script>
+
+<script lang="ts">
+  import type Scope from "$lib/models/scope";
+	import { page } from "$app/stores";
+
+  export let scope: Scope;
+</script>
+
+<h1>{$page.stuff.scope.name}</h1>