Skip to content

Commit c1262cc

Browse files
claudeclaude
committed
Make Skip Tutorial checkbox more prominent with hotkey
- Larger checkbox (30x30) with orange border container - Bold orange text label "Skip Tutorial [T]" - Added 'T' hotkey to toggle the checkbox - More visible styling to stand out on menu
1 parent f20686b commit c1262cc

6 files changed

Lines changed: 1208 additions & 1183 deletions

File tree

‎dist/assets/index-D_DB6E94.js.map‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

dist/assets/index-D_DB6E94.js renamed to dist/assets/index-toJmS_mD.js

Lines changed: 1164 additions & 1164 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/assets/index-toJmS_mD.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
}
3232
</style>
3333
<link rel="modulepreload" crossorigin href="data:text/javascript;base64,Ci8vIyBzb3VyY2VNYXBwaW5nVVJMPXBoYXNlci1sMHNOUk5LWi5qcy5tYXAK">
34-
<script type="module" crossorigin src="./assets/index-D_DB6E94.js"></script>
34+
<script type="module" crossorigin src="./assets/index-toJmS_mD.js"></script>
3535
</head>
3636
<body>
3737
<div id="game-container"></div>

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
display: block;
3131
}
3232
</style>
33-
<script type="module" crossorigin src="./dist/assets/index-D_DB6E94.js"></script>
33+
<script type="module" crossorigin src="./dist/assets/index-toJmS_mD.js"></script>
3434
<link rel="modulepreload" crossorigin href="./dist/assets/phaser-l0sNRNKZ.js">
3535
</head>
3636
<body>

‎src/scenes/MenuScene.ts‎

Lines changed: 41 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -96,46 +96,71 @@ export class MenuScene extends Phaser.Scene {
9696
const inputZone = this.add.zone(width / 2 - 200, 360, 400, 50).setOrigin(0, 0);
9797
inputZone.setInteractive({ useHandCursor: true });
9898

99-
// Skip Tutorial checkbox
100-
const checkboxY = 450;
101-
const checkboxSize = 20;
102-
const checkboxX = width / 2 - 80;
99+
// Skip Tutorial checkbox - PROMINENT VERSION
100+
const checkboxY = 440;
101+
const checkboxSize = 30;
102+
const checkboxX = width / 2 - 120;
103+
104+
// Checkbox container background
105+
const checkboxContainer = this.add.graphics();
106+
checkboxContainer.fillStyle(0x34495e, 0.9);
107+
checkboxContainer.fillRoundedRect(checkboxX - 15, checkboxY - 10, 280, 50, 8);
108+
checkboxContainer.lineStyle(3, 0xf39c12, 1);
109+
checkboxContainer.strokeRoundedRect(checkboxX - 15, checkboxY - 10, 280, 50, 8);
103110

104111
// Checkbox background
105112
const checkboxBg = this.add.graphics();
106113
checkboxBg.fillStyle(0x2c3e50, 1);
107114
checkboxBg.fillRect(checkboxX, checkboxY, checkboxSize, checkboxSize);
108-
checkboxBg.lineStyle(2, 0x95a5a6, 1);
115+
checkboxBg.lineStyle(3, 0xf39c12, 1);
109116
checkboxBg.strokeRect(checkboxX, checkboxY, checkboxSize, checkboxSize);
110117

111118
// Checkmark (initially hidden)
112119
const checkmark = this.add.text(checkboxX + checkboxSize / 2, checkboxY + checkboxSize / 2, '✓', {
113-
fontSize: '16px',
120+
fontSize: '24px',
114121
color: '#2ecc71',
115122
fontStyle: 'bold',
116123
}).setOrigin(0.5);
117124
checkmark.setVisible(false);
118125

119-
// Checkbox label
120-
this.add.text(checkboxX + checkboxSize + 10, checkboxY + 2, 'Skip Tutorial', {
121-
fontSize: '16px',
122-
color: '#ecf0f1',
126+
// Checkbox label with hotkey hint
127+
this.add.text(checkboxX + checkboxSize + 15, checkboxY + 5, 'Skip Tutorial [T]', {
128+
fontSize: '18px',
129+
color: '#f39c12',
130+
fontStyle: 'bold',
123131
});
124132

125-
// Make checkbox interactive
126-
const checkboxZone = this.add.zone(checkboxX, checkboxY, 150, checkboxSize).setOrigin(0, 0);
127-
checkboxZone.setInteractive({ useHandCursor: true });
128-
129-
checkboxZone.on('pointerdown', () => {
133+
// Toggle function
134+
const toggleSkipTutorial = () => {
130135
this.skipTutorial = !this.skipTutorial;
131136
checkmark.setVisible(this.skipTutorial);
132137

133138
// Update checkbox appearance
134139
checkboxBg.clear();
135140
checkboxBg.fillStyle(this.skipTutorial ? 0x27ae60 : 0x2c3e50, 1);
136141
checkboxBg.fillRect(checkboxX, checkboxY, checkboxSize, checkboxSize);
137-
checkboxBg.lineStyle(2, this.skipTutorial ? 0x2ecc71 : 0x95a5a6, 1);
142+
checkboxBg.lineStyle(3, this.skipTutorial ? 0x2ecc71 : 0xf39c12, 1);
138143
checkboxBg.strokeRect(checkboxX, checkboxY, checkboxSize, checkboxSize);
144+
145+
// Update container border
146+
checkboxContainer.clear();
147+
checkboxContainer.fillStyle(0x34495e, 0.9);
148+
checkboxContainer.fillRoundedRect(checkboxX - 15, checkboxY - 10, 280, 50, 8);
149+
checkboxContainer.lineStyle(3, this.skipTutorial ? 0x2ecc71 : 0xf39c12, 1);
150+
checkboxContainer.strokeRoundedRect(checkboxX - 15, checkboxY - 10, 280, 50, 8);
151+
};
152+
153+
// Make checkbox interactive
154+
const checkboxZone = this.add.zone(checkboxX - 15, checkboxY - 10, 280, 50).setOrigin(0, 0);
155+
checkboxZone.setInteractive({ useHandCursor: true });
156+
157+
checkboxZone.on('pointerdown', toggleSkipTutorial);
158+
159+
// Hotkey 'T' to toggle
160+
this.input.keyboard?.on('keydown-T', () => {
161+
if (!this.isInputActive) {
162+
toggleSkipTutorial();
163+
}
139164
});
140165

141166
inputZone.on('pointerdown', () => {

0 commit comments

Comments
 (0)