feat: squishy low

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/components/Cursor/index.tsx

@@ -3,8 +3,8 @@ import { Box, Flex, Text } from '@radix-ui/themes';
 import { useEffect, useRef, useState } from 'react';
 import { clamp } from 'three/src/math/MathUtils.js';
 import {
-  fakeLog,
-  fakeLogInverse,
+  fakeLogSquishyHigh,
+  fakeLogSquishyHighInverse,
 } from '../../../../../../../../../core/blitzkit/fakeLog';
 import { Var } from '../../../../../../../../../core/radix/var';
 import { Duel } from '../../../../../../../../../stores/duel';
@@ -19,7 +19,7 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
   const assaultDistance = Duel.use(
     (state) => state.protagonist.assaultDistance,
   );
-  const [x, setX] = useState(fakeLog(assaultDistance / maxDistance, 2));
+  const [x, setX] = useState(fakeLogSquishyHigh(assaultDistance / maxDistance));
   const cursor = useRef<HTMLDivElement>(null);
   const mutateDuel = Duel.useMutation();
 
@@ -56,7 +56,7 @@ export function AssaultCursor({ maxDistance, maxFakeDistance }: Props) {
     function handlePointerUp() {
       mutateDuel((draft) => {
         draft.protagonist.assaultDistance =
-          fakeLogInverse(localX * maxFakeDistance, 2) * maxDistance;
+          fakeLogSquishyHighInverse(localX * maxFakeDistance) * maxDistance;
       });
 
       window.removeEventListener('pointermove', handlePointerMove);

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/index.tsx

@@ -2,7 +2,10 @@ import type { AssaultRanges } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n';
 import { Box, Card, Flex, Text } from '@radix-ui/themes';
 import { clamp } from 'three/src/math/MathUtils.js';
-import { fakeLog } from '../../../../../../../core/blitzkit/fakeLog';
+import {
+  fakeLogSquishyHigh,
+  fakeLogSquishyLow,
+} from '../../../../../../../core/blitzkit/fakeLog';
 import type { TankCharacteristics } from '../../../../../../../core/blitzkit/tankCharacteristics';
 import { Var } from '../../../../../../../core/radix/var';
 import { useLocale } from '../../../../../../../hooks/useLocale';
@@ -18,7 +21,7 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
   const ranges = _ranges.ranges.map((range) => ({
     factor: range.factor,
     distance: range.distance,
-    fakeDistance: fakeLog(range.distance / maxDistance, 2),
+    fakeDistance: fakeLogSquishyHigh(range.distance / maxDistance),
   }));
   const maxFakeDistance = ranges.at(-1)!.fakeDistance;
   const maxFactor = ranges[0].factor;
@@ -55,8 +58,8 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
                   style={{
                     position: 'absolute',
                     left: 0,
-                    top: `${(1 - range.factor) * 100}%`,
-                    transform: 'translateY(-50%)',
+                    bottom: `${fakeLogSquishyLow(range.factor / maxFactor) * 100}%`,
+                    transform: 'translateY(50%)',
                   }}
                   color="gray"
                   size="1"
@@ -71,7 +74,8 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
 
             <Flex flexGrow="1" align="end" position="relative">
               {ranges.map((range, index) => {
-                const mix = clamp(1.5 * (range.factor - 1) + 1, 0, 1) * 100;
+                const mix =
+                  clamp(2 * (range.factor / maxFactor - 1) + 1, 0, 1) * 100;
                 const color0 = `color-mix(in hsl, ${Var('tomato-9')}, ${Var('jade-9')} ${mix}%)`;
                 const color1 = `color-mix(in hsl, ${Var('tomato-7')}, ${Var('jade-7')} ${mix}%)`;
                 const last = ranges[index - 1];
@@ -82,7 +86,7 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
                 return (
                   <Box
                     width={`${fraction * 100}%`}
-                    height={`${(range.factor / maxFactor) * 100}%`}
+                    height={`${fakeLogSquishyLow(range.factor / maxFactor) * 100}%`}
                     style={{
                       background: `linear-gradient(45deg, ${color1}, ${color0})`,
                     }}
@@ -96,7 +100,7 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
                   key={index}
                   position="absolute"
                   left="0"
-                  bottom={`${range.factor * 100}%`}
+                  bottom={`${fakeLogSquishyLow(range.factor / maxFactor) * 100}%`}
                   width="100%"
                   height="1pt"
                   style={{

packages/website/src/core/blitzkit/fakeLog.ts

@@ -1,9 +1,17 @@
 const GAMMA = 1.2;
 
-export function fakeLog(x: number, a = 1) {
+export function fakeLogSquishyHigh(x: number) {
   return Math.sin((Math.PI / 2) * x) ** (1 / GAMMA);
 }
 
-export function fakeLogInverse(y: number, a = 1) {
+export function fakeLogSquishyHighInverse(y: number) {
   return (2 / Math.PI) * Math.asin(y ** GAMMA);
 }
+
+export function fakeLogSquishyLow(x: number) {
+  return x ** 2;
+}
+
+export function fakeLogSquishyLowInverse(y: number) {
+  return y ** (1 / 2);
+}