Last fixes before release

website/components/moves/crouch-cancel/crouch-cancel-move-overview-table.tsx

@@ -1,11 +1,16 @@
 import { CharacterBase } from "@/models/character";
 import { Move } from "@/models/move";
-import { calculateCrouchCancelPercentage } from "@/utilities/crouch-cancel-calculator";
+import {
+  calculateCrouchCancelPercentage,
+  getCrouchCancelImpossibleReason,
+  isCrouchCancelPossible,
+} from "@/utilities/crouch-cancel-calculator";
 import { processDuplicateHitboxes, processDuplicateHits } from "@/utilities/hitbox-utils";
 import { moveRoute } from "@/utilities/routes";
 import { Link } from "@nextui-org/link";
 import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell } from "@nextui-org/table";
 import { flattenData, FlattenedHitbox } from "../hitboxes/hitbox-table-columns";
+import { Hitbox } from "@/models/hitbox";
 
 export interface CrouchCancelMoveOverviewTableParams {
   character: CharacterBase;
@@ -19,6 +24,14 @@ interface ExpandedFlattenedHitbox extends FlattenedHitbox {
   move: Move;
 }
 
+function generateHitboxPercentage(hitbox: Hitbox, target: CharacterBase, knockbackTarget: number, floor: boolean) {
+  if (!isCrouchCancelPossible(hitbox)) {
+    return getCrouchCancelImpossibleReason(hitbox);
+  }
+
+  return calculateCrouchCancelPercentage(hitbox, target, knockbackTarget, floor);
+}
+
 export function CrouchCancelMoveOverviewTable(params: Readonly<CrouchCancelMoveOverviewTableParams>) {
   const classNames = {
     wrapper: ["dark:bg-gray-800", "border-0", "shadow-none", "p-0"],
@@ -65,7 +78,7 @@ export function CrouchCancelMoveOverviewTable(params: Readonly<CrouchCancelMoveO
               </TableCell>
               <TableCell>{hitbox.name}</TableCell>
               <TableCell className="md:text-center">
-                {calculateCrouchCancelPercentage(hitbox, params.target, params.knockbackTarget, params.floorPercentage)}
+                {generateHitboxPercentage(hitbox, params.target, params.knockbackTarget, params.floorPercentage)}
               </TableCell>
             </TableRow>
           );

website/components/moves/hitbox-section.tsx

@@ -1,5 +1,5 @@
 import { Hit } from "@/models/hit";
-import NewHitboxTable2 from "./hitboxes/new-hitbox-table-2";
+import HitboxTable from "./hitboxes/hitbox-table";
 
 export interface HitboxSectionParams {
   hits: Hit[];
@@ -9,7 +9,7 @@ export function HitboxSection(params: Readonly<HitboxSectionParams>) {
   return (
     <div>
       <h2 className="text-xl font-bold">Hitboxes</h2>
-      <NewHitboxTable2 hits={params.hits}></NewHitboxTable2>
+      <HitboxTable hits={params.hits}></HitboxTable>
     </div>
   );
 }

website/components/moves/hitboxes/new-hitbox-table-2.tsx → website/components/moves/hitboxes/hitbox-table.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/utilities/hitbox-utils";
 import MobileHitboxTable from "./mobile-hitbox-table";
 
-export interface NewHitboxTableParams {
+export interface HitboxTableParams {
   hits: Hit[];
 }
 
@@ -31,7 +31,7 @@ function getColorForHitbox(name: string): string | null {
   return null;
 }
 
-export default function NewHitboxTable2(params: Readonly<NewHitboxTableParams>) {
+export default function HitboxTable(params: Readonly<HitboxTableParams>) {
   const processedHits = processDuplicateHitboxes(params.hits);
   const data = processDuplicateHits(flattenData(processedHits));
   const mobileData = structuredClone(data);

website/components/moves/hitboxes/d3-based-hitbox-timeline.tsx → website/components/moves/hitboxes/hitbox-timeline.tsx

@@ -4,15 +4,17 @@ import { Move } from "@/models/move";
 import { processDuplicateHitboxes, processDuplicateHits } from "@/utilities/hitbox-utils";
 import { flattenData, FlattenedHitbox } from "./hitbox-table-columns";
 import { getMappedUnique, getUnique } from "@/utilities/utils";
+import { useTheme } from "next-themes";
 
-export interface D3HitboxTimingParams {
+export interface HitboxTimingParams {
   move: Move;
 }
 
-export default function D3BasedHitboxTimeline(params: Readonly<D3HitboxTimingParams>) {
+export default function HitboxTimeline(params: Readonly<HitboxTimingParams>) {
   const processedHits = processDuplicateHitboxes(params.move.hits!);
   const data = processDuplicateHits(flattenData(processedHits));
   const colors = generateColors(data);
+  const { theme } = useTheme();
 
   const getColor = (value: number): string => {
     // Account for counting at 0 instead of 1
@@ -26,7 +28,10 @@ export default function D3BasedHitboxTimeline(params: Readonly<D3HitboxTimingPar
       return "orange";
     }
 
-    return "#1f2937";
+    if (theme === "dark") {
+      return "#1f2937";
+    }
+    return "#dddde0";
   };
 
   const getBorderColor = (frame: number): string => {
@@ -45,7 +50,6 @@ export default function D3BasedHitboxTimeline(params: Readonly<D3HitboxTimingPar
     borderColor: string;
   }[] = [];
 
-  const columns = 10; // Number of columns in the grid
   const rectSize = 30; // Size of each rectangle (reduced size)
   const spacing = 5; // Spacing between rectangles
   const maxColumns = 20; // Maximum number of columns
@@ -63,7 +67,13 @@ export default function D3BasedHitboxTimeline(params: Readonly<D3HitboxTimingPar
     // Clear any existing SVG elements
     timelineContainer.selectAll("*").remove();
 
-    const containerWidth = timelineContainer.node().clientWidth;
+    const node = timelineContainer.node() as Element | null;
+    4;
+    if (node === null) {
+      throw new Error("Node is unexpected null");
+    }
+
+    const containerWidth = node.clientWidth;
     const columns = Math.min(Math.floor(containerWidth / (rectSize + spacing)), maxColumns);
     const rows = Math.ceil(frames.length / columns);
     const svgWidth = columns * (rectSize + spacing);
@@ -155,7 +165,7 @@ export default function D3BasedHitboxTimeline(params: Readonly<D3HitboxTimingPar
       .attr("y", (d, i) => 10 + Math.floor(i / columns) * (rectSize + spacing) + rectSize / 2)
       .attr("font-family", "sans-serif")
       .attr("font-size", "12px") // Adjusted font size
-      .attr("fill", "white")
+      .attr("fill", (d) => (d.color === "#ffffff" || theme === "light" ? "black" : "white"))
       .attr("text-anchor", "middle")
       .attr("alignment-baseline", "middle");
   };
@@ -196,7 +206,7 @@ interface HitboxColor {
   color: string;
 }
 
-const colors = ["#ef4444", "#3b82f6", "#22c55e", "#a855f7"];
+const colors = ["#ef4444", "#3b82f6", "#22c55e", "#a855f7", "#ffffff"];
 
 function generateColors(data: FlattenedHitbox[]): HitboxColor[] {
   const result: HitboxColor[] = [];