davidkotnik/novafarma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tuturiol

Browse Source
This commit is contained in:
NovaFarma Dev
2025-12-13 01:33:27 +01:00
parent c618f3d7fa
commit f0cd2ae056
4 changed files with 467 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
docs/TUTORIAL_SYSTEM.md Normal file
View File

@@ -0,0 +1,160 @@
# 📚 TUTORIAL SYSTEM - Complete!
**Date**: December 13, 2025, 01:30
---
## ✅ WHAT IT DOES
### **Automatic Tutorial**
- Shows on first game start
- 6 steps covering all basics
- Auto-advances after 5 seconds
- Can skip anytime
### **Help Anytime**
- Press **H** for keyboard shortcuts
- Shows all controls
- Quick reference
---
## 🎮 TUTORIAL STEPS
### **Step 1: Welcome**
- Movement (W/A/S/D)
- Attack (SPACE)
- Interact (E)
### **Step 2: Building**
- Build mode (B)
- Select buildings (1-5)
- Place buildings (Click)
### **Step 3: Crafting**
- Crafting menu (C)
- Craft tools
- Use resources
### **Step 4: Fishing**
- Cast rod (R)
- Catch fish (SPACE)
- Move bobber (LEFT/RIGHT)
### **Step 5: Save/Load**
- Quick save (F5)
- Load game (F9)
- Auto-save
### **Step 6: More Controls**
- Stats panel (TAB)
- Map (M)
- Pause (ESC)
- Help (H)
---
## ⌨️ KEYBOARD SHORTCUTS
### **Press H anytime to see:**
```
🎮 MOVEMENT:
W/A/S/D - Move
SPACE - Attack
E - Interact
🏗️ BUILD & CRAFT:
B - Build Mode
C - Crafting Menu
🎣 FISHING:
R - Cast Rod
SPACE - Catch Fish
💾 SAVE/LOAD:
F5 - Quick Save
F9 - Load Game
📋 OTHER:
TAB - Stats Panel
M - Map
ESC - Pause
H - Help
```
---
## 🎨 DESIGN
### **Popup Style:**
- Dark green background
- Light green border
- Farm theme colors
- Large, readable text
### **Features:**
- Progress indicator (Step X of 6)
- Skip button
- Next button
- Auto-advance
### **Animation:**
- Fade in
- Scale effect
- Smooth transitions
---
## 💾 PROGRESS SAVING
### **Remembers:**
- Tutorial completed status
- Current step
- Saved in localStorage
### **Reset:**
- Clear browser data
- Or call `tutorialSystem.reset()`
---
## 🔧 USAGE
### **Show Tutorial:**
```javascript
// Automatic on first start
// Or manually:
scene.tutorialSystem.showNextStep();
```
### **Show Help:**
```javascript
// Press H key
// Or manually:
scene.tutorialSystem.showHelp();
```
### **Reset Tutorial:**
```javascript
scene.tutorialSystem.reset();
```
---
## ✨ FEATURES
- ✅ 6-step tutorial
- ✅ Auto-advance
- ✅ Skip option
- ✅ Progress saving
- ✅ Help popup (H key)
- ✅ Farm theme design
- ✅ Smooth animations
- ✅ Keyboard shortcuts reference
---
**Osveži igro s F5 da vidiš tutorial!** 🔄
*Created: December 13, 2025, 01:30*

1
index.html
View File

@@ -156,6 +156,7 @@
<script src="src/systems/PlatformSupportSystem.js"></script> <!-- Platform Support -->
<script src="src/systems/SaveSystemExpansion.js"></script> <!-- Save System Expansion -->
<script src="src/systems/CentralPopupSystem.js"></script> <!-- Central Popup System -->
<script src="src/systems/TutorialSystem.js"></script> <!-- Tutorial System -->
<script src="src/systems/CameraSystem.js"></script> <!-- Camera System (Trailer/Screenshots) -->
<!-- Entities -->

13
src/scenes/GameScene.js
View File

@@ -448,6 +448,12 @@ class GameScene extends Phaser.Scene {
this.worldEventSystem = new WorldEventSystem(this);
this.hybridSkillSystem = new HybridSkillSystem(this);
this.oceanSystem = new OceanSystem(this);
// Central Popup System (for quests, dialogs, etc.)
this.centralPopup = new CentralPopupSystem(this);
// Tutorial System (shows keyboard shortcuts)
this.tutorialSystem = new TutorialSystem(this);
this.legacySystem = new LegacySystem(this);
// Initialize Sound Manager
@@ -811,6 +817,13 @@ class GameScene extends Phaser.Scene {
// Soft Reset (F4)
this.input.keyboard.on('keydown-F4', () => window.location.reload());
// Help / Tutorial (H key)
this.input.keyboard.on('keydown-H', () => {
if (this.tutorialSystem) {
this.tutorialSystem.showHelp();
}
});
// Mute Toggle (M key)
this.input.keyboard.on('keydown-M', () => {
if (this.soundManager) this.soundManager.toggleMute();

293
src/systems/TutorialSystem.js Normal file
View File

@@ -0,0 +1,293 @@
/**
* TUTORIAL SYSTEM
* Shows helpful tips and keyboard shortcuts to new players
*/
class TutorialSystem {
constructor(scene) {
this.scene = scene;
this.enabled = true;
this.currentStep = 0;
this.completed = false;
// Tutorial steps
this.steps = [
{
title: '🎮 Welcome to NovaFarma!',
message: 'Use W/A/S/D to move around\nPress SPACE to attack\nPress E to interact with objects',
icon: '👋',
duration: 5000
},
{
title: '🏗️ Building',
message: 'Press B to enter Build Mode\nSelect buildings with 1-5\nClick to place buildings',
icon: '🏗️',
duration: 5000
},
{
title: '🔨 Crafting',
message: 'Press C to open Crafting Menu\nCraft tools and items\nUse resources from your inventory',
icon: '🔨',
duration: 5000
},
{
title: '🎣 Fishing',
message: 'Press R to cast fishing rod\nPress SPACE to catch fish\nUse LEFT/RIGHT to move bobber',
icon: '🎣',
duration: 5000
},
{
title: '💾 Save & Load',
message: 'Press F5 to Quick Save\nPress F9 to Load Game\nYour progress is saved automatically',
icon: '💾',
duration: 5000
},
{
title: '📋 More Controls',
message: 'Press TAB for Stats Panel\nPress M for Map\nPress ESC for Pause Menu\n\nPress H anytime for help!',
icon: '⌨️',
duration: 6000
}
];
// Load progress
this.loadProgress();
// Show tutorial if not completed
if (!this.completed && this.enabled) {
this.scene.time.delayedCall(2000, () => {
this.showNextStep();
});
}
console.log('📚 Tutorial System initialized');
}
/**
* Show next tutorial step
*/
showNextStep() {
if (this.currentStep >= this.steps.length) {
this.completeTutorial();
return;
}
const step = this.steps[this.currentStep];
this.showTutorialPopup(step);
this.currentStep++;
}
/**
* Show tutorial popup
*/
showTutorialPopup(step) {
const uiScene = this.scene.scene.get('UIScene');
if (!uiScene) return;
// Create container
const container = uiScene.add.container(
uiScene.scale.width / 2,
uiScene.scale.height / 2
);
container.setDepth(99998); // Below epilepsy warning
container.setScrollFactor(0);
// Semi-transparent background
const overlay = uiScene.add.rectangle(
0, 0,
uiScene.scale.width * 2,
uiScene.scale.height * 2,
0x000000, 0.5
);
container.add(overlay);
// Popup background
const bg = uiScene.add.graphics();
bg.fillStyle(0x2a4a2a, 0.95); // Dark green
bg.fillRoundedRect(-300, -150, 600, 300, 16);
bg.lineStyle(4, 0x90EE90, 1); // Light green border
bg.strokeRoundedRect(-300, -150, 600, 300, 16);
container.add(bg);
// Icon
const icon = uiScene.add.text(-280, -130, step.icon, {
fontSize: '48px'
});
container.add(icon);
// Title
const title = uiScene.add.text(0, -100, step.title, {
fontSize: '28px',
fontFamily: 'Arial',
fill: '#FFD700',
fontStyle: 'bold',
align: 'center'
}).setOrigin(0.5);
container.add(title);
// Message
const message = uiScene.add.text(0, 0, step.message, {
fontSize: '20px',
fontFamily: 'Arial',
fill: '#ffffff',
align: 'center',
lineSpacing: 8,
wordWrap: { width: 550 }
}).setOrigin(0.5);
container.add(message);
// Progress indicator
const progress = uiScene.add.text(
0, 100,
`Step ${this.currentStep + 1} of ${this.steps.length}`,
{
fontSize: '14px',
fill: '#aaaaaa'
}
).setOrigin(0.5);
container.add(progress);
// Next button
const nextBtn = uiScene.add.text(0, 130, '[ NEXT ]', {
fontSize: '20px',
color: '#00ff00',
backgroundColor: '#003300',
padding: { x: 30, y: 10 },
fontStyle: 'bold'
}).setOrigin(0.5);
nextBtn.setInteractive({ useHandCursor: true });
nextBtn.on('pointerover', () => nextBtn.setScale(1.1));
nextBtn.on('pointerout', () => nextBtn.setScale(1.0));
nextBtn.on('pointerdown', () => {
container.destroy();
this.showNextStep();
});
container.add(nextBtn);
// Skip button
const skipBtn = uiScene.add.text(250, -130, 'Skip Tutorial', {
fontSize: '14px',
color: '#888888'
}).setOrigin(1, 0);
skipBtn.setInteractive({ useHandCursor: true });
skipBtn.on('pointerover', () => skipBtn.setColor('#ffffff'));
skipBtn.on('pointerout', () => skipBtn.setColor('#888888'));
skipBtn.on('pointerdown', () => {
container.destroy();
this.completeTutorial();
});
container.add(skipBtn);
// Animate in
container.setScale(0.8);
container.setAlpha(0);
uiScene.tweens.add({
targets: container,
scale: 1,
alpha: 1,
duration: 300,
ease: 'Back.easeOut'
});
// Auto-advance after duration
uiScene.time.delayedCall(step.duration, () => {
if (container.active) {
uiScene.tweens.add({
targets: container,
scale: 0.8,
alpha: 0,
duration: 200,
onComplete: () => {
container.destroy();
this.showNextStep();
}
});
}
});
}
/**
* Complete tutorial
*/
completeTutorial() {
this.completed = true;
this.saveProgress();
console.log('✅ Tutorial completed!');
// Show completion message
const uiScene = this.scene.scene.get('UIScene');
if (uiScene && uiScene.centralPopup) {
uiScene.centralPopup.showNotification(
'Tutorial completed! Press H anytime for help.',
'success'
);
}
}
/**
* Show help popup (H key)
*/
showHelp() {
const uiScene = this.scene.scene.get('UIScene');
if (!uiScene || !uiScene.centralPopup) return;
uiScene.centralPopup.showPopup({
title: '⌨️ Keyboard Shortcuts',
message:
'🎮 MOVEMENT:\n' +
'W/A/S/D - Move\n' +
'SPACE - Attack\n' +
'E - Interact\n\n' +
'🏗️ BUILD & CRAFT:\n' +
'B - Build Mode\n' +
'C - Crafting Menu\n\n' +
'🎣 FISHING:\n' +
'R - Cast Rod\n' +
'SPACE - Catch Fish\n\n' +
'💾 SAVE/LOAD:\n' +
'F5 - Quick Save\n' +
'F9 - Load Game\n\n' +
'📋 OTHER:\n' +
'TAB - Stats Panel\n' +
'M - Map\n' +
'ESC - Pause',
type: 'info',
icon: '📋',
buttons: [{ text: 'OK', action: 'close' }],
autoClose: false
});
}
/**
* Reset tutorial
*/
reset() {
this.currentStep = 0;
this.completed = false;
this.saveProgress();
console.log('🔄 Tutorial reset');
}
/**
* Save progress
*/
saveProgress() {
localStorage.setItem('novafarma_tutorial', JSON.stringify({
completed: this.completed,
currentStep: this.currentStep
}));
}
/**
* Load progress
*/
loadProgress() {
const saved = localStorage.getItem('novafarma_tutorial');
if (saved) {
const data = JSON.parse(saved);
this.completed = data.completed || false;
this.currentStep = data.currentStep || 0;
}
}
}