feat: Improve scenario-based game UI and scoring
- Hide task images in scenario mode to prevent scrolling issues - Implement scenario-specific scoring system (50 points per step) - Add special scenario styling with better layout and typography - Display 'Scenario' instead of difficulty for scenario tasks - Change 'Skip' to 'Give Up' button for scenarios (more appropriate) - Remove streak system for scenarios (doesn't make sense) These changes make scenario games much more enjoyable by: 1. Removing the single image that forces scrolling 2. Using meaningful points system for story progression 3. Better visual presentation focused on the narrative
This commit is contained in:
dilgenfritz
parent
6132d7d045
commit
6152d29487
111
src/core/game.js
111
src/core/game.js
|
|
@ -4376,14 +4376,28 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
|
|||
displayCurrentTask() {
|
||||
const taskText = document.getElementById('task-text');
|
||||
const taskImage = document.getElementById('task-image');
|
||||
const taskImageContainer = document.querySelector('.task-image-container');
|
||||
const taskContainer = document.querySelector('.task-container');
|
||||
const taskTypeIndicator = document.getElementById('task-type-indicator');
|
||||
const taskDifficulty = document.getElementById('task-difficulty');
|
||||
const taskPoints = document.getElementById('task-points');
|
||||
const mercySkipBtn = document.getElementById('mercy-skip-btn');
|
||||
const skipBtn = document.getElementById('skip-btn');
|
||||
|
||||
// Check if this is a scenario mode
|
||||
const isScenarioMode = window.gameModeManager && window.gameModeManager.isScenarioMode();
|
||||
|
||||
// Apply or remove scenario mode styling
|
||||
if (taskContainer) {
|
||||
if (isScenarioMode) {
|
||||
taskContainer.classList.add('scenario-mode');
|
||||
} else {
|
||||
taskContainer.classList.remove('scenario-mode');
|
||||
}
|
||||
}
|
||||
|
||||
// Update skip button text for scenario modes
|
||||
if (window.gameModeManager && window.gameModeManager.isScenarioMode()) {
|
||||
if (isScenarioMode) {
|
||||
skipBtn.textContent = 'Give Up';
|
||||
skipBtn.className = 'btn btn-danger'; // Change to red for more serious action
|
||||
} else {
|
||||
|
|
@ -4393,6 +4407,22 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
|
|||
|
||||
taskText.textContent = this.gameState.currentTask.text;
|
||||
|
||||
// Hide task image for scenario games to prevent scrolling issues
|
||||
if (isScenarioMode) {
|
||||
if (taskImageContainer) {
|
||||
taskImageContainer.style.display = 'none';
|
||||
} else if (taskImage) {
|
||||
taskImage.style.display = 'none';
|
||||
}
|
||||
} else {
|
||||
// Show image for regular games
|
||||
if (taskImageContainer) {
|
||||
taskImageContainer.style.display = 'block';
|
||||
} else if (taskImage) {
|
||||
taskImage.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Check if this is an interactive task
|
||||
if (this.interactiveTaskManager.isInteractiveTask(this.gameState.currentTask)) {
|
||||
console.log('Displaying interactive task:', this.gameState.currentTask.interactiveType);
|
||||
|
|
@ -4400,12 +4430,14 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
|
|||
return; // Interactive task manager handles the rest
|
||||
}
|
||||
|
||||
// Set image with error handling
|
||||
taskImage.src = this.gameState.currentTask.image;
|
||||
taskImage.onerror = () => {
|
||||
console.log('Image failed to load:', this.gameState.currentTask.image);
|
||||
taskImage.src = this.createPlaceholderImage();
|
||||
};
|
||||
// Set image with error handling (only for non-scenario modes)
|
||||
if (!isScenarioMode) {
|
||||
taskImage.src = this.gameState.currentTask.image;
|
||||
taskImage.onerror = () => {
|
||||
console.log('Image failed to load:', this.gameState.currentTask.image);
|
||||
taskImage.src = this.createPlaceholderImage();
|
||||
};
|
||||
}
|
||||
|
||||
// Play task audio based on type
|
||||
if (this.gameState.isConsequenceTask) {
|
||||
|
|
@ -4457,11 +4489,21 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
|
|||
|
||||
// Show difficulty and points for main tasks
|
||||
const difficulty = this.gameState.currentTask.difficulty || 'Medium';
|
||||
const points = this.getPointsForDifficulty(difficulty);
|
||||
const difficultyEmoji = this.getDifficultyEmoji(difficulty);
|
||||
const isScenarioMode = window.gameModeManager && window.gameModeManager.isScenarioMode();
|
||||
|
||||
if (isScenarioMode) {
|
||||
// For scenario tasks, show fixed scenario points
|
||||
const scenarioPoints = 50;
|
||||
taskDifficulty.textContent = `🎭 Scenario`;
|
||||
taskPoints.textContent = `${scenarioPoints} points`;
|
||||
} else {
|
||||
// For regular tasks, show difficulty-based points
|
||||
const points = this.getPointsForDifficulty(difficulty);
|
||||
const difficultyEmoji = this.getDifficultyEmoji(difficulty);
|
||||
taskDifficulty.textContent = `${difficultyEmoji} ${difficulty}`;
|
||||
taskPoints.textContent = `${points} ${points === 1 ? 'point' : 'points'}`;
|
||||
}
|
||||
|
||||
taskDifficulty.textContent = `${difficultyEmoji} ${difficulty}`;
|
||||
taskPoints.textContent = `${points} ${points === 1 ? 'point' : 'points'}`;
|
||||
taskDifficulty.style.display = 'block';
|
||||
taskPoints.style.display = 'inline-block';
|
||||
}
|
||||
|
|
@ -4585,24 +4627,39 @@ ${usagePercent > 85 ? '⚠️ Storage getting full - consider deleting some imag
|
|||
this.gameState.usedMainTasks.push(this.gameState.currentTask.id);
|
||||
this.gameState.completedCount++;
|
||||
|
||||
// Increment streak for regular tasks
|
||||
this.gameState.currentStreak++;
|
||||
// Check if this is a scenario mode
|
||||
const isScenarioMode = window.gameModeManager && window.gameModeManager.isScenarioMode();
|
||||
|
||||
// Award points for completing main tasks
|
||||
const difficulty = this.gameState.currentTask.difficulty || 'Medium';
|
||||
const basePoints = this.getPointsForDifficulty(difficulty);
|
||||
this.gameState.score += basePoints;
|
||||
|
||||
// Check for streak bonus (every 10 consecutive completed tasks)
|
||||
const streakBonus = this.checkStreakBonus();
|
||||
if (streakBonus > 0) {
|
||||
this.gameState.score += streakBonus;
|
||||
this.gameState.totalStreakBonuses += streakBonus;
|
||||
this.showStreakBonusNotification(this.gameState.currentStreak, streakBonus);
|
||||
// Trigger special streak message
|
||||
this.flashMessageManager.triggerEventMessage('streak');
|
||||
if (!isScenarioMode) {
|
||||
// Regular game mode - use standard scoring
|
||||
// Increment streak for regular tasks
|
||||
this.gameState.currentStreak++;
|
||||
|
||||
// Award points for completing main tasks
|
||||
const difficulty = this.gameState.currentTask.difficulty || 'Medium';
|
||||
const basePoints = this.getPointsForDifficulty(difficulty);
|
||||
this.gameState.score += basePoints;
|
||||
|
||||
// Check for streak bonus (every 10 consecutive completed tasks)
|
||||
const streakBonus = this.checkStreakBonus();
|
||||
if (streakBonus > 0) {
|
||||
this.gameState.score += streakBonus;
|
||||
this.gameState.totalStreakBonuses += streakBonus;
|
||||
this.showStreakBonusNotification(this.gameState.currentStreak, streakBonus);
|
||||
// Trigger special streak message
|
||||
this.flashMessageManager.triggerEventMessage('streak');
|
||||
} else {
|
||||
// Trigger regular completion message
|
||||
this.flashMessageManager.triggerEventMessage('taskComplete');
|
||||
}
|
||||
} else {
|
||||
// Trigger regular completion message
|
||||
// Scenario mode - simplified scoring
|
||||
// Award scenario completion points (substantial reward for completing scenario steps)
|
||||
const scenarioPoints = 50; // Fixed points per scenario step
|
||||
this.gameState.score += scenarioPoints;
|
||||
|
||||
// Scenarios don't use streaks - each step is a meaningful progression
|
||||
// Trigger scenario progress message
|
||||
this.flashMessageManager.triggerEventMessage('taskComplete');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -876,6 +876,31 @@ body {
|
|||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Scenario mode improvements - better layout when image is hidden */
|
||||
.task-container.scenario-mode {
|
||||
padding: 35px;
|
||||
}
|
||||
|
||||
.task-container.scenario-mode .task-text-container {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.task-container.scenario-mode .task-text {
|
||||
font-size: 1.4em;
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Task difficulty and points display */
|
||||
.task-difficulty {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
|
|
|
|||
Loading…
Reference in New Issue