Adjust movement when diver is moving up and down

src/components/AnimatedAnimals.vue

@@ -17,7 +17,7 @@ onMounted(() => {
 <template>
     <div ref="animal" class="animals" :class="{ 'left': props.startLeft, 'right': !props.startLeft }" :style="{
         'background-image': `url(${props.image})`,
-        'top': `${props.depth}vh`,
+        'top': `${props.depth}em`,
         'height': `${props.size}em`,
         'width': `${props.size}em`,
         'transform': `rotate(${props.rotate || 0}deg) scaleX(${props.scaleX || 1})`,

src/components/DiveStage.vue

@@ -8,7 +8,8 @@ const store = useAnimals()
 const props = defineProps({ pressure: Number })
 
 const marginTop = computed(() => {
-    return props.pressure ? `-${(props.pressure - 1) * 40}%` : '0%'
+
+    return props.pressure ? `-${(props.pressure - 1) * 10 * 180 / 120}em` : '0%'
 })
 
 </script>
@@ -28,7 +29,7 @@ const marginTop = computed(() => {
 
 .sea {
     background: linear-gradient(180deg, rgba(29, 149, 215, 1) 5%, rgba(27, 134, 210, 1) 10%, rgba(24, 128, 197, 1) 15%, rgba(25, 121, 191, 1) 20%, rgba(22, 117, 180, 1) 30%, rgba(20, 101, 161, 1) 40%, rgba(16, 85, 139, 1) 50%, rgba(12, 54, 92, 1) 60%, rgb(5, 39, 70) 100%);
-    height: 1000vh;
-    transition: margin 700ms linear;
+    height: 200em;
+    transition: margin 500ms linear;
 }
 </style>

src/core/ScubaDiver.ts

@@ -50,7 +50,7 @@ export const initialDiver: Scubadiver = {
 
 export function goDown(scubadivers: Scubadiver): Scubadiver {
   const accelerator = scubadivers.dive.pressure >= 4 ? Math.round(scubadivers.dive.pressure) / 3 : 0
-  const delta = (scubadivers.flotability / -2) * accelerator || 0.1
+  const delta = (scubadivers.flotability / -2) * accelerator || 0.5
   const depth = Math.min(120, scubadivers.dive.depth + delta)
   const maxDepth = Math.max(depth, scubadivers.dive.maxDepth)
   const pressure = getPressure(depth)
@@ -61,7 +61,7 @@ export function goDown(scubadivers: Scubadiver): Scubadiver {
 }
 
 export function goUp(scubadivers: Scubadiver): Scubadiver {
-  const delta = scubadivers.flotability > 0 ? scubadivers.flotability / -2 : -0.1
+  const delta = scubadivers.flotability > 0 ? scubadivers.flotability / -2 : -0.5 
   const depth = Math.max(0, scubadivers.dive.depth + delta)
   const pressure = getPressure(depth)
   return {

src/core/Scubadiver.spec.ts

@@ -5,8 +5,8 @@ import { goDown, goUp, initialDiver } from './ScubaDiver'
 describe('Scubadiver core domain', () => {
   it('should goDown', () => {
     const expected = goDown(initialDiver)
-    expect(expected.dive.depth).toBe(0.1)
-    expect(expected.dive.pressure).toBe(1.01)
+    expect(expected.dive.depth).toBe(0.5)
+    expect(expected.dive.pressure).toBe(1.05)
   })
 
   it('should goDown faster below 30 m', () => {
@@ -25,8 +25,8 @@ describe('Scubadiver core domain', () => {
       flotability: 0,
       dive: { ...initialDiver.dive, depth: 20, pressure: 3 }
     })
-    expect(expected.dive.depth).toBe(19.9)
-    expect(expected.dive.pressure).toBe(2.99)
+    expect(expected.dive.depth).toBe(19.5)
+    expect(expected.dive.pressure).toBe(2.95)
   })
 
   it('should goUp with positive flotability', () => {

src/stores/animals.ts

@@ -38,82 +38,82 @@ const data = [
   },
   {
     image: fish,
-    depth: 90,
+    depth: 35,
     size: 4,
     startLeft: false,
     scaleX: -1
   },
   {
     image: tuna,
-    depth: 180,
+    depth: 65,
     size: 3,
     startLeft: true
   },
   {
     image: tuna,
-    depth: 181,
+    depth: 66,
     size: 2,
     startLeft: true
   },
   {
     image: tuna,
-    depth: 181,
+    depth: 66,
     size: 3,
     startLeft: true
   },
   {
     image: fish,
-    depth: 200,
+    depth: 50,
     size: 5,
     startLeft: true
   },
   {
     image: shark,
-    depth: 300,
+    depth: 65,
     size: 7,
     rotate: -45,
     startLeft: false
   },
   {
     image: whale,
-    depth: 400,
+    depth: 80,
     size: 8,
     startLeft: true
   },
   {
     image: lotte,
-    depth: 500,
+    depth: 95,
     size: 4,
     startLeft: false
   },
   {
     image: squid,
-    depth: 650,
+    depth: 115,
     size: 4,
     startLeft: true,
     rotate: 90
   },
   {
     image: jellyfish,
-    depth: 600,
+    depth: 105,
     size: 2,
     startLeft: false
   },
   {
     image: jellyfish,
-    depth: 601,
+    depth: 106,
     size: 2,
     startLeft: false
   },
   {
     image: jellyfish,
-    depth: 600,
+    depth: 107,
     size: 2,
     startLeft: false
   },
   {
     image: jellyfish,
-    depth: 599,
+    depth: 108,
     size: 2,
     startLeft: false
   }