add multi game support

Author: xPaw

web/public/schemas.json web/public/cs2.jsonweb/public/schemas.json renamed to web/public/cs2.json

@@ -0,0 +1,123 @@
+import React, { useContext } from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { Declaration, SchemaClass, SchemaEnum } from "./api";
+import { DeclarationsContext } from "./DeclarationsContext";
+import { GAMES, GameId } from "~games";
+
+const Wrapper = styled.div`
+  padding: 10px 14px;
+  border-top: 1px solid ${(props) => props.theme.groupSeparator};
+`;
+
+const Title = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: ${(props) => props.theme.textDim};
+  margin-bottom: 6px;
+`;
+
+const RefList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+`;
+
+const GameLink = styled(Link)<{ $status: "identical" | "differs" }>`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  text-decoration: none;
+  color: ${(props) => props.theme.text};
+  background: ${(props) => props.theme.groupMembers};
+  border: 1px solid ${(props) => props.$status === "identical" ? props.theme.groupBorder : "#c97a1e"};
+  transition: border-color 0.1s;
+
+  &:hover {
+    border-color: ${(props) => props.theme.highlight};
+  }
+`;
+
+const StatusDot = styled.span<{ $status: "identical" | "differs" }>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${(props) => props.$status === "identical" ? "#4a8c2a" : "#c97a1e"};
+  flex-shrink: 0;
+`;
+
+function areClassesEqual(a: SchemaClass, b: SchemaClass): boolean {
+  if (a.parents.length !== b.parents.length) return false;
+  for (let i = 0; i < a.parents.length; i++) {
+    if (a.parents[i].name !== b.parents[i].name || a.parents[i].module !== b.parents[i].module) return false;
+  }
+  if (a.fields.length !== b.fields.length) return false;
+  for (let i = 0; i < a.fields.length; i++) {
+    if (a.fields[i].name !== b.fields[i].name || a.fields[i].offset !== b.fields[i].offset) return false;
+    if (JSON.stringify(a.fields[i].type) !== JSON.stringify(b.fields[i].type)) return false;
+  }
+  if (JSON.stringify(a.metadata) !== JSON.stringify(b.metadata)) return false;
+  return true;
+}
+
+function areEnumsEqual(a: SchemaEnum, b: SchemaEnum): boolean {
+  if (a.alignment !== b.alignment) return false;
+  if (a.members.length !== b.members.length) return false;
+  for (let i = 0; i < a.members.length; i++) {
+    if (a.members[i].name !== b.members[i].name || a.members[i].value !== b.members[i].value) return false;
+  }
+  if (JSON.stringify(a.metadata) !== JSON.stringify(b.metadata)) return false;
+  return true;
+}
+
+function areDeclarationsEqual(a: Declaration, b: Declaration): boolean {
+  if (a.kind !== b.kind) return false;
+  if (a.kind === "class" && b.kind === "class") return areClassesEqual(a, b);
+  if (a.kind === "enum" && b.kind === "enum") return areEnumsEqual(a, b);
+  return false;
+}
+
+export function CrossGameRefs({ name, module, kind }: { name: string; module: string; kind: "class" | "enum" }) {
+  const { game, allGames, declarations } = useContext(DeclarationsContext);
+  if (!allGames) return null;
+
+  const current = declarations.find((d) => d.name === name && d.module === module && d.kind === kind);
+  if (!current) return null;
+
+  const otherGames: { gameId: GameId; gameName: string; status: "identical" | "differs"; module: string }[] = [];
+
+  for (const [gameId, gameDeclarations] of allGames) {
+    if (gameId === game) continue;
+    const match = gameDeclarations.find((d) => d.name === name && d.kind === kind);
+    if (match) {
+      const gameInfo = GAMES.find((g) => g.id === gameId);
+      otherGames.push({
+        gameId,
+        gameName: gameInfo?.name ?? gameId,
+        status: areDeclarationsEqual(current, match) ? "identical" : "differs",
+        module: match.module,
+      });
+    }
+  }
+
+  if (otherGames.length === 0) return null;
+
+  return (
+    <Wrapper>
+      <Title>Also in</Title>
+      <RefList>
+        {otherGames.map(({ gameId, gameName, status, module: otherModule }) => (
+          <GameLink key={gameId} to={`/${gameId}/${otherModule}/${name}`} $status={status} title={status === "identical" ? "Identical" : "Differs"}>
+            <StatusDot $status={status} />
+            {gameName}
+          </GameLink>
+        ))}
+      </RefList>
+    </Wrapper>
+  );
+}

web/public/deadlock.json

@@ -1,5 +1,6 @@
 import { createContext } from "react";
 import { Declaration } from "~components/Docs/api";
+import { GameId } from "~games";
 
 export type ReferenceEntry = {
   declarationName: string;
@@ -10,9 +11,17 @@ export type ReferenceEntry = {
 };
 
 export type DeclarationsContextType = {
+  game: GameId;
   root: string;
   declarations: Declaration[];
   references: Map<string, ReferenceEntry[]>;
+  allGames: Map<GameId, Declaration[]> | null;
 };
 
-export const DeclarationsContext = createContext<DeclarationsContextType>({ root: "", declarations: [], references: new Map() });
+export const DeclarationsContext = createContext<DeclarationsContextType>({
+  game: "cs2",
+  root: "",
+  declarations: [],
+  references: new Map(),
+  allGames: null,
+});

web/public/dota2.json

@@ -4,6 +4,7 @@ import styled from "styled-components";
 import * as api from "./api";
 import { SchemaTypeView, MetadataTags } from "./SchemaType";
 import { ReferencedBy } from "./ReferencedBy";
+import { CrossGameRefs } from "./CrossGameRefs";
 import { KindIcon } from "./utils/components";
 import { DeclarationsContext } from "./DeclarationsContext";
 import { useSearchWords, useSearchOffsets } from "./utils/filtering";
@@ -148,6 +149,7 @@ export const SchemaClassView: React.FC<{
       </ClassMembers>
     )}
     {!collapseNonMatching && <ReferencedBy name={declaration.name} module={declaration.module} />}
+    {!collapseNonMatching && <CrossGameRefs name={declaration.name} module={declaration.module} kind="class" />}
   </CommonGroupWrapper>
   );
 };

web/src/components/Docs/CrossGameRefs.tsx

@@ -6,6 +6,7 @@ import { KindIcon } from "./utils/components";
 import { DeclarationsContext } from "./DeclarationsContext";
 import { MetadataTags } from "./SchemaType";
 import { ReferencedBy } from "./ReferencedBy";
+import { CrossGameRefs } from "./CrossGameRefs";
 import { ModuleBadge, matchesWords } from "./SchemaClass";
 import { useSearchWords } from "./utils/filtering";
 import {
@@ -92,6 +93,7 @@ export const SchemaEnumView: React.FC<{
       </EnumMembers>
     )}
     {!collapseNonMatching && <ReferencedBy name={declaration.name} module={declaration.module} />}
+    {!collapseNonMatching && <CrossGameRefs name={declaration.name} module={declaration.module} kind="enum" />}
   </CommonGroupWrapper>
   );
 };

web/src/components/Docs/DeclarationsContext.ts

@@ -25,20 +25,23 @@ export const SearchInput = styled.input.attrs({ type: "search" })`
   width: 100%;
   box-sizing: border-box;
   padding: 8px 14px;
-  border: 1px solid ${(props) => props.theme.groupBorder};
-  border-radius: 10px;
+  border: none;
+  border-radius: 8px;
   background: ${(props) => props.theme.searchbox.background};
   color: ${(props) => props.theme.text};
   font-family: inherit;
   font-size: 16px;
   outline: none;
-  transition: border-color 0.15s, box-shadow 0.15s;
+  transition: box-shadow 0.15s;
 
-  &:focus {
-    border-color: ${(props) => props.theme.highlight};
+  &:hover {
     box-shadow: 0 0 0 2px ${(props) => props.theme.highlight}30;
   }
 
+  &:focus {
+    box-shadow: 0 0 0 2px ${(props) => props.theme.highlight};
+  }
+
   &::placeholder {
     color: ${(props) => props.theme.searchbox.placeholder};
   }

web/src/components/Docs/SchemaClass.tsx

@@ -61,7 +61,7 @@ export const themeDark = {
   },
 
   searchbox: {
-    background: "#181a21",
+    background: "#090e15",
     placeholder: "#6b7280",
     border: "none",
     button: "transparent",