Leave scores initially unset, and show progress of filling out. Layout

is questionable.

src/routes/area_check/data.ts

@@ -58,11 +58,8 @@ export function emptyState(): State {
       schemeAreaSizeKm2: "",
       notes: "",
     },
-    // The default settings for the radio buttons go from worst to best case
-    existingScores: Array(13).fill("0"),
-    proposedScores: [4, 4, 4, 4, 4, 4, 4, 4, 8, 16, 12, 16, 16].map((x) =>
-      x.toString(),
-    ),
+    existingScores: Array(13).fill(""),
+    proposedScores: Array(13).fill(""),
     existingScoreNotes: Array(13).fill(""),
     proposedScoreNotes: Array(13).fill(""),
   };

src/routes/area_check/scorecard/+page.svelte

@@ -1,37 +1,9 @@
 <script lang="ts">
   import { Breadcrumbs, ExternalLink } from "$lib";
-  import Question from "./Question.svelte";
-  import { base } from "$app/paths";
+  import Progress from "./Progress.svelte";
   import { state } from "../data";
 
   // TODO Include bold in the choices
-
-  $: totalExisting = sum($state.existingScores.map((x) => parseInt(x)));
-  $: totalProposed = sum($state.proposedScores.map((x) => parseInt(x)));
-
-  function sum(list: number[]): number {
-    return list.reduce((total, x) => total + x, 0);
-  }
-
-  let questions = [
-    "Porosity - Walking and Wheeling",
-    "Porosity - Cycling",
-    "Crossings - Walking and Wheeling",
-    "Crossings - Cycling",
-    "Permeability - Walking and Wheeling",
-    "Permeability - Cycling",
-    "Mesh Density - Walking and Wheeling",
-    "Mesh Density - Cycling",
-    "Motorised Through-Traffic",
-    "Perimeter Treatment Design",
-    "Green Infrastructure Design",
-    "Other Internal Treatment Design",
-    "Engagement Practice",
-  ];
-
-  function formatIndex(idx: number): string {
-    return (idx + 1).toString().padStart(2, "0");
-  }
 </script>
 
 <div class="govuk-prose">
@@ -43,14 +15,5 @@
     current="Area Scorecard"
   />
 
-  <p>Total existing score: {totalExisting}</p>
-  <p>Total proposed score: {totalProposed}</p>
-
-  <ol>
-    {#each questions as label, idx}
-      <li>
-        <a href="{base}/area_check/scorecard/q{formatIndex(idx)}">{label}</a>
-      </li>
-    {/each}
-  </ol>
+  <Progress />
 </div>

src/routes/area_check/scorecard/Progress.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import { state, type State } from "../data";
+  import { base } from "$app/paths";
+
+  let questions = [
+    "Porosity - Walking and Wheeling",
+    "Porosity - Cycling",
+    "Crossings - Walking and Wheeling",
+    "Crossings - Cycling",
+    "Permeability - Walking and Wheeling",
+    "Permeability - Cycling",
+    "Mesh Density - Walking and Wheeling",
+    "Mesh Density - Cycling",
+    "Motorised Through-Traffic",
+    "Perimeter Treatment Design",
+    "Green Infrastructure Design",
+    "Other Internal Treatment Design",
+    "Engagement Practice",
+  ];
+
+  function formatIndex(idx: number): string {
+    return (idx + 1).toString().padStart(2, "0");
+  }
+
+  $: completed = getCompleted($state);
+  function getCompleted(_: State): boolean[] {
+    return Array.from(Array(questions.length).keys()).map(
+      (idx) =>
+        $state.existingScores[idx] != "" && $state.proposedScores[idx] != "",
+    );
+  }
+
+  $: totalExisting = sum($state.existingScores.map((x) => parseInt(x || "0")));
+  $: totalProposed = sum($state.proposedScores.map((x) => parseInt(x || "0")));
+
+  function sum(list: number[]): number {
+    return list.reduce((total, x) => total + x, 0);
+  }
+</script>
+
+<p>Total existing score: {totalExisting}</p>
+<p>Total proposed score: {totalProposed}</p>
+
+<ol>
+  {#each questions as label, idx}
+    <li>
+      <div style="display: flex; justify-content: space-between">
+        <a href="{base}/area_check/scorecard/q{formatIndex(idx)}">{label}</a>
+        {#if completed[idx]}
+          <strong class="govuk-tag govuk-tag--green">Done</strong>
+        {:else}
+          <strong class="govuk-tag govuk-tag--red">Incomplete</strong>
+        {/if}
+      </div>
+    </li>
+  {/each}
+</ol>

src/routes/area_check/scorecard/Question.svelte

@@ -2,6 +2,7 @@
   import { Breadcrumbs } from "$lib";
   import PrevNext from "./PrevNext.svelte";
   import FancyRadio from "./FancyRadio.svelte";
+  import Progress from "./Progress.svelte";
   import { TextArea } from "govuk-svelte";
   import { state } from "../data";
 
@@ -26,36 +27,43 @@
     current={label}
   />
 
-  <div class="govuk-width-container">
-    <PrevNext {idx} />
-    <h2>{label}</h2>
-    <slot />
-
-    <div class="govuk-grid-row">
-      <div class="govuk-grid-column-one-half">
-        <FancyRadio
-          legend="Existing"
-          {choices}
-          bind:value={$state.existingScores[idx - 1]}
-        />
-        <TextArea
-          label="Notes"
-          bind:value={$state.existingScoreNotes[idx - 1]}
-        />
-      </div>
-      <div class="govuk-grid-column-one-half">
-        <FancyRadio
-          legend="Proposed"
-          {choices}
-          bind:value={$state.proposedScores[idx - 1]}
-        />
-        <TextArea
-          label="Notes"
-          bind:value={$state.proposedScoreNotes[idx - 1]}
-        />
-      </div>
+  <PrevNext {idx} />
+  <h2>{label}</h2>
+  <slot />
+
+  <div class="three-columns">
+    <div>
+      <Progress />
     </div>
 
-    <PrevNext {idx} />
+    <div>
+      <FancyRadio
+        legend="Existing"
+        {choices}
+        bind:value={$state.existingScores[idx - 1]}
+      />
+      <TextArea label="Notes" bind:value={$state.existingScoreNotes[idx - 1]} />
+    </div>
+    <div>
+      <FancyRadio
+        legend="Proposed"
+        {choices}
+        bind:value={$state.proposedScores[idx - 1]}
+      />
+      <TextArea label="Notes" bind:value={$state.proposedScoreNotes[idx - 1]} />
+    </div>
   </div>
+
+  <PrevNext {idx} />
 </div>
+
+<style>
+  .three-columns {
+    display: flex;
+    column-gap: 2rem;
+  }
+
+  .three-columns > * {
+    width: calc((100% - 4rem) / 3);
+  }
+</style>