TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-21 18:57:03 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: idk bro

Browse Source
This commit is contained in:
TrèsAbhi committed 2026-01-18 18:38:26 -06:00
1 parent 49f84db473
commit 323d624ec7
8 files changed
+191 -48
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/i18n/strings/en.json
+38
View File
@@ -40,6 +40,44 @@
"name": "API",
"action": "To docs",
"slogan": "BlitzKit hosted API"
},
"settings": {
"name": "Settings"
},
"players": {
"name": "Players",
"slogan": "Player statistics",
"action": "Stalk player"
},
"compare": {
"name": "Compare",
"slogan": "Compare tanks characteristics",
"action": "Compare now"
},
"performance": {
"name": "Performance",
"slogan": "Tank performance statistics",
"action": "View tanks"
},
"playlist": {
"name": "Playlist",
"slogan": "Tank playlist generator",
"action": "Generate"
},
"mixer": {
"name": "Mixer",
"slogan": "Tank module mixer",
"action": "Mix and match"
},
"session": {
"name": "Session",
"slogan": "Live player statistics",
"action": "Track"
},
"guesser": {
"name": "Guesser",
"slogan": "Silhouette mini-game",
"action": "Play"
}
},
packages/website-ue/src/components/Navbar.astro
+39 -29
View File
@@ -1,20 +1,24 @@
---
import {
GearIcon,
HamburgerMenuIcon,
MagnifyingGlassIcon,
} from "@radix-ui/react-icons";
import { BlitzKitIcon } from "../icons/BlitzKit";
import { LinkI18n } from "./LinkI18n";
import { Text } from "./Text";
import { api } from "../core/api/dynamic";
import { tools } from "../core/tools/tools";
import type { Tool } from "../core/tools/tools";
interface Props {
locale: string;
selectedTool?: Tool;
}
const { locale } = Astro.props;
const { locale, selectedTool } = Astro.props;
const strings = await api.strings(locale);
const toolsArray = Object.values(tools);
const toolsSorted =
selectedTool === undefined
? toolsArray
: [selectedTool, ...toolsArray.filter((tool) => tool !== selectedTool)];
---
<style>
@@ -55,8 +59,8 @@ const strings = await api.strings(locale);
width: 100%;
max-width: calc(var(--page-width) + 2 * var(--space-4));
display: flex;
align-items: center;
display: grid;
grid-template-columns: repeat(4, 1fr);
.action {
flex: 1;
@@ -95,8 +99,8 @@ const strings = await api.strings(locale);
max-width: var(--space-6);
.icon {
width: 1.25em;
height: 1.25em;
width: 100%;
vertical-align: top;
}
}
@@ -127,32 +131,38 @@ const strings = await api.strings(locale);
<div class="bar"></div>
<div class="content">
<LinkI18n {locale} href="/" className="action" tabIndex={0} data-selected>
<LinkI18n
{locale}
href="/"
className="action"
tabIndex={0}
data-selected={selectedTool === undefined}
>
<div class="selector">
<BlitzKitIcon className="icon" />
</div>
<Text lowContrast className="label">{strings.navbar.home}</Text>
</LinkI18n>
<LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
<div class="selector">
<GearIcon className="icon" />
</div>
<Text lowContrast className="label">{strings.navbar.settings}</Text>
</LinkI18n>
{
toolsSorted.map(({ id, Icon }) => (
<LinkI18n
key={id}
{locale}
href={`/${id}`}
className="action"
tabIndex={0}
data-selected={selectedTool?.id === id}
>
<div class="selector">
<Icon className="icon" />
</div>
<LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
<div class="selector">
<GearIcon className="icon" />
</div>
<Text lowContrast className="label">{strings.navbar.settings}</Text>
</LinkI18n>
<LinkI18n {locale} href="/settings" className="action" tabIndex={0}>
<div class="selector">
<GearIcon className="icon" />
</div>
<Text lowContrast className="label">{strings.navbar.settings}</Text>
</LinkI18n>
<Text lowContrast className="label">
{strings.tools[id as keyof typeof strings.tools].name}
</Text>
</LinkI18n>
))
}
</div>
</div>
packages/website-ue/src/core/tools/tools.ts
+86 -14
View File
@@ -1,46 +1,118 @@
import type { ButtonProps } from "@radix-ui/themes";
import {
ExclamationTriangleIcon,
GearIcon,
PersonIcon,
} from "@radix-ui/react-icons";
import type { IconProps } from "@radix-ui/react-icons/dist/types";
import type { ComponentProps, ReactNode } from "react";
import { TankIcon } from "../../icons/Tank";
import type { Color } from "../ui/color";
export interface Tool {
id: string;
strings?: string;
button: ButtonProps["color"];
significant?: boolean;
disabled?: boolean;
href?: string;
accent: Color;
banner_background_position: "top" | "center" | "bottom";
Icon:
| ((props: ComponentProps<"svg">) => ReactNode)
| ((props: IconProps) => ReactNode);
}
export const tools: Record<string, Tool> = {
tanks: {
id: "tanks",
strings: "tankopedia",
button: "purple",
significant: true,
Icon: TankIcon,
accent: "purple",
banner_background_position: "top",
},
players: {
id: "players",
Icon: PersonIcon,
accent: "purple",
banner_background_position: "top",
},
settings: {
id: "settings",
Icon: GearIcon,
accent: "gray",
banner_background_position: "top",
},
avatars: {
id: "avatars",
button: "gold",
Icon: ExclamationTriangleIcon,
accent: "gold",
banner_background_position: "bottom",
},
backgrounds: {
id: "backgrounds",
button: "gold",
Icon: ExclamationTriangleIcon,
accent: "gold",
banner_background_position: "bottom",
},
api: {
id: "api",
disabled: true,
button: "lime",
Icon: ExclamationTriangleIcon,
accent: "lime",
banner_background_position: "bottom",
},
compare: {
id: "compare",
Icon: ExclamationTriangleIcon,
accent: "crimson",
banner_background_position: "bottom",
},
performance: {
id: "performance",
Icon: ExclamationTriangleIcon,
accent: "jade",
banner_background_position: "bottom",
},
playlist: {
id: "playlist",
Icon: ExclamationTriangleIcon,
accent: "tomato",
banner_background_position: "bottom",
},
mixer: {
id: "mixer",
Icon: ExclamationTriangleIcon,
accent: "gray",
banner_background_position: "bottom",
},
guesser: {
id: "guesser",
Icon: ExclamationTriangleIcon,
accent: "cyan",
banner_background_position: "bottom",
},
session: {
id: "session",
Icon: ExclamationTriangleIcon,
accent: "blue",
banner_background_position: "bottom",
},
};
packages/website-ue/src/icons/Tank.tsx
+20
View File
@@ -0,0 +1,20 @@
import type { ComponentProps } from "react";
export function TankIcon(props: ComponentProps<"svg">) {
return (
<svg
width="64"
height="48"
viewBox="0 0 64 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M63 14.3344H42.7572M58.2615 31.6656C58.2615 37.0758 53.8954 38 48.5095 38H11.752C6.36612 38 2 37.0758 2 31.6656C2 26.2555 6.36612 21.8697 11.752 21.8697H23.8795V17.7959C23.8795 12.3858 28.2456 8 33.6315 8C39.0174 8 43.3835 12.3858 43.3835 17.7959V21.8697H48.5095C53.8954 21.8697 58.2615 26.2555 58.2615 31.6656Z"
stroke="currentColor"
stroke-width="4"
/>
</svg>
);
}
packages/website-ue/src/layouts/BaseLayout.astro
+4 -2
View File
@@ -4,15 +4,17 @@ import BaseStyles from "../components/BaseStyles.astro";
import ColorAlias from "../components/ColorAlias.astro";
import ColorScale from "../components/ColorScale.astro";
import Navbar from "../components/Navbar.astro";
import type { Tool } from "../core/tools/tools";
import type { Color } from "../core/ui/color";
interface Props {
locale: string;
accent: Color;
noNavbar?: boolean;
selectedTool?: Tool;
}
const { accent, noNavbar, locale } = Astro.props;
const { accent, noNavbar, locale, selectedTool } = Astro.props;
---
<html lang={locale}>
@@ -65,6 +67,6 @@ const { accent, noNavbar, locale } = Astro.props;
<slot />
</div>
{!noNavbar && <Navbar {locale} />}
{!noNavbar && <Navbar {selectedTool} {locale} />}
</body>
</html>
packages/website-ue/src/pages/[...locale]/api/index.astro
+2 -1
View File
@@ -1,6 +1,7 @@
---
import "@radix-ui/colors/amber-dark.css";
import { getCollection } from "astro:content";
import { tools } from "../../../core/tools/tools";
import BaseLayout from "../../../layouts/BaseLayout.astro";
export { getStaticPaths } from "../index.astro";
@@ -18,7 +19,7 @@ const paths: {
paths.sort((a, b) => a.path.localeCompare(b.path));
---
<BaseLayout {locale} accent="lime">
<BaseLayout selectedTool={tools.api} {locale} accent="lime">
<h1>api</h1>
{
packages/website-ue/src/pages/[...locale]/avatars/index.astro
+1 -1
View File
@@ -10,7 +10,7 @@ export { getStaticPaths } from "../index.astro";
const { locale } = Astro.props;
---
<BaseLayout {locale} accent="gold">
<BaseLayout selectedTool={tools.avatars} {locale} accent="gold">
<ColorScale color="purple" />
<ColorScale color="blue" />
packages/website-ue/src/pages/[...locale]/tanks/index.astro
+1 -1
View File
@@ -11,7 +11,7 @@ const { locale } = Astro.props;
const tankList = await api.tankList();
---
<BaseLayout {locale} accent="purple">
<BaseLayout selectedTool={tools.tanks} {locale} accent="purple">
<ToolBanner {locale} tool={tools.tanks} slot="pre-app" />
<h1>tanks</h1>