Refactor GoodsTable layout and add readGoodColor utility for dynamic good color retrieval

declarations.d.ts

@@ -1,9 +1,8 @@
+declare module "*.css";
 
-declare module '*.css';
+declare module "*.svg";
 
-declare module '*.svg';
-
-declare module '*.module.css' {
+declare module "*.module.css" {
   const classes: { [key: string]: string };
   export default classes;
 }

spec/support/jasmine.mjs

@@ -1,3 +1,10 @@
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+require.extensions[".css"] = () => {};
+require.extensions[".svg"] = () => {};
+
 export default {
   spec_dir: "",
   spec_files: [

src/client/game/goods_table.module.css

@@ -3,6 +3,8 @@
   display: flex;
   flex-direction: column;
   padding-bottom: 16px;
+  --black-group-bg: #5d4037;
+  --colorless-default: rgb(230, 144, 116);
 }
 
 .row {
@@ -19,15 +21,36 @@
   gap: 4px;
 }
 
-.row > *,
-.column > * {
+.row > * {
   flex: 1;
   text-align: center;
 }
 
+/* column children should not stretch vertically; columns are fixed-width stacks */
+.column > * {
+  flex: none;
+  text-align: center;
+}
+
+/* layout for the two groups: White and Black */
+.groupsGrid {
+  display: flex;
+  gap: 24px;
+  align-items: flex-start;
+}
+
+.group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
 .goodPlace {
-  aspect-ratio: 1 / 1;
-  background-color: var(--good-color);
+  width: 28px;
+  height: 28px;
+  display: block;
+  /* prefer the --good-color variable set by good classes, fall back to lightgrey */
+  background-color: var(--good-color, lightgrey);
 }
 
 .empty {
@@ -45,3 +68,109 @@
 .gapRight {
   margin-right: 8px;
 }
+
+.headerCell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2px 0;
+  height: 26px;
+}
+
+.letterCell {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+  padding: 2px 0;
+  height: 26px;
+}
+
+/* layout wrappers for grouped columns (white / black) */
+.leftColumns,
+.rightColumns {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  flex: none;
+  flex-wrap: nowrap;
+  padding: 12px 10px;
+  border-radius: 6px;
+}
+
+.leftColumns {
+  background-color: rgba(255, 255, 255, 0.7);
+}
+
+.rightColumns {
+  background-color: var(--black-group-bg);
+}
+
+:global(.dark-mode) .leftColumns {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+
+:global(.dark-mode) .rightColumns {
+  background-color: rgba(93, 64, 55, 0.72);
+}
+
+/* make each column a fixed-size stack so groups line up */
+.column {
+  width: 36px;
+  flex: none;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  align-items: center;
+}
+
+/* placeholder used to reserve header space when there's no visible letter header */
+.headerPlaceholder {
+  width: 32px;
+  height: 29px;
+}
+.headerPlaceholderHidden {
+  visibility: hidden;
+}
+
+/* Plain text header styling for number headers (1-6) */
+.plainNumberHeader {
+  font-family: Roboto, sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  height: 29px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.plainNumberHeaderWhite {
+  color: #222222;
+}
+
+.plainNumberHeaderBlack {
+  color: #ffffff;
+}
+
+:global(.dark-mode) .plainNumberHeaderWhite {
+  color: #f0f0f0;
+}
+
+/* Tab-shaped badge for letter headers (A-H), matching physical board */
+.letterHeader {
+  font-family: Roboto, sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 1;
+  text-align: center;
+  width: 28px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px 6px 0 0;
+  box-sizing: border-box;
+  margin-bottom: -4px;
+}