fix: distribute clock markers around face (fixes stacking bug)#2
Open
isupersid wants to merge 11 commits into001-world-clockfrom
Open
fix: distribute clock markers around face (fixes stacking bug)#2isupersid wants to merge 11 commits into001-world-clockfrom
isupersid wants to merge 11 commits into001-world-clockfrom
Conversation
- Add unit tests for marker creation and transform validation - Add integration tests for visual marker distribution - Tests verify markers should be distributed at 30-degree intervals - Current implementation has all markers stacked at 12 o'clock position
- Update CSS: Add 'top: 0' to .clock-marker to position markers at top edge
- Update JavaScript: Change transform to 'translate(-50%, 0) rotate(${i * 30}deg)'
- Add inline comment explaining the transform logic
- Fix test type issues to match City interface
The fix distributes all 12 hour markers evenly around the clock face
at 30-degree intervals instead of stacking them all at 12 o'clock.
TDD Green Phase: Implementation complete
Previous approach had markers starting at top with bottom rotation, which didn't work correctly. New approach: - CSS: Position markers at center (top: 50%, left: 50%) - CSS: Rotate from center top (transform-origin: center top) - JS: Center, offset to edge, then rotate around clock center - JS: Use translateX(-50%) translateY(-50%) translateY(-45%) rotate() This properly distributes all 12 markers around the clock face.
The key is transform order matters: 1. rotate(angle) - rotate around clock center first 2. translateY(-45%) - move outward to clock edge 3. translateX(-50%) - center the marker horizontally This approach ensures markers rotate around the clock center point before being moved to their positions on the edge, creating proper circular distribution.
Set markers at top edge (12 o'clock) and use transform-origin pointing
to clock center. Rotation now happens around the clock center while
markers remain at the perimeter edge, creating proper circular distribution.
CSS changes:
- top: 5px (positions at top edge)
- transform-origin: center calc(var(--clock-size) / 2 - 5px) (points to clock center)
JS changes:
- translateX(-50%) rotate(${i * 30}deg) (center horizontally, then rotate)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…lignment Changed top from 5px to 0 and transform-origin to calc(var(--clock-size) / 2 - 4px) to ensure markers touch the clock face edge without gaps and bold markers (every 3rd) align correctly at 12, 3, 6, 9 o'clock positions. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changed nth-child selector from (3n) to (3n+1) to select markers at positions 1, 4, 7, 10 which correspond to 12, 3, 6, 9 o'clock positions. Previously (3n) was selecting positions 3, 6, 9, 12 which made bold markers appear one position counter-clockwise from where they should be. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes bug where all 12 hour markers on analog clock faces were stacked at the 12 o'clock position instead of being evenly distributed around the clock face perimeter at 30-degree intervals.
Problem
The original implementation had markers positioned without proper vertical positioning (
topproperty) and incorrecttransform-origin, causing all markers to stack at a single point rather than distribute around the clock face.Solution
Corrected the CSS positioning and transform-origin calculation:
CSS Positioning (
src/styles/main.css):top: 0to position markers at top edge of clock faceleft: 50%to center markers horizontallytransform-origin: center calc(var(--clock-size) / 2 - 4px)to make rotation happen around clock centerBold Marker Selector (
src/styles/main.css)::nth-child(3n)to:nth-child(3n+1)to correctly select 12, 3, 6, 9 o'clock positionsJavaScript Transform (
src/components/Clock.ts):translateX(-50%) rotate(${i * 30}deg)to center marker then rotate around transform-origin pointKey Insight
The
transform-originproperty must point from the marker's position to the clock center. With markers attop: 0, the origin calculationcenter calc(var(--clock-size) / 2 - 4px)positions the rotation point at the clock center, allowing markers to rotate around that point while staying at the perimeter.Files Changed
src/components/Clock.ts- Updated marker transform logic and added clarifying commentsrc/styles/main.css- Fixed marker positioning, transform-origin, and bold marker selectortests/unit/Clock.test.ts- Added unit tests for marker creation and transforms (TDD)tests/integration/ClockGrid.test.ts- Added integration tests for visual distribution (TDD)Testing Performed
Checklist
Visual Result
All 12 hour markers now properly distributed around clock face at 30-degree intervals with bold markers correctly positioned at 12, 3, 6, 9 o'clock positions.