TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-11-13 20:56:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into new-credits

Browse Source
This commit is contained in:
tresabhi committed 2026-10-22 16:38:40 -05:00
2 parents d8925a47b5 72e358f034
commit d32b8cc3f5
63 files changed
+1799 -545
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/website/src/components/ArticlePlug.astro
-38
View File
@@ -1,38 +0,0 @@
---
import { tankIcon } from "@blitzkit/core";
import { Flex, Heading, Link, Strong, Text } from "@radix-ui/themes";
---
<Flex justify="center" px="4">
<Link
color="gray"
highContrast
style={{ display: "content" }}
href="/docs/guides/christmas-2025"
underline="none"
>
<Flex
mt="3"
px="5"
py="4"
style={{
borderRadius: "var(--radius-3)",
backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
backgroundSize: "cover",
backgroundPosition: "center",
boxSizing: "border-box",
}}
align="center"
gap="5"
>
<img src={tankIcon(25169)} style={{ height: "min(15vw, 5rem)" }} />
<Flex direction="column">
<Heading size={{ initial: "4", sm: "6" }}>Christmas 2025</Heading>
<Text size={{ initial: "2", sm: "3" }}>
Win the <Strong>GSOR the TANK</Strong> and more!
</Text>
</Flex>
</Flex>
</Link>
</Flex>
packages/website/src/components/Giveaway.tsx → packages/website/src/components/Countdown.tsx
+10 -10
View File
@@ -3,9 +3,9 @@ import { useEffect, useState, type ReactNode } from "react";
import type { MaybeSkeletonComponentProps } from "../types/maybeSkeletonComponentProps";
import { InlineSkeleton } from "./InlineSkeleton";
const TIME = 1764898200 * 1000;
const TIME = 1792598400 * 1000;
export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
export function Countdown({ skeleton }: MaybeSkeletonComponentProps) {
const [timeLeft, setTimeLeft] = useState<number>(TIME - Date.now());
useEffect(() => {
@@ -31,14 +31,14 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
string = (
<>
in{" "}
revealed in{" "}
<Code highContrast>
{hours}h {minutes}m {seconds}s
</Code>
</>
);
} else {
string = "has ended. Come again later!";
string = "have been revealed.";
}
return (
@@ -47,7 +47,7 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
color="gray"
highContrast
style={{ display: "content" }}
href="https://discord.gg/njQdBhNS?event=1446208951136813117"
href="https://preview.blitzkit.app/tanks"
underline="none"
>
<Flex
@@ -56,17 +56,17 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
py="4"
style={{
borderRadius: "var(--radius-3)",
backgroundImage: "url(https://i.imgur.com/LRYmSkg.png)",
backgroundImage: "url(https://i.imgur.com/xgngxoy.png)",
backgroundSize: "cover",
backgroundPosition: "center",
boxSizing: "border-box",
boxShadow: "0 0 var(--space-7) var(--blue-a5)",
boxShadow: "0 0 var(--space-7) var(--white-a2)",
}}
align="center"
gap="5"
>
<img
src="https://i.imgur.com/mvmJQgB.png"
src="https://i.imgur.com/kXV3r3P.png"
style={{
height: "min(15vw, 5rem)",
filter: "drop-shadow(0.5rem 0.5rem 1rem #00000080)",
@@ -75,11 +75,11 @@ export function Giveaway({ skeleton }: MaybeSkeletonComponentProps) {
<Flex direction="column">
<Heading size={{ initial: "4", sm: "6" }}>
Music Box giveaway {!skeleton && string}{" "}
Tier XIs {!skeleton && string}{" "}
{skeleton && <InlineSkeleton width="10rem" />}
</Heading>
<Text size={{ initial: "2", sm: "3" }}>
Join the BlitzKit Discord server event
Get ready to go to the Tankopedia!
</Text>
</Flex>
</Flex>
packages/website/src/components/Markdown.tsx
+9 -2
View File
@@ -1,13 +1,20 @@
import { Link, Table } from '@radix-ui/themes';
import MarkdownToJSX from 'markdown-to-jsx';
import type { ComponentProps } from 'react';
import { docImageUrl, isExternalImage } from '../core/blitzkit/docImages';
interface MarkdownProps {
children: string;
}
function Image(props: ComponentProps<'img'>) {
return <img style={{ maxWidth: '100%' }} {...props} />;
function Image({ src, ...props }: ComponentProps<'img'>) {
return (
<img
style={{ maxWidth: '100%' }}
src={src && isExternalImage(src) ? docImageUrl(src) : src}
{...props}
/>
);
}
export function Markdown({ children }: MarkdownProps) {
packages/website/src/components/StupidCat.tsx
-3
View File
@@ -1,3 +0,0 @@
export function StupidCat() {
return <img src="https://i.imgur.com/6FBBzb9.png" />;
}
packages/website/src/components/TankSearch/components/Card.tsx
+3 -9
View File
@@ -1,7 +1,7 @@
import {
normalizeBoundingBox,
resolveDpm,
unionBoundingBox,
tankBoundingBox,
type TankDefinition,
} from "@blitzkit/core";
import { useMemo } from "react";
@@ -112,10 +112,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
return (tank.camouflage_still * gun.camouflage_loss * 100).toFixed(0);
case "survivability.volume": {
const dimensions = normalizeBoundingBox(
unionBoundingBox(
tankModelDefinition.bounding_box!,
turretModelDefinition.bounding_box!,
),
tankBoundingBox(tankModelDefinition, turretModelDefinition),
);
return (dimensions.x * dimensions.y * dimensions.z).toFixed(0);
@@ -123,10 +120,7 @@ export function TankSearchCard({ tank, onSelect }: TankSearchCardProps) {
case "survivability.length": {
const bounds = normalizeBoundingBox(
unionBoundingBox(
tankModelDefinition.bounding_box!,
turretModelDefinition.bounding_box!,
),
tankBoundingBox(tankModelDefinition, turretModelDefinition),
);
return Math.max(bounds.x, bounds.y, bounds.z).toFixed(0);
packages/website/src/components/TankSearch/index.tsx
+5 -17
View File
@@ -3,7 +3,7 @@ import {
normalizeBoundingBox,
resolveDpm,
SEARCH_KEYS,
unionBoundingBox,
tankBoundingBox,
type TankDefinition,
} from "@blitzkit/core";
import { literals } from "@blitzkit/i18n/src/literals";
@@ -137,16 +137,10 @@ export const TankSearch = memo<TankSearchProps>(
const bTurretModelDefinition =
bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.bounding_box!,
aTurretModelDefinition.bounding_box!,
),
tankBoundingBox(aTankModelDefinition, aTurretModelDefinition),
);
const bSize = normalizeBoundingBox(
unionBoundingBox(
bTankModelDefinition.bounding_box!,
bTurretModelDefinition.bounding_box!,
),
tankBoundingBox(bTankModelDefinition, bTurretModelDefinition),
);
const aVolume = aSize.x * aSize.y * aSize.z;
const bVolume = bSize.x * bSize.y * bSize.z;
@@ -164,16 +158,10 @@ export const TankSearch = memo<TankSearchProps>(
const bTurretModelDefinition =
bTankModelDefinition.turrets[b.turrets.at(-1)!.id];
const aSize = normalizeBoundingBox(
unionBoundingBox(
aTankModelDefinition.bounding_box!,
aTurretModelDefinition.bounding_box!,
),
tankBoundingBox(aTankModelDefinition, aTurretModelDefinition),
);
const bSize = normalizeBoundingBox(
unionBoundingBox(
bTankModelDefinition.bounding_box!,
bTurretModelDefinition.bounding_box!,
),
tankBoundingBox(bTankModelDefinition, bTurretModelDefinition),
);
const aLength = Math.max(aSize.x, aSize.y, aSize.z);
const bLength = Math.max(bSize.x, bSize.y, bSize.z);
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SidebarIconButton.tsx
+44
View File
@@ -0,0 +1,44 @@
import { Flex, IconButton, type FlexProps } from "@radix-ui/themes";
import type { ComponentProps, CSSProperties } from "react";
type SidebarIconButtonProps = ComponentProps<typeof IconButton> & {
selected: boolean;
src: string;
alt: string;
imageStyle?: CSSProperties;
};
export function SidebarIconGroup({ style, ...props }: FlexProps) {
return (
<Flex
direction="column"
overflow="hidden"
style={{ borderRadius: "var(--radius-full)", ...style }}
{...props}
/>
);
}
export function SidebarIconButton({
selected,
src,
alt,
imageStyle,
...props
}: SidebarIconButtonProps) {
return (
<IconButton
color={selected ? undefined : "gray"}
variant="soft"
size={{ initial: "2", sm: "3" }}
radius="none"
{...props}
>
<img
alt={alt}
src={src}
style={{ width: "50%", height: "50%", ...imageStyle }}
/>
</IconButton>
);
}
packages/website/src/components/Tankopedia/HeroSection/components/Options/components/SkinSwitcher.tsx
+83
View File
@@ -0,0 +1,83 @@
import { alias } from "@blitzkit/core";
import { Flex, Tooltip } from "@radix-ui/themes";
import { uniqBy } from "lodash-es";
import { SKIN_NUMBER } from "../../../../../../constants/skinNumber";
import { api } from "../../../../../../core/blitzkit/api";
import { useLocale } from "../../../../../../hooks/useLocale";
import { Duel } from "../../../../../../stores/duel";
import { Tankopedia } from "../../../../../../stores/tankopedia";
import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants";
import { SidebarIconButton } from "./SidebarIconButton";
const camouflageDefinitions = await api.camouflageDefinitions();
export function SkinSwitcher() {
const tank = Duel.use((state) => state.protagonist.tank);
const skin = Tankopedia.use((state) => state.requestedSkin);
const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
const disturbed = Tankopedia.use((state) => state.disturbed);
const { unwrap } = useLocale();
const skins = uniqBy(
Object.values(camouflageDefinitions.camouflages).filter(
(camouflage) => camouflage.tank_id === tank.id,
),
(camouflage) => unwrap(camouflage.name!),
);
if (skins.length === 0) return null;
return (
<Flex
direction="column"
top="50%"
right={
disturbed && requestedDisplay === TankopediaDisplay.Model
? "3"
: "-4rem"
}
style={{
position: "absolute",
transform: "translateY(-50%)",
transitionDuration: "200ms",
pointerEvents: "auto",
}}
>
{skins.map((camouflage, index) => {
const name = unwrap(camouflage.name!).replace(
"%(camo_num)",
SKIN_NUMBER,
);
const top = index === 0 ? "var(--radius-full)" : "0";
const bottom = index === skins.length - 1 ? "var(--radius-full)" : "0";
return (
<Tooltip key={camouflage.id} content={name} side="left">
<SidebarIconButton
selected={skin === camouflage.id}
alt={name}
src={alias("api", `/icons/camouflages/${camouflage.id}.webp`)}
size={{ initial: "3", sm: "4" }}
radius="full"
style={{
borderRadius: `${top} ${top} ${bottom} ${bottom}`,
}}
imageStyle={{
width: "70%",
height: "70%",
borderRadius: "50%",
}}
onClick={() => {
Tankopedia.mutate((draft) => {
draft.requestedSkin =
draft.requestedSkin === camouflage.id
? undefined
: camouflage.id;
});
}}
/>
</Tooltip>
);
})}
</Flex>
);
}
packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx
+14 -27
View File
@@ -46,6 +46,11 @@ import { TankSearch } from "../../../../TankSearch";
import { CustomShellButton } from "./components/CustomShellButton";
import { DynamicArmorSwitcher } from "./components/DynamicArmorSwitcher";
import { QuickInputs } from "./components/QuickInputs";
import {
SidebarIconButton,
SidebarIconGroup,
} from "./components/SidebarIconButton";
import { SkinSwitcher } from "./components/SkinSwitcher";
import { SpallLinerSwitcher } from "./components/SpallLinerSwitcher";
import { Thicknesses } from "./components/Thicknesses";
@@ -87,6 +92,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
<Thicknesses skeleton={skeleton} thicknessRange={thicknessRange} />
<SkinSwitcher />
<Flex
gap="2"
direction="column"
@@ -181,24 +188,13 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
</Popover.Root>
)}
<Flex
direction="column"
style={{
borderRadius: "var(--radius-full)",
}}
overflow="hidden"
>
<SidebarIconGroup>
{antagonistGun.shells.map((thisShell) => (
<IconButton
color={
thisShell.id === antagonistShell.id && !hasCustomShell
? undefined
: "gray"
}
variant="soft"
<SidebarIconButton
key={thisShell.id}
size={{ initial: "2", sm: "3" }}
radius="none"
selected={thisShell.id === antagonistShell.id && !hasCustomShell}
alt={unwrap(thisShell.name!)}
src={alias("api", `/icons/shells/${thisShell.icon}.webp`)}
onClick={() => {
Duel.mutate((draft) => {
draft.antagonist.shell = thisShell;
@@ -208,19 +204,10 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
draft.customShell = undefined;
});
}}
>
<img
alt={unwrap(thisShell.name!)}
src={alias("api", `/icons/shells/${thisShell.icon}.webp`)}
style={{
width: "50%",
height: "50%",
}}
/>
</IconButton>
/>
))}
<CustomShellButton />
</Flex>
</SidebarIconGroup>
<Flex
direction="column"
packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/index.tsx
+18 -2
View File
@@ -1,30 +1,46 @@
import { UpdateIcon } from "@radix-ui/react-icons";
import { Button, Flex, Heading } from "@radix-ui/themes";
import { useEffect, useRef } from "react";
import { SKIN_NUMBER } from "../../../../../../constants/skinNumber";
import { api } from "../../../../../../core/blitzkit/api";
import { useLocale } from "../../../../../../hooks/useLocale";
import { Duel } from "../../../../../../stores/duel";
import { Tankopedia } from "../../../../../../stores/tankopedia";
import type { MaybeSkeletonComponentProps } from "../../../../../../types/maybeSkeletonComponentProps";
import { Tracker } from "./components/Tracker";
const camouflageDefinitions = await api.camouflageDefinitions();
export function Title({ skeleton }: MaybeSkeletonComponentProps) {
const { unwrap, strings } = useLocale();
const modelRequested = Tankopedia.use((state) => state.modelRequested);
const protagonist = Duel.use((state) => state.protagonist.tank);
const revealed = Tankopedia.use((state) => state.revealed);
const disturbed = Tankopedia.use((state) => state.disturbed);
const name = unwrap(protagonist.name!);
const hasRevealed = useRef(false);
const skin = Tankopedia.use((state) => state.requestedSkin);
const camouflage =
skin === undefined ? undefined : camouflageDefinitions.camouflages[skin];
const tankName = unwrap(protagonist.name!);
const name = camouflage
? `${tankName} ${unwrap(camouflage.name!).replace("%(camo_num)", SKIN_NUMBER)}`
: tankName;
const fontSize = revealed
? disturbed
? "1.5rem"
: "2rem"
: `min(12vh, ${75 / name.length}vw)`;
useEffect(() => {
if (revealed) hasRevealed.current = true;
}, [revealed]);
return (
<Flex
onPointerDown={(event) => {
event.preventDefault();
if (!modelRequested) return;
if (!modelRequested || hasRevealed.current) return;
Tankopedia.mutate((draft) => {
draft.revealed = true;
packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx
+58 -3
View File
@@ -18,7 +18,7 @@ import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent
const ANGLE = degToRad(15);
const REVEAL_ANIMATION_TIME = 3;
const TRANSITION_ANIMATION_TIME = 0.5;
export const TRANSITION_ANIMATION_TIME = 0.5;
const LIGHTS_COUNT = 3;
const THETA_OFFSET = degToRad(180 - 45);
@@ -46,11 +46,17 @@ export function Lighting({ hasPbr }: Props) {
const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
const revealed = Tankopedia.use((state) => state.revealed);
const skinPending = Tankopedia.use(
(state) => state.loadedSkin !== state.skin,
);
const animationTime = useRef(REVEAL_ANIMATION_TIME);
const t0 = useRef(performance.now() / 1e3 - animationTime.current);
const holding = useRef(false);
const isRevealing = useRef(true);
const isFirstReveal = useRef(true);
const [animate, setAnimate] = useState(true);
@@ -71,6 +77,37 @@ export function Lighting({ hasPbr }: Props) {
setAnimate(true);
}, [requestedDisplay]);
useEffect(() => {
if (isFirstReveal.current) {
isFirstReveal.current = false;
return;
}
if (!revealed) {
animationTime.current = TRANSITION_ANIMATION_TIME;
t0.current = performance.now() / 1e3;
holding.current = true;
} else if (holding.current) {
animationTime.current = REVEAL_ANIMATION_TIME;
t0.current = performance.now() / 1e3 - animationTime.current;
holding.current = false;
} else {
return;
}
setAnimate(true);
invalidate();
}, [revealed]);
useEffect(() => {
if (!skinPending) return;
animationTime.current = TRANSITION_ANIMATION_TIME;
t0.current = performance.now() / 1e3;
setAnimate(true);
}, [skinPending]);
return (
<>
<ContactShadows
@@ -90,6 +127,7 @@ export function Lighting({ hasPbr }: Props) {
hasPbr={hasPbr}
t0={t0}
animationTime={animationTime}
holding={holding}
wrapper={wrapper}
stop={() => {
setAnimate(false);
@@ -145,11 +183,19 @@ interface AnimatorProps {
t0: RefObject<number>;
animationTime: RefObject<number>;
holding: RefObject<boolean>;
wrapper: RefObject<Group | null>;
hasPbr: boolean;
}
function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
function Animator({
stop,
t0,
animationTime,
holding,
wrapper,
hasPbr,
}: AnimatorProps) {
const requestedDisplay = Tankopedia.use((state) => state.requestedDisplay);
const display = Tankopedia.use((state) => state.display);
@@ -176,7 +222,7 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
useFrame(({ invalidate }) => {
const dt = performance.now() / 1e3 - t0.current;
const x = clamp(dt / animationTime.current, 0, 2);
const x = clamp(dt / animationTime.current, 0, holding.current ? 1 : 2);
if (x === 2) {
apply(1);
@@ -188,6 +234,9 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
const t = (0.5 * Math.sin(Math.PI * (x + 0.5)) + 0.5) ** 2;
apply(t);
if (holding.current && x === 1) return;
invalidate();
if (x >= 1 && Tankopedia.state.display !== requestedDisplay) {
@@ -195,6 +244,12 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
draft.display = requestedDisplay;
});
}
if (x >= 1 && Tankopedia.state.skin !== Tankopedia.state.loadedSkin) {
Tankopedia.mutate((draft) => {
draft.skin = draft.loadedSkin;
});
}
});
return null;
packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx
+6 -4
View File
@@ -3,10 +3,11 @@ import { useRef } from "react";
import { Group, Mesh, MeshStandardMaterial, Vector2 } from "three";
import { applyPitchYawLimits } from "../../../../../../core/blitz/applyPitchYawLimits";
import { hasEquipment } from "../../../../../../core/blitzkit/hasEquipment";
import { jsxTree } from "../../../../../../core/blitzkit/jsxTree";
import { modelTransformEvent } from "../../../../../../core/blitzkit/modelTransform";
import { skinTree } from "../../../../../../core/blitzkit/skinTree";
import { controlsEnabledEvent } from "../../../../../../core/controlsEnabled";
import { useModel } from "../../../../../../hooks/useModel";
import { useSkin } from "../../../../../../hooks/useSkin";
import { useTankModelDefinition } from "../../../../../../hooks/useTankModelDefinition";
import { useTankTransform } from "../../../../../../hooks/useTankTransform";
import { Duel } from "../../../../../../stores/duel";
@@ -28,6 +29,7 @@ export function TankModel() {
const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
const { gltf } = useModel(protagonist.tank.id);
const nodes = Object.values(gltf.nodes);
const skinGltf = useSkin(protagonist.tank.id);
useTankTransform(track, turret, turretContainer, gunContainer);
@@ -92,7 +94,7 @@ export function TankModel() {
window.removeEventListener("pointerup", handlePointerUp);
}
return jsxTree(node, {
return skinTree(node, skinGltf, {
mesh(_, props, key) {
return (
<mesh
@@ -169,7 +171,7 @@ export function TankModel() {
window.removeEventListener("pointerup", handlePointerUp);
}
return jsxTree(node, {
return skinTree(node, skinGltf, {
mesh(_, props, key) {
return (
<mesh
@@ -250,7 +252,7 @@ export function TankModel() {
window.removeEventListener("pointerup", handlePointerUp);
}
return jsxTree(node, {
return skinTree(node, skinGltf, {
mesh(_, props, key) {
return (
<mesh