GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add custom options to game mode dropdowns with user-defined values - Added Custom option to time limit and score target dropdowns - Updated score presets to 100, 200, 300 points - Fixed JavaScript handlers for custom inputs

This commit is contained in:
fritzsenpai 2025-09-26 11:39:34 -05:00
parent 25d855c813
commit a74fefd1a3
3 changed files with 94 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
game.js
View File

@ -398,6 +398,24 @@ class TaskChallengeGame {
radio.addEventListener('change', () => this.handleGameModeChange());
});
// Add listeners for dropdown changes
document.getElementById('time-limit-select').addEventListener('change', () => {
this.handleTimeLimitChange();
});
document.getElementById('score-target-select').addEventListener('change', () => {
this.handleScoreTargetChange();
});
// Add listeners for custom input changes
document.getElementById('custom-time-input').addEventListener('input', () => {
this.handleCustomTimeChange();
});
document.getElementById('custom-score-input').addEventListener('input', () => {
this.handleCustomScoreChange();
});
// Initialize with default mode
this.handleGameModeChange();
}
@ -414,14 +432,54 @@ class TaskChallengeGame {
// Update game state with selected values
if (selectedMode === 'timed') {
this.gameState.timeLimit = parseInt(document.getElementById('time-limit-select').value);
this.handleTimeLimitChange();
} else if (selectedMode === 'score-target') {
this.gameState.scoreTarget = parseInt(document.getElementById('score-target-select').value);
this.handleScoreTargetChange();
}
console.log(`Game mode changed to: ${selectedMode}`, this.gameState);
}
handleTimeLimitChange() {
const timeLimitSelect = document.getElementById('time-limit-select');
const customTimeInput = document.getElementById('custom-time-input');
const selectedValue = timeLimitSelect.value;
if (selectedValue === 'custom') {
customTimeInput.style.display = 'block';
this.handleCustomTimeChange();
} else {
customTimeInput.style.display = 'none';
this.gameState.timeLimit = parseInt(selectedValue);
}
}
handleScoreTargetChange() {
const scoreTargetSelect = document.getElementById('score-target-select');
const customScoreInput = document.getElementById('custom-score-input');
const selectedValue = scoreTargetSelect.value;
if (selectedValue === 'custom') {
customScoreInput.style.display = 'block';
this.handleCustomScoreChange();
} else {
customScoreInput.style.display = 'none';
this.gameState.scoreTarget = parseInt(selectedValue);
}
}
handleCustomTimeChange() {
const customTimeInput = document.getElementById('custom-time-input');
const minutes = parseInt(customTimeInput.value) || 15;
this.gameState.timeLimit = minutes * 60; // Convert minutes to seconds
}
handleCustomScoreChange() {
const customScoreInput = document.getElementById('custom-score-input');
const score = parseInt(customScoreInput.value) || 300;
this.gameState.scoreTarget = score;
}
setupKeyboardShortcuts() {
document.addEventListener('keydown', (e) => {
// Don't trigger shortcuts when typing in inputs or textareas

20
index.html
View File

@ -87,8 +87,14 @@
<option value="900">15 minutes</option>
<option value="1200">20 minutes</option>
<option value="1800">30 minutes</option>
<option value="custom">Custom...</option>
</select>
</label>
<div id="custom-time-input" style="display: none; margin-top: 10px;">
<label>Custom time (minutes):
<input type="number" id="custom-time-value" min="1" max="180" value="15" style="width: 60px;">
</label>
</div>
</div>
</label>
</div>
@ -100,13 +106,17 @@
<div class="mode-config" id="score-target-config" style="display: none;">
<label>Target Score:
<select id="score-target-select">
<option value="500">500 points</option>
<option value="1000">1000 points</option>
<option value="1500">1500 points</option>
<option value="2000">2000 points</option>
<option value="3000">3000 points</option>
<option value="100">100 points</option>
<option value="200">200 points</option>
<option value="300">300 points</option>
<option value="custom">Custom...</option>
</select>
</label>
<div id="custom-score-input" style="display: none; margin-top: 10px;">
<label>Custom target score:
<input type="number" id="custom-score-value" min="50" max="10000" value="300" style="width: 80px;">
</label>
</div>
</div>
</label>
</div>

19
styles.css
View File

@ -1077,6 +1077,25 @@ body {
font-size: 0.9em;
}
.custom-time-input,
.custom-score-input {
margin-left: 10px;
padding: 5px 10px;
border: 1px solid #ddd;
border-radius: 4px;
background: white;
font-size: 0.9em;
width: 80px;
display: none;
}
.custom-time-input:focus,
.custom-score-input:focus {
border-color: #007bff;
outline: none;
box-shadow: 0 0 3px rgba(0, 123, 255, 0.3);
}
.mercy-cost {
display: block;
font-size: 0.8em;