filip/audience-display
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 3 Packages Wiki Activity Actions

Famnm #8

Merged
Filip-Kin merged 30 commits from FAMNM into main 2025-08-03 05:56:57 -04:00
Conversation 2 Commits 30 Files changed 30 +1149 -860
Filip-Kin commented 2025-08-03 05:43:54 -04:00 (Migrated from github.com)
Copy link
No description provided.
copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed 2025-08-03 05:45:19 -04:00
copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment
Copy link

Pull Request Overview

This PR adds comprehensive UI scaling and styling improvements, particularly focused on display quality and new color scheme implementation. The changes enhance the audience display system with better visual design, scaling options, and improved functionality.

  • Implementation of new primary/secondary color schemes with Tailwind config updates
  • Significant UI scaling improvements across all screens with larger fonts and better proportions
  • Enhanced alliance selection display with dynamic grid sizing based on team count

Reviewed Changes

Copilot reviewed 25 out of 30 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
packages/ui/vite.config.ts Updates WebSocket proxy port from 3000 to 3001
packages/ui/tailwind.config.js Adds new primary/secondary color palettes and additional safelist classes
packages/ui/src/screens/time-out/Timeout.svelte Scales UI elements and replaces color scheme with new primary colors
packages/ui/src/screens/scores-ready/ScoresReady.svelte Updates to new color scheme and removes conditional styling
packages/ui/src/screens/score-reveal/ScoresReveal.svelte Major UI overhaul with larger fonts, new sponsor layout, and enhanced alliance displays
packages/ui/src/screens/score-reveal/RankingPoints.svelte Increases font sizes and component scaling
packages/ui/src/screens/match-ready/ScoreBarTimer.svelte Removes logo animation and increases timer display size
packages/ui/src/screens/match-ready/ScoreBarHalf.svelte Scales up all UI elements and improves layout
packages/ui/src/screens/match-ready/MatchReady.svelte Adds animated logo and scales up score bar dimensions
packages/ui/src/screens/match-preview/MatchPreview.svelte Updates color scheme and adds alliance name displays
packages/ui/src/screens/alliance-selection/AllianceSelection.svelte Implements dynamic grid sizing and improves responsive layout
packages/ui/src/screens/ScreenRouter.svelte Enhances transition logic for match-end scenarios
packages/ui/src/lib/state.ts Changes store type from readable to writable and adds setScreen function
packages/ui/src/lib/matchNamer.ts Adds final match naming support
packages/ui/src/lib/TeamCard.svelte Scales up team cards with larger fonts and images
packages/ui/src/lib/SmallTopBar.svelte Updates styling and adds sponsor images
packages/ui/src/lib/SettingsModal.svelte Adds scores-ready screen test button
packages/ui/package.json Adds --host flag to dev and start scripts
packages/server/src/team_name.ts New file for custom team name management
packages/server/src/signalr/connection.ts Adds field monitor and tournament level change handling
packages/server/src/index.ts Adds static file serving and changes port to 3001
packages/server/src/fms/audience_display.ts Integrates custom team names and improves match handling logic
packages/lib/types/audience_display.ts Updates type definitions for alliance names
packages/lib/types/FMS_API_audience.ts Extends FMS API types with alliance information
package.json Adds exe build script and fflate dependency
## Pull Request Overview This PR adds comprehensive UI scaling and styling improvements, particularly focused on display quality and new color scheme implementation. The changes enhance the audience display system with better visual design, scaling options, and improved functionality. - Implementation of new primary/secondary color schemes with Tailwind config updates - Significant UI scaling improvements across all screens with larger fonts and better proportions - Enhanced alliance selection display with dynamic grid sizing based on team count ### Reviewed Changes Copilot reviewed 25 out of 30 changed files in this pull request and generated 5 comments. <details> <summary>Show a summary per file</summary> | File | Description | | ---- | ----------- | | packages/ui/vite.config.ts | Updates WebSocket proxy port from 3000 to 3001 | | packages/ui/tailwind.config.js | Adds new primary/secondary color palettes and additional safelist classes | | packages/ui/src/screens/time-out/Timeout.svelte | Scales UI elements and replaces color scheme with new primary colors | | packages/ui/src/screens/scores-ready/ScoresReady.svelte | Updates to new color scheme and removes conditional styling | | packages/ui/src/screens/score-reveal/ScoresReveal.svelte | Major UI overhaul with larger fonts, new sponsor layout, and enhanced alliance displays | | packages/ui/src/screens/score-reveal/RankingPoints.svelte | Increases font sizes and component scaling | | packages/ui/src/screens/match-ready/ScoreBarTimer.svelte | Removes logo animation and increases timer display size | | packages/ui/src/screens/match-ready/ScoreBarHalf.svelte | Scales up all UI elements and improves layout | | packages/ui/src/screens/match-ready/MatchReady.svelte | Adds animated logo and scales up score bar dimensions | | packages/ui/src/screens/match-preview/MatchPreview.svelte | Updates color scheme and adds alliance name displays | | packages/ui/src/screens/alliance-selection/AllianceSelection.svelte | Implements dynamic grid sizing and improves responsive layout | | packages/ui/src/screens/ScreenRouter.svelte | Enhances transition logic for match-end scenarios | | packages/ui/src/lib/state.ts | Changes store type from readable to writable and adds setScreen function | | packages/ui/src/lib/matchNamer.ts | Adds final match naming support | | packages/ui/src/lib/TeamCard.svelte | Scales up team cards with larger fonts and images | | packages/ui/src/lib/SmallTopBar.svelte | Updates styling and adds sponsor images | | packages/ui/src/lib/SettingsModal.svelte | Adds scores-ready screen test button | | packages/ui/package.json | Adds --host flag to dev and start scripts | | packages/server/src/team_name.ts | New file for custom team name management | | packages/server/src/signalr/connection.ts | Adds field monitor and tournament level change handling | | packages/server/src/index.ts | Adds static file serving and changes port to 3001 | | packages/server/src/fms/audience_display.ts | Integrates custom team names and improves match handling logic | | packages/lib/types/audience_display.ts | Updates type definitions for alliance names | | packages/lib/types/FMS_API_audience.ts | Extends FMS API types with alliance information | | package.json | Adds exe build script and fflate dependency | </details>
packages/server/src/fms/audience_display.ts
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:45:19 -04:00
Copy link

The comment contains inappropriate profanity. Consider replacing with a more professional comment that explains the technical issue, such as '// FMS API requires different endpoint naming conventions'.

    // FMS API requires different endpoint naming conventions
The comment contains inappropriate profanity. Consider replacing with a more professional comment that explains the technical issue, such as '// FMS API requires different endpoint naming conventions'. ```suggestion // FMS API requires different endpoint naming conventions ```
packages/server/src/fms/audience_display.ts
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:45:19 -04:00
Copy link

The comment contains inappropriate profanity. Consider replacing with a more professional comment that explains the technical issue.

    // FMS uses inconsistent naming conventions for match levels, requiring special handling here.
The comment contains inappropriate profanity. Consider replacing with a more professional comment that explains the technical issue. ```suggestion // FMS uses inconsistent naming conventions for match levels, requiring special handling here. ```
packages/ui/src/screens/alliance-selection/AllianceSelection.svelte
@ -35,60 +35,88 @@
const remainingSeconds = seconds % 60;
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:45:18 -04:00
Copy link

The dynamic class generation using template literals for grid rows and text sizes creates complex conditional logic that's hard to maintain. Consider extracting this into a computed property or function that returns the appropriate classes based on numberOfTeams.

The dynamic class generation using template literals for grid rows and text sizes creates complex conditional logic that's hard to maintain. Consider extracting this into a computed property or function that returns the appropriate classes based on numberOfTeams.
packages/ui/src/screens/match-ready/ScoreBarHalf.svelte
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:45:19 -04:00
Copy link

[nitpick] Using the 'collapse' class conditionally may cause layout shifts. Consider using 'hidden' or 'invisible' classes instead, or handle the visibility through opacity or height transitions for smoother UI behavior.

						class:invisible={!score.coopertitionMet}
[nitpick] Using the 'collapse' class conditionally may cause layout shifts. Consider using 'hidden' or 'invisible' classes instead, or handle the visibility through opacity or height transitions for smoother UI behavior. ```suggestion class:invisible={!score.coopertitionMet} ```
packages/ui/src/screens/score-reveal/ScoresReveal.svelte
@ -1,214 +1,229 @@
<script lang="ts">
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:45:18 -04:00
Copy link

The complex nested conditional logic for event name truncation (lines 100-107) with multiple length checks and string manipulation should be extracted into a helper function for better readability and reusability.

							{formatEventName($state.eventDetails?.name)}
The complex nested conditional logic for event name truncation (lines 100-107) with multiple length checks and string manipulation should be extracted into a helper function for better readability and reusability. ```suggestion {formatEventName($state.eventDetails?.name)} ```
copilot-pull-request-reviewer[bot] (Migrated from github.com) reviewed 2025-08-03 05:53:35 -04:00
copilot-pull-request-reviewer[bot] (Migrated from github.com) left a comment
Copy link

Pull Request Overview

This pull request implements comprehensive visual and functional enhancements to an audience display system for FTC competitions. The changes focus on improving visual consistency, adding new features for better match management, and enhancing the overall user experience.

Key changes include:

  • Implementation of a custom color scheme with primary/secondary color palettes
  • Enhanced UI sizing and layout improvements across all screens
  • Addition of custom team name support and alliance display functionality
  • Server improvements including static file serving and enhanced FMS integration

Reviewed Changes

Copilot reviewed 25 out of 30 changed files in this pull request and generated 5 comments.

Show a summary per file
File Description
packages/ui/vite.config.ts Updates WebSocket proxy port from 3000 to 3001
packages/ui/tailwind.config.js Adds primary/secondary color schemes and new safelist classes
packages/ui/src/screens/time-out/Timeout.svelte Redesigns timeout screen with new colors and sizing
packages/ui/src/screens/scores-ready/ScoresReady.svelte Updates to use new color scheme and improved layout
packages/ui/src/screens/score-reveal/ScoresReveal.svelte Major redesign with sponsor integration and enhanced scoring display
packages/ui/src/screens/score-reveal/RankingPoints.svelte Increases sizing and improves visual consistency
packages/ui/src/screens/match-ready/ScoreBarTimer.svelte Simplifies timer display and increases font sizes
packages/ui/src/screens/match-ready/ScoreBarHalf.svelte Improves scoring element display and team information
packages/ui/src/screens/match-ready/MatchReady.svelte Adds animated logo and improves overall layout
packages/ui/src/screens/match-preview/MatchPreview.svelte Updates to new color scheme and adds alliance name display
packages/ui/src/screens/alliance-selection/AllianceSelection.svelte Implements dynamic grid sizing based on team count
packages/ui/src/screens/ScreenRouter.svelte Improves transition logic and screen management
packages/ui/src/lib/state.ts Changes from readable to writable store and adds screen setter
packages/ui/src/lib/matchNamer.ts Adds new final match types and event name display logic
packages/ui/src/lib/TeamCard.svelte Improves team card sizing and layout
packages/ui/src/lib/SmallTopBar.svelte Updates with new colors and sponsor image display
packages/ui/src/lib/SettingsModal.svelte Adds debug button for scores ready screen
packages/ui/package.json Adds host flag to development and start scripts
packages/server/src/team_name.ts Implements custom team name management system
packages/server/src/signalr/connection.ts Adds field monitor and tournament level change support
packages/server/src/index.ts Implements static file serving for bundled UI
packages/server/src/fms/audience_display.ts Major enhancements for team lineup management and match handling
packages/lib/types/audience_display.ts Updates type definitions for alliance names and card status
packages/lib/types/FMS_API_audience.ts Extends FMS API types for playoff matches and alliance data
package.json Adds executable build script and fflate dependency
Comments suppressed due to low confidence (1)

packages/ui/src/screens/score-reveal/ScoresReveal.svelte:44

  • The Tailwind CSS class 'h-42' does not exist. The closest valid height classes are h-40 (10rem) and h-44 (11rem). Consider using one of these instead.
			setTimeout(
## Pull Request Overview This pull request implements comprehensive visual and functional enhancements to an audience display system for FTC competitions. The changes focus on improving visual consistency, adding new features for better match management, and enhancing the overall user experience. Key changes include: - Implementation of a custom color scheme with primary/secondary color palettes - Enhanced UI sizing and layout improvements across all screens - Addition of custom team name support and alliance display functionality - Server improvements including static file serving and enhanced FMS integration ### Reviewed Changes Copilot reviewed 25 out of 30 changed files in this pull request and generated 5 comments. <details> <summary>Show a summary per file</summary> | File | Description | | ---- | ----------- | | packages/ui/vite.config.ts | Updates WebSocket proxy port from 3000 to 3001 | | packages/ui/tailwind.config.js | Adds primary/secondary color schemes and new safelist classes | | packages/ui/src/screens/time-out/Timeout.svelte | Redesigns timeout screen with new colors and sizing | | packages/ui/src/screens/scores-ready/ScoresReady.svelte | Updates to use new color scheme and improved layout | | packages/ui/src/screens/score-reveal/ScoresReveal.svelte | Major redesign with sponsor integration and enhanced scoring display | | packages/ui/src/screens/score-reveal/RankingPoints.svelte | Increases sizing and improves visual consistency | | packages/ui/src/screens/match-ready/ScoreBarTimer.svelte | Simplifies timer display and increases font sizes | | packages/ui/src/screens/match-ready/ScoreBarHalf.svelte | Improves scoring element display and team information | | packages/ui/src/screens/match-ready/MatchReady.svelte | Adds animated logo and improves overall layout | | packages/ui/src/screens/match-preview/MatchPreview.svelte | Updates to new color scheme and adds alliance name display | | packages/ui/src/screens/alliance-selection/AllianceSelection.svelte | Implements dynamic grid sizing based on team count | | packages/ui/src/screens/ScreenRouter.svelte | Improves transition logic and screen management | | packages/ui/src/lib/state.ts | Changes from readable to writable store and adds screen setter | | packages/ui/src/lib/matchNamer.ts | Adds new final match types and event name display logic | | packages/ui/src/lib/TeamCard.svelte | Improves team card sizing and layout | | packages/ui/src/lib/SmallTopBar.svelte | Updates with new colors and sponsor image display | | packages/ui/src/lib/SettingsModal.svelte | Adds debug button for scores ready screen | | packages/ui/package.json | Adds host flag to development and start scripts | | packages/server/src/team_name.ts | Implements custom team name management system | | packages/server/src/signalr/connection.ts | Adds field monitor and tournament level change support | | packages/server/src/index.ts | Implements static file serving for bundled UI | | packages/server/src/fms/audience_display.ts | Major enhancements for team lineup management and match handling | | packages/lib/types/audience_display.ts | Updates type definitions for alliance names and card status | | packages/lib/types/FMS_API_audience.ts | Extends FMS API types for playoff matches and alliance data | | package.json | Adds executable build script and fflate dependency | </details> <details> <summary>Comments suppressed due to low confidence (1)</summary> **packages/ui/src/screens/score-reveal/ScoresReveal.svelte:44** * The Tailwind CSS class 'h-42' does not exist. The closest valid height classes are h-40 (10rem) and h-44 (11rem). Consider using one of these instead. ``` setTimeout( ``` </details>
packages/server/src/fms/audience_display.ts
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:53:34 -04:00
Copy link

Profanity in comments is unprofessional. Consider replacing with a more appropriate comment like '// FMS API inconsistency workaround'.

    // FMS API inconsistency workaround
Profanity in comments is unprofessional. Consider replacing with a more appropriate comment like '// FMS API inconsistency workaround'. ```suggestion // FMS API inconsistency workaround ```
packages/server/src/fms/audience_display.ts
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:53:34 -04:00
Copy link

Profanity in comments is unprofessional. Consider replacing with a more appropriate comment like '// FMS API inconsistency workaround'.

    // FMS API inconsistency workaround
Profanity in comments is unprofessional. Consider replacing with a more appropriate comment like '// FMS API inconsistency workaround'. ```suggestion // FMS API inconsistency workaround ```
packages/ui/src/screens/ScreenRouter.svelte
@ -1,185 +1,183 @@
<script lang="ts">
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:53:34 -04:00
Copy link

Debug console.log statements should be removed from production code.
Debug console.log statements should be removed from production code. ```suggestion ```
packages/ui/src/screens/alliance-selection/AllianceSelection.svelte
@ -35,60 +35,88 @@
const remainingSeconds = seconds % 60;
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:53:34 -04:00
Copy link

The Tailwind CSS class 'w-18' does not exist. Valid width classes are w-16 (4rem) and w-20 (5rem). This should be 'w-16'.

		rankWidthClass = "w-16";
The Tailwind CSS class 'w-18' does not exist. Valid width classes are w-16 (4rem) and w-20 (5rem). This should be 'w-16'. ```suggestion rankWidthClass = "w-16"; ```
packages/ui/src/screens/score-reveal/ScoresReveal.svelte
@ -1,214 +1,229 @@
<script lang="ts">
copilot-pull-request-reviewer[bot] (Migrated from github.com) commented 2025-08-03 05:53:33 -04:00
Copy link

The event name truncation logic is duplicated here and in displayEventName function in matchNamer.ts. Consider using the displayEventName function consistently.

								{displayEventName($state.eventDetails.name)}
The event name truncation logic is duplicated here and in displayEventName function in matchNamer.ts. Consider using the displayEventName function consistently. ```suggestion {displayEventName($state.eventDetails.name)} ```
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
bug

Something isn't working

  
documentation

Improvements or additions to documentation

  
duplicate

This issue or pull request already exists

  
enhancement

New feature or request

  
good first issue

Good for newcomers

  
help wanted

Extra attention is needed

  
invalid

This doesn't seem right

  
question

Further information is requested

  
wontfix

This will not be worked on

No labels
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: filip/audience-display#8
No description provided.
Delete branch "FAMNM"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?