End screen WIP

earthrise-media · Dec 13, 2023 · b15e18b · b15e18b
1 parent 970d2df
commit b15e18b
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 39 deletions.
diff --git a/src/lib/components/EndScreenFail.svelte b/src/lib/components/EndScreenFail.svelte
@@ -30,64 +30,72 @@
   <div class="fail-screen-wrapper">
     <section id="summary">
       <p>
-        Nice try! In {$gameState.year.current - $gameState.year.start} years you managed to increase
-        food production by {prettyPercent($successMetrics.calorieProductionChange)} and feed an additional
-        {largeNumber($gameState.population.current - $gameState.population.start)} people.
+        Bad luck, it's challenging to close the food gap! Over {$gameState.year.current -
+          $gameState.year.start} years you {$successMetrics.calorieProductionChange > 0
+          ? "increased"
+          : "decreased"} global food production by {prettyPercent(
+          Math.abs($successMetrics.calorieProductionChange)
+        )}{$successMetrics.calorieProductionChange > 0 ? "," : "."}
+        {#if $successMetrics.calorieProductionChange > 0}
+          and fed an additional
+          {largeNumber($gameState.population.current - $gameState.population.start)} people without clearing
+          any more land for farming.
+        {:else}
+          Let's break that down.
+        {/if}
       </p>
-      <div class="flex align-center">
-        <Button color="error" onClick={reset}>Try again</Button>
-        <Button color="error" onClick={reset}>Undo last move</Button>
-      </div>
     </section>
     <section id="explanation">
-      <!-- <h3>Here's what went wrong</h3> -->
       <p>
         You failed to keep <b>{failedItem.label}</b>
         {failedItem.value > failedItem.limit ? "under" : "over"}
-        {failedItem.limit}{failedItem.suffix}.
+        {(failedItem.suffix === "%" ? 100 : 1) * failedItem.limit}{failedItem.suffix}.
       </p>
 
       <div class="column-chart flex-col">
         <div class="label objective text-secondary-3">{failedItem.label}</div>
         <div class="line-chart label flex-center">
           <LineChart
             warn
+            labels
+            labelFormat={failedItem.suffix === "%" && prettyPercent}
+            length={$gameState.year.current - $gameState.year.start}
             data={$successMetrics[failedItem.key].history}
             {...$successMetrics[failedItem.key].chartSettings}
           />
         </div>
       </div>
     </section>
     <section id="recommendations">
+      <p class="bold">Harness this knowledge</p>
       <p>
-        {prettyList(foods.slice(0, 3).map((f) => f.name))}
+        {@html foods
+          .slice(0, 3)
+          .map(
+            (f) =>
+              `<span class="food-item-pill"><span class="food-item-avatar bg-${f.colorId}"></span>${f.name}</span>`
+          )
+          .join(" ")}
         have the highest
-        {failedItem.label}
-        per hectare of land, whereas
-        {prettyList(
-          foods
-            .slice(-3)
-            .map((f) => f.name)
-            .reverse()
-        )}
-        have the lowest. Harness this knowledge and try to close the food gap again!
+        <b>{failedItem.label}</b>
+        per hectare of land.
       </p>
-      <Button color="error" onClick={reset}>Try again</Button>
 
-      <!-- {#each foodList as { value, count, food, unit }, i (food.id)}
-        <div class="food-card">
-          <div class="label-index">#{i + 1}</div>
-          <div class="food-item-avatar flex-center bg-{food.colorId}">{count}</div>
-          <strong class="name">{food.name}</strong>
-          <div class="value percent-value">
-            {(100 * value) / $farm[farmMetricKey].total}<span class="text-secondary-3">%</span>
-          </div>
-          <div class="value absolute-value">
-            <Number {value} duration={200} />
-            <span class="text-secondary-3">{unit.suffix}</span>
-          </div>
-        </div>
-      {/each} -->
+      <p>
+        {@html foods
+          .slice(-3)
+          .map(
+            (f) =>
+              `<span class="food-item-pill"><span class="food-item-avatar bg-${f.colorId}"></span>${f.name}</span>`
+          )
+          .reverse()
+          .join(" ")}
+        have the lowest.
+      </p>
+    </section>
+    <section id="cta">
+      <p>Now try to close the food gap again!</p>
+      <Button color="error" onClick={reset}>Try again</Button>
     </section>
   </div>
 {:else}
@@ -107,7 +115,7 @@ section
   flex-direction: column
   text-align: center
   align-items: center
-  justify-content: start
+  justify-content: center
   gap: 0 1rem
   padding: 1rem 0
   overflow: hidden
@@ -122,11 +130,14 @@ section
 
 #explanation
   .line-chart
-    height: 4rem
+    height: 3rem
     position: relative
     margin: 1rem 0 0
 
 // #recommendations
+#cta
+  grid-column: 1 / -1
+  border-top: 1px solid var(--color-error-2)
 
 
 </style>
diff --git a/src/lib/components/LineChart.svelte b/src/lib/components/LineChart.svelte
@@ -1,10 +1,15 @@
 <script lang="ts">
+  import { text } from "@sveltejs/kit"
+
   export let data: number[] = []
   export let yMax: number = 100
   export let yMin: number = 0
   export let yLimit: number | null = null
   export let yDatum: number | null = null
   export let warn: boolean = false
+  export let length: number = 0
+  export let labels: boolean = false
+  export let labelFormat: (n: number) => string = (n) => n.toFixed(0)
 
   const fy = (y: number) => 100 * (1 - (y - yMin) / (yMax - yMin))
   const isNumber = (n: any): boolean => typeof n === "number" && !isNaN(n)
@@ -16,12 +21,12 @@
       ? yLimit
       : data[0]
 
-  $: length = 10 * Math.ceil(data.length / 10)
+  $: xTicks = length ? length : 10 * Math.ceil(data.length / 10)
   $: d = `
         M0,${fy(data[0])}
         ${data
           .slice(1)
-          .map((d, i) => `L${((i + 1) * 100) / length},${fy(d)}`)
+          .map((d, i) => `L${((i + 1) * 100) / xTicks},${fy(d)}`)
           .join(" ")}
       `.replace(/\s+/g, " ")
 </script>
@@ -45,7 +50,20 @@
       <path class="data-line" {d} />
     {/if}
   </svg>
-  <svg class="text" />
+  {#if labels}
+    <svg class="text">
+      {#if yDatum !== null}
+        <text x="-4" y="{fy(yDatum)}%" text-anchor="end">
+          {yDatum === 0 ? 0 : labelFormat(yDatum)}
+        </text>
+      {/if}
+      {#if yLimit !== null}
+        <text x="-4" y="{fy(yLimit)}%" text-anchor="end">
+          {labelFormat(yLimit)}
+        </text>
+      {/if}
+    </svg>
+  {/if}
 </svg>
 
 <style lang="sass">
@@ -76,4 +94,10 @@ path
 .datum
   stroke-dasharray: 1 3
   stroke-dasharray: 0
+
+.text
+  fill: currentColor
+  font-weight: bold
+  font-size: 7px
+  dominant-baseline: central
 </style>
diff --git a/src/styles/components/food-item.sass b/src/styles/components/food-item.sass
@@ -6,3 +6,14 @@
   border-radius: 100%
   align-items: center
   justify-content: center
+
+.food-item-pill
+  display: inline-flex
+  align-items: center
+  justify-content: center
+  border-radius: 1em
+  font-size: 0.75em
+  font-weight: 600
+  gap: 2px
+  padding: 0 0.25em
+  border: 1px solid var(--color-secondary-3)