sandvich
/
hackathon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[auto] make arrows larger, brighter, slower for better visibility 

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
main
name 2026-04-11 17:41:43 -07:00
parent 461a8fa934
commit d0cc3d41df
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/game/ArrowGame.css
View File

@ -67,19 +67,22 @@
position: absolute;
top: 8%;
transform: translateX(-50%);
width: 64px;
height: 64px;
opacity: 0.35;
width: 80px;
height: 80px;
opacity: 0.5;
color: white;
filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.3));
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 12px;
padding: 4px;
}
/* Scrolling arrows */
.ag-arrow {
position: absolute;
transform: translateX(-50%);
width: 64px;
height: 64px;
width: 80px;
height: 80px;
animation: arrow-scroll linear forwards;
}
@ -100,7 +103,7 @@
.ag-arrow[style*="87.5%"] { color: #ffdd44; }
.ag-arrow-active {
filter: drop-shadow(0 0 8px currentColor);
filter: drop-shadow(0 0 12px currentColor) drop-shadow(0 0 24px currentColor);
}
.ag-arrow-perfect {

6
src/game/ArrowGame.tsx
View File

@ -12,8 +12,8 @@ interface GameArrow {
status: 'active' | Judgment
}
const SCROLL_DURATION = 2000
const SPAWN_INTERVAL = 1200
const SCROLL_DURATION = 3000
const SPAWN_INTERVAL = 1800
const PERFECT_WINDOW = 120
const GOOD_WINDOW = 280
const CLEANUP_DELAY = 600
@ -181,7 +181,7 @@ function Arrow({ direction }: { direction: ArrowDirection }) {
const rot: Record<ArrowDirection, number> = { up: 0, right: 90, down: 180, left: 270 }
return (
<svg viewBox="0 0 64 64" className="ag-arrow-svg" style={{ transform: `rotate(${rot[direction]}deg)` }}>
<path d="M32 4L58 36H44v24H20V36H6z" fill="currentColor" stroke="rgba(255,255,255,0.4)" strokeWidth="2" />
<path d="M32 4L58 36H44v24H20V36H6z" fill="currentColor" stroke="rgba(255,255,255,0.6)" strokeWidth="3" />
</svg>
)
}