WIP: end screen

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

Hide file tree

Showing 7 changed files with 194 additions and 31 deletions.
diff --git a/src/lib/components/EndScreen.svelte b/src/lib/components/EndScreen.svelte
@@ -2,56 +2,48 @@
   import { fly, fade } from "svelte/transition"
   import { backOut as easing, linear } from "svelte/easing"
 
-  import { userState, gameState, gameSettings, successMetrics, farm } from "$lib/stores/state"
+  import {
+    userState,
+    gameState,
+    gameSettings,
+    successMetrics,
+    farm,
+    gameHistory
+  } from "$lib/stores/state"
 
-  import BlockGameState from "$lib/components/BlockGameState.svelte"
-  import Button from "$lib/components/Button.svelte"
   import Modal from "$lib/components/Modal.svelte"
-  import Farm from "$lib/components/Farm.svelte"
+  import BlockGameState from "$lib/components/BlockGameState.svelte"
+  import EndScreenFail from "$lib/components/EndScreenFail.svelte"
+  import EndScreenSuccess from "$lib/components/EndScreenSuccess.svelte"
 
   let slideIndex = 0
 
   const flyIn = { y: 8, easing, delay: 600, duration: 1200 }
 
-  const restart = () => {
+  const reset = () => {
     $farm.reset()
-    $farm = $farm
     $gameState.reset()
+    $farm = $farm
+    $gameHistory = []
     $gameState = $gameState
+    $gameHistory = $gameHistory
   }
 
   $: $userState.isGameComplete = $successMetrics.hasSucceeded || $successMetrics.hasFailed
 </script>
 
 {#if $userState.isGameComplete}
-  <Modal id="end-screen" isError={!$successMetrics.hasSucceeded} fullscreen>
+  <Modal id="end-screen" isError={!$successMetrics.hasSucceeded} fullscreen fullWidth>
     <div class="end-wrapper slide-{slideIndex}">
       <div class="slide-wrap">
         <div class="slide" out:fade in:fly={flyIn}>
-          <h1 class="title slide-title-0">
-            You {$successMetrics.hasSucceeded ? "Won" : "Lost"}!
-          </h1>
+          <h2 class="slide-title">
+            You {$successMetrics.hasSucceeded ? "Won 🎊" : "Lost 😮‍💨"}
+          </h2>
           {#if $successMetrics.hasFailed}
-            <p><b>Here's your problem:</b></p>
-            <p>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquam, ratione
-              eligendi ex fugiat soluta reprehenderit delectus debitis, blanditiis deserunt
-              perferendis molestias expedita. Vitae, non? Totam illo molestiae vitae, iste non
-              perspiciatis beatae facilis sapiente odit delectus nihil.
-            </p>
-            <Button color="error" onClick={restart}>Try again?</Button>
+            <EndScreenFail {reset} />
           {:else if $successMetrics.hasSucceeded}
-            <p>Congratulations, you closed the food gap!</p>
-            <Farm levitate />
-            <div class="flex buttons">
-              <Button
-                color="primary"
-                target="_blank"
-                link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-                onClick={restart}>Share</Button
-              >
-              <Button color="secondary" onClick={restart}>Play again</Button>
-            </div>
+            <EndScreenSuccess {reset} />
           {:else}
             <p>An error has occurred.</p>
           {/if}
@@ -85,6 +77,9 @@
   font-size: 1.125rem
   line-height: 1.3
 
+.slide-title
+  font-size: 2rem
+
 .buttons
   gap: 0.75rem
 

diff --git a/src/lib/components/EndScreenFail.svelte b/src/lib/components/EndScreenFail.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { successMetrics, gameState, farm } from "$lib/stores/state"
+
+  import LineChart from "$lib/components/LineChart.svelte"
+  import Button from "$lib/components/Button.svelte"
+  import { largeNumber, prettyPercent, prettyList } from "$lib/utils/written"
+  import { foodItems } from "$lib/data/foods"
+
+  export let reset = () => {}
+
+  type FailureItem = typeof $successMetrics.emissionsChange
+
+  const failedItem = [
+    $successMetrics.emissionsChange,
+    $successMetrics.eutrophyChange,
+    $successMetrics.waterUseChange,
+    $successMetrics.proteinPerPersonPerDay
+  ].find((o) => o.fail) as FailureItem
+
+  const farmMetricKey = failedItem.farmMetricKey as FarmMetricKey
+  const foodMetricKey = failedItem.foodMetricKey as keyof Food
+  const foodList = $farm[farmMetricKey].byFood
+  const foods = foodItems.sort(
+    (a, b) => b.yieldPerHa * b[foodMetricKey] - a.yieldPerHa * a[foodMetricKey]
+  )
+  console.log(foods)
+</script>
+
+{#if failedItem}
+  <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.
+      </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}.
+      </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
+            data={$successMetrics[failedItem.key].history}
+            {...$successMetrics[failedItem.key].chartSettings}
+          />
+        </div>
+      </div>
+    </section>
+    <section id="recommendations">
+      <p>
+        {prettyList(foods.slice(0, 3).map((f) => f.name))}
+        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!
+      </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} -->
+    </section>
+  </div>
+{:else}
+  <p>An error has occurred.</p>
+{/if}
+
+<style lang="sass">
+
+.fail-screen-wrapper
+  display: grid
+  grid-template-columns: repeat(2, minmax(0, 1fr))
+  grid-template-rows: repeat(2, minmax(0, 1fr))
+  gap: 2rem
+
+section
+  display: flex
+  flex-direction: column
+  text-align: center
+  align-items: center
+  justify-content: start
+  gap: 0 1rem
+  padding: 1rem 0
+  overflow: hidden
+
+#summary
+  padding-top: 0
+  grid-column: 1/-1
+  border-bottom: 1px solid var(--color-error-2)
+
+  > *
+    max-width: 550px
+
+#explanation
+  .line-chart
+    height: 4rem
+    position: relative
+    margin: 1rem 0 0
+
+// #recommendations
+
+
+</style>
diff --git a/src/lib/components/EndScreenSuccess.svelte b/src/lib/components/EndScreenSuccess.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Button from "$lib/components/Button.svelte"
+  import Farm from "$lib/components/Farm.svelte"
+
+  export let reset = () => {}
+</script>
+
+<p>Congratulations, you closed the food gap!</p>
+<Farm levitate />
+<div class="flex buttons">
+  <Button
+    color="primary"
+    target="_blank"
+    link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+    onClick={reset}
+    >Share
+  </Button>
+  <Button color="secondary" onClick={reset}>Play again</Button>
+</div>
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
@@ -8,6 +8,7 @@
   export let close = () => {}
   export let classList = ""
   export let isError = false
+  export let fullWidth = false
   export let fullscreen = false
   export let durationIn = 200
   export let durationOut = 100
@@ -33,6 +34,7 @@
   aria-modal="true"
   class:fullscreen
   class:error={isError}
+  class:w-full={fullWidth}
   on:click={close}
   on:keydown={handleKeydown}
   in:fade={{ duration: durationIn }}
@@ -111,6 +113,9 @@ $radius: 1rem
     color: var(--color-secondary-1)
     background: transparent
 
+  .w-full &
+    width: 100%
+
   .has-title &
     padding: $radius
 

diff --git a/src/lib/stores/state.ts b/src/lib/stores/state.ts
@@ -95,7 +95,10 @@ export const successMetrics = derived(
       limit: proteinPerPersonPerDayLimit,
       objective: `Keep above ${proteinPerPersonPerDayLimit}g`,
       warn: proteinPerPersonPerDayValue < proteinPerPersonPerDayLimit + 3,
+      fail: proteinPerPersonPerDayValue < proteinPerPersonPerDayLimit,
       history: $gameHistory.map((o) => o.proteinPerPersonPerDay),
+      farmMetricKey: "protein",
+      foodMetricKey: "proteinRatio",
       chartSettings: {
         yLimit: proteinPerPersonPerDayLimit,
         yMin: proteinPerPersonPerDayLimit,
@@ -111,7 +114,10 @@ export const successMetrics = derived(
       limit: emissionsChangeLimit,
       objective: `Keep below +${100 * emissionsChangeLimit}%`,
       warn: emissionsChangeValue > emissionsChangeLimit - 0.02,
+      fail: emissionsChangeValue > emissionsChangeLimit,
       history: $gameHistory.map((o) => o.emissionsChange),
+      farmMetricKey: "emissions",
+      foodMetricKey: "emissionsPerKg",
       chartSettings: {
         yDatum: 0,
         yLimit: emissionsChangeLimit,
@@ -128,7 +134,10 @@ export const successMetrics = derived(
       limit: waterUseChangeLimit,
       objective: `Keep below +${100 * waterUseChangeLimit}%`,
       warn: waterUseChangeValue > waterUseChangeLimit - 0.05,
+      fail: waterUseChangeValue > waterUseChangeLimit,
       history: $gameHistory.map((o) => o.waterUseChange),
+      farmMetricKey: "waterUse",
+      foodMetricKey: "waterUsePerKg",
       chartSettings: {
         yDatum: 0,
         yLimit: waterUseChangeLimit,
@@ -144,7 +153,10 @@ export const successMetrics = derived(
       limit: eutrophyChangeLimit,
       objective: `Keep below +${100 * eutrophyChangeLimit}%`,
       warn: eutrophyChangeValue > eutrophyChangeLimit - 0.05,
+      fail: eutrophyChangeValue > eutrophyChangeLimit,
       history: $gameHistory.map((o) => o.eutrophyChange),
+      farmMetricKey: "eutrophy",
+      foodMetricKey: "eutrophyPerKg",
       chartSettings: {
         yDatum: 0,
         yLimit: eutrophyChangeLimit,

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -63,7 +63,7 @@
   <FoodInformationCard />
   <Tooltip />
   <!-- <WelcomeScreen /> -->
-  <!-- <EndScreen /> -->
+  <EndScreen />
   <AboutScreen />
   <!-- <Toast /> -->
 </main>

diff --git a/src/styles/core/typography.sass b/src/styles/core/typography.sass
@@ -3,7 +3,7 @@ p
 
 h1,h2,h3
   font-weight: bold
-  margin-bottom: 0.5em
+  margin-bottom: 0.4em
 
 .title
   font-size: 3rem