From f0cd2ae056a6a78c469172bd9856fb461eb17345 Mon Sep 17 00:00:00 2001 From: NovaFarma Dev Date: Sat, 13 Dec 2025 01:33:27 +0100 Subject: [PATCH] tuturiol --- docs/TUTORIAL_SYSTEM.md | 160 +++++++++++++++++++ index.html | 1 + src/scenes/GameScene.js | 13 ++ src/systems/TutorialSystem.js | 293 ++++++++++++++++++++++++++++++++++ 4 files changed, 467 insertions(+) create mode 100644 docs/TUTORIAL_SYSTEM.md create mode 100644 src/systems/TutorialSystem.js diff --git a/docs/TUTORIAL_SYSTEM.md b/docs/TUTORIAL_SYSTEM.md new file mode 100644 index 0000000..bf7b40a --- /dev/null +++ b/docs/TUTORIAL_SYSTEM.md @@ -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* diff --git a/index.html b/index.html index 83a89c0..43a8fd2 100644 --- a/index.html +++ b/index.html @@ -156,6 +156,7 @@ + diff --git a/src/scenes/GameScene.js b/src/scenes/GameScene.js index 970b890..c28b427 100644 --- a/src/scenes/GameScene.js +++ b/src/scenes/GameScene.js @@ -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(); diff --git a/src/systems/TutorialSystem.js b/src/systems/TutorialSystem.js new file mode 100644 index 0000000..5a4e2f9 --- /dev/null +++ b/src/systems/TutorialSystem.js @@ -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; + } + } +}