feat: evolution command for tanks

src/components/Graph/components/Line.tsx

@@ -0,0 +1,75 @@
+import { blue, green, red } from '@radix-ui/colors';
+import { GRAPH_HEIGHT, GRAPH_WIDTH } from './Root.js';
+
+export enum LineColor {
+  Red,
+  Green,
+  Blue,
+}
+
+const LINE_COLORS = {
+  [LineColor.Red]: red.red9,
+  [LineColor.Green]: green.green9,
+  [LineColor.Blue]: blue.blue9,
+};
+
+export enum LineStyle {
+  Solid,
+  Dashes,
+  DashesAndDots,
+}
+
+const LINE_STYLES = {
+  [LineStyle.Solid]: undefined,
+  [LineStyle.Dashes]: '8, 8',
+  [LineStyle.DashesAndDots]: '1, 4, 8, 4',
+};
+
+export type PlotItem = [number, number];
+export type Plot = PlotItem[];
+
+export interface LineProps {
+  plot: Plot;
+  minY?: number;
+  maxY?: number;
+  color?: LineColor;
+  style?: LineStyle;
+  lineWidth?: number;
+}
+
+export function Line({
+  plot,
+  minY: providedMinY,
+  maxY: providedMaxY,
+  color = LineColor.Red,
+  style = LineStyle.Solid,
+  lineWidth = 2,
+}: LineProps) {
+  const xs = plot.map(([x]) => x);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const ys = plot.map(([, y]) => y);
+  const minY = providedMinY ?? Math.min(...ys);
+  const maxY = providedMaxY ?? Math.max(...ys);
+  const rangeX = maxX - minX;
+  const rangeY = maxY - minY;
+  const points = plot
+    .map(
+      ([x, y]) =>
+        `${(x - minX) * (GRAPH_WIDTH / rangeX)},${
+          GRAPH_HEIGHT - (y - minY) * (GRAPH_HEIGHT / rangeY)
+        }`,
+    )
+    .join(' ');
+
+  return (
+    <polyline
+      vector-effect="non-scaling-stroke"
+      fill="none"
+      stroke={LINE_COLORS[color]}
+      stroke-width={lineWidth}
+      stroke-dasharray={LINE_STYLES[style]}
+      points={points}
+    />
+  );
+}

src/components/Graph/components/Root.tsx

@@ -0,0 +1,96 @@
+import { times } from 'lodash';
+import { ReactNode } from 'react';
+import { theme } from '../../../stitches.config.js';
+import { VerticalMargin, VerticalMarginAlign } from './VerticalMargin.js';
+
+export const GRAPH_WIDTH = 512;
+export const GRAPH_HEIGHT = 320;
+
+export interface MarginProps {
+  min: number;
+  max: number;
+  suffix?: string;
+}
+
+export interface RootProps {
+  children: ReactNode;
+  leftVerticalMargin?: MarginProps;
+  rightVerticalMargin?: MarginProps;
+  verticalSeparations?: number;
+  xMinLabel: string;
+  xMaxLabel: string;
+}
+
+export function Root({
+  children,
+  leftVerticalMargin,
+  rightVerticalMargin,
+  verticalSeparations = 5,
+  xMinLabel,
+  xMaxLabel,
+}: RootProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+      <div style={{ display: 'flex', gap: 16 }}>
+        {leftVerticalMargin && (
+          <VerticalMargin
+            {...leftVerticalMargin}
+            verticalSeparations={verticalSeparations}
+          />
+        )}
+
+        <svg
+          viewBox={`0 0 ${GRAPH_WIDTH} ${GRAPH_HEIGHT}`}
+          preserveAspectRatio="none"
+          style={{
+            flex: 1,
+            backgroundColor: theme.colors.appBackground2,
+            borderRadius: 4,
+            border: theme.borderStyles.nonInteractive,
+          }}
+        >
+          {times(verticalSeparations - 2, (index) => {
+            const y = GRAPH_HEIGHT * ((index + 1) / (verticalSeparations - 1));
+
+            return (
+              <polyline
+                key={index}
+                vector-effect="non-scaling-stroke"
+                fill="none"
+                stroke={theme.colors.borderNonInteractive}
+                stroke-width="2"
+                points={`0,${y}, ${GRAPH_WIDTH},${y}`}
+              />
+            );
+          })}
+
+          {children}
+        </svg>
+
+        {rightVerticalMargin && (
+          <VerticalMargin
+            {...rightVerticalMargin}
+            verticalSeparations={verticalSeparations}
+            align={VerticalMarginAlign.Right}
+          />
+        )}
+      </div>
+
+      <div
+        style={{
+          paddingLeft: 48,
+          paddingRight: 48,
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xMinLabel}
+        </span>
+        <span style={{ fontSize: 16, color: theme.colors.textLowContrast }}>
+          {xMaxLabel}
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/Graph/components/VerticalMargin.tsx

@@ -0,0 +1,51 @@
+import { times } from 'lodash';
+import { theme } from '../../../stitches.config.js';
+import { MarginProps } from './Root.js';
+
+export enum VerticalMarginAlign {
+  Left,
+  Right,
+}
+
+export interface VerticalMarginProps extends MarginProps {
+  verticalSeparations: number;
+  align?: VerticalMarginAlign;
+}
+
+export function VerticalMargin({
+  verticalSeparations,
+  max,
+  min,
+  suffix,
+  align = VerticalMarginAlign.Left,
+}: VerticalMarginProps) {
+  return (
+    <div
+      style={{
+        width: 32,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems:
+          align === VerticalMarginAlign.Right ? 'flex-end' : 'flex-start',
+        justifyContent: 'space-between',
+      }}
+    >
+      {times(verticalSeparations, (index) => (
+        <span
+          key={index}
+          style={{
+            fontSize: 16,
+            color: theme.colors.textLowContrast,
+          }}
+        >
+          {`${(
+            (max - min) *
+              ((verticalSeparations - (index + 1)) /
+                (verticalSeparations - 1)) +
+            min
+          ).toFixed(0)}${suffix ?? ''}`}
+        </span>
+      ))}
+    </div>
+  );
+}

src/components/Graph/index.ts

@@ -0,0 +1,3 @@
+export * from './components/Line.js';
+export * from './components/Root.js';
+export * from './components/VerticalMargin.js';