mirror of
https://github.com/blitzkit/blitzkit.git
synced 2026-11-10 11:16:10 +01:00
Merge branch 'main' into pr/Hitjack007/283
This commit is contained in:
tresabhi committed
commit
7fb73edb87
124 files changed
+3133
-1319
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -128,19 +128,30 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
|
||||
? shotStatusColors[shot.out.status]
|
||||
: undefined;
|
||||
const inTitleColor = shotStatusColors[shot.in.status];
|
||||
const hasOutLayers = shot.out !== undefined && shot.out.layers.length > 0;
|
||||
const penetrationChance = shot.penetrationChance !== undefined && (
|
||||
<Text color="gray" weight="bold">
|
||||
{literals(strings.common.units.percentage, {
|
||||
value: (shot.penetrationChance * 100).toFixed(0),
|
||||
})}
|
||||
</Text>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card variant="classic" {...props}>
|
||||
<Flex direction="column" gap="2">
|
||||
<Flex direction="column" gap="1">
|
||||
<Text color={inTitleColor} weight="bold">
|
||||
{literals(
|
||||
strings.website.tools.tankopedia.sandbox.dynamic.shot_card.status[
|
||||
shot.in.status
|
||||
],
|
||||
{ damage: Math.round(shot.damage).toLocaleString(locale) }
|
||||
)}
|
||||
</Text>
|
||||
<Flex justify="between" align="center" gap="4">
|
||||
<Text color={inTitleColor} weight="bold">
|
||||
{literals(
|
||||
strings.website.tools.tankopedia.sandbox.dynamic.shot_card
|
||||
.status[shot.in.status],
|
||||
{ damage: Math.round(shot.damage).toLocaleString(locale) }
|
||||
)}
|
||||
</Text>
|
||||
|
||||
{!hasOutLayers && penetrationChance}
|
||||
</Flex>
|
||||
|
||||
<table
|
||||
style={{
|
||||
@@ -204,13 +215,17 @@ export function ShotDisplayCard({ shot, ...props }: ShotDisplayCardProps) {
|
||||
</Flex>
|
||||
</Inset>
|
||||
|
||||
<Text color={outTitleColor} weight="bold">
|
||||
{literals(
|
||||
strings.website.tools.tankopedia.sandbox.dynamic.shot_card
|
||||
.status[shot.out.status],
|
||||
{ damage: Math.round(shot.damage).toLocaleString(locale) }
|
||||
)}
|
||||
</Text>
|
||||
<Flex justify="between" align="center" gap="4">
|
||||
<Text color={outTitleColor} weight="bold">
|
||||
{literals(
|
||||
strings.website.tools.tankopedia.sandbox.dynamic.shot_card
|
||||
.status[shot.out.status],
|
||||
{ damage: Math.round(shot.damage).toLocaleString(locale) }
|
||||
)}
|
||||
</Text>
|
||||
|
||||
{penetrationChance}
|
||||
</Flex>
|
||||
|
||||
<Flex direction="column">
|
||||
{shot.out.layers.map((layer, index) => {
|
||||
|
||||
@@ -63,6 +63,36 @@ export type ArmorUserData = {
|
||||
}
|
||||
);
|
||||
|
||||
const PENETRATION_RANDOMIZATION = 0.05;
|
||||
|
||||
function resolvePenetrationChance(shoot: (scale: number) => Shot | null) {
|
||||
function penetrates(scale: number) {
|
||||
const shot = shoot(scale);
|
||||
|
||||
return (shot?.out ?? shot?.in)?.status === "penetration";
|
||||
}
|
||||
|
||||
let low = 1 - PENETRATION_RANDOMIZATION;
|
||||
let high = 1 + PENETRATION_RANDOMIZATION;
|
||||
|
||||
if (penetrates(low)) return 1;
|
||||
if (!penetrates(high)) return 0;
|
||||
|
||||
for (let iteration = 0; iteration < 16; iteration++) {
|
||||
const middle = (low + high) / 2;
|
||||
|
||||
if (penetrates(middle)) {
|
||||
high = middle;
|
||||
} else {
|
||||
low = middle;
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
(1 + PENETRATION_RANDOMIZATION - high) / (2 * PENETRATION_RANDOMIZATION)
|
||||
);
|
||||
}
|
||||
|
||||
const omitMaterial = new MeshBasicMaterial({
|
||||
colorWrite: false,
|
||||
depthWrite: true,
|
||||
@@ -89,6 +119,7 @@ export function SpacedArmorSceneComponent({
|
||||
intersections: Intersection[],
|
||||
allowRicochet: boolean,
|
||||
remainingPenetrationInput?: number,
|
||||
penetrationScale = 1,
|
||||
) => {
|
||||
const { customShell } = Tankopedia.state;
|
||||
const shell = customShell ?? Duel.state.antagonist.shell;
|
||||
@@ -125,6 +156,7 @@ export function SpacedArmorSceneComponent({
|
||||
Duel.state.protagonist.equipmentMatrix,
|
||||
);
|
||||
const penetration =
|
||||
penetrationScale *
|
||||
shell.penetration!.near *
|
||||
resolvePenetrationCoefficient(
|
||||
hasCalibratedShells,
|
||||
@@ -367,6 +399,7 @@ export function SpacedArmorSceneComponent({
|
||||
ricochetIntersections,
|
||||
false,
|
||||
remainingPenetration,
|
||||
penetrationScale,
|
||||
);
|
||||
|
||||
shot.in.status = "ricochet";
|
||||
@@ -422,6 +455,16 @@ export function SpacedArmorSceneComponent({
|
||||
|
||||
const shot = shoot(event.point, event.intersections, true)!;
|
||||
|
||||
shot.penetrationChance = resolvePenetrationChance((scale) =>
|
||||
shoot(
|
||||
event.point,
|
||||
event.intersections,
|
||||
true,
|
||||
undefined,
|
||||
scale,
|
||||
),
|
||||
);
|
||||
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.shot = shot;
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
@@ -0,0 +1,36 @@
|
||||
.outer {
|
||||
padding: 0 var(--space-4);
|
||||
margin-top: var(--space-3);
|
||||
|
||||
img {
|
||||
width: 1.25em;
|
||||
height: 1.25em;
|
||||
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.center {
|
||||
position: relative;
|
||||
|
||||
background: linear-gradient(var(--pink-3), var(--purple-2));
|
||||
box-shadow: var(--shadow-3);
|
||||
|
||||
max-width: 40rem;
|
||||
|
||||
padding: var(--space-5);
|
||||
border-radius: var(--radius-4);
|
||||
|
||||
.important {
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
left: 50%;
|
||||
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
background-color: inherit;
|
||||
|
||||
padding: var(--space-3);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { HeartFilledIcon } from "@radix-ui/react-icons";
|
||||
import { Button, Em, Flex, Strong, Text } from "@radix-ui/themes";
|
||||
import { donationTiers } from "../../config/donations";
|
||||
import styles from "./index.module.css";
|
||||
|
||||
export function Beg() {
|
||||
return (
|
||||
<Flex align="center" gap="4" direction="column" className={styles.outer}>
|
||||
<Text size="3" className={styles.important}>
|
||||
<Flex gap="2" align="center">
|
||||
<img src="https://github.com/tresabhi.png" />
|
||||
<Em>We need your attention</Em>
|
||||
</Flex>
|
||||
</Text>
|
||||
|
||||
<Flex direction="column" className={styles.center} gap="4">
|
||||
<Flex direction="column" gap="3">
|
||||
<Text color="tomato">
|
||||
We can no longer keep BlitzKit sustainable for <Strong>free</Strong>
|
||||
.
|
||||
</Text>
|
||||
|
||||
<Text>
|
||||
We want to add tank modules, player statistics, rebalancing patch
|
||||
notes, bring back the Discord bot, and more.
|
||||
</Text>
|
||||
|
||||
<Text>
|
||||
But paying out of pocket makes that impossible. We are an earnest
|
||||
non-profit, so consider donating to make the above possible. 100% of
|
||||
your money goes back into BlitzKit.
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex gap="3">
|
||||
{donationTiers.map(({ name, value, link }) => (
|
||||
<a target="_blank" key={name} href={link}>
|
||||
<Button size="3" color="crimson">
|
||||
{value === null && <HeartFilledIcon />}
|
||||
{value === null ? "Custom" : `$${value}`}
|
||||
</Button>
|
||||
</a>
|
||||
))}
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import { alias } from "@blitzkit/core";
|
||||
import { Flex, Heading, IconButton, Table } from "@radix-ui/themes";
|
||||
import type { TankCharacteristics } from "../../core/blitzkit/tankCharacteristics";
|
||||
import { useLocale } from "../../hooks/useLocale";
|
||||
import { CompareEphemeral } from "../../stores/compareEphemeral";
|
||||
import { CompareEphemeral, syncShellSlot } from "../../stores/compareEphemeral";
|
||||
import { CompareCellDirection } from "../CompareCell";
|
||||
import { StickyColumnHeaderCell } from "../StickyColumnHeaderCell";
|
||||
import { CompareRow } from "./CompareRow";
|
||||
@@ -50,7 +50,11 @@ export function Body({ stats }: BodyProps) {
|
||||
}}
|
||||
onClick={() => {
|
||||
CompareEphemeral.mutate((draft) => {
|
||||
draft.members[index].shell = thisShell;
|
||||
if (draft.syncShells) {
|
||||
syncShellSlot(draft.members, shellIndex);
|
||||
} else {
|
||||
draft.members[index].shell = thisShell;
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,10 +1,17 @@
|
||||
import { PlusIcon, TrashIcon } from "@radix-ui/react-icons";
|
||||
import { Button, Dialog, Flex, SegmentedControl } from "@radix-ui/themes";
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Dialog,
|
||||
Flex,
|
||||
SegmentedControl,
|
||||
Text,
|
||||
} from "@radix-ui/themes";
|
||||
import { DIALOG_MAX_HEIGHT } from "../../constants/dialog";
|
||||
import { api } from "../../core/blitzkit/api";
|
||||
import { tankToCompareMember } from "../../core/blitzkit/tankToCompareMember";
|
||||
import { useLocale } from "../../hooks/useLocale";
|
||||
import { CompareEphemeral } from "../../stores/compareEphemeral";
|
||||
import { CompareEphemeral, syncShellSlot } from "../../stores/compareEphemeral";
|
||||
import {
|
||||
ComparePersistent,
|
||||
type DeltaMode,
|
||||
@@ -23,6 +30,7 @@ export function Controls({
|
||||
onAddTankDialogOpenChange,
|
||||
}: ControlsProps) {
|
||||
const deltaMode = ComparePersistent.use((state) => state.deltaMode);
|
||||
const syncShells = CompareEphemeral.use((state) => state.syncShells);
|
||||
const { strings } = useLocale();
|
||||
|
||||
return (
|
||||
@@ -112,6 +120,31 @@ export function Controls({
|
||||
{strings.website.tools.compare.actions.deltas.absolute}
|
||||
</SegmentedControl.Item>
|
||||
</SegmentedControl.Root>
|
||||
|
||||
<Flex
|
||||
align="center"
|
||||
gap="2"
|
||||
style={{ cursor: "pointer" }}
|
||||
onClick={() => {
|
||||
CompareEphemeral.mutate((draft) => {
|
||||
draft.syncShells = !draft.syncShells;
|
||||
|
||||
if (!draft.syncShells || draft.members.length === 0) return;
|
||||
|
||||
const [first] = draft.members;
|
||||
|
||||
syncShellSlot(
|
||||
draft.members,
|
||||
first.gun.shells.findIndex(({ id }) => id === first.shell.id),
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Checkbox variant="classic" checked={syncShells} />
|
||||
<Text size="2">
|
||||
{strings.website.tools.compare.actions.sync_shells}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
+10
-10
@@ -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>
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
import { Grid, Text } from "@radix-ui/themes";
|
||||
import { credits } from "../config/credits";
|
||||
import { getStrings } from "../core/i18n/getStrings";
|
||||
|
||||
interface Props {
|
||||
locale: string;
|
||||
}
|
||||
|
||||
const { locale } = Astro.props;
|
||||
|
||||
const strings = getStrings(locale);
|
||||
---
|
||||
|
||||
<style>
|
||||
.credits {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
padding: var(--space-4);
|
||||
|
||||
.inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
|
||||
width: 100%;
|
||||
max-width: 80rem;
|
||||
|
||||
.list {
|
||||
gap: var(--space-5);
|
||||
|
||||
.link {
|
||||
display: contents;
|
||||
|
||||
.person {
|
||||
--profile-size: 5rem;
|
||||
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
padding: var(--space-4);
|
||||
padding-top: 0;
|
||||
margin-top: calc(var(--profile-size) / 2);
|
||||
gap: var(--space-1);
|
||||
|
||||
box-shadow: var(--shadow-3);
|
||||
border-radius: var(--radius-3);
|
||||
|
||||
.contain {
|
||||
border-radius: inherit;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
overflow: hidden;
|
||||
|
||||
.hint {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
filter: saturate(20) brightness(0.125) blur(4rem);
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
|
||||
position: relative;
|
||||
|
||||
margin-top: calc(var(--profile-size) / -2);
|
||||
|
||||
object-fit: cover;
|
||||
width: var(--profile-size);
|
||||
height: var(--profile-size);
|
||||
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="credits">
|
||||
<div class="inner">
|
||||
<Grid
|
||||
className="list"
|
||||
py="4"
|
||||
columns="repeat(auto-fill, minmax(16rem, 1fr))"
|
||||
flow="dense"
|
||||
gap="4"
|
||||
gapY="8"
|
||||
>
|
||||
{
|
||||
credits.map((person) => (
|
||||
<a target="_blank" href={person.url} class="link">
|
||||
<div class="person">
|
||||
<div class="contain">
|
||||
<div
|
||||
class="hint"
|
||||
style={`background-image: url(${person.image})`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img src={person.image} />
|
||||
|
||||
<Text weight="medium" className="text" color="gray" highContrast>
|
||||
{person.name}
|
||||
</Text>
|
||||
<Text className="text" color="gray" wrap="pretty">
|
||||
{person.description}
|
||||
</Text>
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</Grid>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,9 +43,9 @@ const strings = getStrings(locale);
|
||||
}}
|
||||
>
|
||||
<Heading>BlitzKit</Heading>
|
||||
<Text color="gray">{strings.website.footer.motto}</Text>
|
||||
<Text size="1" color="gray">
|
||||
{strings.website.footer.copyright}
|
||||
<Text size="2" color="gray">{strings.website.footer.motto}</Text>
|
||||
<Text size="2" color="gray">
|
||||
{strings.website.footer.association}
|
||||
</Text>
|
||||
|
||||
<Box mt="2">
|
||||
@@ -84,9 +84,6 @@ const strings = getStrings(locale);
|
||||
sm: "start",
|
||||
}}
|
||||
>
|
||||
<LinkI18n {locale} href="/docs/about/credits" color="gray">
|
||||
{strings.website.footer.about.credits}
|
||||
</LinkI18n>
|
||||
<Link
|
||||
href="https://discord.gg/nDt7AjGJQH"
|
||||
target="_blank"
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -5,7 +5,7 @@ import {
|
||||
GearIcon,
|
||||
HamburgerMenuIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
|
||||
import { Box, Code, Flex, Grid, IconButton, Link } from "@radix-ui/themes";
|
||||
import { resolveBranchName } from "../core/blitzkit/branches";
|
||||
import { getStrings } from "../core/i18n/getStrings";
|
||||
import { Var } from "../core/radix/var";
|
||||
@@ -20,7 +20,7 @@ export interface Props {
|
||||
|
||||
const { integrated = false } = Astro.props;
|
||||
const toolsFiltered = Object.values(tools).filter(
|
||||
(tool) => !tool.href && !tool.disabled
|
||||
(tool) => !tool.href && !tool.disabled,
|
||||
);
|
||||
const { locale } = Astro.props;
|
||||
const branchName = resolveBranchName(locale);
|
||||
@@ -105,7 +105,7 @@ const strings = getStrings(locale);
|
||||
<Flex
|
||||
className="content"
|
||||
width="100%"
|
||||
p={{ initial: "4", sm: "3" }}
|
||||
p="3"
|
||||
direction="column"
|
||||
align="center"
|
||||
>
|
||||
@@ -133,41 +133,6 @@ const strings = getStrings(locale);
|
||||
|
||||
<Box flexGrow="1" />
|
||||
|
||||
<Flex
|
||||
align="center"
|
||||
gap={{ initial: "3", md: "6" }}
|
||||
display={{ initial: "none", sm: "flex" }}
|
||||
justify="center"
|
||||
className="tools"
|
||||
>
|
||||
{
|
||||
toolsFiltered.map((tool) => {
|
||||
const selected = Astro.url.pathname.includes(`/${tool.id}`);
|
||||
const toolStrings =
|
||||
strings.website.tools[
|
||||
(tool.strings ??
|
||||
tool.id) as keyof typeof strings.website.tools
|
||||
];
|
||||
|
||||
return (
|
||||
<LinkI18n
|
||||
{locale}
|
||||
weight={selected ? "medium" : "regular"}
|
||||
color="gray"
|
||||
highContrast={selected}
|
||||
size={{ initial: "1", md: "2" }}
|
||||
href={`/${tool.id}`}
|
||||
underline="hover"
|
||||
>
|
||||
{toolStrings.name}
|
||||
</LinkI18n>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Flex>
|
||||
|
||||
<Box flexGrow="1" />
|
||||
|
||||
<Flex align="center" gap="4">
|
||||
<Link
|
||||
style={{ display: "flex", alignContent: "center" }}
|
||||
@@ -191,7 +156,7 @@ const strings = getStrings(locale);
|
||||
|
||||
<NavbarAccount {locale} client:idle />
|
||||
|
||||
<Flex align="center" display={{ initial: "flex", sm: "none" }}>
|
||||
<Flex align="center">
|
||||
<IconButton variant="ghost" color="gray" className="hamburger">
|
||||
<Cross1Icon data-expanded />
|
||||
<HamburgerMenuIcon data-closed />
|
||||
@@ -200,11 +165,10 @@ const strings = getStrings(locale);
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
<Flex
|
||||
direction="column"
|
||||
<Grid
|
||||
data-expanded
|
||||
columns="repeat(auto-fill, minmax(30rem, 1fr))"
|
||||
gap="3"
|
||||
display={{ initial: "flex", sm: "none" }}
|
||||
>
|
||||
{
|
||||
toolsFiltered.map((tool) => {
|
||||
@@ -229,7 +193,7 @@ const strings = getStrings(locale);
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
py="4"
|
||||
p="6"
|
||||
justify="end"
|
||||
flexGrow="1"
|
||||
style={{
|
||||
@@ -243,7 +207,7 @@ const strings = getStrings(locale);
|
||||
);
|
||||
})
|
||||
}
|
||||
</Flex>
|
||||
</Grid>
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
export function StupidCat() {
|
||||
return <img src="https://i.imgur.com/6FBBzb9.png" />;
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
+3
-1
@@ -44,7 +44,9 @@ export function GunFlexibilityVisualizer({
|
||||
const tank = Duel.use((state) => state.protagonist.tank);
|
||||
const turret = Duel.use((state) => state.protagonist.turret);
|
||||
const gun = Duel.use((state) => state.protagonist.gun);
|
||||
const modelRequested = Tankopedia.use((state) => state.modelRequested);
|
||||
const modelRequested = Tankopedia.use(
|
||||
(state) => state.loaders.model.requested,
|
||||
);
|
||||
|
||||
const tankModel = modelDefinition.models[tank.id];
|
||||
const turretModel = tankModel.turrets[turret.id];
|
||||
|
||||
+30
-8
@@ -1,5 +1,5 @@
|
||||
import { createDefaultSkills } from "@blitzkit/core";
|
||||
import { Flex, Progress, Text } from "@radix-ui/themes";
|
||||
import { Box, Flex, Progress, Text } from "@radix-ui/themes";
|
||||
import { clamp } from "lodash-es";
|
||||
import { memo, useMemo, type ComponentProps, type ReactNode } from "react";
|
||||
import { api } from "../../../../../../core/blitzkit/api";
|
||||
@@ -16,6 +16,7 @@ import {
|
||||
TankopediaRelativeAgainst,
|
||||
} from "../../../../../../stores/tankopedia";
|
||||
import { Info, type InfoProps } from "./Info";
|
||||
import { StatScale } from "./StatScale";
|
||||
|
||||
type InfoWithDeltaProps = Omit<InfoProps, "name"> & {
|
||||
stats: TankCharacteristics;
|
||||
@@ -122,6 +123,15 @@ export const InfoWithDelta = memo<InfoWithDeltaProps>(
|
||||
return othersValue !== undefined;
|
||||
}) as TankCharacteristics[];
|
||||
}, [relativeAgainst, shellIndex, equipmentMatrix, equalize]);
|
||||
const values = useMemo(
|
||||
() =>
|
||||
others.map((tank) =>
|
||||
typeof props.value === "function"
|
||||
? props.value(tank)!
|
||||
: (tank[props.value] as number),
|
||||
),
|
||||
[others],
|
||||
);
|
||||
const betterTanks = others.filter((tank) => {
|
||||
const othersValue =
|
||||
typeof props.value === "function"
|
||||
@@ -161,13 +171,25 @@ export const InfoWithDelta = memo<InfoWithDeltaProps>(
|
||||
|
||||
{!noRanking && (
|
||||
<Flex pl={indent ? "2" : "0"} align="center" gap="2">
|
||||
<Progress
|
||||
variant="soft"
|
||||
size="1"
|
||||
value={goodness * 100}
|
||||
color={color}
|
||||
style={{ height: "0.125rem", opacity: 0.5 }}
|
||||
/>
|
||||
<Box position="relative" flexGrow="1">
|
||||
<StatScale
|
||||
values={values}
|
||||
value={uhWhatDoICallThisVariable}
|
||||
lowerIsBetter={deltaType === "lowerIsBetter"}
|
||||
/>
|
||||
|
||||
<Progress
|
||||
variant="soft"
|
||||
size="1"
|
||||
value={goodness * 100}
|
||||
color={color}
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "0.125rem",
|
||||
opacity: 0.75,
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Text color="gray" size="1">
|
||||
{clamp(betterTanks.length + 1, 1, others.length)} /{" "}
|
||||
|
||||
+91
@@ -0,0 +1,91 @@
|
||||
import { memo, useEffect, useMemo, useRef } from "react";
|
||||
|
||||
const RESOLUTION = 1000;
|
||||
const HEIGHT = 8;
|
||||
const DENSE_TICKS = 100;
|
||||
|
||||
interface StatScaleProps {
|
||||
values: number[];
|
||||
value: number;
|
||||
lowerIsBetter?: boolean;
|
||||
}
|
||||
|
||||
export const StatScale = memo<StatScaleProps>(
|
||||
({ values, value, lowerIsBetter }) => {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const ticks = useMemo(() => {
|
||||
const min = Math.min(value, ...values);
|
||||
const max = Math.max(value, ...values);
|
||||
const range = max - min;
|
||||
const positions = new Set<number>();
|
||||
|
||||
for (const other of values) {
|
||||
const raw = range === 0 ? 0.5 : (other - min) / range;
|
||||
const x = Math.round((lowerIsBetter ? 1 - raw : raw) * RESOLUTION);
|
||||
|
||||
if (x === 0 || x === RESOLUTION) continue;
|
||||
|
||||
positions.add(x);
|
||||
}
|
||||
|
||||
return Array.from(positions, (x) => ({ x }));
|
||||
}, [values, value, lowerIsBetter]);
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current;
|
||||
if (!canvas) return;
|
||||
|
||||
const draw = () => {
|
||||
const { width } = canvas.getBoundingClientRect();
|
||||
const pixelRatio = window.devicePixelRatio || 1;
|
||||
const canvasWidth = Math.ceil(width * pixelRatio);
|
||||
const canvasHeight = Math.ceil(HEIGHT * pixelRatio);
|
||||
|
||||
if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
}
|
||||
|
||||
const context = canvas.getContext("2d");
|
||||
if (!context) return;
|
||||
|
||||
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||||
context.clearRect(0, 0, width, HEIGHT);
|
||||
|
||||
const styles = getComputedStyle(canvas);
|
||||
for (const { x } of ticks) {
|
||||
context.fillStyle = styles.getPropertyValue("--gray-a6").trim();
|
||||
context.fillRect((x / RESOLUTION) * width, 0, 1, HEIGHT);
|
||||
}
|
||||
};
|
||||
|
||||
const observer = new ResizeObserver(draw);
|
||||
observer.observe(canvas);
|
||||
window.addEventListener("resize", draw);
|
||||
draw();
|
||||
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
window.removeEventListener("resize", draw);
|
||||
};
|
||||
}, [ticks]);
|
||||
|
||||
return (
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
aria-hidden="true"
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: HEIGHT,
|
||||
margin: "auto 0",
|
||||
opacity: Math.min(1, Math.sqrt(DENSE_TICKS / ticks.length)),
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
+8
@@ -24,6 +24,14 @@ export function Survivability({ stats }: StatsAcceptorProps) {
|
||||
decimals={0}
|
||||
value={(stats) => stats.fireChance * 100}
|
||||
/>
|
||||
{stats.trackRepairTime !== undefined && (
|
||||
<InfoWithDelta
|
||||
value="trackRepairTime"
|
||||
stats={stats}
|
||||
deltaType="lowerIsBetter"
|
||||
decimals={2}
|
||||
/>
|
||||
)}
|
||||
<InfoWithDelta value="viewRange" stats={stats} decimals={0} />
|
||||
<ViewRangeVisualizer stats={stats} />
|
||||
<Info
|
||||
|
||||
+44
@@ -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>
|
||||
);
|
||||
}
|
||||
+106
@@ -0,0 +1,106 @@
|
||||
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.loaders.skin.requested);
|
||||
const attachment = Tankopedia.use(
|
||||
(state) => state.loaders.attachment.requested,
|
||||
);
|
||||
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!),
|
||||
);
|
||||
|
||||
// attachments aren't camouflages so they get their own group
|
||||
const groups = [
|
||||
skins.filter((camouflage) => !camouflage.attachment),
|
||||
skins.filter((camouflage) => camouflage.attachment),
|
||||
].filter((group) => group.length > 0);
|
||||
|
||||
if (skins.length === 0) return null;
|
||||
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
gap="3"
|
||||
top="50%"
|
||||
right={
|
||||
disturbed && requestedDisplay === TankopediaDisplay.Model
|
||||
? "3"
|
||||
: "-4rem"
|
||||
}
|
||||
style={{
|
||||
position: "absolute",
|
||||
transform: "translateY(-50%)",
|
||||
transitionDuration: "200ms",
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
>
|
||||
{groups.map((group) => (
|
||||
<Flex key={group[0].id} direction="column">
|
||||
{group.map((camouflage, index) => {
|
||||
const name = unwrap(camouflage.name!).replace(
|
||||
"%(camo_num)",
|
||||
SKIN_NUMBER,
|
||||
);
|
||||
const top = index === 0 ? "var(--radius-full)" : "0";
|
||||
const bottom =
|
||||
index === group.length - 1 ? "var(--radius-full)" : "0";
|
||||
|
||||
return (
|
||||
<Tooltip key={camouflage.id} content={name} side="left">
|
||||
<SidebarIconButton
|
||||
selected={
|
||||
(camouflage.attachment ? attachment : 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) => {
|
||||
const loader =
|
||||
draft.loaders[
|
||||
camouflage.attachment ? "attachment" : "skin"
|
||||
];
|
||||
|
||||
loader.requested =
|
||||
loader.requested === camouflage.id
|
||||
? undefined
|
||||
: camouflage.id;
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
})}
|
||||
</Flex>
|
||||
))}
|
||||
</Flex>
|
||||
);
|
||||
}
|
||||
+17
-28
@@ -47,6 +47,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";
|
||||
|
||||
@@ -78,7 +83,9 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
|
||||
const revealed = Tankopedia.use((state) => state.revealed);
|
||||
const disturbed = Tankopedia.use((state) => state.disturbed);
|
||||
const highGraphics = TankopediaPersistent.use((state) => state.highGraphics);
|
||||
const modelRequested = Tankopedia.use((state) => state.modelRequested);
|
||||
const modelRequested = Tankopedia.use(
|
||||
(state) => state.loaders.model.requested,
|
||||
);
|
||||
const equalize = Duel.use((state) => state.equalize);
|
||||
const equalizer = Duel.use((state) => state.antagonist.tank.equalizer);
|
||||
|
||||
@@ -88,6 +95,8 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
|
||||
|
||||
<Thicknesses skeleton={skeleton} thicknessRange={thicknessRange} />
|
||||
|
||||
<SkinSwitcher />
|
||||
|
||||
<Flex
|
||||
gap="2"
|
||||
direction="column"
|
||||
@@ -182,24 +191,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;
|
||||
@@ -209,19 +207,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"
|
||||
|
||||
+27
-4
@@ -1,30 +1,53 @@
|
||||
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 modelRequested = Tankopedia.use(
|
||||
(state) => state.loaders.model.requested,
|
||||
);
|
||||
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.loaders.skin.requested);
|
||||
const camouflage =
|
||||
skin === undefined ? undefined : camouflageDefinitions.camouflages[skin];
|
||||
const tankName = unwrap(protagonist.name!);
|
||||
// legendary camos carry the tank's in-battle name
|
||||
const name = (
|
||||
camouflage
|
||||
? camouflage.tank_name
|
||||
? unwrap(camouflage.tank_name)
|
||||
: `${tankName} ${unwrap(camouflage.name!)}`
|
||||
: tankName
|
||||
).replace("%(camo_num)", SKIN_NUMBER);
|
||||
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;
|
||||
@@ -86,7 +109,7 @@ export function Title({ skeleton }: MaybeSkeletonComponentProps) {
|
||||
onPointerDown={(event) => event.stopPropagation()}
|
||||
onClick={() => {
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.modelRequested = true;
|
||||
draft.loaders.model.requested = true;
|
||||
});
|
||||
}}
|
||||
>
|
||||
|
||||
+61
-3
@@ -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,17 +46,26 @@ 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.loaders.skin.requested !== state.loaders.skin.loaded ||
|
||||
state.loaders.attachment.requested !== state.loaders.attachment.loaded,
|
||||
);
|
||||
|
||||
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);
|
||||
|
||||
useEffect(() => {
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.revealed = true;
|
||||
draft.loaders.model.loaded = true;
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -71,6 +80,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 +130,7 @@ export function Lighting({ hasPbr }: Props) {
|
||||
hasPbr={hasPbr}
|
||||
t0={t0}
|
||||
animationTime={animationTime}
|
||||
holding={holding}
|
||||
wrapper={wrapper}
|
||||
stop={() => {
|
||||
setAnimate(false);
|
||||
@@ -124,6 +165,7 @@ export function Lighting({ hasPbr }: Props) {
|
||||
key={index}
|
||||
position={position}
|
||||
intensity={intensity}
|
||||
userData={{ intensity }}
|
||||
penumbra={1}
|
||||
castShadow={highGraphics}
|
||||
decay={1}
|
||||
@@ -145,11 +187,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);
|
||||
|
||||
@@ -166,6 +216,11 @@ function Animator({ stop, t0, animationTime, wrapper, hasPbr }: AnimatorProps) {
|
||||
for (const child of wrapper.current.children) {
|
||||
if (child instanceof SpotLight) {
|
||||
child.angle = ANGLE * t * factor;
|
||||
child.intensity = child.userData.intensity;
|
||||
|
||||
if (child.angle === 0) {
|
||||
child.intensity = 0;
|
||||
}
|
||||
} else if (child instanceof HemisphereLight) {
|
||||
child.intensity = HEMISPHERE_INTENSITY * t * factor;
|
||||
}
|
||||
@@ -176,7 +231,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 +243,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) {
|
||||
|
||||
+45
-5
@@ -1,18 +1,21 @@
|
||||
import { invalidate, useThree, type ThreeEvent } from "@react-three/fiber";
|
||||
import { useRef } from "react";
|
||||
import type { QuicklimeEvent } from "quicklime";
|
||||
import { useEffect, 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";
|
||||
import { Tankopedia } from "../../../../../../stores/tankopedia";
|
||||
import { TankopediaDisplay } from "../../../../../../stores/tankopediaPersistent/constants";
|
||||
import { ModelTankWrapper } from "../../../../../Armor/components/ModelTankWrapper";
|
||||
import { transitionEvent } from "./Lighting";
|
||||
|
||||
export function TankModel() {
|
||||
const protagonist = Duel.use((draft) => draft.protagonist);
|
||||
@@ -28,9 +31,46 @@ 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);
|
||||
const attachmentGltf = useSkin(protagonist.tank.id, "attachment");
|
||||
const skins = [skinGltf, attachmentGltf].filter((skin) => skin !== undefined);
|
||||
|
||||
useTankTransform(track, turret, turretContainer, gunContainer);
|
||||
|
||||
useEffect(() => {
|
||||
const emissiveMaterials = new Set<MeshStandardMaterial>();
|
||||
|
||||
for (const scene of [gltf.scene, ...skins.map((skin) => skin.scene)]) {
|
||||
scene.traverse((object) => {
|
||||
if (
|
||||
object instanceof Mesh &&
|
||||
object.material instanceof MeshStandardMaterial &&
|
||||
object.material.emissiveMap
|
||||
) {
|
||||
emissiveMaterials.add(object.material);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// emissive parts fade with the lights instead of glowing in the dark
|
||||
function applyIntensity(intensity: number) {
|
||||
for (const material of emissiveMaterials) {
|
||||
material.emissiveIntensity = intensity;
|
||||
}
|
||||
}
|
||||
|
||||
function handleTransitionEvent(event: QuicklimeEvent<number>) {
|
||||
applyIntensity(event.data);
|
||||
}
|
||||
|
||||
applyIntensity(transitionEvent.last!);
|
||||
transitionEvent.on(handleTransitionEvent);
|
||||
|
||||
return () => {
|
||||
transitionEvent.off(handleTransitionEvent);
|
||||
};
|
||||
}, [gltf, skinGltf, attachmentGltf]);
|
||||
|
||||
return (
|
||||
<ModelTankWrapper ref={hullContainer}>
|
||||
{nodes.map((node) => {
|
||||
@@ -92,7 +132,7 @@ export function TankModel() {
|
||||
window.removeEventListener("pointerup", handlePointerUp);
|
||||
}
|
||||
|
||||
return jsxTree(node, {
|
||||
return skinTree(node, skins, {
|
||||
mesh(_, props, key) {
|
||||
return (
|
||||
<mesh
|
||||
@@ -169,7 +209,7 @@ export function TankModel() {
|
||||
window.removeEventListener("pointerup", handlePointerUp);
|
||||
}
|
||||
|
||||
return jsxTree(node, {
|
||||
return skinTree(node, skins, {
|
||||
mesh(_, props, key) {
|
||||
return (
|
||||
<mesh
|
||||
@@ -250,7 +290,7 @@ export function TankModel() {
|
||||
window.removeEventListener("pointerup", handlePointerUp);
|
||||
}
|
||||
|
||||
return jsxTree(node, {
|
||||
return skinTree(node, skins, {
|
||||
mesh(_, props, key) {
|
||||
return (
|
||||
<mesh
|
||||
|
||||
@@ -20,7 +20,9 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
|
||||
const canvas = useRef<HTMLCanvasElement>(null!);
|
||||
const isFullScreen = useFullScreen();
|
||||
const protagonist = Duel.use((state) => state.protagonist.tank);
|
||||
const modelRequested = Tankopedia.use((state) => state.modelRequested);
|
||||
const modelRequested = Tankopedia.use(
|
||||
(state) => state.loaders.model.requested,
|
||||
);
|
||||
const thicknessRange = useMemo(() => {
|
||||
const entries = Object.values(tankDefinitions.tanks);
|
||||
const filtered = entries.filter(
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
interface CreditPeople {
|
||||
name: string;
|
||||
description: string;
|
||||
url?: string;
|
||||
image: string;
|
||||
}
|
||||
|
||||
export const credits: CreditPeople[] = [
|
||||
{
|
||||
name: "TrèsAbhi",
|
||||
description: "Founder and lead developer",
|
||||
url: "https://abhi-deep.com/",
|
||||
image: "https://github.com/tresabhi.png",
|
||||
},
|
||||
{
|
||||
name: "HitJack",
|
||||
description: "Developer on website",
|
||||
url: "https://marksstuff.com",
|
||||
image: "https://github.com/Hitjack007.png",
|
||||
},
|
||||
{
|
||||
name: "aeson000",
|
||||
description: "Advisor on game and website",
|
||||
url: "https://discord.gg/WHdER7ZPAD",
|
||||
image: "/media/users/aeson000.png",
|
||||
},
|
||||
{
|
||||
name: "GonnaHetzMe",
|
||||
description: "Developer and advisor on back end",
|
||||
url: "https://github.com/karelpak1",
|
||||
image: "https://github.com/karelpak1.png",
|
||||
},
|
||||
{
|
||||
name: "ChickenMan7777",
|
||||
description: "Moderator and former advisor on game mechanics",
|
||||
url: "https://discord.gg/rEsUbXCqD9",
|
||||
image: "/media/users/chickenman7777.webp",
|
||||
},
|
||||
{
|
||||
name: "Avenir",
|
||||
description: "Moderator and elite Advanced Recon Commando",
|
||||
image: "/media/users/avenir.webp",
|
||||
},
|
||||
{
|
||||
name: "Pyogenics",
|
||||
description: "Former advisor on game 3D format",
|
||||
url: "https://github.com/Pyogenics",
|
||||
image: "https://github.com/Pyogenics.png",
|
||||
},
|
||||
{
|
||||
name: "Prince_NA",
|
||||
description: "Former advisor on bot and website",
|
||||
image: "/media/users/prince-na.webp",
|
||||
},
|
||||
{
|
||||
name: "Vovko",
|
||||
description: "Former advisor on bot",
|
||||
url: "https://amth.one/",
|
||||
image: "https://github.com/cufee.png",
|
||||
},
|
||||
{
|
||||
name: "S0AP",
|
||||
description: "Former advisor on and advertiser for bot",
|
||||
url: "https://discord.gg/3KfH93um3Y",
|
||||
image: "/media/users/s0ap.webp",
|
||||
},
|
||||
{
|
||||
name: "Synx",
|
||||
description: "Former advisor on bot and website",
|
||||
url: "https://www.youtube.com/@Synx_Blitz",
|
||||
image: "/media/users/synx.webp",
|
||||
},
|
||||
{
|
||||
name: "34wotb",
|
||||
description: "Former advisor on bot",
|
||||
url: "https://www.twitch.tv/34wotb/",
|
||||
image: "/media/users/34wotb.jpg",
|
||||
},
|
||||
{
|
||||
name: "HisRoyalFatness",
|
||||
description: "Former advisor on website",
|
||||
url: "https://www.youtube.com/@hisroyalfatness",
|
||||
image: "/media/users/hisroyalfatness.jpg",
|
||||
},
|
||||
{
|
||||
name: "Minitelrose",
|
||||
description: "Former advisor on game mechanics",
|
||||
url: "https://wotinspector.com/",
|
||||
image: "/media/users/minitelrose.webp",
|
||||
},
|
||||
{
|
||||
name: "Maddox",
|
||||
description: "Game asset decompression",
|
||||
url: "https://github.com/Maddoxkkm",
|
||||
image: "https://github.com/Maddoxkkm.png",
|
||||
},
|
||||
{
|
||||
name: "TJ Duff",
|
||||
description: "Chief executive cheer leader",
|
||||
image: "/media/users/tj-duff.jpg",
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1,23 @@
|
||||
// TODO: source this from the open collective api, if even possible
|
||||
export const donationTiers = [
|
||||
{
|
||||
name: "The Backer",
|
||||
value: 5,
|
||||
link: "https://opencollective.com/blitzkit/contribute/backers-106312/checkout",
|
||||
},
|
||||
{
|
||||
name: "The Engineer",
|
||||
value: 10,
|
||||
link: "https://opencollective.com/blitzkit/contribute/the-engineer-107057/checkout",
|
||||
},
|
||||
{
|
||||
name: "The Patron",
|
||||
value: 25,
|
||||
link: "https://opencollective.com/blitzkit/contribute/the-patron-107056/checkout",
|
||||
},
|
||||
{
|
||||
name: "The Sponsor",
|
||||
value: null,
|
||||
link: "https://opencollective.com/blitzkit/donate",
|
||||
},
|
||||
];
|
||||
@@ -0,0 +1 @@
|
||||
export const SKIN_NUMBER = "0417";
|
||||
@@ -74,4 +74,8 @@ export const tools: Record<string, Tool> = {
|
||||
href: "https://discord.gg/nDt7AjGJQH",
|
||||
button: "plum",
|
||||
},
|
||||
credits: {
|
||||
id: "credits",
|
||||
button: "bronze",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,32 @@
|
||||
import { alias } from "@blitzkit/core";
|
||||
|
||||
const EXTERNAL_IMAGE = /^https?:\/\//;
|
||||
const MARKDOWN_IMAGES = [
|
||||
/!\[[^\]]*\]\((\S+?)(?:\s+"[^"]*")?\)/g,
|
||||
/<img[^>]*\ssrc=["']([^"']+)["']/g,
|
||||
];
|
||||
|
||||
export function isExternalImage(src: string) {
|
||||
return EXTERNAL_IMAGE.test(src);
|
||||
}
|
||||
|
||||
export function docImageId(url: string) {
|
||||
let hash = 0x811c9dc5;
|
||||
|
||||
for (let index = 0; index < url.length; index++) {
|
||||
hash ^= url.charCodeAt(index);
|
||||
hash = Math.imul(hash, 0x01000193) >>> 0;
|
||||
}
|
||||
|
||||
return hash.toString(16).padStart(8, "0");
|
||||
}
|
||||
|
||||
export function docImageUrl(url: string) {
|
||||
return alias("api", `/docs/images/${docImageId(url)}.webp`);
|
||||
}
|
||||
|
||||
export function externalDocImages(markdown: string) {
|
||||
return MARKDOWN_IMAGES.flatMap((pattern) =>
|
||||
Array.from(markdown.matchAll(pattern), (match) => match[1]),
|
||||
).filter(isExternalImage);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { ComponentProps, ReactNode } from "react";
|
||||
import { Mesh, MeshStandardMaterial, Object3D } from "three";
|
||||
import { AdditiveBlending, Mesh, MeshStandardMaterial, Object3D } from "three";
|
||||
|
||||
export function jsxTree(
|
||||
node: Object3D,
|
||||
@@ -27,6 +27,10 @@ export function jsxTree(
|
||||
|
||||
if (props.material instanceof MeshStandardMaterial) {
|
||||
props.material.depthWrite = true;
|
||||
|
||||
if (props.material.userData.blending === "additive") {
|
||||
props.material.blending = AdditiveBlending;
|
||||
}
|
||||
}
|
||||
|
||||
return mergers?.mesh ? (
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
import type { Material, Object3D } from "three";
|
||||
import type { Skin } from "../../hooks/useSkin";
|
||||
import { jsxTree } from "./jsxTree";
|
||||
|
||||
type Mergers = Parameters<typeof jsxTree>[1];
|
||||
|
||||
// names get sanitized and made unique on load
|
||||
function nameOf(object3d: Object3D): string {
|
||||
return object3d.userData.name ?? object3d.name;
|
||||
}
|
||||
|
||||
/**
|
||||
* skins are layered in order, so an attachment's states win over the
|
||||
* camouflage's
|
||||
*/
|
||||
export function skinTree(node: Object3D, skins: Skin[], mergers: Mergers) {
|
||||
const skinNodes = new Map<string, Object3D[]>();
|
||||
const materials = new Map<string, Material>();
|
||||
const states: Record<string, string | null> = {};
|
||||
|
||||
for (const skin of skins) {
|
||||
for (const node of skin.scene.children) {
|
||||
skinNodes.set(node.name, [...(skinNodes.get(node.name) ?? []), node]);
|
||||
}
|
||||
|
||||
for (const [name, material] of skin.materials) {
|
||||
materials.set(name, material);
|
||||
}
|
||||
|
||||
Object.assign(states, skin.scene.userData.states);
|
||||
}
|
||||
|
||||
function switchChildren(object3d: Object3D, childMergers: Mergers) {
|
||||
if (object3d.userData.state === undefined) return;
|
||||
|
||||
const name = nameOf(object3d);
|
||||
const state = name in states ? states[name] : object3d.userData.state;
|
||||
|
||||
return object3d.children
|
||||
.filter((child) => nameOf(child) === state)
|
||||
.map((child) => jsxTree(child, childMergers));
|
||||
}
|
||||
|
||||
const partMergers: Mergers = {
|
||||
...mergers,
|
||||
group(object3d, props, key) {
|
||||
return (
|
||||
<group key={key} {...props}>
|
||||
{switchChildren(object3d, partMergers) ?? props.children}
|
||||
</group>
|
||||
);
|
||||
},
|
||||
};
|
||||
const skinMergers: Mergers = {
|
||||
mesh(mesh, props, key) {
|
||||
const material = materials.get((mesh.material as Material).name);
|
||||
|
||||
return mergers!.mesh!(
|
||||
mesh,
|
||||
material ? { ...props, material } : props,
|
||||
key,
|
||||
);
|
||||
},
|
||||
group(object3d, props, key) {
|
||||
const parts = skinNodes.get(object3d.name) ?? [];
|
||||
|
||||
return (
|
||||
<group key={key} {...props}>
|
||||
{switchChildren(object3d, skinMergers) ?? props.children}
|
||||
{parts.flatMap((part) =>
|
||||
part.children.map((child) => jsxTree(child, partMergers)),
|
||||
)}
|
||||
</group>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
return jsxTree(node, skinMergers);
|
||||
}
|
||||
@@ -0,0 +1,255 @@
|
||||
import { parseHierarchies, type Sc2ReadStream } from "@blitzkit/core";
|
||||
import { times } from "lodash-es";
|
||||
|
||||
interface Value {
|
||||
"any.type": string;
|
||||
"any.value": unknown;
|
||||
}
|
||||
|
||||
interface ScriptNode {
|
||||
type: string;
|
||||
node: Record<string, unknown> & { defaults?: Record<string, Value> };
|
||||
connections?: Record<
|
||||
string,
|
||||
{ pinIn: string; pinOut: string; target: string }
|
||||
>;
|
||||
}
|
||||
|
||||
interface Script {
|
||||
nodes: Record<string, ScriptNode>;
|
||||
}
|
||||
|
||||
interface Action {
|
||||
"act.delay": number;
|
||||
"act.entityName": string;
|
||||
"act.event": number;
|
||||
"act.switchIndex": number;
|
||||
"act.type": number;
|
||||
"act.userEventId": string;
|
||||
}
|
||||
|
||||
interface Entity {
|
||||
name: string;
|
||||
parent?: Entity;
|
||||
children: Entity[];
|
||||
}
|
||||
|
||||
const SELF_ENTITY = "*** Self ***";
|
||||
const SCENE_LOADED_EVENT = 1;
|
||||
const USER_EVENT = 2;
|
||||
const SWITCH_ACTIONS = [8, 9];
|
||||
// what the game fires as a tank is shown in the garage, in order
|
||||
const LOAD_EVENTS = ["Added", "TankAliveInHangar", "TankIsShownInNewScreen"];
|
||||
const MAX_DEPTH = 64;
|
||||
|
||||
function findChild(entity: Entity, name: string): Entity | undefined {
|
||||
for (const child of entity.children) {
|
||||
if (child.name === name) return child;
|
||||
|
||||
const found = findChild(child, name);
|
||||
|
||||
if (found) return found;
|
||||
}
|
||||
}
|
||||
|
||||
function resolveTarget(owner: Entity, entityName: string) {
|
||||
if (entityName === SELF_ENTITY) return owner;
|
||||
|
||||
const [first, ...rest] = entityName.split("->");
|
||||
let target: Entity | undefined;
|
||||
|
||||
for (
|
||||
let ancestor: Entity | undefined = owner;
|
||||
ancestor && !target;
|
||||
ancestor = ancestor.parent
|
||||
) {
|
||||
target = ancestor.name === first ? ancestor : findChild(ancestor, first);
|
||||
}
|
||||
|
||||
for (const name of rest) target = target && findChild(target, name);
|
||||
|
||||
return target;
|
||||
}
|
||||
|
||||
/**
|
||||
* replays what picks each state switcher's state as a tank is shown in the
|
||||
* garage, with the camo's preset applied and its items attached; delayed
|
||||
* actions are skipped so states stay as they are when the tank appears
|
||||
*/
|
||||
export function switcherStates(
|
||||
sc2: ReturnType<Sc2ReadStream["sc2"]>,
|
||||
preset: string | undefined,
|
||||
attachments: Map<string, string[]>,
|
||||
) {
|
||||
const scripts: Record<string, Script> = {};
|
||||
const stateNames = new Map<Entity, string[]>();
|
||||
const scenarios: { owner: Entity; script: Script }[] = [];
|
||||
const actions: { owner: Entity; action: Action }[] = [];
|
||||
const states: Record<string, string | null> = {};
|
||||
|
||||
function activateState(entity: Entity | undefined, state: number) {
|
||||
const names = entity && stateNames.get(entity);
|
||||
|
||||
if (names) states[entity.name] = names[state] ?? null;
|
||||
}
|
||||
|
||||
for (const component of Object.values(
|
||||
sc2["#sceneComponents"] as unknown as Record<string, unknown>,
|
||||
) as { "comp.typename"?: string; "ssc.scripts"?: Record<string, Script> }[]) {
|
||||
if (component?.["comp.typename"] !== "ScenarioSingletonComponent") continue;
|
||||
|
||||
Object.assign(scripts, component["ssc.scripts"]);
|
||||
}
|
||||
|
||||
parseHierarchies<Entity>(
|
||||
sc2["#hierarchy"],
|
||||
{ name: "", children: [] },
|
||||
(hierarchy, components, parent) => {
|
||||
const entity: Entity = { name: hierarchy.name, parent, children: [] };
|
||||
|
||||
parent.children.push(entity);
|
||||
|
||||
for (const item of attachments.get(hierarchy.name) ?? []) {
|
||||
entity.children.push({ name: item, parent: entity, children: [] });
|
||||
}
|
||||
|
||||
for (const component of components) {
|
||||
switch (component["comp.typename"]) {
|
||||
case "StateSwitcherComponent": {
|
||||
const names = times(
|
||||
component["ssc.statesCount"],
|
||||
(index) => component[`ssc.state${index}`],
|
||||
);
|
||||
|
||||
stateNames.set(entity, names);
|
||||
states[entity.name] = names[component["ssc.activeState"]] ?? null;
|
||||
break;
|
||||
}
|
||||
|
||||
case "ScenarioComponent": {
|
||||
const script = scripts[component["scenario.scriptId"]];
|
||||
|
||||
if (script) scenarios.push({ owner: entity, script });
|
||||
break;
|
||||
}
|
||||
|
||||
case "ActionComponent":
|
||||
times(component["ac.actionCount"], (index) => {
|
||||
actions.push({
|
||||
owner: entity,
|
||||
action: component[index.toString().padStart(4, "0")] as Action,
|
||||
});
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return entity;
|
||||
},
|
||||
);
|
||||
|
||||
function runScenario(
|
||||
{ owner, script }: (typeof scenarios)[number],
|
||||
event: string,
|
||||
) {
|
||||
const { nodes } = script;
|
||||
const links = (id: string) => Object.values(nodes[id].connections ?? {});
|
||||
|
||||
function input(id: string, pin: string): unknown {
|
||||
const link = links(id).find((link) => link.pinIn === pin);
|
||||
|
||||
return link
|
||||
? output(link.target, link.pinOut)
|
||||
: nodes[id].node.defaults?.[pin]?.["any.value"];
|
||||
}
|
||||
|
||||
function output(id: string, pin: string): unknown {
|
||||
const { type, node } = nodes[id];
|
||||
|
||||
switch (type) {
|
||||
case "ScenarioSceneInfoNode":
|
||||
return node["scenarioSceneInfoNode.infoKind"] === "GetCurrentEntity"
|
||||
? owner
|
||||
: undefined;
|
||||
|
||||
case "ScenarioGetMemberNode":
|
||||
return node["scenarioGetMemberNode.fieldName"] === "parent" &&
|
||||
pin === "parent"
|
||||
? (input(id, "object") as Entity | undefined)?.parent
|
||||
: undefined;
|
||||
|
||||
case "ScenarioFunctionNode":
|
||||
switch (
|
||||
`${node["scenarioFunctionNode.className"]}.${node["scenarioFunctionNode.functionName"]}`
|
||||
) {
|
||||
case "Entity.FindChildByName": {
|
||||
const entity = input(id, "entity") as Entity | undefined;
|
||||
return entity && findChild(entity, input(id, "name") as string);
|
||||
}
|
||||
|
||||
case "TankComponent.GetAppliedSkinMaterialConfigName":
|
||||
return preset;
|
||||
|
||||
case "String.Compare":
|
||||
return input(id, "1") === input(id, "2");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function execute(id: string, depth: number) {
|
||||
if (depth > MAX_DEPTH) return;
|
||||
|
||||
const { type, node } = nodes[id];
|
||||
let pin = "exit";
|
||||
|
||||
if (type === "ScenarioEventNode") {
|
||||
pin = "event";
|
||||
} else if (type === "ScenarioBranchNode") {
|
||||
pin = input(id, "condition") ? "true" : "false";
|
||||
} else if (
|
||||
node["scenarioFunctionNode.functionName"] === "ActivateState"
|
||||
) {
|
||||
activateState(
|
||||
input(id, "entity") as Entity | undefined,
|
||||
Number(input(id, "state")),
|
||||
);
|
||||
}
|
||||
|
||||
for (const link of links(id)) {
|
||||
if (link.pinIn === pin) execute(link.target, depth + 1);
|
||||
}
|
||||
}
|
||||
|
||||
for (const id in nodes) {
|
||||
const { type, node } = nodes[id];
|
||||
const name =
|
||||
node["ScenarioEventNode.eventName"] === "Custom"
|
||||
? node.defaults?.["Event Name"]?.["any.value"]
|
||||
: node["ScenarioEventNode.eventName"];
|
||||
|
||||
if (type === "ScenarioEventNode" && name === event) execute(id, 0);
|
||||
}
|
||||
}
|
||||
|
||||
for (const event of LOAD_EVENTS) {
|
||||
for (const { owner, action } of actions) {
|
||||
if (
|
||||
action["act.delay"] === 0 &&
|
||||
SWITCH_ACTIONS.includes(action["act.type"]) &&
|
||||
(event === LOAD_EVENTS[0]
|
||||
? action["act.event"] === SCENE_LOADED_EVENT
|
||||
: action["act.event"] === USER_EVENT &&
|
||||
action["act.userEventId"] === event)
|
||||
) {
|
||||
activateState(
|
||||
resolveTarget(owner, action["act.entityName"]),
|
||||
action["act.switchIndex"],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
for (const scenario of scenarios) runScenario(scenario, event);
|
||||
}
|
||||
|
||||
return states;
|
||||
}
|
||||
@@ -8,8 +8,8 @@ import {
|
||||
resolvePenetrationCoefficient,
|
||||
ShellType,
|
||||
sum,
|
||||
tankBoundingBox,
|
||||
TankClass,
|
||||
unionBoundingBox,
|
||||
type EngineDefinition,
|
||||
type EquipmentDefinitions,
|
||||
type GunDefinition,
|
||||
@@ -119,6 +119,7 @@ export function tankCharacteristics(
|
||||
const hasImprovedVerticalStabilizer = equipment(122);
|
||||
const hasDownImprovedVerticalStabilizer = equipment(124);
|
||||
const hasImprovedSuspension = equipment(123);
|
||||
const hasToolbox = equipment(113);
|
||||
|
||||
const hasTungsten = consumable(45);
|
||||
const hasAdrenaline = consumable(18);
|
||||
@@ -335,10 +336,7 @@ export function tankCharacteristics(
|
||||
);
|
||||
|
||||
const size = normalizeBoundingBox(
|
||||
unionBoundingBox(
|
||||
tankModelDefinition.bounding_box!,
|
||||
turretModelDefinition.bounding_box!,
|
||||
),
|
||||
tankBoundingBox(tankModelDefinition, turretModelDefinition),
|
||||
);
|
||||
const weightKg =
|
||||
tank.weight + engine.weight + track.weight + turret.weight + gun.weight;
|
||||
@@ -518,6 +516,12 @@ export function tankCharacteristics(
|
||||
}
|
||||
|
||||
const fireChance = engine.fire_chance * fireChanceCoefficient;
|
||||
const trackRepairTime = track.repair_time
|
||||
? track.repair_time /
|
||||
((hasToolbox ? 1.2 : 1) *
|
||||
(1 + (crewSkills.repair ?? 0) * 0.04) *
|
||||
(hasProtectiveKit ? 1.1 : 1))
|
||||
: undefined;
|
||||
const viewRange = turret.view_range * viewRangeCoefficient;
|
||||
const camouflageStill = tank.camouflage_still * camouflageCoefficientStill;
|
||||
const camouflageMoving =
|
||||
@@ -602,6 +606,7 @@ export function tankCharacteristics(
|
||||
hullTraverseSoftTerrain,
|
||||
health,
|
||||
fireChance,
|
||||
trackRepairTime,
|
||||
viewRange,
|
||||
camouflageStill,
|
||||
camouflageMoving,
|
||||
|
||||
@@ -7,12 +7,23 @@ import {
|
||||
import type { DuelMember } from "../../stores/duel";
|
||||
import { genericDefaultEquipmentMatrix } from "../../stores/duel/constants";
|
||||
|
||||
export function defaultTankWeapon(tank: TankDefinition) {
|
||||
for (const turret of [...tank.turrets].reverse()) {
|
||||
for (const gun of [...turret.guns].reverse()) {
|
||||
const shell = gun.shells[0];
|
||||
|
||||
if (shell) return { turret, gun, shell };
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(`Tank ${tank.id} has no gun with shells`);
|
||||
}
|
||||
|
||||
export function tankToDuelMember(
|
||||
tank: TankDefinition,
|
||||
provisionDefinitions: ProvisionDefinitions,
|
||||
) {
|
||||
const turret = tank.turrets.at(-1)!;
|
||||
const gun = turret.guns.at(-1)!;
|
||||
const { turret, gun, shell } = defaultTankWeapon(tank);
|
||||
|
||||
return {
|
||||
camouflage: true,
|
||||
@@ -22,7 +33,7 @@ export function tankToDuelMember(
|
||||
provisions: createDefaultProvisions(tank, gun, provisionDefinitions),
|
||||
engine: tank.engines.at(-1)!,
|
||||
gun,
|
||||
shell: tank.turrets.at(-1)!.guns.at(-1)!.shells[0],
|
||||
shell,
|
||||
tank,
|
||||
track: tank.tracks.at(-1)!,
|
||||
turret,
|
||||
|
||||
@@ -4,7 +4,7 @@ import { GLTFLoader } from "three-stdlib";
|
||||
import { useDispose } from "./useDispose";
|
||||
|
||||
export function useArmor(id: number) {
|
||||
const path = alias("api", `/tanks/${id}/collision.glb`);
|
||||
const path = alias("models_tanks", `/${id}/collision.glb`);
|
||||
const gltf = useLoader(GLTFLoader, path);
|
||||
|
||||
useDispose(gltf, path);
|
||||
|
||||
@@ -5,7 +5,7 @@ import { GLTFLoader } from "three-stdlib";
|
||||
import { useDispose } from "./useDispose";
|
||||
|
||||
export function useModel(id: number) {
|
||||
const path = alias("api", `/tanks/${id}/model.glb`);
|
||||
const path = alias("models_tanks", `/${id}/model.glb`);
|
||||
const gltf = useLoader(GLTFLoader, path);
|
||||
|
||||
useDispose(gltf, path);
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
import { alias } from "@blitzkit/core";
|
||||
import { useEffect } from "react";
|
||||
import type { Group, Material } from "three";
|
||||
import { GLTFLoader } from "three-stdlib";
|
||||
import { TRANSITION_ANIMATION_TIME } from "../components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
|
||||
import { Tankopedia } from "../stores/tankopedia";
|
||||
|
||||
export interface Skin {
|
||||
scene: Group;
|
||||
materials: Map<string, Material>;
|
||||
}
|
||||
|
||||
const skins = new Map<string, Promise<Skin>>();
|
||||
const loadedSkins = new Map<string, Skin>();
|
||||
|
||||
async function loadSkin(path: string) {
|
||||
const gltf = await new GLTFLoader().loadAsync(path);
|
||||
const materials: Material[] = await gltf.parser.getDependencies("material");
|
||||
const skin = {
|
||||
scene: gltf.scene,
|
||||
materials: new Map(
|
||||
materials
|
||||
.filter((material) => material.userData.camouflage)
|
||||
.map((material) => [material.name, material]),
|
||||
),
|
||||
};
|
||||
|
||||
loadedSkins.set(path, skin);
|
||||
|
||||
return skin;
|
||||
}
|
||||
|
||||
function skinPath(id: number, skin: number) {
|
||||
return alias("models_legendary", `/${id}/skins/${skin}.glb`);
|
||||
}
|
||||
|
||||
// attachments load the same way as camouflages and can be shown with one
|
||||
export function useSkin(id: number, loader: "skin" | "attachment" = "skin") {
|
||||
const requested = Tankopedia.use((state) => state.loaders[loader].requested);
|
||||
const loaded = Tankopedia.use((state) => state.loaders[loader].loaded);
|
||||
|
||||
useEffect(() => {
|
||||
if (requested === Tankopedia.state.loaders[loader].loaded) return;
|
||||
|
||||
const path = requested === undefined ? undefined : skinPath(id, requested);
|
||||
const cached = path === undefined || loadedSkins.has(path);
|
||||
let settled = false;
|
||||
|
||||
if (!cached) {
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.revealed = false;
|
||||
});
|
||||
|
||||
if (!skins.has(path)) skins.set(path, loadSkin(path));
|
||||
}
|
||||
|
||||
// swaps halfway through the lighting transition
|
||||
Promise.all([
|
||||
path && skins.get(path),
|
||||
new Promise((resolve) =>
|
||||
setTimeout(resolve, TRANSITION_ANIMATION_TIME * 1e3),
|
||||
),
|
||||
]).then(() => {
|
||||
if (settled) return;
|
||||
|
||||
settled = true;
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.loaders[loader].loaded = requested;
|
||||
if (!cached) draft.revealed = true;
|
||||
});
|
||||
});
|
||||
|
||||
return () => {
|
||||
if (settled) return;
|
||||
|
||||
settled = true;
|
||||
|
||||
if (cached) return;
|
||||
|
||||
Tankopedia.mutate((draft) => {
|
||||
draft.revealed = true;
|
||||
});
|
||||
};
|
||||
}, [id, loader, requested]);
|
||||
|
||||
return loaded === undefined
|
||||
? undefined
|
||||
: loadedSkins.get(skinPath(id, loaded));
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import type { APIContext, GetStaticPathsItem } from "astro";
|
||||
import sharp from "sharp";
|
||||
import {
|
||||
docImageId,
|
||||
externalDocImages,
|
||||
} from "../../../../core/blitzkit/docImages";
|
||||
import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
|
||||
import { getStaticPaths as _getStaticPaths } from "../../_index";
|
||||
|
||||
export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
|
||||
const documents = import.meta.glob<string>(
|
||||
"../../../../../../../docs/**/*.md",
|
||||
{ eager: true, query: "?raw", import: "default" },
|
||||
);
|
||||
const urls = new Set(Object.values(documents).flatMap(externalDocImages));
|
||||
|
||||
return Array.from(
|
||||
urls,
|
||||
(url) =>
|
||||
({
|
||||
params: { id: docImageId(url) },
|
||||
props: { url },
|
||||
}) satisfies GetStaticPathsItem,
|
||||
);
|
||||
});
|
||||
|
||||
export async function GET({ props }: APIContext<{ url: string }>) {
|
||||
const response = await fetch(props.url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch ${props.url}: ${response.status}`);
|
||||
}
|
||||
|
||||
const image = await sharp(Buffer.from(await response.arrayBuffer()))
|
||||
.webp()
|
||||
.toBuffer();
|
||||
|
||||
return new Response(new Uint8Array(image));
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
import type { CamouflagesXml } from "@blitzkit/core";
|
||||
import type { APIContext, GetStaticPathsItem } from "astro";
|
||||
import sharp from "sharp";
|
||||
import { extractPackedIcon } from "../../../../core/blitz/extractPackedIcon";
|
||||
import { parsePackedSpriteRect } from "../../../../core/blitz/parsePackedSpriteRect";
|
||||
import { api } from "../../../../core/blitzkit/api";
|
||||
import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
|
||||
import { vfs } from "../../../../core/blitzkit/vfs";
|
||||
import { getStaticPaths as _getStaticPaths } from "../../_index";
|
||||
|
||||
export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
|
||||
const camouflageDefinitions = await api.camouflageDefinitions();
|
||||
const camouflagesXml = await vfs.xml<{ root: CamouflagesXml }>(
|
||||
"Data/XML/item_defs/vehicles/common/camouflages.xml",
|
||||
);
|
||||
const icons = new Map(
|
||||
Object.values(camouflagesXml.root.camouflages).map((camouflage) => [
|
||||
camouflage.id,
|
||||
camouflage.icon,
|
||||
]),
|
||||
);
|
||||
const paths: GetStaticPathsItem[] = [];
|
||||
|
||||
for (const camouflage of Object.values(camouflageDefinitions.camouflages)) {
|
||||
const icon = icons.get(camouflage.id);
|
||||
|
||||
if (camouflage.tank_id === undefined || !icon) continue;
|
||||
|
||||
paths.push({
|
||||
params: { id: camouflage.id },
|
||||
props: {
|
||||
path: icon.replace("~res:/", "Data/").replace(/\.txt$/, ""),
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return paths;
|
||||
});
|
||||
|
||||
export async function GET({ props }: APIContext<{ path: string }>) {
|
||||
const path = (await vfs.resolve(`${props.path}@2x.packed.webp`))
|
||||
? `${props.path}@2x.packed.webp`
|
||||
: `${props.path}.packed.webp`;
|
||||
const packed = await vfs.file(path);
|
||||
const texture = sharp(packed);
|
||||
const sizes = parsePackedSpriteRect(packed);
|
||||
const image = sizes
|
||||
? sharp(await extractPackedIcon(texture, sizes))
|
||||
: texture;
|
||||
const bytes = await image.webp().toBuffer();
|
||||
|
||||
return new Response(new Uint8Array(bytes));
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
---
|
||||
import CreditsPromo from "../../../../components/CreditsPromo.astro";
|
||||
import { tools } from "../../../../constants/tools";
|
||||
import ToolLayout from "../../../../layouts/ToolLayout.astro";
|
||||
|
||||
export { getStaticPaths } from "../index.astro";
|
||||
|
||||
const { locale } = Astro.props;
|
||||
---
|
||||
|
||||
<ToolLayout tool={tools.credits} {locale}>
|
||||
<CreditsPromo {locale} />
|
||||
</ToolLayout>
|
||||
@@ -5,6 +5,7 @@ import locales from "@blitzkit/i18n/locales.json";
|
||||
import { literals } from "@blitzkit/i18n/src/literals";
|
||||
import { Box, Flex, Link } from "@radix-ui/themes";
|
||||
import { AesonPlug } from "../../../components/AesonPlug";
|
||||
import { Beg } from "../../../components/Beg";
|
||||
import HomeHero from "../../../components/HomeHero.astro";
|
||||
import { Plugs } from "../../../components/Plugs";
|
||||
import ToolCard from "../../../components/ToolCard.astro";
|
||||
@@ -65,6 +66,8 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
|
||||
<BaseLayout {locale}>
|
||||
<HomeHero />
|
||||
|
||||
<Beg />
|
||||
|
||||
{
|
||||
locale !== locales.default && (
|
||||
<Flex justify="center" pt="4" my="4">
|
||||
|
||||
@@ -13,6 +13,7 @@ import { load } from "cheerio";
|
||||
import { api } from "../../../../../core/blitzkit/api";
|
||||
import { mixStaticPaths } from "../../../../../core/blitzkit/mixStaticPaths";
|
||||
import { tankCharacteristics } from "../../../../../core/blitzkit/tankCharacteristics";
|
||||
import { defaultTankWeapon } from "../../../../../core/blitzkit/tankToDuelMember";
|
||||
import { getStrings } from "../../../../../core/i18n/getStrings";
|
||||
import BaseLayout from "../../../../../layouts/BaseLayout.astro";
|
||||
import { genericDefaultEquipmentMatrix } from "../../../../../stores/duel/constants";
|
||||
@@ -53,9 +54,7 @@ const title = literals(strings.website.tools.tankopedia.tank_seo_title, {
|
||||
const url = import.meta.env.SITE + Astro.url.pathname;
|
||||
|
||||
const icon = alias("api", `/tanks/${id}/icons/big.webp`);
|
||||
const turret = tank.turrets.at(-1)!;
|
||||
const gun = turret.guns.at(-1)!;
|
||||
const shell = gun.shells[0];
|
||||
const { turret, gun, shell } = defaultTankWeapon(tank);
|
||||
const characteristics = tankCharacteristics(
|
||||
{
|
||||
tank,
|
||||
|
||||
@@ -0,0 +1,255 @@
|
||||
import {
|
||||
parseHierarchies,
|
||||
Sc2ReadStream,
|
||||
type CamouflagesXml,
|
||||
type CamouflagesYaml,
|
||||
type TankParameters,
|
||||
} from "@blitzkit/core";
|
||||
import {
|
||||
Document,
|
||||
Material,
|
||||
Node,
|
||||
NodeIO,
|
||||
PropertyType,
|
||||
Scene,
|
||||
} from "@gltf-transform/core";
|
||||
import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
|
||||
import { dedup, mergeDocuments, unpartition } from "@gltf-transform/functions";
|
||||
import type { APIContext } from "astro";
|
||||
import type { Vector3Tuple, Vector4Tuple } from "three";
|
||||
import { SKIN_NUMBER } from "../../../../constants/skinNumber";
|
||||
import { api } from "../../../../core/blitzkit/api";
|
||||
import { mixStaticPaths } from "../../../../core/blitzkit/mixStaticPaths";
|
||||
import { switcherStates } from "../../../../core/blitzkit/switcherStates";
|
||||
import { vfs } from "../../../../core/blitzkit/vfs";
|
||||
import {
|
||||
extractMaterials,
|
||||
extractModel,
|
||||
} from "../../../[...chunk_models_tanks]/[id]/model.glb";
|
||||
import { getStaticPaths as _getStaticPaths } from "../../_index";
|
||||
|
||||
const SKIN_NUMBER_SLOTS = 5;
|
||||
const DIGIT_COLUMNS = 5;
|
||||
const DIGIT_ROWS = 2;
|
||||
|
||||
export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
|
||||
const camouflages = await api.camouflageDefinitions();
|
||||
|
||||
return Object.values(camouflages.camouflages)
|
||||
.filter((camouflage) => camouflage.tank_id)
|
||||
.map((camouflage) => ({
|
||||
params: { id: camouflage.tank_id!, skin: camouflage.id },
|
||||
props: { skin: camouflage.id },
|
||||
}));
|
||||
});
|
||||
|
||||
const camouflagesXml = await vfs.xml<{ root: CamouflagesXml }>(
|
||||
"Data/XML/item_defs/vehicles/common/camouflages.xml",
|
||||
);
|
||||
const camouflagesYaml = await vfs.yaml<CamouflagesYaml>(
|
||||
"Data/camouflages.yaml",
|
||||
);
|
||||
const customization = await vfs.yaml<
|
||||
Record<string, { Name: string; Path: string }>
|
||||
>("Data/3d/Customization.yaml");
|
||||
|
||||
export async function GET({ props }: APIContext<{ skin: number }>) {
|
||||
const nodeIO = new NodeIO().registerExtensions(ALL_EXTENSIONS);
|
||||
|
||||
const items = new Map(
|
||||
Object.values(customization).map(({ Name, Path }) => [
|
||||
Name,
|
||||
Path.replace("~res:/3d/", "").replace(/\.sc2$/, ""),
|
||||
]),
|
||||
);
|
||||
const key = Object.keys(camouflagesXml.root.camouflages).find(
|
||||
(key) => camouflagesXml.root.camouflages[key].id === props.skin,
|
||||
)!;
|
||||
const include = camouflagesXml.root.camouflages[key].vehicleFilter.include;
|
||||
const [nation, tankKey] = (
|
||||
include as { vehicle: { name: string } }
|
||||
).vehicle.name.split(":");
|
||||
const { customEntities } = camouflagesYaml[key];
|
||||
const preset =
|
||||
camouflagesYaml[key].preset ??
|
||||
camouflagesYaml[key].override?.[nation]?.override?.[tankKey]?.preset;
|
||||
const parameters = await vfs.yaml<TankParameters>(
|
||||
`Data/3d/Tanks/Parameters/${nation}/${tankKey}.yaml`,
|
||||
);
|
||||
const basePath = parameters.resourcesPath.blitzModelPath.replace(
|
||||
/\.sc2$/,
|
||||
"",
|
||||
);
|
||||
const sc2 = new Sc2ReadStream(
|
||||
(await vfs.file(`Data/3d/${basePath}.sc2`)).buffer as ArrayBuffer,
|
||||
).sc2();
|
||||
const slots: Record<
|
||||
string,
|
||||
{
|
||||
target: string;
|
||||
position: Vector3Tuple;
|
||||
rotation: Vector4Tuple;
|
||||
scale: Vector3Tuple;
|
||||
}
|
||||
> = {};
|
||||
|
||||
parseHierarchies(sc2["#hierarchy"], null, (hierarchy, components) => {
|
||||
for (const component of components) {
|
||||
if (component["comp.typename"] === "NewSlotComponent") {
|
||||
for (const slot of Object.values(component.slots)) {
|
||||
slots[slot.name] = {
|
||||
target: hierarchy.name,
|
||||
position: slot.transform.position,
|
||||
rotation: slot.transform.rotation,
|
||||
scale: slot.transform.scale,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
if (component["comp.typename"] === "SlotComponent") {
|
||||
slots[component["sc.slotName"]] = {
|
||||
target: hierarchy.name,
|
||||
position: component["sc.attachmentTranslation"] as Vector3Tuple,
|
||||
rotation: component["sc.attachmentRotation"] as Vector4Tuple,
|
||||
scale: component["sc.attachmentScale"] as Vector3Tuple,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
});
|
||||
|
||||
const attachments = new Map<string, string[]>();
|
||||
|
||||
for (const name in customEntities) {
|
||||
const slot = slots[name];
|
||||
|
||||
if (!slot) continue;
|
||||
|
||||
attachments.set(slot.target, [
|
||||
...(attachments.get(slot.target) ?? []),
|
||||
customEntities[name].item,
|
||||
]);
|
||||
}
|
||||
|
||||
const states = switcherStates(sc2, preset, attachments);
|
||||
|
||||
// attachments are layered over camouflages, so they only keep what they change
|
||||
if (camouflagesXml.root.camouflages[key].kind === "customization") {
|
||||
const baseline = switcherStates(sc2, preset, new Map());
|
||||
|
||||
for (const name in states) {
|
||||
if (states[name] === baseline[name]) delete states[name];
|
||||
}
|
||||
}
|
||||
const document = new Document();
|
||||
const scene = document.createScene();
|
||||
const targets = new Map<string, Node>();
|
||||
|
||||
document.createBuffer();
|
||||
|
||||
if (preset) {
|
||||
const materials = await extractMaterials(document, sc2, basePath, preset);
|
||||
|
||||
// parts may share these names, so mark the ones that replace the tank's
|
||||
for (const material of materials.values()) {
|
||||
if (!(material instanceof Material)) continue;
|
||||
|
||||
material.setExtras({ ...material.getExtras(), camouflage: true });
|
||||
}
|
||||
}
|
||||
|
||||
for (const name in customEntities) {
|
||||
const slot = slots[name];
|
||||
const path = items.get(customEntities[name].item);
|
||||
|
||||
if (
|
||||
!slot ||
|
||||
!path ||
|
||||
!(await vfs.resolve(`Data/3d/${path}.sc2`)) ||
|
||||
!(await vfs.resolve(`Data/3d/${path}.scg`))
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const part = await extractModel(vfs, path, true);
|
||||
const partSc2 = new Sc2ReadStream(
|
||||
(await vfs.file(`Data/3d/${path}.sc2`)).buffer as ArrayBuffer,
|
||||
).sc2();
|
||||
|
||||
Object.assign(states, switcherStates(partSc2, preset, new Map()));
|
||||
|
||||
const map = mergeDocuments(document, part);
|
||||
const partScene = map.get(part.getRoot().listScenes()[0]) as Scene;
|
||||
const node = document
|
||||
.createNode(name)
|
||||
.setTranslation(slot.position)
|
||||
.setRotation(slot.rotation)
|
||||
.setScale(slot.scale);
|
||||
let target = targets.get(slot.target);
|
||||
|
||||
if (!target) {
|
||||
target = document.createNode(slot.target);
|
||||
targets.set(slot.target, target);
|
||||
scene.addChild(target);
|
||||
}
|
||||
|
||||
for (const child of partScene.listChildren()) {
|
||||
node.addChild(child as Node);
|
||||
}
|
||||
|
||||
partScene.dispose();
|
||||
target.addChild(node);
|
||||
}
|
||||
|
||||
scene.setExtras({ states });
|
||||
|
||||
applySkinNumber(document, SKIN_NUMBER);
|
||||
|
||||
await document.transform(
|
||||
dedup({ propertyTypes: [PropertyType.ACCESSOR, PropertyType.TEXTURE] }),
|
||||
unpartition(),
|
||||
);
|
||||
|
||||
return new Response(await nodeIO.writeBinary(document));
|
||||
}
|
||||
|
||||
function applySkinNumber(document: Document, number: string) {
|
||||
const start = Math.ceil((SKIN_NUMBER_SLOTS - number.length) / 2) + 1;
|
||||
|
||||
for (const node of document.getRoot().listNodes()) {
|
||||
const match = node.getName().match(/_number_\d+_(\d+)$/);
|
||||
|
||||
if (!match) continue;
|
||||
|
||||
const digit = number[Number(match[1]) - start];
|
||||
|
||||
if (digit === undefined) {
|
||||
node.dispose();
|
||||
continue;
|
||||
}
|
||||
|
||||
const cell = (Number(digit) + 9) % 10;
|
||||
const column = cell % DIGIT_COLUMNS;
|
||||
const row = Math.floor(cell / DIGIT_COLUMNS);
|
||||
|
||||
node.traverse((child) => {
|
||||
for (const primitive of child.getMesh()?.listPrimitives() ?? []) {
|
||||
const uvs = primitive.getAttribute("TEXCOORD_0")?.clone();
|
||||
|
||||
if (!uvs) continue;
|
||||
|
||||
for (let index = 0; index < uvs.getCount(); index++) {
|
||||
const [u, v] = uvs.getElement(index, [0, 0]) as [number, number];
|
||||
|
||||
uvs.setElement(index, [
|
||||
(column + u) / DIGIT_COLUMNS,
|
||||
(row + v) / DIGIT_ROWS,
|
||||
]);
|
||||
}
|
||||
|
||||
primitive.setAttribute("TEXCOORD_0", uvs);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { chunkedStaticPaths } from "../../core/blitzkit/chunkedStaticPaths";
|
||||
|
||||
export const getStaticPaths = chunkedStaticPaths("models_legendary");
|
||||
Whitespace-only changes.
@@ -0,0 +1,12 @@
|
||||
import { api } from "../../../core/blitzkit/api";
|
||||
import { mixStaticPaths } from "../../../core/blitzkit/mixStaticPaths";
|
||||
import { getStaticPaths as _getStaticPaths } from "../_index";
|
||||
|
||||
export const getStaticPaths = mixStaticPaths(_getStaticPaths, async () => {
|
||||
const tanks = await api.tankDefinitions();
|
||||
|
||||
return Object.values(tanks.tanks).map((tank) => ({
|
||||
params: { id: tank.id },
|
||||
props: { id: tank.id },
|
||||
}));
|
||||
});
|
||||
+9
-17
@@ -1,17 +1,16 @@
|
||||
import {
|
||||
parseHierarchies,
|
||||
Sc2ReadStream,
|
||||
ScgReadStream,
|
||||
toUniqueId,
|
||||
VertexAttribute,
|
||||
vertexAttributeVectorSizes,
|
||||
type Hierarchy,
|
||||
type VehicleDefinitionList,
|
||||
} from "@blitzkit/core";
|
||||
import type { AbstractVFS } from "@blitzkit/core/src/blitzkit/vfs/abstract";
|
||||
import { Accessor, Document, Node, NodeIO, Scene } from "@gltf-transform/core";
|
||||
import type { APIContext } from "astro";
|
||||
import { times } from "lodash-es";
|
||||
import { vfs } from "../../../../core/blitzkit/vfs";
|
||||
import { vfs } from "../../../core/blitzkit/vfs";
|
||||
|
||||
export { getStaticPaths } from "./_index";
|
||||
|
||||
@@ -56,13 +55,10 @@ async function extractArmor(vfs: AbstractVFS, fileName: string) {
|
||||
const scene = document.createScene();
|
||||
const buffer = document.createBuffer();
|
||||
|
||||
function parseHierarchies(hierarchies: Hierarchy[], parent: Scene | Node) {
|
||||
hierarchies.forEach((hierarchy) => {
|
||||
const components = times(
|
||||
hierarchy.components.count,
|
||||
(index) => hierarchy.components[index.toString().padStart(4, "0")],
|
||||
);
|
||||
|
||||
parseHierarchies<Scene | Node>(
|
||||
sc2["#hierarchy"],
|
||||
scene,
|
||||
(hierarchy, components, parent) => {
|
||||
components.forEach((component) => {
|
||||
switch (component["comp.typename"]) {
|
||||
case "TransformComponent":
|
||||
@@ -163,13 +159,9 @@ async function extractArmor(vfs: AbstractVFS, fileName: string) {
|
||||
}
|
||||
});
|
||||
|
||||
if (hierarchy["#hierarchy"]) {
|
||||
parseHierarchies(hierarchy["#hierarchy"], parent);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
parseHierarchies(sc2["#hierarchy"], scene);
|
||||
return parent;
|
||||
},
|
||||
);
|
||||
|
||||
return document;
|
||||
}
|
||||
+240
-179
@@ -1,13 +1,13 @@
|
||||
import {
|
||||
bufferToBigInt,
|
||||
DdsReadStream,
|
||||
parseHierarchies,
|
||||
PvrReadStream,
|
||||
Sc2ReadStream,
|
||||
ScgReadStream,
|
||||
toUniqueId,
|
||||
VertexAttribute,
|
||||
type ConfigArchive,
|
||||
type Hierarchy,
|
||||
type TankParameters,
|
||||
type Textures,
|
||||
type VehicleDefinitionList,
|
||||
@@ -17,10 +17,10 @@ import { Document, Material, Node, NodeIO, Scene } from "@gltf-transform/core";
|
||||
import { ALL_EXTENSIONS } from "@gltf-transform/extensions";
|
||||
import { dedup, prune } from "@gltf-transform/functions";
|
||||
import type { APIContext } from "astro";
|
||||
import { times } from "lodash-es";
|
||||
import { isEqual, times } from "lodash-es";
|
||||
import { dirname } from "path";
|
||||
import sharp from "sharp";
|
||||
import { vfs } from "../../../../core/blitzkit/vfs";
|
||||
import { vfs } from "../../../core/blitzkit/vfs";
|
||||
import {
|
||||
vertexAttributeGLTFName,
|
||||
vertexAttributeGltfVectorSizes,
|
||||
@@ -65,11 +65,21 @@ export async function GET({ props }: APIContext<{ id: number }>) {
|
||||
const ERROR_ON_UNKNOWN_COMPONENT = false;
|
||||
|
||||
const omitMeshNames = {
|
||||
start: ["chassis_chassis_", "chassis_track_crash_", "HP_"],
|
||||
start: [
|
||||
"chassis_chassis_",
|
||||
"chassis_track_crash_",
|
||||
"HP_",
|
||||
// mastery marks a new tank doesn't have yet
|
||||
"custom_gun_marks_",
|
||||
],
|
||||
end: ["_POINT"],
|
||||
};
|
||||
|
||||
async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
export async function extractModel(
|
||||
vfs: AbstractVFS,
|
||||
path: string,
|
||||
isPart = false,
|
||||
) {
|
||||
const sc2Path = `Data/3d/${path}.sc2`;
|
||||
const scgPath = `Data/3d/${path}.scg`;
|
||||
const sc2 = new Sc2ReadStream(
|
||||
@@ -81,167 +91,12 @@ async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
const document = new Document();
|
||||
const scene = document.createScene();
|
||||
const buffer = document.createBuffer();
|
||||
const materials = new Map<bigint, Material | bigint | undefined>();
|
||||
const materials = await extractMaterials(document, sc2, path);
|
||||
|
||||
for (const node of sc2["#dataNodes"]) {
|
||||
const id = bufferToBigInt(node["#id"]);
|
||||
|
||||
if (node.parentMaterialKey !== undefined) {
|
||||
/**
|
||||
* material depends on a parent and doesn't seem to have any
|
||||
* properties so we just point it to the parent
|
||||
*/
|
||||
materials.set(id, node.parentMaterialKey);
|
||||
continue;
|
||||
}
|
||||
|
||||
const material = document.createMaterial(node.materialName);
|
||||
let textures: Textures | undefined = undefined;
|
||||
|
||||
if (node.textures) {
|
||||
textures = node.textures;
|
||||
} else if (typeof node.configCount === "number") {
|
||||
textures = node.configArchive_0.textures;
|
||||
}
|
||||
|
||||
if (textures) {
|
||||
const baseColor = await readBaseColor(
|
||||
`Data/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
|
||||
);
|
||||
material.setBaseColorTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(baseColor),
|
||||
);
|
||||
|
||||
let defaultConfigArchive: ConfigArchive | undefined = undefined;
|
||||
|
||||
if (node.configCount) {
|
||||
const names = times(
|
||||
node.configCount,
|
||||
(index) => node[`configArchive_${index}`],
|
||||
);
|
||||
|
||||
defaultConfigArchive = names.find(
|
||||
(archive) => archive.configName === "Default",
|
||||
);
|
||||
defaultConfigArchive ??= node.configArchive_0;
|
||||
}
|
||||
|
||||
const customCullMode =
|
||||
node.customCullMode ?? defaultConfigArchive?.customCullMode;
|
||||
|
||||
if (customCullMode === 0) {
|
||||
material.setDoubleSided(true);
|
||||
} else if (customCullMode !== undefined) {
|
||||
material.setDoubleSided(false);
|
||||
}
|
||||
|
||||
if (
|
||||
node.enabledPresets?.AlphaTest &&
|
||||
node.properties?.alphatestThreshold
|
||||
) {
|
||||
const view = new DataView(node.properties.alphatestThreshold);
|
||||
const alphaCutoff =
|
||||
view.byteLength < 4
|
||||
? 0.5
|
||||
: view.getFloat32(view.byteLength - 4, true);
|
||||
|
||||
material.setAlphaMode("MASK").setAlphaCutoff(alphaCutoff);
|
||||
}
|
||||
|
||||
if (node.configCount) {
|
||||
for (
|
||||
let configIndex = 0;
|
||||
configIndex < node.configCount;
|
||||
configIndex++
|
||||
) {
|
||||
const archive = node[`configArchive_${configIndex}`];
|
||||
|
||||
if (
|
||||
archive.configName !== "Default" ||
|
||||
!archive.enabledPresets?.AlphaTest ||
|
||||
!archive.properties?.alphatestThreshold
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const view = new DataView(archive.properties.alphatestThreshold);
|
||||
const alphaCutoff =
|
||||
view.byteLength < 4
|
||||
? 0.5
|
||||
: view.getFloat32(view.byteLength - 4, true);
|
||||
|
||||
material.setAlphaMode("MASK").setAlphaCutoff(alphaCutoff);
|
||||
}
|
||||
}
|
||||
|
||||
if (textures.miscMap) {
|
||||
material.setOcclusionTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(
|
||||
await readOcclusion(
|
||||
`Data/3d/${dirname(path)}/${textures.miscMap}`,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (textures.baseRMMap) {
|
||||
material.setMetallicRoughnessTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(
|
||||
await readRoughnessMetallic(
|
||||
`Data/3d/${dirname(path)}/${textures.baseRMMap}`,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (textures.baseNormalMap ?? textures.normalmap) {
|
||||
const isBase = textures.baseNormalMap !== undefined;
|
||||
|
||||
material.setNormalTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(
|
||||
await readNormal(
|
||||
`Data/3d/${dirname(path)}/${
|
||||
textures.baseNormalMap ?? textures.normalmap
|
||||
}`,
|
||||
isBase,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
materials.set(id, material);
|
||||
}
|
||||
}
|
||||
|
||||
// replace children materials with parents
|
||||
materials.forEach((material, id) => {
|
||||
if (typeof material !== "bigint") return;
|
||||
|
||||
let resolvedMaterial: Material | bigint | undefined = material;
|
||||
|
||||
while (typeof resolvedMaterial === "bigint") {
|
||||
const linkedParentMaterial = materials.get(resolvedMaterial);
|
||||
|
||||
resolvedMaterial = linkedParentMaterial;
|
||||
}
|
||||
|
||||
materials.set(id, resolvedMaterial);
|
||||
});
|
||||
|
||||
function parseHierarchies(hierarchies: Hierarchy[], parent: Scene | Node) {
|
||||
hierarchies.forEach((hierarchy) => {
|
||||
parseHierarchies<Scene | Node>(
|
||||
sc2["#hierarchy"],
|
||||
scene,
|
||||
(hierarchy, components, parent) => {
|
||||
if (
|
||||
omitMeshNames.start.some((omit) => hierarchy.name.startsWith(omit)) ||
|
||||
omitMeshNames.end.some((omit) => hierarchy.name.endsWith(omit))
|
||||
@@ -249,10 +104,6 @@ async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
return;
|
||||
|
||||
const node = document.createNode(hierarchy.name);
|
||||
const components = times(
|
||||
hierarchy.components.count,
|
||||
(index) => hierarchy.components[index.toString().padStart(4, "0")],
|
||||
);
|
||||
|
||||
components.forEach((component) => {
|
||||
switch (component["comp.typename"]) {
|
||||
@@ -264,9 +115,10 @@ async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
case "TransformComponent": {
|
||||
const localTranslation = component["tc.localTranslation"];
|
||||
// The game resets top-level node translation to [0, 0, 0] on load.
|
||||
// Child nodes must keep their authored local offsets.
|
||||
// Child nodes and customization parts must keep their authored
|
||||
// local offsets.
|
||||
node.setTranslation(
|
||||
parent instanceof Scene ? [0, 0, 0] : localTranslation,
|
||||
parent instanceof Scene && !isPart ? [0, 0, 0] : localTranslation,
|
||||
);
|
||||
node.setRotation(component["tc.localRotation"]);
|
||||
node.setScale(component["tc.localScale"]);
|
||||
@@ -274,13 +126,20 @@ async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
break;
|
||||
}
|
||||
|
||||
case "StateSwitcherComponent":
|
||||
node.setExtras({
|
||||
state: component[`ssc.state${component["ssc.activeState"]}`],
|
||||
});
|
||||
break;
|
||||
|
||||
case "RenderComponent": {
|
||||
const renderObject = component["rc.renderObj"];
|
||||
|
||||
times(renderObject["ro.batchCount"], (batchIndex): void => {
|
||||
const lodIndex = renderObject[`rb${batchIndex}.lodIndex`];
|
||||
|
||||
if (lodIndex !== 0) return;
|
||||
// -1 means the batch has no lods and is always drawn
|
||||
if (lodIndex !== 0 && !(isPart && lodIndex === -1)) return;
|
||||
|
||||
const batchKey = batchIndex.toString().padStart(4, "0");
|
||||
const batch = renderObject["ro.batches"][batchKey];
|
||||
@@ -361,15 +220,11 @@ async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
}
|
||||
});
|
||||
|
||||
if (hierarchy["#hierarchy"]) {
|
||||
parseHierarchies(hierarchy["#hierarchy"], node);
|
||||
}
|
||||
|
||||
parent.addChild(node);
|
||||
});
|
||||
}
|
||||
|
||||
parseHierarchies(sc2["#hierarchy"], scene);
|
||||
return node;
|
||||
},
|
||||
);
|
||||
|
||||
scene.addChild(document.createNode("test"));
|
||||
|
||||
@@ -378,6 +233,212 @@ async function extractModel(vfs: AbstractVFS, path: string) {
|
||||
return document;
|
||||
}
|
||||
|
||||
export async function extractMaterials(
|
||||
document: Document,
|
||||
sc2: ReturnType<Sc2ReadStream["sc2"]>,
|
||||
path: string,
|
||||
config?: string,
|
||||
) {
|
||||
const materials = new Map<bigint, Material | bigint | undefined>();
|
||||
|
||||
for (const node of sc2["#dataNodes"]) {
|
||||
const id = bufferToBigInt(node["#id"]);
|
||||
|
||||
if (node.parentMaterialKey !== undefined) {
|
||||
/**
|
||||
* material depends on a parent and doesn't seem to have any
|
||||
* properties so we just point it to the parent
|
||||
*/
|
||||
materials.set(id, node.parentMaterialKey);
|
||||
continue;
|
||||
}
|
||||
|
||||
let textures: Textures | undefined = undefined;
|
||||
|
||||
if (config !== undefined) {
|
||||
if (typeof node.configCount !== "number") continue;
|
||||
|
||||
const archive = times(
|
||||
node.configCount,
|
||||
(index) => node[`configArchive_${index}`],
|
||||
).find((archive) => archive.configName === config);
|
||||
|
||||
if (
|
||||
!archive ||
|
||||
isEqual(archive.textures, node.configArchive_0.textures)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
textures = archive.textures;
|
||||
} else if (node.textures) {
|
||||
textures = node.textures;
|
||||
} else if (typeof node.configCount === "number") {
|
||||
textures = node.configArchive_0.textures;
|
||||
}
|
||||
|
||||
const material = document.createMaterial(node.materialName);
|
||||
|
||||
if (textures) {
|
||||
const baseColor = await readBaseColor(
|
||||
`Data/3d/${dirname(path)}/${textures.baseColorMap ?? textures.albedo}`,
|
||||
);
|
||||
material.setBaseColorTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(baseColor),
|
||||
);
|
||||
|
||||
let defaultConfigArchive: ConfigArchive | undefined = undefined;
|
||||
|
||||
if (node.configCount) {
|
||||
const names = times(
|
||||
node.configCount,
|
||||
(index) => node[`configArchive_${index}`],
|
||||
);
|
||||
|
||||
defaultConfigArchive = names.find(
|
||||
(archive) => archive.configName === "Default",
|
||||
);
|
||||
defaultConfigArchive ??= node.configArchive_0;
|
||||
}
|
||||
|
||||
const customCullMode =
|
||||
node.customCullMode ?? defaultConfigArchive?.customCullMode;
|
||||
|
||||
if (customCullMode === 0) {
|
||||
material.setDoubleSided(true);
|
||||
} else if (customCullMode !== undefined) {
|
||||
material.setDoubleSided(false);
|
||||
}
|
||||
|
||||
if (
|
||||
node.enabledPresets?.AlphaTest &&
|
||||
node.properties?.alphatestThreshold
|
||||
) {
|
||||
const view = new DataView(node.properties.alphatestThreshold);
|
||||
const alphaCutoff =
|
||||
view.byteLength < 4
|
||||
? 0.5
|
||||
: view.getFloat32(view.byteLength - 4, true);
|
||||
|
||||
material.setAlphaMode("MASK").setAlphaCutoff(alphaCutoff);
|
||||
}
|
||||
|
||||
if (node.configCount) {
|
||||
for (
|
||||
let configIndex = 0;
|
||||
configIndex < node.configCount;
|
||||
configIndex++
|
||||
) {
|
||||
const archive = node[`configArchive_${configIndex}`];
|
||||
|
||||
if (
|
||||
archive.configName !== "Default" ||
|
||||
!archive.enabledPresets?.AlphaTest ||
|
||||
!archive.properties?.alphatestThreshold
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const view = new DataView(archive.properties.alphatestThreshold);
|
||||
const alphaCutoff =
|
||||
view.byteLength < 4
|
||||
? 0.5
|
||||
: view.getFloat32(view.byteLength - 4, true);
|
||||
|
||||
material.setAlphaMode("MASK").setAlphaCutoff(alphaCutoff);
|
||||
}
|
||||
}
|
||||
|
||||
const enabledPresets =
|
||||
node.enabledPresets ?? defaultConfigArchive?.enabledPresets;
|
||||
const fxName = node.fxName ?? defaultConfigArchive?.fxName;
|
||||
|
||||
if (enabledPresets?.AlphaBlend || enabledPresets?.AlphaBlendAdditive) {
|
||||
material.setAlphaMode("BLEND");
|
||||
}
|
||||
|
||||
if (enabledPresets?.AlphaBlendAdditive) {
|
||||
// gltf has no additive blending so the viewer applies it
|
||||
material.setExtras({ blending: "additive" });
|
||||
}
|
||||
|
||||
if (fxName?.endsWith("/Textured.material")) {
|
||||
// unlit in game, emissive so the viewer can fade it with the lights
|
||||
material
|
||||
.setEmissiveTexture(material.getBaseColorTexture())
|
||||
.setEmissiveFactor([1, 1, 1])
|
||||
.setBaseColorFactor([0, 0, 0, 1]);
|
||||
}
|
||||
|
||||
if (textures.miscMap) {
|
||||
material.setOcclusionTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(
|
||||
await readOcclusion(
|
||||
`Data/3d/${dirname(path)}/${textures.miscMap}`,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (textures.baseRMMap) {
|
||||
material.setMetallicRoughnessTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(
|
||||
await readRoughnessMetallic(
|
||||
`Data/3d/${dirname(path)}/${textures.baseRMMap}`,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (textures.baseNormalMap ?? textures.normalmap) {
|
||||
const isBase = textures.baseNormalMap !== undefined;
|
||||
|
||||
material.setNormalTexture(
|
||||
document
|
||||
.createTexture(node.materialName)
|
||||
.setMimeType("image/webp")
|
||||
.setImage(
|
||||
await readNormal(
|
||||
`Data/3d/${dirname(path)}/${
|
||||
textures.baseNormalMap ?? textures.normalmap
|
||||
}`,
|
||||
isBase,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
materials.set(id, material);
|
||||
}
|
||||
}
|
||||
|
||||
// replace children materials with parents
|
||||
materials.forEach((material, id) => {
|
||||
if (typeof material !== "bigint") return;
|
||||
|
||||
let resolvedMaterial: Material | bigint | undefined = material;
|
||||
|
||||
while (typeof resolvedMaterial === "bigint") {
|
||||
const linkedParentMaterial = materials.get(resolvedMaterial);
|
||||
|
||||
resolvedMaterial = linkedParentMaterial;
|
||||
}
|
||||
|
||||
materials.set(id, resolvedMaterial);
|
||||
});
|
||||
|
||||
return materials;
|
||||
}
|
||||
|
||||
async function readBaseColor(path: string) {
|
||||
const raw = await readTexture(path);
|
||||
const image = await sharp(raw.data, { raw }).webp().toBuffer();
|
||||
@@ -0,0 +1,3 @@
|
||||
import { chunkedStaticPaths } from "../../core/blitzkit/chunkedStaticPaths";
|
||||
|
||||
export const getStaticPaths = chunkedStaticPaths("models_tanks");
|
||||
@@ -8,6 +8,7 @@ export interface CompareMember extends DuelMember {
|
||||
export interface CompareEphemeral {
|
||||
crewSkills: Record<string, number>;
|
||||
equalize: boolean;
|
||||
syncShells: boolean;
|
||||
members: CompareMember[];
|
||||
sorting?: {
|
||||
direction: "ascending" | "descending";
|
||||
@@ -21,5 +22,14 @@ export const CompareEphemeral = new Varuna<
|
||||
>((crewSkills) => ({
|
||||
crewSkills,
|
||||
equalize: false,
|
||||
syncShells: false,
|
||||
members: [],
|
||||
}));
|
||||
|
||||
export function syncShellSlot(members: CompareMember[], slot: number) {
|
||||
for (const member of members) {
|
||||
const shell = member.gun.shells[slot];
|
||||
|
||||
if (shell) member.shell = shell;
|
||||
}
|
||||
}
|
||||
@@ -43,6 +43,7 @@ export type Shot = {
|
||||
containsGaps: boolean;
|
||||
damage: number;
|
||||
splashRadius?: number;
|
||||
penetrationChance?: number;
|
||||
|
||||
in: {
|
||||
surfaceNormal: Vector3;
|
||||
@@ -77,10 +78,19 @@ export enum TankopediaRelativeAgainst {
|
||||
All,
|
||||
}
|
||||
|
||||
interface LoaderState<Type> {
|
||||
requested: Type;
|
||||
loaded: Type;
|
||||
}
|
||||
|
||||
interface Tankopedia {
|
||||
disturbed: boolean;
|
||||
revealed: boolean;
|
||||
modelRequested: boolean;
|
||||
loaders: {
|
||||
model: LoaderState<boolean>;
|
||||
skin: LoaderState<number | undefined>;
|
||||
attachment: LoaderState<number | undefined>;
|
||||
};
|
||||
shot?: Shot;
|
||||
skills: Record<string, number>;
|
||||
relativeAgainst: TankopediaRelativeAgainst;
|
||||
@@ -112,7 +122,11 @@ const skillDefinitions = await api.skillDefinitions();
|
||||
export const Tankopedia = new Varuna<Tankopedia, ModelDefinition>((model) => ({
|
||||
disturbed: false,
|
||||
revealed: false,
|
||||
modelRequested: App.state.autoLoadModels,
|
||||
loaders: {
|
||||
model: { requested: App.state.autoLoadModels, loaded: false },
|
||||
skin: { requested: undefined, loaded: undefined },
|
||||
attachment: { requested: undefined, loaded: undefined },
|
||||
},
|
||||
relativeAgainst: TankopediaRelativeAgainst.Class,
|
||||
editStatic: false,
|
||||
skills: createDefaultSkills(skillDefinitions),
|
||||
|
||||
Reference in new issue
Block a user