antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(games): remove wheel scrolling, enable overflow visible carousel 

Removed non-functional wheel scrolling code and changed games carousel
to overflow: visible for a full-width effect that extends beyond the
container. Creates a more immersive, cinematic feel where game cards
bleed into the page edges.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-03 09:21:47 -06:00
parent f80a73b35c
commit 876513c9cc
1 changed files with 2 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
apps/web/src/app/games/page.tsx
View File

@ -66,31 +66,6 @@ function GamesPageContent() {
}
}, [gamesEmblaApi, onGamesSelect])
// Enable horizontal scrolling with mouse wheel for games carousel
useEffect(() => {
if (!gamesEmblaApi) return
const containerNode = gamesEmblaApi.rootNode()
if (!containerNode) return
const handleWheel = (event: WheelEvent) => {
// Only handle horizontal scroll or shift+vertical scroll
if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey) {
event.preventDefault()
const delta = event.shiftKey ? event.deltaY : event.deltaX
// Get the scrollable container (embla's internal container)
const scrollContainer = gamesEmblaApi.internalEngine().scrollBody.container
if (scrollContainer) {
// Smooth scroll by the wheel delta amount (scale it down for better feel)
scrollContainer.scrollLeft += delta * 0.5
}
}
}
containerNode.addEventListener('wheel', handleWheel, { passive: false })
return () => containerNode.removeEventListener('wheel', handleWheel)
}, [gamesEmblaApi])
// Player carousel callbacks
const onSelect = useCallback(() => {
if (!emblaApi) return
@ -109,31 +84,6 @@ function GamesPageContent() {
}
}, [emblaApi, onSelect])
// Enable horizontal scrolling with mouse wheel for player carousel
useEffect(() => {
if (!emblaApi) return
const containerNode = emblaApi.rootNode()
if (!containerNode) return
const handleWheel = (event: WheelEvent) => {
// Only handle horizontal scroll or shift+vertical scroll
if (Math.abs(event.deltaX) > Math.abs(event.deltaY) || event.shiftKey) {
event.preventDefault()
const delta = event.shiftKey ? event.deltaY : event.deltaX
// Get the scrollable container (embla's internal container)
const scrollContainer = emblaApi.internalEngine().scrollBody.container
if (scrollContainer) {
// Smooth scroll by the wheel delta amount (scale it down for better feel)
scrollContainer.scrollLeft += delta * 0.5
}
}
}
containerNode.addEventListener('wheel', handleWheel, { passive: false })
return () => containerNode.removeEventListener('wheel', handleWheel)
}, [emblaApi])
return (
<div
className={css({
@ -170,6 +120,7 @@ function GamesPageContent() {
<div
className={css({
mb: '16',
overflow: 'visible',
})}
>
<h2
@ -188,7 +139,7 @@ function GamesPageContent() {
<div
ref={gamesEmblaRef}
className={css({
overflow: 'hidden',
overflow: 'visible',
cursor: 'grab',
userSelect: 'none',
_active: {