TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-30 22:19:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

i am tired boss

Browse Source
This commit is contained in:
tresabhi committed 2026-10-29 15:29:37 -05:00
1 parent 3b34b01536
commit d96f77bf05
9 files changed
+151 -171
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/i18n/strings/en.json
+27 -6
View File
@@ -1,4 +1,24 @@
{
"guesser": {
"help": {
"title": "Partially reveal tank?",
"description": "Reveals the tank without showing the name. This round will be considered incorrect and break your streak!",
"cancel": "Cancel",
"reveal": "Reveal"
},
"search": {
"skip": "Skip",
"guess": "Guess",
"next": "Next"
},
"stats": "{correct} / {total} correct, {streak} streak",
"tier": "Tier {tier}",
"select_all": "Select all",
"clear": "Clear"
},
"units": {
"m": "{value}m",
"mm": "{value}mm",
@@ -261,6 +281,13 @@
"common": {
"name": "BlitzKit",
"search": {
"hint_players": "Search players...",
"hint_tanks": "Search tanks...",
"no_results": "No results",
"searching": "Searching..."
},
"units": {
"m": "{value}m",
"mm": "{value}mm",
@@ -473,12 +500,6 @@
},
"common": {
"player_search": {
"hint": "Search players...",
"no_results": "No results",
"searching": "Searching..."
},
"copy_button": {
"copied": "Copied!"
},
packages/website/src/components/GuessBackground/index.css
-14
View File
@@ -1,14 +0,0 @@
.guess-background {
animation: moveBackground 180s linear infinite;
}
@keyframes moveBackground {
from {
top: 0;
left: 0;
}
to {
top: -100%;
left: -100%;
}
}
packages/website/src/components/GuessBackground/index.module.css
+54
View File
@@ -0,0 +1,54 @@
.foreground {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition-duration: var(--duration-subtle);
background-color: var(--accent-2);
&[data-guess-state="correct"] {
background-color: var(--jade-3);
}
&[data-guess-state="incorrect"] {
background-color: var(--tomato-3);
}
.overlay {
width: 100%;
height: 100%;
background: radial-gradient(circle, var(--gray-a9), var(--gray-3));
}
}
.background {
animation: moveBackground 180s linear infinite;
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 0;
background-image:
radial-gradient(circle, var(--white-a1) 20%, transparent 20%),
radial-gradient(circle at 0 0, var(--white-a1) 10%, transparent 10%),
radial-gradient(circle at 100% 0, var(--white-a1) 10%, transparent 10%),
radial-gradient(circle at 0 100%, var(--white-a1) 10%, transparent 10%),
radial-gradient(circle at 100% 100%, var(--white-a1) 10%, transparent 10%);
background-size: 4rem 4rem;
}
@keyframes moveBackground {
from {
top: 0;
left: 0;
}
to {
top: -100%;
left: -100%;
}
}
packages/website/src/components/GuessBackground/index.tsx
+13 -59
View File
@@ -1,77 +1,31 @@
import { Box } from "@radix-ui/themes";
import { useEffect } from "react";
import { api } from "../../api/dynamic";
import { tankToDuelMember } from "../../core/blitzkit/tankToDuelMember";
import { Var } from "../../core/radix/var";
import { Duel } from "../../stores/duel";
import { Guess, GuessState } from "../../stores/guess";
import { Guess } from "../../stores/guess";
import { Tankopedia } from "../../stores/tankopedia";
import "./index.css";
import { createTankState } from "../../tankopedia/createTankState";
import styles from "./index.module.css";
const [modelDefinitions, provisionDefinitions] = await Promise.all([
api.models(),
api.provisions(),
]);
const [models, tanks] = await Promise.all([api.models(), api.tanks()]);
export function GuessBackground() {
const guessState = Guess.use((state) => state.guessState);
const tank = Guess.use((state) => state.tank);
const id = Guess.use((state) => state.tank);
useEffect(() => {
Duel.mutate((state) => {
state.protagonist = tankToDuelMember(tank, provisionDefinitions);
});
const tank = tanks.tanks[id];
Tankopedia.mutate((state) => {
state.model = modelDefinitions.models[tank.id];
state.protagonist = createTankState(tank);
});
}, [tank]);
}, [id]);
return (
<>
<Box
position="absolute"
width="100%"
height="100%"
top="0"
left="0"
style={{
transitionDuration: "2s",
backgroundColor: Var(
guessState === GuessState.NotGuessed
? "accent-2"
: guessState === GuessState.Correct
? "jade-3"
: "tomato-3",
),
}}
>
<Box
width="100%"
height="100%"
style={{
background: `radial-gradient(circle, ${Var("color-panel-translucent")}, ${Var("color-panel-solid")})`,
}}
/>
</Box>
<div className={styles.foreground} data-guess-state={guessState}>
<div className={styles.overlay} />
</div>
<Box
className="guess-background"
position="absolute"
width="200%"
height="200%"
top="0"
left="0"
style={{
backgroundImage: `
radial-gradient(circle, ${Var("white-a1")} 20%, transparent 20%),
radial-gradient(circle at 0 0, ${Var("white-a1")} 10%, transparent 10%),
radial-gradient(circle at 100% 0, ${Var("white-a1")} 10%, transparent 10%),
radial-gradient(circle at 0 100%, ${Var("white-a1")} 10%, transparent 10%),
radial-gradient(circle at 100% 100%, ${Var("white-a1")} 10%, transparent 10%)
`,
backgroundSize: "4rem 4rem",
}}
/>
<div className={styles.background} />
</>
);
}
packages/website/src/components/Guesser.tsx
+26 -44
View File
@@ -10,48 +10,38 @@ import {
StarFilledIcon,
TrashIcon,
} from "@radix-ui/react-icons";
import {
AlertDialog,
Box,
Button,
Card,
DropdownMenu,
Flex,
IconButton,
Spinner,
Text,
TextField,
} from "@radix-ui/themes";
import fuzzysort from "fuzzysort";
import { debounce } from "lodash-es";
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 { api } from "../core/blitzkit/api";
import { useLocale } from "../hooks/useLocale";
import { useStrings } from "../hooks/useStrings";
import { useUnwrapper } from "../hooks/useUnwrapper";
import { Guess, GuessState } from "../stores/guess";
import { classIcons } from "./ClassIcon";
import { ClassIcon } from "./ClassIcon";
import { SearchResults } from "./SearchResults";
const { go } = fuzzysort;
const [tankNames, tankDefinitions, TIERS] = await Promise.all([
awaitableTankNames,
api.tankDefinitions(),
api.tanks(),
awaitableTiers,
]);
const ids = Object.keys(tankDefinitions.tanks);
export function Guesser() {
const strings = useStrings();
const unwrap = useUnwrapper();
const tank = Guess.use((state) => state.tank);
const guessState = Guess.use((state) => state.guessState);
const correctGuesses = Guess.use((state) => state.correctGuesses);
const totalGuesses = Guess.use((state) => state.totalGuesses);
const helpingReveal = Guess.use((state) => state.helpingReveal);
const streak = Guess.use((state) => state.streak);
const { strings, unwrap } = useLocale();
const input = useRef<HTMLInputElement>(null);
const [searching, setSearching] = useState(false);
const [results, setResults] = useState<TankDefinition[] | null>(null);
@@ -97,7 +87,7 @@ export function Guesser() {
const interval = setInterval(() => {
if (!status.current) return;
status.current.innerText = literals(strings.website.tools.guess.stats, {
status.current.innerText = literals(strings.guesser.stats, {
correct: correctGuesses,
total: totalGuesses,
streak: streak,
@@ -125,16 +115,12 @@ export function Guesser() {
<Box py="2" px="3">
{results.length === 0 && (
<Flex justify="center">
<Text color="gray">
{strings.website.tools.guess.search.no_results}
</Text>
<Text color="gray">{strings.common.search.no_results}</Text>
</Flex>
)}
<SearchResults.Root>
{results.map((result) => {
const Icon = classIcons[result.class];
return (
<SearchResults.Item
key={result.id}
@@ -162,7 +148,11 @@ export function Guesser() {
width="38px"
justify="center"
>
<Icon width="1em" height="1em" />
<ClassIcon
class={result.class}
width="1em"
height="1em"
/>
{romanize(result.tier)}
</Flex>
}
@@ -214,7 +204,7 @@ export function Guesser() {
});
}}
>
{literals(strings.website.tools.guess.tier, {
{literals(strings.guesser.tier, {
tier: romanize(tier),
})}
</DropdownMenu.CheckboxItem>
@@ -232,7 +222,7 @@ export function Guesser() {
});
}}
>
<StarFilledIcon /> {strings.website.tools.guess.select_all}
<StarFilledIcon /> {strings.guesser.select_all}
</DropdownMenu.Item>
<DropdownMenu.Item
@@ -245,7 +235,7 @@ export function Guesser() {
});
}}
>
<TrashIcon /> {strings.website.tools.guess.clear}
<TrashIcon /> {strings.guesser.clear}
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
@@ -255,7 +245,7 @@ export function Guesser() {
ref={input}
onChange={requestSearch}
style={{ flex: 1, maxWidth: "14rem" }}
placeholder={strings.website.tools.guess.search.placeholder}
placeholder={strings.common.search.hint_tanks}
size={{ initial: "2", sm: "3" }}
variant="classic"
>
@@ -275,18 +265,14 @@ export function Guesser() {
</AlertDialog.Trigger>
<AlertDialog.Content>
<AlertDialog.Title>
{strings.website.tools.guess.help.title}
</AlertDialog.Title>
<AlertDialog.Title>{strings.guesser.help.title}</AlertDialog.Title>
<AlertDialog.Description>
{strings.website.tools.guess.help.description}
{strings.guesser.help.description}
</AlertDialog.Description>
<Flex justify="end" gap="2">
<AlertDialog.Cancel>
<Button variant="outline">
{strings.website.tools.guess.help.cancel}
</Button>
<Button variant="outline">{strings.guesser.help.cancel}</Button>
</AlertDialog.Cancel>
<AlertDialog.Action>
@@ -299,7 +285,7 @@ export function Guesser() {
});
}}
>
{strings.website.tools.guess.help.reveal}
{strings.guesser.help.reveal}
</Button>
</AlertDialog.Action>
</Flex>
@@ -316,7 +302,7 @@ export function Guesser() {
onClick={() => {
if (guessState === GuessState.NotGuessed) {
const correct =
selected !== null && selected.id === tank.id && !helpingReveal;
selected !== null && selected.id === tank && !helpingReveal;
Guess.mutate((draft) => {
draft.guessState = correct
@@ -340,7 +326,7 @@ export function Guesser() {
Guess.mutate((draft) => {
if (!input.current) return;
draft.tank = tank;
draft.tank = tank.id;
draft.guessState = GuessState.NotGuessed;
draft.helpingReveal = false;
@@ -351,16 +337,12 @@ export function Guesser() {
>
{guessState === GuessState.NotGuessed ? (
<>
{
strings.website.tools.guess.search[
selected === null ? "skip" : "guess"
]
}
{strings.guesser.search[selected === null ? "skip" : "guess"]}
{selected === null ? <ArrowRightIcon /> : <PaperPlaneIcon />}
</>
) : (
<>
{strings.website.tools.guess.search.next}
{strings.guesser.search.next}
<ArrowRightIcon />
</>
)}
packages/website/src/components/ToolOpenGraph.astro
+2 -2
View File
@@ -1,7 +1,7 @@
---
import { AstroSeo } from "@astrolib/seo";
import { api } from "../api/dynamic";
import type { Tool } from "../constants/tools";
import { getStrings } from "../core/i18n/getStrings";
interface Props {
tool: Tool;
@@ -9,7 +9,7 @@ interface Props {
}
const { locale, tool } = Astro.props;
const strings = getStrings(locale);
const strings = await api.strings(locale);
const toolStrings =
strings.website.tools[
(tool.strings ?? tool.id) as keyof typeof strings.website.tools
packages/website/src/pages/[...chunk_default]/[...locale]/guesser/_index.tsx
+22 -34
View File
@@ -5,13 +5,10 @@ import { GuessBackground } from "../../../../components/GuessBackground";
import { Guesser } from "../../../../components/Guesser";
import { GuessRenderer } from "../../../../components/GuessRenderer";
import { GuessRendererLoader } from "../../../../components/GuessRendererLoader";
import { PageWrapper } from "../../../../components/PageWrapper";
import {
type LocaleAcceptorProps,
LocaleProvider,
useLocale,
} from "../../../../hooks/useLocale";
import { Duel } from "../../../../stores/duel";
import { withErrorWrapper } from "../../../../hocs/withErrorWrapper";
import { withLocale } from "../../../../hocs/withLocale";
import { DuelModule, useDuel } from "../../../../hooks/useDuel";
import { useUnwrapper } from "../../../../hooks/useUnwrapper";
import { Guess, GuessState } from "../../../../stores/guess";
import { Tankopedia } from "../../../../stores/tankopedia";
import type { MaybeSkeletonComponentProps } from "../../../../types/maybeSkeletonComponentProps";
@@ -23,42 +20,34 @@ const [tankDefinitions, modelDefinitions] = await Promise.all([
const ids = Object.keys(tankDefinitions.tanks);
export function Page({
locale,
skeleton,
}: LocaleAcceptorProps & MaybeSkeletonComponentProps) {
const id = Number(ids[Math.floor(Math.random() * ids.length)]);
const tank = tankDefinitions.tanks[id];
export const Page = withLocale(
withErrorWrapper(({ skeleton }: MaybeSkeletonComponentProps) => {
const id = Number(ids[Math.floor(Math.random() * ids.length)]);
Guess.useInitialization(tank);
Guess.useInitialization(id);
return (
<LocaleProvider locale={locale}>
<Container skeleton={skeleton} />
</LocaleProvider>
);
}
return <Container skeleton={skeleton} />;
}),
);
function Container({ skeleton }: MaybeSkeletonComponentProps) {
const tank = Guess.use((state) => state.tank);
const model = modelDefinitions.models[tank.id];
const id = Guess.use((state) => state.tank);
const tank = tankDefinitions.tanks[id];
Tankopedia.useInitialization(model);
Duel.useInitialization({ tank, model });
Tankopedia.useInitialization(tank);
return (
<PageWrapper p="0" maxWidth="unset" color="cyan">
<Content skeleton={skeleton} />
</PageWrapper>
);
return <Content skeleton={skeleton} />;
}
function Content({ skeleton }: MaybeSkeletonComponentProps) {
const { unwrap } = useLocale();
const tank = Guess.use((state) => state.tank);
const tank = useDuel("protagonist", DuelModule.Tank);
const unwrap = useUnwrapper();
const name = unwrap(tank.name!);
const guessState = Guess.use((state) => state.guessState);
const isRevealed = guessState !== GuessState.NotGuessed;
const name = unwrap(tank.name!);
const fontSize = `min(48vh, ${55 / name.length}vw)`;
const transitionDuration = isRevealed ? "2s" : undefined;
const tiers = Guess.use((state) => state.tiers);
@@ -78,10 +67,9 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
const id = Number(
filteredIds[Math.floor(Math.random() * filteredIds.length)],
);
const newTank = tankDefinitions.tanks[id];
Guess.mutate((draft) => {
draft.tank = newTank;
draft.tank = id;
draft.guessState = GuessState.NotGuessed;
draft.helpingReveal = false;
});
packages/website/src/pages/[...chunk_default]/[...locale]/guesser/index.astro
+1 -5
View File
@@ -1,6 +1,4 @@
---
import ToolOpenGraph from "../../../../components/ToolOpenGraph.astro";
import { tools } from "../../../../constants/tools";
import BaseLayout from "../../../../layouts/BaseLayout.astro";
import { Page } from "./_index";
@@ -9,9 +7,7 @@ export { getStaticPaths } from "../index.astro";
const { locale } = Astro.props;
---
<ToolOpenGraph {locale} tool={tools.guess} />
<BaseLayout {locale} noFooter>
<BaseLayout accent="blue" {locale}>
<Page {locale} client:only="react">
<Page {locale} skeleton slot="fallback" />
</Page>
packages/website/src/stores/guess.ts
+6 -7
View File
@@ -1,17 +1,16 @@
import type { TankDefinition } from "@blitzkit/core";
import { Varuna } from "varuna";
import { Soapstone } from "soapstone";
import { awaitableTiers } from "../core/awaitables/tiers";
const tiers = await awaitableTiers;
export enum GuessState {
Correct,
Incorrect,
NotGuessed,
Correct = "correct",
Incorrect = "incorrect",
NotGuessed = "not-guessed",
}
export interface Guess {
tank: TankDefinition;
tank: number;
guessState: GuessState;
totalGuesses: number;
correctGuesses: number;
@@ -20,7 +19,7 @@ export interface Guess {
tiers: number[];
}
export const Guess = new Soapstone<Guess, [TankDefinition]>((tank) => ({
export const Guess = new Soapstone<Guess, [number]>((tank) => ({
tank,
guessState: GuessState.NotGuessed,
totalGuesses: 0,