Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

/watch page: lightweight branding, roster, and a build-your-own CTA

Open
  • Is something wrong?
#252 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Quiet
Tech stack
react, typescript
Domain
frontend

Research direction

Start with the spectator page in ui/src/page/watch/watchArenaPage.tsx and the arena state exposed by useArenaStream, which already carries the team names, colors and health the roster needs. The issue leaves the overlay's placement, fade timing and collapse behaviour open, so settle those with the maintainer first. Done means a dismissible corner overlay on /watch with the wordmark linking to /, a live roster, and a 'Build your own bot' link, with the arena view otherwise unchanged.

Written by the indexing model from the issue text.

Description

enhancement priority: medium

From the 2026-07-17 UX review.

Problem

The public spectator page (ui/src/page/watch/watchArenaPage.tsx) is deliberately chrome-free — right call for spectating — but a share-link recipient gets an anonymous battlefield: no bot/team names or score, no indication of what site they're on, and no path to "make your own bot." The share loop currently ends in a dead end instead of feeding acquisition.

Suggested fix

A small, dismissible corner overlay that doesn't compromise the full-screen view:

  • RobocodeJs wordmark linking to /
  • team roster with colors/names and live health (data is already in the useArenaStream arena state)
  • one CTA link ("Build your own bot →")

Keep it out of the way (fade after a few seconds, or collapse to a corner chip). No controls — spectators watch, they don't drive.

Acceptance

Someone landing on a shared /watch link can tell who's fighting, what site this is, and how to try it themselves — without the arena view feeling cluttered.

Dominant language
TypeScript
Stars
0
Forks
0
Avg merge
8m
Merged PRs (30d)
8

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from LeeAdcock/robocodeJs.com

All issues in LeeAdcock/robocodeJs.com

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.