Skip to content

Commit 3d87567

Browse files
ABCoder1ABCoder1
committed
Refactored scrolling functionality in PacManScene to support keyboard controls (W/S and arrow keys) and improved scroll indicator behavior. Removed unnecessary comments and adjusted arrow visibility logic based on scroll position. Enhanced cleanup process for scroll-related elements.
1 parent 681de3b commit 3d87567

File tree

1 file changed

+170
-62
lines changed

1 file changed

+170
-62
lines changed

‎public/index.js‎

Lines changed: 170 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -845,28 +845,15 @@ class PacManScene extends Phaser.Scene {
845845
this.maxScrollY = needsScrolling ? Math.max(0, totalContentHeight - availableHeight) : 0;
846846
console.log('maxScrollY', this.maxScrollY);
847847

848-
// Add scroll instructions if needed
849-
let scrollInstructions = null;
850-
// if (needsScrolling) {
851-
// scrollInstructions = this.add.text(0, overlayHeight/2 - 25, 'Use Mouse Wheel to scroll', {
852-
// fontSize: `${Math.floor(8 * textScale)}px`,
853-
// // fill: '#888888',
854-
// fill: '#FFFFFF',
855-
// // fontFamily: this.fontLoaded ? 'Pixelify Sans' : 'Arial',
856-
// fontFamily: 'Monaco',
857-
// fontStyle: 'italic'
858-
// }).setOrigin(0.5);
859-
// }
860-
861-
// Add close instruction
862-
const closeText = this.add.text(0, overlayHeight/2 - 15, 'Use Mouse Wheel to scroll | Press ESC to close', {
863-
fontSize: `${Math.floor(8 * textScale)}px`,
864-
// fill: '#888888',
865-
fill: '#FFFFFF',
866-
// fontFamily: this.fontLoaded ? 'Pixelify Sans' : 'Arial',
867-
fontFamily: 'Monaco',
868-
fontStyle: 'italic'
869-
}).setOrigin(0.5);
848+
// // Add close instruction
849+
// const closeText = this.add.text(0, overlayHeight/2 - 15, 'Use Mouse Wheel to scroll | Press ESC to close', {
850+
// fontSize: `${Math.floor(8 * textScale)}px`,
851+
// // fill: '#888888',
852+
// fill: '#FFFFFF',
853+
// // fontFamily: this.fontLoaded ? 'Pixelify Sans' : 'Arial',
854+
// fontFamily: 'Monaco',
855+
// fontStyle: 'italic'
856+
// }).setOrigin(0.5);
870857

871858
// Create ESC button in top left corner
872859
const escButtonPadding = 10;
@@ -937,47 +924,45 @@ class PacManScene extends Phaser.Scene {
937924
// Store bounding box reference for cleanup
938925
this.escBoundingBox = escBoundingBox;
939926

940-
// Create scroll indicator (only show first time if scrolling is needed)
927+
// Create scroll indicator
941928
let scrollIndicator = null;
942-
if (needsScrolling && !this.hasShownScrollIndicator) {
943-
this.hasShownScrollIndicator = true;
944-
929+
if (needsScrolling) {
945930
// Create scroll indicator container at center of overlay
946931
scrollIndicator = this.add.container(0, 0);
932+
scrollIndicator.setPosition(0, 0);
947933
scrollIndicator.setScrollFactor(0);
948934
scrollIndicator.setDepth(1003);
949935

950936
// Create up and down arrows
951937
const arrowSize = 15;
952-
const arrowSpacing = 30;
953938

954-
// Up arrow
939+
// Up arrow (initially hidden)
955940
const upArrow = this.add.graphics();
956941
upArrow.lineStyle(2, 0x00FFFF, 1);
957942
upArrow.beginPath();
958-
upArrow.moveTo(0, arrowSize/2);
959-
upArrow.lineTo(-arrowSize/2, -arrowSize/2);
960-
upArrow.lineTo(arrowSize/2, -arrowSize/2);
943+
upArrow.moveTo(0, -arrowSize/2);
944+
upArrow.lineTo(-arrowSize/2, arrowSize/2);
945+
upArrow.lineTo(arrowSize/2, arrowSize/2);
961946
upArrow.closePath();
962947
upArrow.strokePath();
963948
upArrow.fillStyle(0x00FFFF, 0.5);
964949
upArrow.fillPath();
965-
966-
// Down arrow
950+
upArrow.setPosition(0, -overlayHeight/2 + 20); // Position at top
951+
upArrow.setAlpha(0); // Initially hidden
952+
upArrow.setVisible(false);
953+
954+
// Down arrow (initially visible)
967955
const downArrow = this.add.graphics();
968956
downArrow.lineStyle(2, 0x00FFFF, 1);
969957
downArrow.beginPath();
970-
downArrow.moveTo(0, -arrowSize/2);
971-
downArrow.lineTo(-arrowSize/2, arrowSize/2);
972-
downArrow.lineTo(arrowSize/2, arrowSize/2);
958+
downArrow.moveTo(0, arrowSize/2);
959+
downArrow.lineTo(-arrowSize/2, -arrowSize/2);
960+
downArrow.lineTo(arrowSize/2, -arrowSize/2);
973961
downArrow.closePath();
974962
downArrow.strokePath();
975963
downArrow.fillStyle(0x00FFFF, 0.5);
976964
downArrow.fillPath();
977-
978-
// Position arrows
979-
upArrow.setPosition(0, -arrowSpacing/2);
980-
downArrow.setPosition(0, arrowSpacing/2);
965+
downArrow.setPosition(0, overlayHeight/2 - 15);
981966

982967
// Add pulsing animation to arrows
983968
this.tweens.add({
@@ -992,7 +977,7 @@ class PacManScene extends Phaser.Scene {
992977
// Add vertical movement animation
993978
this.tweens.add({
994979
targets: scrollIndicator,
995-
y: 5,
980+
y: 3,
996981
duration: 1000,
997982
yoyo: true,
998983
repeat: -1,
@@ -1001,9 +986,14 @@ class PacManScene extends Phaser.Scene {
1001986

1002987
scrollIndicator.add([upArrow, downArrow]);
1003988

1004-
// Auto-hide scroll indicator after 3 seconds
1005-
this.time.delayedCall(3000, () => {
1006-
if (scrollIndicator && scrollIndicator.active) {
989+
// Store arrow references for dynamic control
990+
this.scrollUpArrow = upArrow;
991+
this.scrollDownArrow = downArrow;
992+
this.hasUserScrolled = false; // Track if user has scrolled
993+
994+
// Auto-hide scroll indicator after 3 seconds only if user hasn't scrolled
995+
this.scrollIndicatorAutoHideTimer = this.time.delayedCall(3000, () => {
996+
if (scrollIndicator && scrollIndicator.active && !this.hasUserScrolled) {
1007997
this.tweens.add({
1008998
targets: scrollIndicator,
1009999
alpha: 0,
@@ -1020,8 +1010,7 @@ class PacManScene extends Phaser.Scene {
10201010
}
10211011

10221012
// Add all elements to overlayContainer
1023-
const elementsToAdd = [overlayWindow, this.nonScrollableContent, this.scrollableContent, closeText, escButtonContainer];
1024-
if (scrollInstructions) elementsToAdd.push(scrollInstructions);
1013+
const elementsToAdd = [overlayWindow, this.nonScrollableContent, this.scrollableContent, escButtonContainer];
10251014
if (scrollIndicator) elementsToAdd.push(scrollIndicator);
10261015
this.overlayContainer.add(elementsToAdd);
10271016

@@ -1088,12 +1077,53 @@ class PacManScene extends Phaser.Scene {
10881077

10891078
// Setup scroll controls if needed
10901079
if (needsScrolling) {
1091-
// Mouse-only scroll: prevent default page scroll while overlay open
1080+
// Mouse scroll: prevent default page scroll while overlay open
10921081
this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY) => {
10931082
if (this.overlayOpen) {
10941083
this.scrollContent(deltaY, overlayHeight);
10951084
}
10961085
});
1086+
1087+
// Keyboard scroll support: W/S and Up/Down arrow keys
1088+
const wasdKeys = this.input.keyboard.addKeys('W,S');
1089+
const arrowUp = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
1090+
const arrowDown = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);
1091+
1092+
// Store references for cleanup
1093+
this.overlayScrollKeys = {
1094+
W: wasdKeys.W,
1095+
S: wasdKeys.S,
1096+
UP: arrowUp,
1097+
DOWN: arrowDown
1098+
};
1099+
1100+
// W key - scroll up
1101+
wasdKeys.W.on('down', () => {
1102+
if (this.overlayOpen) {
1103+
this.scrollContent(-15, overlayHeight);
1104+
}
1105+
});
1106+
1107+
// S key - scroll down
1108+
wasdKeys.S.on('down', () => {
1109+
if (this.overlayOpen) {
1110+
this.scrollContent(15, overlayHeight);
1111+
}
1112+
});
1113+
1114+
// Up arrow key - scroll up
1115+
arrowUp.on('down', () => {
1116+
if (this.overlayOpen) {
1117+
this.scrollContent(-15, overlayHeight);
1118+
}
1119+
});
1120+
1121+
// Down arrow key - scroll down
1122+
arrowDown.on('down', () => {
1123+
if (this.overlayOpen) {
1124+
this.scrollContent(15, overlayHeight);
1125+
}
1126+
});
10971127
}
10981128

10991129
// Animate overlay in
@@ -1168,7 +1198,21 @@ class PacManScene extends Phaser.Scene {
11681198

11691199
if (this.scrollIndicator) {
11701200
this.tweens.killTweensOf(this.scrollIndicator);
1201+
if (this.scrollUpArrow) {
1202+
this.tweens.killTweensOf(this.scrollUpArrow);
1203+
}
1204+
if (this.scrollDownArrow) {
1205+
this.tweens.killTweensOf(this.scrollDownArrow);
1206+
}
1207+
// Clean up auto-hide timer
1208+
if (this.scrollIndicatorAutoHideTimer) {
1209+
this.scrollIndicatorAutoHideTimer.remove();
1210+
this.scrollIndicatorAutoHideTimer = null;
1211+
}
11711212
this.scrollIndicator = null;
1213+
this.scrollUpArrow = null;
1214+
this.scrollDownArrow = null;
1215+
this.hasUserScrolled = false;
11721216
}
11731217
}
11741218

@@ -1178,22 +1222,78 @@ class PacManScene extends Phaser.Scene {
11781222
this.scrollY = Phaser.Math.Clamp(this.scrollY + deltaY, 0, this.maxScrollY);
11791223

11801224
this.scrollableContent.setY(-this.scrollY);
1181-
// this.scrollableContent.setY(this.scrollY + (overlayHeight / 2 + 20));
11821225

1183-
// Hide scroll indicator when user starts scrolling
1184-
if (this.scrollIndicator && this.scrollIndicator.visible) {
1185-
this.tweens.killTweensOf(this.scrollIndicator);
1186-
this.tweens.add({
1187-
targets: this.scrollIndicator,
1188-
alpha: 0,
1189-
duration: 300,
1190-
ease: 'Power2',
1191-
onComplete: () => {
1192-
if (this.scrollIndicator && this.scrollIndicator.active) {
1193-
this.scrollIndicator.setVisible(false);
1194-
}
1226+
// Mark that user has scrolled (cancel auto-hide)
1227+
if (!this.hasUserScrolled) {
1228+
this.hasUserScrolled = true;
1229+
// Cancel auto-hide timer if it exists
1230+
if (this.scrollIndicatorAutoHideTimer) {
1231+
this.scrollIndicatorAutoHideTimer.remove();
1232+
this.scrollIndicatorAutoHideTimer = null;
1233+
}
1234+
// Make sure indicator is visible
1235+
if (this.scrollIndicator && !this.scrollIndicator.visible) {
1236+
this.scrollIndicator.setVisible(true);
1237+
this.scrollIndicator.setAlpha(1);
1238+
}
1239+
}
1240+
1241+
// Update scroll indicator arrows based on scroll position
1242+
// Show arrows when scrolling in that direction is still possible
1243+
if (this.scrollIndicator && this.scrollIndicator.visible && this.scrollUpArrow && this.scrollDownArrow) {
1244+
const scrollThreshold = 5; // Small threshold to avoid flickering at edges
1245+
const canScrollUp = this.scrollY > scrollThreshold;
1246+
const canScrollDown = this.scrollY < this.maxScrollY - scrollThreshold;
1247+
1248+
// Show/hide up arrow based on whether scrolling up is possible
1249+
if (canScrollUp) {
1250+
if (!this.scrollUpArrow.visible) {
1251+
this.scrollUpArrow.setVisible(true);
1252+
this.tweens.add({
1253+
targets: this.scrollUpArrow,
1254+
alpha: 1,
1255+
duration: 200,
1256+
ease: 'Power2'
1257+
});
11951258
}
1196-
});
1259+
} else {
1260+
if (this.scrollUpArrow.visible) {
1261+
this.tweens.add({
1262+
targets: this.scrollUpArrow,
1263+
alpha: 0,
1264+
duration: 200,
1265+
ease: 'Power2',
1266+
onComplete: () => {
1267+
this.scrollUpArrow.setVisible(false);
1268+
}
1269+
});
1270+
}
1271+
}
1272+
1273+
// Show/hide down arrow based on whether scrolling down is possible
1274+
if (canScrollDown) {
1275+
if (!this.scrollDownArrow.visible) {
1276+
this.scrollDownArrow.setVisible(true);
1277+
this.tweens.add({
1278+
targets: this.scrollDownArrow,
1279+
alpha: 1,
1280+
duration: 200,
1281+
ease: 'Power2'
1282+
});
1283+
}
1284+
} else {
1285+
if (this.scrollDownArrow.visible) {
1286+
this.tweens.add({
1287+
targets: this.scrollDownArrow,
1288+
alpha: 0,
1289+
duration: 200,
1290+
ease: 'Power2',
1291+
onComplete: () => {
1292+
this.scrollDownArrow.setVisible(false);
1293+
}
1294+
});
1295+
}
1296+
}
11971297
}
11981298
}
11991299

@@ -1211,6 +1311,15 @@ class PacManScene extends Phaser.Scene {
12111311
// Remove wheel event listener
12121312
this.input.off('wheel');
12131313

1314+
// Remove keyboard scroll listeners
1315+
if (this.overlayScrollKeys) {
1316+
this.overlayScrollKeys.W.off('down');
1317+
this.overlayScrollKeys.S.off('down');
1318+
this.overlayScrollKeys.UP.off('down');
1319+
this.overlayScrollKeys.DOWN.off('down');
1320+
this.overlayScrollKeys = null;
1321+
}
1322+
12141323
// Immediate cleanup - don't wait for animation
12151324
this.cleanupOverlayElements();
12161325

@@ -1848,7 +1957,6 @@ class PacManScene extends Phaser.Scene {
18481957
this.animationsStarted = false; // Flag to prevent multiple animation starts
18491958
this.fontLoaded = false;
18501959
this.overlayOpen = false; // Track overlay state
1851-
this.hasShownScrollIndicator = false; // Track if scroll indicator has been shown
18521960
// this.canInteract = true; // Track if orb can be interacted with (to deal with race condition)
18531961

18541962
// Create section data

0 commit comments

Comments
 (0)