feat: start on header

bun.lock

@@ -187,8 +187,8 @@
         "@blitzkit/core": "workspace:*",
         "@blitzkit/i18n": "workspace:*",
         "@bufbuild/protobuf": "^2.10.2",
-        "@fontsource-variable/inter": "^5.2.8",
         "@fontsource-variable/roboto-flex": "^5.2.8",
+        "@fontsource-variable/roboto-mono": "^5.2.8",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-icons": "^1.3.2",
         "@react-three/drei": "^10.7.6",
@@ -545,10 +545,10 @@
 
     "@floating-ui/utils": ["@floating-ui/[email protected]", "", {}, "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ=="],
 
-    "@fontsource-variable/inter": ["@fontsource-variable/[email protected]", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
-
     "@fontsource-variable/roboto-flex": ["@fontsource-variable/[email protected]", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="],
 
+    "@fontsource-variable/roboto-mono": ["@fontsource-variable/[email protected]", "", {}, "sha512-6M2U3wGIUxYNKRrUoKls8BRRIPDA57T8J0agqwyDkiEHrLEEAqptsxcUl3eTm6tnRNEn6yEm4pCefvtnujebDA=="],
+
     "@fontsource/inter": ["@fontsource/[email protected]", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
     "@gltf-transform/core": ["@gltf-transform/[email protected]", "", { "dependencies": { "property-graph": "^3.0.0" } }, "sha512-qKhrQ29KJ9K6sz7xGoGRllqPBlROjPJMQPvCLBOfgMPH3S/Ph5E0e6fD5WmwTY5QPyBsDMRqKd1Vl0ncThTXGw=="],

packages/i18n/strings/en.json

@@ -24,5 +24,9 @@
     "avatars": { "name": "Avatars" },
     "backgrounds": { "name": "Backgrounds" },
     "api": { "name": "API" }
+  },
+
+  "home": {
+    "search": "Search tanks, players, tools..."
   }
 }

packages/scripts/src/protos.ts

@@ -31,47 +31,6 @@ if (!tsProtoExecutableLocation) {
   );
 }
 
-// for (const root of ROOTS) {
-//   const filesRaw = await readdir(`${root}`);
-//   const files: string[] = [];
-
-//   for (const file of filesRaw) {
-//     if (file.endsWith(".proto")) files.push(file);
-//     if (file.endsWith(".ts")) await rm(`${root}/${file}`);
-//   }
-
-//   while (files.length > 0) {
-//     let command = [
-//       "protoc",
-//       `--plugin=${tsProtoExecutableLocation}`,
-//       "--ts_proto_opt=esModuleInterop=true",
-//       "--ts_proto_opt=oneof=unions-value",
-//       // "--ts_proto_opt=removeEnumPrefix=true",
-//       "--ts_proto_opt=unrecognizedEnum=false",
-//       "--ts_proto_opt=snakeToCamel=false",
-//       `--ts_proto_out=${root}`,
-//       ...ROOTS.map((root) => `-I=${root}`),
-//     ].join(" ");
-
-//     while (true) {
-//       if (files.length === 0) break;
-
-//       const file = files.at(-1);
-//       const newLine = ` ${root}/${file}`;
-
-//       if (command.length + newLine.length < MAX_COMMAND_LENGTH) {
-//         const file = files.pop();
-//         command += newLine;
-//         // console.log(`  ${file}`);
-//       } else {
-//         break;
-//       }
-//     }
-
-//     await exec(command);
-//   }
-// }
-
 await mkdir("temp", { recursive: true });
 
 for (const root of ROOTS) {
@@ -92,10 +51,18 @@ for (const root of ROOTS) {
   const files: string[] = [];
 
   for (const file of filesRaw) {
-    if (file.endsWith(".proto")) files.push(file);
+    if (file.endsWith(".proto")) {
+      files.push(file);
+      args += `${root}/${file}\n`;
+    }
+
     if (file.endsWith(".ts")) await rm(`${root}/${file}`);
   }
 
   await writeFile("temp/protoc.txt", args);
-  execFile("protoc", ["@temp/protoc.txt"]);
+  execFile("protoc", ["@temp/protoc.txt"], (error, stdout, stderr) => {
+    if (error) throw new Error(error.message);
+    if (stderr) console.error(stderr);
+    if (stdout) console.log(stdout);
+  });
 }

packages/website-ue/package.json

@@ -17,8 +17,8 @@
     "@blitzkit/core": "workspace:*",
     "@blitzkit/i18n": "workspace:*",
     "@bufbuild/protobuf": "^2.10.2",
-    "@fontsource-variable/inter": "^5.2.8",
     "@fontsource-variable/roboto-flex": "^5.2.8",
+    "@fontsource-variable/roboto-mono": "^5.2.8",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@react-three/drei": "^10.7.6",

packages/website-ue/src/components/BaseStyles.astro

@@ -1,7 +1,11 @@
+---
+import "@fontsource-variable/roboto-flex";
+import "@fontsource-variable/roboto-mono";
+---
+
 <style is:global>
   @import "@radix-ui/colors/mauve-dark.css";
   @import "@radix-ui/colors/mauve-alpha.css";
-  @import "@fontsource-variable/roboto-flex";
 
   body {
     --space-0: 0.0625rem;
@@ -25,11 +29,22 @@
     --weight-extra-bold: 800;
     --weight-black: 900;
 
-    --font-size-regular: 1rem;
+    --font-size-regular: var(--space-4);
+
+    --max-size: max(100vw, 100vh);
+
+    --outline-interactive: solid var(--space-1) var(--gray-5);
+    --outline-focus: var(--space-1) solid var(--accent-6);
+
+    --shadow-cavity:
+      inset var(--space-1) var(--space-1) var(--space-1) var(--gray-2),
+      inset calc(var(--space-1) * -1) calc(var(--space-1) * -1) var(--space-1)
+        var(--gray-4);
+    --shadow-focus: 0 0 var(--space-3) var(--accent-4);
 
     background-color: var(--gray-1);
     color: var(--gray-12);
-    font-family: "Roboto Flex", sans-serif;
+    font-family: "Roboto Flex";
 
     display: flex;
     flex-direction: column;

packages/website-ue/src/components/Code/index.css

@@ -0,0 +1,4 @@
+.code {
+  font-family: "Roboto Mono";
+  color: red;
+}

packages/website-ue/src/components/Code/index.tsx

@@ -0,0 +1,8 @@
+import type { ComponentProps } from "react";
+import "./index.css";
+
+export interface CodeProps extends ComponentProps<"code"> {}
+
+export function Code({ className }: CodeProps) {
+  return <code className={className?????} {...props} />;
+}

packages/website-ue/src/components/HomeHero.astro

@@ -1,21 +1,35 @@
 ---
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
 import { TextField } from "./TextField";
+
+const strings = { home: { search: "test" } };
 ---
 
 <style>
   .home-hero {
     display: flex;
     flex-direction: column;
+    justify-content: end;
     align-items: center;
+    padding: 0 var(--space-4);
+    position: relative;
 
     .wallpaper {
+      position: absolute;
+      top: 0;
+      left: 0;
       width: 100%;
+      height: calc(100% - var(--space-5) / 2);
+
+      z-index: -1;
+
       background-image: url(/assets/home-hero.webp);
       background-size: cover;
       background-position: top;
-      height: 13rem;
 
-      .wrapper {
+      .gradient {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -29,7 +43,30 @@ import { TextField } from "./TextField";
       }
     }
 
-    input {
+    .name {
+      margin: var(--space-6) 0;
+
+      .icon-wrapper {
+        position: relative;
+
+        width: var(--space-6);
+        height: var(--space-6);
+
+        .icon {
+          width: 100%;
+          height: 100%;
+        }
+
+        .version {
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translateX(100%);
+        }
+      }
+    }
+
+    .text-field {
       width: 100%;
     }
   }
@@ -37,8 +74,17 @@ import { TextField } from "./TextField";
 
 <div class="home-hero">
   <div class="wallpaper">
-    <div class="wrapper"></div>
+    <div class="gradient"></div>
   </div>
 
-  <TextField placeholder="asdasdasd" />
+  <div class="name">
+    <div class="icon-wrapper">
+      <BlitzKitIcon className="icon" />
+      <Code className="version">2.0</Code>
+    </div>
+  </div>
+
+  <TextField placeholder={strings.home.search}>
+    <MagnifyingGlassIcon />
+  </TextField>
 </div>

packages/website-ue/src/components/TextField/index.css

@@ -1,19 +1,51 @@
 .text-field {
-  min-width: 0;
-  max-width: var(--space-9);
+  display: flex;
+  align-items: center;
 
-  border-radius: 9999px;
-
-  background-color: var(--gray-3);
-  border: solid 1px var(--gray-6);
-  color: var(--gray-12);
-  padding: var(--space-3) var(--space-4);
+  gap: var(--space-3);
   margin: 0 var(--space-4);
 
-  font-weight: var(--weight-medium);
+  border-radius: var(--max-size);
+
+  background-color: var(--gray-3);
+  outline: var(--outline-interactive);
+  box-shadow: var(--shadow-cavity);
+
   font-size: var(--font-size-regular);
+  color: var(--gray-11);
 
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
   }
+
+  &:focus-within {
+    outline: var(--outline-focus);
+    box-shadow: var(--shadow-focus);
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  input {
+    min-width: 0;
+
+    background: none;
+    border: none;
+
+    font-size: inherit;
+    font-weight: medium;
+    padding: var(--space-3) 0;
+
+    color: var(--gray-12);
+
+    &::placeholder {
+      color: var(--gray-11);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
 }

packages/website-ue/src/components/TextField/index.tsx

@@ -1,6 +1,15 @@
-import type { ComponentProps } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import "./index.css";
 
-export function TextField(props: ComponentProps<"input">) {
-  return <input className="text-field" {...props} />;
+export interface TextFieldProps extends ComponentProps<"input"> {
+  children?: ReactNode;
+}
+
+export function TextField({ children, ...props }: TextFieldProps) {
+  return (
+    <div className="text-field" data-has-icon={children !== undefined}>
+      {children}
+      <input {...props} />
+    </div>
+  );
 }

packages/website-ue/src/core/api/abstract.ts

@@ -1,7 +1,4 @@
 import type { CatalogItemAccessor } from "@blitzkit/closed";
-import type { Tank } from "../../protos/tank";
-import type { TankList } from "../../protos/tank_list";
-import type { Tanks } from "../../protos/tanks";
 
 export abstract class AbstractAPI {
   abstract tanks(): Promise<Tanks>;

packages/website-ue/src/icons/BlitzKit.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+
+export function BlitzKitIcon(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="128"
+      height="128"
+      viewBox="0 0 128 128"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M48.4082 19.8652C56.6277 19.8652 62.3045 21.5665 65.4375 24.9688C67.7005 27.3762 68.8875 30.4035 69 34.0498L52.1045 58.1982L61.252 68.375L30.8174 120.845L32.3818 93.4385H0L12.9863 19.8652H48.4082ZM83.584 58.1318L103.038 35.7969H128L99.2139 65.7285L117.691 109.37H90.4053L81.2812 84.373L78.4297 87.3389L74.5391 109.37H50.0312L52.4111 95.8789L71.4209 68.375L62.2734 58.1982L92.6064 7L83.584 58.1318ZM26.5791 77.875H32.9961C35.3204 77.875 37.1735 77.1677 38.5547 75.7529C39.9358 74.3381 40.8292 72.485 41.2334 70.1943C41.6376 67.9037 41.4012 66.0505 40.5254 64.6357C39.6495 63.1876 38.0496 62.463 35.7256 62.4629H29.3076L26.5791 77.875ZM31.4297 50.4365H37.1904C39.3126 50.4365 40.9635 49.8137 42.1426 48.5674C43.3553 47.2873 44.1641 45.5016 44.5684 43.2109C44.9726 40.954 44.8036 39.2186 44.0625 38.0059C43.3213 36.7598 41.8725 36.1367 39.7168 36.1367H33.957L31.4297 50.4365Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}

packages/website-ue/src/layouts/BaseLayout.astro

@@ -1,5 +1,4 @@
 ---
-import "@fontsource-variable/inter";
 import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
 import ColorAlias from "../components/ColorAlias.astro";

packages/website-ue/src/pages/[...locale]/api/index.astro

@@ -6,7 +6,7 @@ import {
   forEachChild,
   isFunctionDeclaration,
 } from "typescript";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 const root = `/src/pages/api`;
 const globbed = import.meta.glob("/src/pages/api/**/*.ts", {

packages/website-ue/src/pages/[...locale]/avatars/index.astro

@@ -1,8 +1,8 @@
 ---
 import { ProfileAvatarComponent_Category } from "@protos/blitz_static_profile_avatar_component";
 import { Grade } from "@protos/blitz_static_standard_grades_enum";
-import { api } from "../../core/api/dynamic";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import { api } from "../../../core/api/dynamic";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 const avatars = await api.avatars();
 ---

packages/website-ue/src/pages/[...locale]/backgrounds/index.astro

@@ -1,7 +1,7 @@
 ---
 import { Grade } from "@protos/blitz_static_standard_grades_enum";
-import { api } from "../../core/api/dynamic";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import { api } from "../../../core/api/dynamic";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 const backgrounds = await api.backgrounds();
 ---

packages/website-ue/src/pages/[...locale]/index.astro

@@ -0,0 +1,32 @@
+---
+import locales from "@blitzkit/i18n/locales.json";
+import "@radix-ui/colors/amber-dark.css";
+import type { GetStaticPaths } from "astro";
+import packageJson from "../../../../../package.json";
+import HomeHero from "../../components/HomeHero.astro";
+import { tools } from "../../core/tools/tools";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+
+export const getStaticPaths = (() => {
+  return [
+    ...locales.supported
+      .filter(({ locale }) => locale !== locales.default)
+      .map(({ locale }) => ({ params: { locale }, props: { locale } })),
+    { params: { locale: undefined }, props: { locale: locales.default } },
+  ];
+}) satisfies GetStaticPaths;
+---
+
+<BaseLayout accent="amber">
+  <HomeHero />
+
+  <h1>blitzkit {packageJson.version}</h1>
+
+  {
+    Object.values(tools).map((tool) => (
+      <p>
+        <a href={`/${tool.id}`}>{tool.id}</a>
+      </p>
+    ))
+  }
+</BaseLayout>

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -1,13 +1,16 @@
 import { times } from "lodash-es";
 import { Suspense, useMemo } from "react";
-import { TankopediaCharacteristic } from "../../../components/TankopediaCharacteristic";
-import { TankopediaToy } from "../../../components/TankopediaToy";
-import { api } from "../../../core/api/dynamic";
-import { characteristicsOrder } from "../../../core/tankopedia/characteristicsOrder";
-import { computeCharacteristics } from "../../../core/tankopedia/computeCharacteristics";
-import { TerrainHardness } from "../../../core/tankopedia/tankState";
-import { useAwait } from "../../../hooks/useAwait";
-import { Tankopedia, TankopediaCompare } from "../../../stores/tankopedia";
+import { TankopediaCharacteristic } from "../../../../components/TankopediaCharacteristic";
+import { TankopediaToy } from "../../../../components/TankopediaToy";
+import { api } from "../../../../core/api/dynamic";
+import { characteristicsOrder } from "../../../../core/tankopedia/characteristicsOrder";
+import { computeCharacteristics } from "../../../../core/tankopedia/computeCharacteristics";
+import type { TerrainHardness } from "../../../../core/tankopedia/tankState";
+import { useAwait } from "../../../../hooks/useAwait";
+import {
+  Tankopedia,
+  type TankopediaCompare,
+} from "../../../../stores/tankopedia";
 
 export function Page({ id }: { id: string }) {
   return (

packages/website-ue/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -1,8 +1,8 @@
 ---
 import "@radix-ui/colors/violet-dark.css";
 import type { GetStaticPaths } from "astro";
-import { api } from "../../../core/api/dynamic";
-import BaseLayout from "../../../layouts/BaseLayout.astro";
+import { api } from "../../../../core/api/dynamic";
+import BaseLayout from "../../../../layouts/BaseLayout.astro";
 import { Page } from "./_index";
 
 export const getStaticPaths = (async () => {

packages/website-ue/src/pages/[...locale]/tanks/index.astro

@@ -1,7 +1,7 @@
 ---
 import "@radix-ui/colors/violet-dark.css";
-import { api } from "../../core/api/dynamic";
-import BaseLayout from "../../layouts/BaseLayout.astro";
+import { api } from "../../../core/api/dynamic";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 const tankList = await api.tankList();
 ---

packages/website-ue/src/pages/index.astro

@@ -1,21 +0,0 @@
----
-import "@radix-ui/colors/amber-dark.css";
-import packageJson from "../../../../package.json";
-import HomeHero from "../components/HomeHero.astro";
-import { tools } from "../core/tools/tools";
-import BaseLayout from "../layouts/BaseLayout.astro";
----
-
-<BaseLayout accent="amber">
-  <HomeHero />
-
-  <h1>blitzkit {packageJson.version}</h1>
-
-  {
-    Object.values(tools).map((tool) => (
-      <p>
-        <a href={`/${tool.id}`}>{tool.id}</a>
-      </p>
-    ))
-  }
-</BaseLayout>

packages/website-ue/src/pages/styles/colors/[accent].css.ts

@@ -1,35 +0,0 @@
-import * as colors from "@radix-ui/colors";
-import type { APIContext, GetStaticPaths } from "astro";
-
-const ignoreEndings = ["A", "P3", "Dark", "DarkA", "DarkP3"] as const;
-
-const filtered = Object.keys(colors).filter(
-  (name) =>
-    !ignoreEndings.some((ending) => name.endsWith(ending)) &&
-    name !== "__esModule"
-);
-
-export const getStaticPaths = (() => {
-  return filtered.map((accent) => ({
-    params: { accent },
-  }));
-}) satisfies GetStaticPaths;
-
-export type Color = Exclude<
-  keyof typeof colors,
-  `${string}${(typeof ignoreEndings)[number]}` | "__esModule"
->;
-
-export async function GET({ params }: APIContext<{}, { accent: Color }>) {
-  const palette = colors[`${params.accent}Dark`];
-  let content = ":root{";
-
-  for (const key in palette) {
-    const dashedKey = key.replace(/([a-zA-Z])(\d+)/, "$1-$2");
-    content += `--${dashedKey}:${palette[key as keyof typeof palette]};`;
-  }
-
-  content += "}";
-
-  return new Response(content);
-}