different color if its only offsets

Author: xPaw

web/src/components/Docs/CrossGameRefs.tsx

@@ -25,7 +25,12 @@ const RefList = styled.div`
   gap: 5px;
 `;
 
-const GameLink = styled(Link)<{ $status: "identical" | "differs" }>`
+type DiffStatus = "identical" | "offsets_only" | "differs";
+
+const statusColor = (status: DiffStatus) =>
+  status === "identical" ? "#4a8c2a" : status === "offsets_only" ? "#5b8ab5" : "#c97a1e";
+
+const GameLink = styled(Link)<{ $status: DiffStatus }>`
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -35,34 +40,36 @@ const GameLink = styled(Link)<{ $status: "identical" | "differs" }>`
   text-decoration: none;
   color: ${(props) => props.theme.text};
   background: ${(props) => props.theme.groupMembers};
-  border: 1px solid ${(props) => props.$status === "identical" ? props.theme.groupBorder : "#c97a1e"};
+  border: 1px solid ${(props) => props.$status === "identical" ? props.theme.groupBorder : statusColor(props.$status)};
   transition: border-color 0.1s;
 
   &:hover {
     border-color: ${(props) => props.theme.highlight};
   }
 `;
 
-const StatusDot = styled.span<{ $status: "identical" | "differs" }>`
+const StatusDot = styled.span<{ $status: DiffStatus }>`
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: ${(props) => props.$status === "identical" ? "#4a8c2a" : "#c97a1e"};
+  background-color: ${(props) => statusColor(props.$status)};
   flex-shrink: 0;
 `;
 
-function areClassesEqual(a: SchemaClass, b: SchemaClass): boolean {
-  if (a.parents.length !== b.parents.length) return false;
+function compareClasses(a: SchemaClass, b: SchemaClass): DiffStatus {
+  if (a.parents.length !== b.parents.length) return "differs";
   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.parents[i].name !== b.parents[i].name || a.parents[i].module !== b.parents[i].module) return "differs";
   }
-  if (a.fields.length !== b.fields.length) return false;
+  if (a.fields.length !== b.fields.length) return "differs";
+  let offsetsDiffer = 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 (a.fields[i].name !== b.fields[i].name) return "differs";
+    if (JSON.stringify(a.fields[i].type) !== JSON.stringify(b.fields[i].type)) return "differs";
+    if (a.fields[i].offset !== b.fields[i].offset) offsetsDiffer = true;
   }
-  if (JSON.stringify(a.metadata) !== JSON.stringify(b.metadata)) return false;
-  return true;
+  if (JSON.stringify(a.metadata) !== JSON.stringify(b.metadata)) return "differs";
+  return offsetsDiffer ? "offsets_only" : "identical";
 }
 
 function areEnumsEqual(a: SchemaEnum, b: SchemaEnum): boolean {
@@ -75,11 +82,11 @@ function areEnumsEqual(a: SchemaEnum, b: SchemaEnum): boolean {
   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;
+function compareDeclarations(a: Declaration, b: Declaration): DiffStatus {
+  if (a.kind !== b.kind) return "differs";
+  if (a.kind === "class" && b.kind === "class") return compareClasses(a, b);
+  if (a.kind === "enum" && b.kind === "enum") return areEnumsEqual(a, b) ? "identical" : "differs";
+  return "differs";
 }
 
 export function CrossGameRefs({ name, module, kind }: { name: string; module: string; kind: "class" | "enum" }) {
@@ -89,7 +96,7 @@ export function CrossGameRefs({ name, module, kind }: { name: string; module: st
   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 }[] = [];
+  const otherGames: { gameId: GameId; gameName: string; status: DiffStatus; module: string }[] = [];
 
   for (const [gameId, gameDeclarations] of allGames) {
     if (gameId === game) continue;
@@ -99,7 +106,7 @@ export function CrossGameRefs({ name, module, kind }: { name: string; module: st
       otherGames.push({
         gameId,
         gameName: gameInfo?.name ?? gameId,
-        status: areDeclarationsEqual(current, match) ? "identical" : "differs",
+        status: compareDeclarations(current, match),
         module: match.module,
       });
     }
@@ -112,7 +119,7 @@ export function CrossGameRefs({ name, module, kind }: { name: string; module: st
       <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"}>
+          <GameLink key={gameId} to={`/${gameId}/${otherModule}/${name}`} $status={status} title={status === "identical" ? "Identical" : status === "offsets_only" ? "Only offsets differ" : "Differs"}>
             <StatusDot $status={status} />
             {gameName}
           </GameLink>

web/vite.config.ts

@@ -3,7 +3,7 @@ import { defineConfig } from "vite";
 import svgr from "vite-plugin-svgr";
 
 export default defineConfig({
-  base: "/api/",
+  base: "/SchemaExplorer/",
   plugins: [
     react({
       babel: {
@@ -15,7 +15,6 @@ export default defineConfig({
     }),
   ],
   build: {
-    outDir: "../build/api",
     emptyOutDir: true,
   },
   resolve: {