Skip to content

[Web] iPhone browser demo replica, native-faithful live scoreboard and page layout - #143

Merged
EMRahman merged 3 commits into
mainfrom
feat/iphone-browser-demo
Oct 28, 2026
Merged

EMRahman merged 3 commits into
mainfrom
feat/iphone-browser-demo

Conversation

@EMRahman

Copy link
Copy Markdown
Owner

Summary

  • Adds the iPhone companion replica to docs/website/try.html (archive, match detail + points graph, trends, settings, manual entry, live scoreboard) alongside the Watch replica.
  • Reworks the page into two numbered Apple Watch / iPhone panels with a sticky jump bar on small screens, so it fits on an iPhone; Watch mode tabs and the swipe/keyboard legend now live in the Watch panel.
  • Live scoreboard mirrors LiveScoreboardView; rotation is only available there (the native app is portrait-locked elsewhere) and follows real device orientation on touch devices.
  • Settings About / Watch Sync / Backup & Transfer and detail Storage Info match the native grouped-list layouts. Manual entry stays on the Matches toolbar only, as in the app.
  • Points graph: drag across the chart to select-and-zoom (replaces a non-native "Graph controls" section).
  • Fix: seeded matches stopped early no longer show a false "Draw" (e.g. perpetual points at 7–20).
  • Watch demo: ← undoes, → opens stats (U / S still work).
  • "About this demo" block (best-effort replica, what is real vs simulated) moved below the demos.

Test plan

  • iphone-demo-model-qa, iphone-demo-coaching-qa, sync-iphone-demo-exports --check
  • Playwright (Chromium): iphone-demo-qa, -state-qa, -extended-qa, -export-qa, -popup-qa, -visual-qa all pass
  • Desktop (1280px) and iPhone 14 emulation (390px): no horizontal overflow; portrait/landscape live scoreboard checked by screenshot
  • Not checked on a physical iPhone or in Safari/WebKit
  • Swift changes in this branch (HomeView.swift background modifier, DeuceMateUITests, NativeDemoParity*Tests) were not built or run here

Notes

  • QA scripts were updated on purpose for the new structure: Manual Entry no longer rotates, the "Graph controls" check became a drag-zoom check, Connection Details is an inline disclosure, and the demo-only live controls are activated by keyboard (they are visually hidden to match native).
  • CLAUDE.md rotation/manual-entry notes updated.

🤖 Generated with Claude Code

…d page layout

Adds the iPhone companion replica to the try page (archive, detail/graph with
drag-select zoom, trends, settings, manual entry, live scoreboard) and rebuilds
the page as two numbered Watch / iPhone panels that fit on a phone.

Why: the demo should look and behave like the native apps, and say plainly that
it is a best-effort replica.

- Live scoreboard mirrors LiveScoreboardView; rotation only on that screen,
  driven by real device orientation on touch devices.
- Settings About / Watch Sync / Backup rows match the native grouped list;
  manual entry stays on the Matches toolbar only (as in the app).
- Storage Info mirrors MatchDetailView.storageInfoRow.
- Fix: stopped-early seeded matches no longer show a false Draw.
- Watch demo: left/right arrow keys undo / open stats.
- "About this demo" best-effort disclosure moved below the demos.
- Browser QA scripts updated for the new structure.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 28, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-28T11:08:16.684261Z 5e88ba6 PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@chatgpt-codex-connector chatgpt-codex-connector 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.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5e88ba6c71

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread docs/website/assets/watch-demo.js Outdated
if (!matchID || !api.hooks.phoneMatchID || matchID !== api.hooks.phoneMatchID()) return;
if (command === "point" && (value === "me" || value === "opponent")) award(value, true);
else if (command === "undo") { if (pendingStat) undoPoint(); else undo(true); }
else if (command === "secondServe") toggleSecondServe();

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Allow remote second-serve commands outside the Watch scoreboard

When a tracked match is active but the Watch simulator is showing its home screen or stats, iPhone point and undo commands still work, but double-tapping the iPhone scoreboard silently fails to mark a second serve. This command calls toggleSecondServe(), whose canToggleSecondServe() guard rejects shellOpen() and statsOpen, unlike the remote-aware point and undo paths. Consequently, subsequent iPhone-scored points are recorded as first serves and produce incorrect serve statistics. Give the second-serve command a remote-aware guard while retaining the pending-point and match-completion checks.

Useful? React with 👍 / 👎.

Comment thread docs/website/assets/phone-demo.js Outdated
function addRecord(rec) {
tombstones.delete(rec.id); watchOnlyIDs.delete(rec.id); upsert(rec); if (connection.paired) S.upsertRecord(copy(rec)); persist(); S.render(); render();
}
function replaceRecords(records) { archive = sortRecords(copy(records)); persist(); render(); }

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Clear imported match IDs from deletion tombstones

If a user exports an in-progress demo match, permanently deletes it, and then imports that backup through Merge or Replace Archive, this function restores the record but leaves its ID in tombstones. The restored match appears in the archive, yet upsert() silently rejects every later Watch update for that ID; copying it back to the Watch and resuming scoring therefore leaves the iPhone copy permanently stale. Remove explicitly imported IDs from the tombstones when applying the import, as addRecord() already does for an explicitly added record.

Useful? React with 👍 / 👎.

Ehsan Rahman and others added 2 commits October 28, 2026 11:19
So the two device panels read as a pair; decorative only.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
- iPhone second-serve command is no longer dropped while the Watch shows its
  home or stats screen (remote-aware guard, like scoringBlocked).
- Importing (Merge/Replace) clears deletion tombstones for the restored IDs so
  later Watch updates are not rejected.
- State QA gains a regression test for each; both fail without the fix.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@EMRahman

Copy link
Copy Markdown
Owner Author

Addressed both Codex findings in 2b0a495:

  • Second serve (watch-demo.js): the iPhone second-serve command now uses a remote-aware guard, so it applies while the Watch shows its home or stats screen (pending-point, tracking and match-complete checks are kept).
  • Tombstones (phone-demo.js): replaceRecords (used by Merge and Replace import) now clears deletion tombstones for the restored IDs.

Added a regression test for each in iphone-demo-state-qa.cjs (both fail without the fix). The base, state, extended, popup and export QA scripts pass. Also pushed a small separate commit giving the iPhone frame the same glow as the Watch.

@EMRahman
EMRahman merged commit 2750428 into main Oct 28, 2026
1 check passed
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