feat: recover project (July 2025) by manuartero · Pull Request #7 · manuartero/storming

manuartero · 2025-07-18T11:31:28Z

This pull request introduces several updates across the codebase, focusing on modernizing dependencies, transitioning from SCSS to CSS modules, improving the board game logic, and enhancing the structure and maintainability of the project. Key changes include dependency upgrades, refactoring of styles, and updates to the board's functionality and visual representation.

Dependency and Configuration Updates:

Updated node version requirement to >=20.19 in package.json and updated dependencies and devDependencies to their latest versions, including react, typescript, and jest (package.json, [1] [2].
Replaced the vite script alias start with dev in package.json (package.json, package.jsonL32-R70).
Updated the Jest moduleNameMapper configuration to remove the regex anchor for.svg files (jest.config.mjs`, jest.config.mjsL90-R90).

Transition from SCSS to CSS Modules:

Migrated styles from app.scss to app.module.css, including grid layout definitions for the main app, and removed redundant SCSS code (src/app.scss, [1]; src/app.module.css, [2].
Refactored board-related styles from board.scss to board.module.css to utilize CSS modules and improve maintainability (src/components/board/board.scss, [1]; src/components/board/board.module.css, [2].
Removed unused SCSS files, such as option-dialog.scss (src/components/board/option-dialog.scss, src/components/board/option-dialog.scssL1-L21).

Board Game Logic and Visual Updates:

Introduced a new upgradeBuilding helper function to simplify building upgrades and replaced inline logic with this helper in board-controller.tsx (src/components/board/board-controller.tsx, src/components/board/board-controller.tsxR54-R57).
Updated the inferVisualBoardFromGameContext function to remove the idle status and simplify the logic for determining tile statuses (src/components/board/infer-visual-board.ts, [1] [2].
Enhanced the Board component to use CSS modules for styling and added ARIA roles and labels for improved accessibility (src/components/board/board.tsx, [1] [2].

Mock and Test Updates:

Updated the svg-mock.cjs file to export a React-compatible mock for .svg files (src/__mocks__/svg-mock.cjs, src/mocks/svg-mock.cjsL3-R9).
Removed outdated snapshot tests for the Piece and Tile components (src/components/board/__snapshots__/piece.test.tsx.snap, [1]; src/components/board/__snapshots__/tile.test.tsx.snap, [2].

Component and Structural Refactoring:

Refactored the BuildDialog component to remove unused SCSS styles and improve its structure by adding a title and simplifying its JSX (src/components/board/build-dialog.tsx, src/components/board/build-dialog.tsxL1-L35).
Updated the Board component to use nested directories for pieces and tiles to better organize its structure (src/components/board/board.tsx, src/components/board/board.tsxR1-R7).

These changes collectively improve the project's maintainability, performance, and developer experience while modernizing the codebase.

…e.css

vercel · 2025-07-18T11:31:33Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
storming	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 18, 2025 11:40am

Copilot

Pull Request Overview

This PR implements a comprehensive project recovery for July 2025, focusing on modernizing the codebase with updated dependencies, improved styling architecture, and enhanced accessibility features.

Updates build tooling from Vite plugin React to React SWC and modernizes dependency versions
Migrates from SCSS to CSS Modules for better component isolation and maintainability
Enhances accessibility with proper ARIA labels, roles, and semantic HTML structure

Reviewed Changes

Copilot reviewed 101 out of 135 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
vite.config.ts	Updates Vite configuration with React SWC plugin and HTML plugin
src/styles/*.css	Migrates SCSS variables to CSS custom properties and removes deprecated files
src/components/*/.tsx	Converts components to use CSS Modules and adds accessibility improvements
src/models/new-building.ts	Adds building upgrade functionality and changes default building type
src/game-logic/*.ts	Updates game logic to use new building types and terrain system
package.json	Updates dependencies to latest versions and changes start script to dev

Comments suppressed due to low confidence (1)

src/game-logic/pieces.ts:3

[nitpick] The property name 'specialTerrain' is ambiguous. Consider renaming to 'restrictedTerrain' or 'terrainPenalties' to better indicate its purpose.

  specialTerrain: TerrainType[];

Copilot · 2025-07-18T11:32:59Z

src/components/timeline/line-item.tsx

  commited: boolean;
 };

-export function ActionLineItem({ card, commited }: Props): JSX.Element {
+export function ActionLineItem({ card, commited }: Props) {
  return (
    <div
      className={c(
-        "line-item",
-        card.owner === "player" &&
-          "line-item--player" &&
-          "player" &&
-          "expansible",
-        commited ? "line-item--commited" : "line-item--pending"
+        styles.lineItem,
+        card.owner === "player" && styles.expansible,
+        commited ? styles.committed : styles.pending


The word 'commited' is misspelled. It should be 'committed' with double 't'.

Copilot · 2025-07-18T11:33:00Z

src/components/timeline/timeline.module.css

+  border: 2px dotted var(--dark-grey);
+}
+
+.lineItem.commited {


The CSS class name 'commited' is misspelled. It should be 'committed' with double 't'.

Suggested change

.lineItem.commited {

.lineItem.committed {

Copilot · 2025-07-18T11:33:00Z

src/components/timeline/__snapshots__/timeline.test.tsx.snap

        >
          <div
-            class="line-item line-item--commited"
+            class="lineItem committed"


Inconsistent spelling: the snapshot shows 'committed' but the code uses 'commited'. This suggests the CSS class name should be updated to match.

Copilot · 2025-07-18T11:33:00Z

src/components/board/board.tsx

-      <div className="board__row board__row--2-to-equator">{renderRow(2)}</div>
-      <div className="board__row board__row--3-to-equator">{renderRow(3)}</div>
-    </div>
+    <section className={styles.board} role="board" aria-label="game board">


The role 'board' is not a valid ARIA role. Consider using 'region' or 'application' instead, or remove the role attribute since semantic HTML
already provides structure.

Suggested change

<section className={styles.board} role="board" aria-label="game board">

<section className={styles.board} aria-label="game board">

Copilot · 2025-07-18T11:33:00Z

src/components/board/board.tsx

-      <div className="board__row board__row--2-to-equator">{renderRow(2)}</div>
-      <div className="board__row board__row--3-to-equator">{renderRow(3)}</div>
-    </div>
+    <section className={styles.board} role="board" aria-label="game board">


Using role='row' without a parent container with role='grid' or 'table' is invalid. Consider removing these role attributes or restructuring with proper ARIA grid roles.

Suggested change

<section className={styles.board} role="board" aria-label="game board">

<section className={styles.board} role="grid" aria-label="game board">

Copilot · 2025-07-18T11:33:01Z

src/components/board/tiles/tile.tsx

+
+      {building && owner && <Building variant={building} owner={owner} />}
+      {children && (
+        <div className={c(styles.piece)} style={pieceStyle}>


[nitpick] The random positioning logic using useRef may cause inconsistent behavior. Consider using a more predictable positioning system or memoizing the offset calculation.

Copilot · 2025-07-18T11:33:01Z

src/components/board/tiles/tile.tsx

+  onClick,
+}: Props) {
+  /* debug: turn on debug ID */
+  const debugTileID = false;


Debug code should be removed from production. Consider using environment variables or a proper debug configuration system.

Suggested change

const debugTileID = false;

const debugTileID = process.env.REACT_APP_DEBUG_TILE_ID === "true";

manuartero · 2025-07-18T11:40:41Z

@copilot how would you call (title) this PR

manuartero added 14 commits July 15, 2025 12:26

chore: bump deps react@19, vite@7

5b18435

chore: remove colors.scss (using regular css var)

5efb2be

chore: from scss to module.css - piece.module.css

59e9419

chore: from scss to module.css - card.module.css

f33e9bd

chore: from scss to module.css - tile.module.css

979812e

chore: from scss to module.css - dialog.module.css

7cbdb3d

fix: <Dialog />

92687f3

chore: from scss to module.css - button.module.css

484d8ab

test: button.test.tsx

850429d

chore: from scss to module.css - timeline.module.css

caa6d85

chore: from scss to module.css - current-phase.module.css

c6b4542

chore: from scss to module.css - board.module.css & player-hand.modul…

39491f5

…e.css

fix: recover visual status for <Tile /> (available, owned...)

9b153f6

chore: improve naming for <Tile /> (.controlled)

7947cb6

manuartero self-assigned this Jul 18, 2025

manuartero requested a review from Copilot July 18, 2025 11:31

Copilot AI reviewed Jul 18, 2025

View reviewed changes

vercel bot deployed to Preview July 18, 2025 11:33 View deployment

fix: tests

276e658

manuartero force-pushed the recover-project branch from a53a663 to 276e658 Compare July 18, 2025 11:40

vercel bot deployed to Preview July 18, 2025 11:40 View deployment

manuartero merged commit a6a504c into main Jul 18, 2025
3 checks passed

manuartero deleted the recover-project branch July 18, 2025 11:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: recover project (July 2025)#7

feat: recover project (July 2025)#7
manuartero merged 15 commits intomainfrom
recover-project

manuartero commented Jul 18, 2025 •

edited

Loading

Uh oh!

vercel bot commented Jul 18, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

Copilot AI Jul 18, 2025

Uh oh!

manuartero commented Jul 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<section className={styles.board} role="board" aria-label="game board">
	<section className={styles.board} aria-label="game board">

	const debugTileID = false;
	const debugTileID = process.env.REACT_APP_DEBUG_TILE_ID === "true";

Conversation

manuartero commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Dependency and Configuration Updates:

Transition from SCSS to CSS Modules:

Board Game Logic and Visual Updates:

Mock and Test Updates:

Component and Structural Refactoring:

Uh oh!

vercel bot commented Jul 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jul 18, 2025

Choose a reason for hiding this comment

Uh oh!

manuartero commented Jul 18, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

manuartero commented Jul 18, 2025 •

edited

Loading

vercel bot commented Jul 18, 2025 •

edited

Loading