New data groups and color scheme

src/ambient.d.ts

@@ -5,7 +5,6 @@ declare global {
     type: string
     proteinType: string
     yieldPerHa: number
-    yieldEstimated: number
     proteinRatio: number
     calorieRatio: number
     carbRatio: number
@@ -15,8 +14,7 @@ declare global {
     landPerKg: number
     waterPerKg: number
     eutrophyPerKg: number
-    pricePerKg: number
-    media: string
+    landAllocation: number
     sources: string
     description: string
     colorId?: string

src/lib/components/EndScreen.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { tweened } from "svelte/motion"
+  import { fly } from "svelte/transition"
+  import { linear } from "svelte/easing"
+
+  import { farm, gameState, successMetrics } from "$lib/stores/state"
+
+  import Modal from "$lib/components/Modal.svelte"
+  import Button from "$lib/components/Button.svelte"
+  import Progress from "$lib/components/Progress.svelte"
+
+  let slideIndex = 0
+  let slides = ["End slide"]
+  let showEndScreen = true
+
+  const close = () => {
+    showEndScreen = false
+  }
+</script>
+
+{#if showEndScreen || $successMetrics.hasSucceeded || $successMetrics.hasFailed}
+  <Modal fullscreen {close}>
+    <h2 slot="title">Game over • {$successMetrics.hasSucceeded ? "Success!" : "You failed!"}</h2>
+    <div class="wrapper">
+      <div class="slide-wrap">
+        {#if slideIndex === 0}
+          <div class="slide" in:fly={{ x: 1000 }} out:fly={{ x: -1000 }}>
+            {#if $successMetrics.hasSucceeded}
+              <p>
+                You were able to supply 850 people with adequate nutrition without clearing more
+                land.
+              </p>
+            {:else}
+              <p>You failed to supply 850 people with adequate nutrition in time.</p>
+            {/if}
+            <Button
+              color="secondary"
+              onClick={() => {
+                $farm.reset()
+                $farm = $farm
+                $gameState.reset()
+                $gameState = $gameState
+                showEndScreen = false
+              }}
+            >
+              Try again &rarr;
+            </Button>
+          </div>
+        {/if}
+      </div>
+      <div class="pager-wrap">
+        <div class="pagers">
+          {#each slides as s, i}
+            <button
+              class="pager"
+              class:active={slideIndex === i}
+              on:click={() => (slideIndex = i)}
+            />
+          {/each}
+          <div class="label">{slideIndex + 1} / {slides.length}</div>
+        </div>
+        <div class="arrows">
+          <Button disabled={slideIndex === 0} onClick={() => (slideIndex -= 1)}>&larr;</Button>
+          <Button
+            color="secondary"
+            onClick={() => (slideIndex === slides.length - 1 ? close() : (slideIndex += 1))}
+          >
+            {slideIndex === slides.length - 1 ? "Enter" : "Next"}
+            &rarr;</Button
+          >
+        </div>
+      </div>
+    </div>
+  </Modal>
+{/if}
+
+<style lang="sass">
+.wrapper
+  display: flex
+  flex-direction: column
+  height: 100%
+
+.slide-wrap
+  position: relative
+  flex-grow: 1
+
+.slide
+  position: absolute
+  top: 0
+  left: 0
+  right: 0
+  bottom: 0
+  font-size: 0.875rem
+
+.pager-wrap
+  position: relative
+  display: flex
+  justify-content: space-between
+  align-items: flex-end
+
+.pagers
+  display: flex
+  gap: 0.25rem
+
+  .label
+    margin-left: 0.25rem
+
+.pager
+  width: 1em
+  height: 1em
+  cursor: pointer
+  border-radius: 100%
+  border: none
+  transition: background 0.2s ease-in-out
+  background: var(--color-primary-3)
+
+  &.active
+    background: var(--color-primary-1)
+
+p
+  margin-bottom: 1rem
+  text-align: center
+
+</style>

src/lib/components/FoodMenu.svelte

@@ -47,23 +47,30 @@
 <style lang="sass">
 #food-menu-wrapper
   display: grid
-  grid-template-columns: 1fr 2fr
+  grid-template-columns: 2fr 2fr
   grid-template-areas: "animal plant"
   grid-gap: 1.5rem
   margin-top: 1rem
   align-items: start
 
+.group-animal,
+.group-plant
+  grid-template-columns: 1fr 1fr
+  grid-template-rows: auto repeat(4, 1fr)
+  grid-auto-flow: column
+  align-items: start
+
 .group-animal
   grid-area: animal
-
+  
 .group-plant
   grid-area: plant
-  grid-template-columns: 1fr 1fr
 
 .button-group
   display: grid
+  align-items: start
   grid-gap: 0.25rem
-  gap: 0.25rem 0.375rem
+  gap: 0.25rem 0.25rem
 
 .label
   grid-column: 1 / -1

src/lib/components/Modal.svelte

@@ -6,6 +6,7 @@
 
   export let close = () => {}
   export let classes = ""
+  export let fullscreen = false
 
   const handleKeydown = (e: KeyboardEvent) => {
     if (e.key === "Escape") {
@@ -26,6 +27,7 @@
   role="dialog"
   tabindex="-1"
   aria-modal="true"
+  class:fullscreen
   on:click={close}
   on:keydown={handleKeydown}
   in:fade={{ duration: 200 }}
@@ -87,6 +89,14 @@ $radius: 1rem
   color: var(--color-primary-1)
   background: var(--color-secondary-1)
 
+  .fullscreen &
+    max-height: 100vh
+    max-height: 100svh
+    max-width: 100vw
+    height: 100%
+    width: 100%
+    border-radius: 0
+
   .has-title &
     padding: $radius