-
- );
-}
diff --git a/packages/website/src/components/Guesser/index.module.css b/packages/website/src/components/Guesser/index.module.css
new file mode 100644
index 000000000..760f653f2
--- /dev/null
+++ b/packages/website/src/components/Guesser/index.module.css
@@ -0,0 +1,89 @@
+.guesser {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--space-4);
+
+ box-sizing: border-box;
+ width: 100%;
+ max-width: 25rem;
+ padding: var(--space-4);
+
+ .results {
+ position: relative;
+
+ .empty {
+ display: flex;
+ justify-content: center;
+ }
+
+ .list {
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+
+ .item {
+ display: flex;
+ align-items: center;
+ gap: var(--space-3);
+
+ width: 100%;
+ padding: var(--space-2);
+
+ background: none;
+ border: none;
+ border-radius: var(--space-3);
+ cursor: pointer;
+ font: inherit;
+ color: var(--gray-12);
+ text-align: left;
+
+ &:hover,
+ &:focus-visible {
+ background-color: var(--gray-4);
+ outline: none;
+ }
+
+ .flag {
+ width: 1em;
+ height: 1em;
+ }
+
+ .name {
+ flex: 1;
+ }
+
+ .discriminator {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: var(--space-2);
+
+ min-width: 38px;
+ padding: 0 var(--space-3);
+
+ border-radius: var(--max-size);
+ background-color: var(--gray-4);
+ font-size: var(--font-size-minor);
+ }
+ }
+ }
+ }
+
+ .controls {
+ display: flex;
+ gap: var(--space-3);
+
+ align-items: center;
+
+ .field {
+ flex: 1;
+ max-width: 14rem;
+ }
+ }
+}
diff --git a/packages/website/src/components/Guesser/index.tsx b/packages/website/src/components/Guesser/index.tsx
new file mode 100644
index 000000000..4daea5f81
--- /dev/null
+++ b/packages/website/src/components/Guesser/index.tsx
@@ -0,0 +1,362 @@
+import { alias, romanize, SEARCH_KEYS } from "@blitzkit/core";
+import { literals } from "@blitzkit/i18n";
+import { TankDefinition } from "@blitzkit/protos";
+import {
+ ArrowRightIcon,
+ CheckIcon,
+ EyeOpenIcon,
+ MagnifyingGlassIcon,
+ MixerVerticalIcon,
+ PaperPlaneIcon,
+ StarFilledIcon,
+ TrashIcon,
+} from "@radix-ui/react-icons";
+import fuzzysort from "fuzzysort";
+import type { QuicklimeEvent } from "quicklime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api } from "../../api/dynamic";
+import { awaitableTankNames } from "../../core/awaitables/tankNames";
+import { awaitableTiers } from "../../core/awaitables/tiers";
+import { useStrings } from "../../hooks/useStrings";
+import { useUnwrapper } from "../../hooks/useUnwrapper";
+import { Guess, GuessState } from "../../stores/guess";
+import { AlertDialog } from "../AlertDialog";
+import { Button } from "../Button";
+import { Card } from "../Card";
+import { ClassIcon } from "../ClassIcon";
+import { DropdownMenu } from "../DropdownMenu";
+import { IconButton } from "../IconButton";
+import { TRANSITION_ANIMATION_TIME, transitionEvent } from "../Lighting";
+import { Text } from "../Text";
+import { TextField } from "../TextField";
+import styles from "./index.module.css";
+
+const { go } = fuzzysort;
+
+const [tankNames, tankDefinitions, TIERS] = await Promise.all([
+ awaitableTankNames,
+ api.tanks(),
+ awaitableTiers,
+]);
+
+// resolves once the lights have fully receded
+function waitForDarkness() {
+ return new Promise
- {results !== null && (
-
-
- )}
-
-
-
- {results.length === 0 && (
-
- {results.map((result) => {
- return (
- {
- if (!input.current) return;
-
- input.current.value = unwrap(result.name!);
- setSelected(result);
- setResults(null);
- }}
- text={unwrap(result.name!)}
- prefix={
- 
- }
- discriminator={
-
-
-
- {strings.common.search.no_results}
-
- )}
-
-
-
- }
- />
- );
- })}
-
-
-
-
-
-
-
-
-
-
-
- {TIERS.map((tier) => {
- const isSelected = tiers.includes(tier);
-
- return (
- {
- event.preventDefault();
-
- Guess.mutate((draft) => {
- if (isSelected) {
- if (draft.tiers.length === 1) return;
- draft.tiers = draft.tiers.filter((t) => t !== tier);
- } else {
- draft.tiers = [...draft.tiers, tier];
- }
-
- draft.streak = 0;
- });
- }}
- >
- {literals(strings.guesser.tier, {
- tier: romanize(tier),
- })}
-
- );
- })}
-
- {
- event.preventDefault();
-
- Guess.mutate((draft) => {
- draft.tiers = Guess.initial.tiers;
- });
- }}
- >
-
-
- {
- event.preventDefault();
-
- Guess.mutate((draft) => {
- draft.tiers = [];
- });
- }}
- >
-
-
-
-
-
- {searching ?
-
-
-
-
-
-
-
-
- {strings.guesser.help.title}
-
- {strings.guesser.help.description}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ );
+}
diff --git a/packages/website/src/components/IconButton/index.module.css b/packages/website/src/components/IconButton/index.module.css
index 1e31935de..aa502299d 100644
--- a/packages/website/src/components/IconButton/index.module.css
+++ b/packages/website/src/components/IconButton/index.module.css
@@ -1,6 +1,6 @@
.icon-button {
&[data-size="regular"] {
- padding: var(--space-2);
+ padding: var(--space-3);
}
&[data-size="major"] {
diff --git a/packages/website/src/components/Lighting.tsx b/packages/website/src/components/Lighting.tsx
index d44bb12af..0f89a0da4 100644
--- a/packages/website/src/components/Lighting.tsx
+++ b/packages/website/src/components/Lighting.tsx
@@ -39,16 +39,17 @@ export const transitionEvent = new Quicklime
+ {results !== null && (
+
+ {results.length === 0 && (
+
+ )}
+
+
+
+ {strings.common.search.no_results}
+
+ )}
+
+
+ {results.map((result) => {
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ {TIERS.map((tier) => {
+ const isSelected = tiers.includes(tier);
+
+ return (
+ {
+ event.preventDefault();
+
+ Guess.mutate((draft) => {
+ if (isSelected) {
+ if (draft.tiers.length === 1) return;
+ draft.tiers = draft.tiers.filter((t) => t !== tier);
+ } else {
+ draft.tiers = [...draft.tiers, tier];
+ }
+ });
+ }}
+ >
+
+
+
+ {literals(strings.guesser.tier, {
+ tier: romanize(tier),
+ })}
+
+ );
+ })}
+
+ {
+ event.preventDefault();
+
+ Guess.mutate((draft) => {
+ draft.tiers = Guess.initial.tiers;
+ });
+ }}
+ >
+ {strings.guesser.select_all}
+
+
+ {
+ event.preventDefault();
+
+ Guess.mutate((draft) => {
+ // at least one tier must stay selected
+ draft.tiers = [Math.max(...TIERS)];
+ });
+ }}
+ >
+ {strings.guesser.clear}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {strings.guesser.help.title}
+
+
+ {strings.guesser.help.description}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/packages/website/src/components/Spinner/index.module.css b/packages/website/src/components/Spinner/index.module.css
index e69de29bb..22d235eab 100644
--- a/packages/website/src/components/Spinner/index.module.css
+++ b/packages/website/src/components/Spinner/index.module.css
@@ -0,0 +1,18 @@
+.spinner {
+ display: inline-block;
+ box-sizing: border-box;
+ width: var(--space-5);
+ height: var(--space-5);
+
+ border: var(--space-2) solid var(--gray-5);
+ border-top-color: var(--gray-12);
+ border-radius: 50%;
+
+ animation: spin var(--duration-spinner) linear infinite;
+}
+
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
diff --git a/packages/website/src/components/Spinner/index.tsx b/packages/website/src/components/Spinner/index.tsx
index 67ffe51d5..16ade5829 100644
--- a/packages/website/src/components/Spinner/index.tsx
+++ b/packages/website/src/components/Spinner/index.tsx
@@ -1,3 +1,5 @@
+import styles from "./index.module.css";
+
export function Spinner() {
- return null;
+ return ;
}
diff --git a/packages/website/src/components/TankModel.tsx b/packages/website/src/components/TankModel.tsx
index e1b3a8102..17c2dc3fc 100644
--- a/packages/website/src/components/TankModel.tsx
+++ b/packages/website/src/components/TankModel.tsx
@@ -1,6 +1,5 @@
import { invalidate, useThree, type ThreeEvent } from "@react-three/fiber";
-import type { QuicklimeEvent } from "quicklime";
-import { useEffect, useRef } from "react";
+import { useMemo, useRef } from "react";
import { Group, Mesh, MeshStandardMaterial, Vector2 } from "three";
import { applyPitchYawLimits } from "../core/blitz/applyPitchYawLimits";
import { modelTransformEvent } from "../core/blitzkit/modelTransform";
@@ -10,14 +9,19 @@ import { DuelModule, getDuel, useDuel } from "../hooks/useDuel";
import { useDuelModel } from "../hooks/useDuelModel";
import { hasEquipment } from "../hooks/useEquipment";
import { useModel } from "../hooks/useModel";
+import { useSilhouette } from "../hooks/useSilhouette";
import { useSkin } from "../hooks/useSkin";
import { useSkinAnimation } from "../hooks/useSkinAnimation";
import { useTankTransform } from "../hooks/useTankTransform";
import { Tankopedia } from "../stores/tankopedia";
import { TankopediaDisplay } from "../stores/tankopediaPersistent/constants";
-import { transitionEvent } from "./Lighting";
-export function TankModel() {
+interface TankModelProps {
+ // while the lights are down, draws the tank as a flat light shape
+ silhouette?: boolean;
+}
+
+export function TankModel({ silhouette = false }: TankModelProps) {
const protagonist = Tankopedia.use((state) => state.protagonist);
const track = useDuel("protagonist", DuelModule.Track);
const turret = useDuel("protagonist", DuelModule.Turret);
@@ -32,13 +36,16 @@ export function TankModel() {
const nodes = Object.values(gltf.nodes);
const skinGltf = useSkin(protagonist.tank);
const attachmentGltf = useSkin(protagonist.tank, "attachment");
- const skins = [skinGltf, attachmentGltf].filter((skin) => skin !== undefined);
+ const skins = useMemo(
+ () => [skinGltf, attachmentGltf].filter((skin) => skin !== undefined),
+ [skinGltf, attachmentGltf],
+ );
useTankTransform(track, turret, turretContainer, gunContainer);
useSkinAnimation(skins);
- useEffect(() => {
- const emissiveMaterials = new Set
+
+
+
+
);
}
diff --git a/packages/website/src/pages/[...chunk_default]/[...locale]/guesser/index.astro b/packages/website/src/pages/[...chunk_default]/[...locale]/guesser/index.astro
index fdfe8a50a..a9c514a49 100644
--- a/packages/website/src/pages/[...chunk_default]/[...locale]/guesser/index.astro
+++ b/packages/website/src/pages/[...chunk_default]/[...locale]/guesser/index.astro
@@ -1,4 +1,5 @@
---
+import ColorScale from "../../../../components/ColorScale.astro";
import BaseLayout from "../../../../layouts/BaseLayout.astro";
import { Page } from "./_index";
@@ -8,6 +9,8 @@ const { locale } = Astro.props;
---