Gestures and responsiveness

src/lib/components/Button.svelte

@@ -61,6 +61,7 @@ a, button
 
   &.bare
     background: none
+    color: inherit
 
   &:disabled
     cursor: not-allowed

src/lib/components/Farm.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
   import { onMount } from "svelte"
   import { base } from "$app/paths"
-  import { scale } from "svelte/transition"
+  import { fade, scale } from "svelte/transition"
   import { backOut as easing } from "svelte/easing"
 
   import { pan, pinch } from "svelte-gestures"
 
   import { farm, userState, gameState, gameHistory } from "$lib/stores/state"
+  import { get } from "svelte/store"
+  import Button from "./Button.svelte"
+  import Icon from "./Icon.svelte"
 
   export let levitate = false // animate the farm levitating
   export let highlightChanges = false // highlight squares different from initial grid
@@ -17,6 +20,9 @@
   let farmWrapperElement: HTMLDivElement
   let transform = { x: 0, y: 0, z: 1, cx: 0, cy: 0, cz: 1, x0: 0, y0: 0 }
 
+  const minZoom = 0.5
+  const maxZoom = 3.5
+
   const isSwappable = (food: Food) => food.id !== $userState.itemSelectedForSwap?.id
 
   const swapFoodItem = (e: MouseEvent, x: number, y: number) => {
@@ -55,7 +61,7 @@
   use:pan={{ delay: 0 }}
   use:pinch={{ delay: 0 }}
   on:pandown={(e) => {
-    if (e.detail.event.pointerType === "mouse") disableGestures = true
+    if (e.detail.event.pointerType === "mouse") disableGestures = false
     else disableGestures = false
   }}
   on:pan={(e) => {
@@ -77,20 +83,51 @@
   on:pinch={(e) => {
     if (disableGestures) return
     if (isNewPinch) {
+      transform.x0 = e.detail.center.x
+      transform.y0 = e.detail.center.y
+      transform.cx = transform.x
+      transform.cy = transform.y
       transform.cz = transform.z
       isNewPinch = false
     }
-    transform.z = e.detail.scale * transform.cz
+
+    const { scale } = e.detail
+    const { cx, cy, cz } = transform
+
+    if (scale > 1 && transform.z >= maxZoom) return
+    if (scale < 1 && transform.z <= minZoom) return
+
+    transform.x = cx * scale
+    transform.y = cy * scale
+    transform.z = Math.max(Math.min(scale * cz, maxZoom), minZoom)
   }}
   on:wheel={(e) => {
     const delta = e.deltaY / 100
-    transform.z = Math.max(0.5, transform.z - delta)
+
+    if (delta < 0 && transform.z >= maxZoom) return
+    if (delta > 0 && transform.z <= minZoom) return
+
+    const { top, left, width, height } = farmWrapperElement.getBoundingClientRect()
+
+    const cx = e.clientX - (left + width / 2) // center of the farm from the left
+    const cy = e.clientY - (top + height / 2) // center of the farm from the top
+
+    transform.x += (delta * (cx - transform.x)) / transform.z
+    transform.y += (delta * (cy - transform.y)) / transform.z
+    transform.z = Math.max(Math.min(transform.z - delta, maxZoom), minZoom)
   }}
   on:pinchup={(e) => {
     isNewPinch = true
   }}
   class:levitate
 >
+  {#if transform.x || transform.y || transform.z !== 1}
+    <div transition:fade id="reset-transform-button" data-tooltip="Re-center">
+      <Button bare onClick={onResize}>
+        <Icon type="center-focus"></Icon>
+      </Button>
+    </div>
+  {/if}
   <div
     id="gesture-element"
     style="transform: translate3d({transform.x}px, {transform.y}px, 0) scale({transform.z})"
@@ -153,10 +190,12 @@
 
 #farm-wrapper
   width: 100%
+  max-height: 100%
   overflow: hidden
-  padding-bottom: 12.5%
+  padding-bottom: 10%
   display: flex
   align-items: center
+  position: relative
   justify-content: center
   border-radius: var(--border-radius)
   transform-origin: center
@@ -170,6 +209,26 @@
     -webkit-transform-origin: center
     -webkit-transform-style: preserve-3d
 
+#reset-transform-button
+  position: absolute
+  top: 0
+  right: 0
+  z-index: 2
+  width: 2.5rem
+  height: 2.5rem
+  font-size: 2rem
+  display: flex
+  align-items: center
+  justify-content: center
+  margin: 0.25rem
+  color: var(--color-secondary-1)
+  background: var(--color-primary-1)
+  border-radius: 2rem
+
+  :global(button)
+    padding: 0
+    line-height: 0
+
 #gesture-element
   width: 100%
 
@@ -180,7 +239,6 @@
   display: grid
   grid-template-rows: repeat(10, 1fr)
   grid-template-columns: repeat(10, 1fr)
-  // gap: 1px
   position: relative
   z-index: 1
   background: var(--color-primary-0)
@@ -289,8 +347,10 @@
     .food-item-fill
       opacity: 1
 
-@media (max-width: $screen-sm)
-
-  // .food-item-image
+@media (max-height: 650px)
+  #farm-wrapper
+    padding-bottom: 5%
+  #land-grid
+    width: 60%
 
 </style>

src/lib/components/FoodStatsTable.svelte

@@ -316,16 +316,16 @@
     &.active
       color: var(--color-secondary-1)
 
-@media (max-width: 1120px) and (min-width: $screen-sm)
+  .td
+    font-size: 0.625rem
+
+@media (max-width: 1360px) and (min-width: $screen-sm)
   .food-items-grid-body
     margin: 0 -0.5rem
 
   .food-card
     grid-template-columns: minmax(11ch, 11fr) minmax(8ch, 8fr) minmax(7ch, 7fr) minmax(9ch, 9fr) minmax(8.5ch, 8.5fr)
 
-    .th
-      font-size: 0.5rem
-
 @media (max-width: $screen-sm)
   .food-items-grid
     position: fixed

src/lib/data/icon.ts

@@ -2,6 +2,8 @@
 export const paths = {
   menu: "M4 18a.97.97 0 0 1-.71-.29A.97.97 0 0 1 3 17c0-.28.1-.52.29-.71.19-.2.43-.29.71-.29h16c.28 0 .52.1.71.29.2.19.3.43.29.71 0 .28-.1.52-.29.71A.9.9 0 0 1 20 18H4Zm0-5a.97.97 0 0 1-.71-.29A.97.97 0 0 1 3 12c0-.28.1-.52.29-.71.19-.2.43-.29.71-.29h16c.28 0 .52.1.71.29.2.19.3.43.29.71 0 .28-.1.52-.29.71A.9.9 0 0 1 20 13H4Zm0-5a.97.97 0 0 1-.71-.29A.97.97 0 0 1 3 7c0-.28.1-.52.29-.71.19-.2.43-.29.71-.29h16c.28 0 .52.1.71.29.2.19.3.43.29.71 0 .28-.1.52-.29.71A.9.9 0 0 1 20 8H4Z",
   undo: "M7.68 20a1 1 0 0 1-.73-.3 1 1 0 0 1-.3-.73c0-.3.1-.54.3-.73a1 1 0 0 1 .73-.3h6.28c1.08 0 2.02-.34 2.81-1.03.8-.68 1.2-1.54 1.2-2.57 0-1.03-.4-1.89-1.2-2.57a4.18 4.18 0 0 0-2.81-1.03H7.47l1.96 1.95c.19.2.28.43.28.72 0 .3-.1.54-.28.72a.98.98 0 0 1-.72.29c-.3 0-.53-.1-.72-.29l-3.7-3.7a.9.9 0 0 1-.23-.34A1.1 1.1 0 0 1 4 9.71a.92.92 0 0 1 .28-.72l3.7-3.7A.98.98 0 0 1 8.72 5c.29 0 .53.1.72.28.19.2.28.43.28.72 0 .3-.1.54-.28.72L7.47 8.68h6.49c1.66 0 3.09.54 4.28 1.62a5.22 5.22 0 0 1 1.79 4.04c0 1.61-.6 2.96-1.79 4.04A6.16 6.16 0 0 1 13.96 20H7.68Z",
+  "center-focus":
+    "M5.78 20c-.5 0-.9-.17-1.26-.52A1.72 1.72 0 0 1 4 18.22v-3.55h1.78v3.55h3.55V20H5.78Zm8.89 0v-1.78h3.55v-3.55H20v3.55c0 .5-.17.91-.52 1.26a1.7 1.7 0 0 1-1.26.52h-3.55ZM4 9.33V5.78c0-.5.17-.9.52-1.26.35-.35.77-.52 1.26-.52h3.55v1.78H5.78v3.55H4Zm14.22 0V5.78h-3.55V4h3.55c.5 0 .91.17 1.26.52s.52.77.52 1.26v3.55h-1.78ZM12 14.67c-.74 0-1.37-.26-1.89-.78A2.57 2.57 0 0 1 9.33 12c0-.74.26-1.37.78-1.89A2.57 2.57 0 0 1 12 9.33c.74 0 1.37.26 1.89.78.52.52.78 1.15.78 1.89s-.26 1.37-.78 1.89c-.52.52-1.15.78-1.89.78Z",
   tables:
     "M9.039 5.385h1.269v3.877h9.308v1.292h-9.308v7.754h-1.27v-7.754H4.386V9.262H9.04V5.385Z M19.615 19V4.692a.692.692 0 0 1 1.385 0V19a.692.692 0 1 1-1.385 0ZM3 19V4.692a.692.692 0 0 1 1.385 0V19A.692.692 0 1 1 3 19Z M3.692 4h16.616a.692.692 0 0 1 0 1.385H3.692a.692.692 0 1 1 0-1.385Zm0 14.308h16.616a.692.692 0 0 1 0 1.384H3.692a.692.692 0 1 1 0-1.384Z",
   close:

src/routes/+layout.svelte

@@ -5,10 +5,29 @@
   import Menu from "$lib/components/Menu.svelte"
   import ModalShare from "$lib/components/ModalShare.svelte"
   import ModalOrientation from "$lib/components/ModalOrientation.svelte"
+  import { dev } from "$app/environment"
+
+  let vh = 0,
+    vw = 0
 </script>
 
 <slot />
 
 <Menu />
 <ModalShare />
 <ModalOrientation />
+
+<svelte:window bind:innerHeight={vh} bind:innerWidth={vw} />
+
+{#if dev}
+  <div id="size-ui" class="bg-primary-0 label bold">{vw}, {vh}</div>
+{/if}
+
+<style lang="sass">
+#size-ui
+  position: fixed
+  right: 0
+  bottom: 0
+  padding: 0.25rem
+  z-index: 1000
+</style>

src/styles/core/base.sass

@@ -36,8 +36,11 @@ html,body
   &::-webkit-scrollbar
     display: none
 
-  @media (min-height: 700px) and (min-width: 1080px)
+  @media (min-height: 620px) and (min-width: 1250px)
+    font-size: 18px
+
+  @media (min-height: 620px) and (min-width: 1280px)
     font-size: 20px
 
-  @media (max-width: $screen-sm)
+  @media (max-width: $screen-sm), (max-height: 520px)
     font-size: 14px