Skip to content

Sea - #3

Closed
djzet wants to merge 5 commits into
mainfrom
sea
Closed

Sea#3
djzet wants to merge 5 commits into
mainfrom
sea

Conversation

@djzet

@djzet djzet commented Aug 20, 2026

Copy link
Copy Markdown
Owner

Summary by Sourcery

Add collaborative lobbies, shared map drawing, and game-coordinate support to the WARDOGS calculator.

New Features:

  • Add collaborative Supabase-powered lobbies with shared calculator state, player presence, cursor updates, and synchronized drawings.
  • Add map drawing tools for freehand strokes, rulers, markers, erasing, line-width selection, and drawing cleanup.
  • Display in-game coordinates under the cursor and use 0–160 game-coordinate inputs throughout the calculator.
  • Expand the map controls and interface with reusable SVG icons and lobby/player management controls.

Enhancements:

  • Improve map rendering with adaptive grid scales, bounded zoom, mobile layout adjustments, safe-area support, and native light/dark control styling.
  • Load application scripts with deferred execution and inject deployment credentials securely when publishing to GitHub Pages.

CI:

  • Allow GitHub Pages deployments from both the main and sea branches and update the Pages deployment action configuration.

Documentation:

  • Update localized interface text and usage guidance for game-coordinate inputs, drawing tools, and lobby features.

Chores:

  • Standardize minor JavaScript formatting and replace repeated inline SVG markup with a shared icon sprite.

@sourcery-ai

sourcery-ai Bot commented Aug 20, 2026

Copy link
Copy Markdown

Reviewer's Guide

Adds collaborative Supabase-powered lobbies and canvas drawing tools to the Wardogs map UI, switches coordinate system to game coordinates (0–160), enhances map rendering/grid and cursor feedback, and updates the GitHub Pages workflow to inject Supabase secrets and support a new branch.

Sequence diagram for Supabase lobby creation and realtime drawing sync

sequenceDiagram
    actor User
    participant AppLobby
    participant SupabaseSDK as SupabaseClient
    participant SupabaseDB
    participant AppDraw
    participant MapRenderer

    User->>AppLobby: create(pointA, pointB, weapon)
    AppLobby->>AppLobby: generateCode()
    AppLobby->>AppLobby: getSupabase()
    AppLobby->>SupabaseSDK: createClient(SUPABASE_URL, SUPABASE_KEY)
    AppLobby->>SupabaseDB: from(lobbies).insert({code, host_id, point_a, point_b, weapon})
    AppLobby->>SupabaseDB: from(players).insert({lobby_code, player_id, name, color, is_host})
    AppLobby->>AppLobby: subscribeToLobby(code)

    User->>AppDraw: startStroke(px, py)
    User->>AppDraw: continueStroke(px, py)
    User->>AppDraw: finishStroke()
    AppDraw->>AppLobby: sendDrawing(tool, color, points, width, label)
    AppLobby->>SupabaseDB: from(drawings).insert({lobby_code, player_id, tool, color, points, width, label})

    SupabaseDB-->>AppLobby: postgres_changes INSERT(drawings)
    AppLobby->>AppLobby: setOnDrawing(callback)
    AppLobby->>MapRenderer: draw(ctx, canvas, opts)
Loading

File-Level Changes

Change Details Files
Update GitHub Pages workflow to support Supabase-backed lobbies and additional deployment branch.
  • Rename workflow for GitHub Pages deployment and extend push trigger branches to include "sea".
  • Add a shell step that injects Supabase URL/KEY into js/features/lobby.js via sed if secrets are present, with a fallback log message when missing.
  • Keep pages-related permissions and concurrency, adjust artifact upload path quoting, and downgrade deploy-pages action from v5 to v4.
.github/workflows/static.yml
Introduce Supabase-based realtime lobby feature for collaborative usage and drawing synchronization.
  • Load Supabase SDK from CDN and create a new js/features/lobby.js module that manages lobby creation/join/leave via Supabase tables (lobbies, players, drawings) and Realtime channels.
  • Persist a local player ID, track lobby state (code, host/guest, players, drawings, visibility), and expose callbacks for remote state, drawings, cursors, and lobby initialization.
  • Implement methods for syncing calculator state (points and weapon) to Supabase, broadcasting drawings and cursor positions, controlling visibility per player, and enforcing host-only clearing of drawings and self-owned deletion of strokes.
index.html
js/features/lobby.js
Add local and lobby-aware drawing tools (pen, line/ruler, marker, eraser) integrated with map interactions and rendering.
  • Create js/features/draw.js to manage current tool, stroke width, local stroke storage, and drawing lifecycle (start/continue/finish/cancel) with map-size-aware coordinates and per-player coloring.
  • Integrate drawing tools into the map interaction system (pointer down/move/up) to start/extend/finish strokes in map coordinates, add an eraser mode that removes only the current player’s strokes with radius scaled by stroke width, and clear drawings locally or via lobby host.
  • Extend MapRenderer to render pen strokes, rulers with distance labels, markers with labels, and current in-progress stroke, while respecting per-player visibility and using new grid step helpers; also export getGridSteps for potential reuse.
index.html
js/features/draw.js
js/map/interactions.js
js/map/renderer.js
js/index.js
styles/panel.css
Switch coordinate inputs and help text from percentage-based (0–100) to game coordinates (0–160) and surface cursor coordinates near the mouse.
  • Update AppUtils with a gameCoord formatter and use it for mapping meters to game coordinates (meters/100, two decimals).
  • Change AppPoints.readPoint to interpret input fields as game coordinates, clamping by mapSize/100 and converting back to meters, and wire this through UIInputs to set min/max/step attributes and display/sync fields in game coordinates.
  • Adjust help text and locale strings to describe the new coordinate system, and show live cursor coordinates (x/y in gameCoord format) near the pointer with responsive positioning and visibility management on pointer move/leave.
js/core/utils.js
js/features/points.js
js/ui/inputs.js
js/locales/index.js
js/map/interactions.js
styles/map.css
Enhance UI/UX with SVG icon sprites, new controls, lobby UI, and mobile/layout refinements.
  • Add an inline SVG sprite in index.html defining icons for tools, map controls, and actions, and replace emoji/text icons throughout the UI with references to these symbols for consistent theming.
  • Introduce drawing tools panel, line width selector, cursor coord overlay, new map controls (create/join lobby, reset view with icon), and lobby section in the drawer with players list and leave button.
  • Extend UIPanels to render lobby players with per-player visibility toggles, bind lobby create/join/leave buttons to AppLobby, and ensure map re-renders and state sync when lobby membership or visibility changes.
  • Tighten base, panel, mobile styles to support new components (draw tools section, lobby panel, width buttons), adjust number input spin button behavior and CSS color-scheme, and tweak layout/padding for mobile and safe-area insets.
index.html
js/ui/panels.js
styles/base.css
styles/panel.css
styles/mobile.css
styles/variables.css

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've found 2 issues, and left some high level feedback:

  • Several new lobby/drawing UI strings are hardcoded in Russian (e.g. renderLobbyPlayers labels, lobby prompts, toast messages) instead of going through the existing i18n STR/LocaleManager, which breaks localization and should be wired into the translation system.
  • The Supabase client in js/features/lobby.js is always created with the __SUPABASE_URL__/__SUPABASE_KEY__ placeholders, so in environments where the workflow hasn’t injected secrets (e.g. forks, local dev) attempting to create/join a lobby will throw at runtime; consider feature-guarding lobby functionality when credentials are missing or when window.supabase is unavailable.
Prompt for AI Agents
Please address the comments from this code review:

## Overall Comments
- Several new lobby/drawing UI strings are hardcoded in Russian (e.g. `renderLobbyPlayers` labels, lobby prompts, toast messages) instead of going through the existing i18n `STR`/LocaleManager, which breaks localization and should be wired into the translation system.
- The Supabase client in `js/features/lobby.js` is always created with the `__SUPABASE_URL__`/`__SUPABASE_KEY__` placeholders, so in environments where the workflow hasn’t injected secrets (e.g. forks, local dev) attempting to create/join a lobby will throw at runtime; consider feature-guarding lobby functionality when credentials are missing or when `window.supabase` is unavailable.

## Individual Comments

### Comment 1
<location path=".github/workflows/static.yml" line_range="27-34" />
<code_context>
       - name: Checkout
         uses: actions/checkout@v4
+
+      - name: Inject Supabase credentials
+        env:
+          SUPABASE_URL: ${{ secrets.SUPABASE_URL }}
+          SUPABASE_KEY: ${{ secrets.SUPABASE_KEY }}
+        run: |
+          if [ -n "$SUPABASE_URL" ] && [ -n "$SUPABASE_KEY" ]; then
+            sed -i "s|__SUPABASE_URL__|$SUPABASE_URL|g" js/features/lobby.js
+            sed -i "s|__SUPABASE_KEY__|$SUPABASE_KEY|g" js/features/lobby.js
+            echo "✅ Supabase credentials injected"
+          else
</code_context>
<issue_to_address>
**issue:** Credential injection via sed can break when secrets contain special characters like '&' or backslashes.

Because the substitution uses unescaped shell variables, `sed` will interpret characters like `&` and `\` in `SUPABASE_URL`/`SUPABASE_KEY`, which can corrupt `js/features/lobby.js` during deployment.

Consider either escaping `sed`-special characters in these env vars before substitution, or replacing this with a small template step (e.g. `node`, `envsubst`, or similar) that reads the env vars and writes the file without `sed` replacement semantics.
</issue_to_address>

### Comment 2
<location path="js/features/lobby.js" line_range="4-5" />
<code_context>
+// js/features/lobby.js — Supabase Realtime Lobby
+window.AppLobby = (function () {
+    // ─── Supabase конфиг ────────────────────────────────────
+    const SUPABASE_URL = '__SUPABASE_URL__';
+    const SUPABASE_KEY = '__SUPABASE_KEY__';
+
+    const MAX_DRAWINGS = 500;
</code_context>
<issue_to_address>
**issue:** Using literal placeholder values for Supabase config can cause runtime errors when secrets are not injected (e.g. forks/local).

In `getSupabase()`, `window.supabase.createClient(SUPABASE_URL, SUPABASE_KEY)` will still run even when `__SUPABASE_URL__` / `__SUPABASE_KEY__` haven’t been replaced (local dev, forks without secrets), creating a client with invalid config and causing hard‑to‑debug network errors later.

Since you already handle the "SDK not loaded" case, please also guard against placeholder config: e.g., detect values starting with `__` and either skip initialization (with `isConnected() === false` and a clear message) or throw a descriptive error directly in `getSupabase()`. That will make missing‑secret failures predictable and easier to diagnose.
</issue_to_address>

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Comment thread .github/workflows/static.yml Outdated
Comment thread js/features/lobby.js
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant