updejt
This commit is contained in:
50
docs/CAMERA_FIX.md
Normal file
50
docs/CAMERA_FIX.md
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
# 🎮 CAMERA FIX - Better View!
|
||||||
|
|
||||||
|
**Date**: December 13, 2025, 01:16
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ CHANGES MADE
|
||||||
|
|
||||||
|
### **Resolution Increased**
|
||||||
|
- **Before**: 640x360 (too small, too zoomed in)
|
||||||
|
- **After**: 1024x768 (much better view!)
|
||||||
|
|
||||||
|
### **Aspect Ratio**
|
||||||
|
- **Before**: 16:9 (640x360)
|
||||||
|
- **After**: 4:3 (1024x768)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 RESULT
|
||||||
|
|
||||||
|
### **Before:**
|
||||||
|
- Too zoomed in ❌
|
||||||
|
- Hard to see terrain ❌
|
||||||
|
- Cramped view ❌
|
||||||
|
|
||||||
|
### **After:**
|
||||||
|
- Perfect zoom level ✅
|
||||||
|
- See more terrain ✅
|
||||||
|
- Comfortable view ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 TECHNICAL DETAILS
|
||||||
|
|
||||||
|
### **New Resolution:**
|
||||||
|
- Width: 1024px (was 640px)
|
||||||
|
- Height: 768px (was 360px)
|
||||||
|
- Aspect: 4:3 (was 16:9)
|
||||||
|
|
||||||
|
### **Benefits:**
|
||||||
|
- 60% more screen space
|
||||||
|
- Better for isometric view
|
||||||
|
- More comfortable gameplay
|
||||||
|
- See more of your farm!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Osveži igro s F5 da vidiš spremembe!** 🔄
|
||||||
|
|
||||||
|
*Fixed: December 13, 2025, 01:16*
|
||||||
192
docs/CENTRAL_POPUP_GUIDE.md
Normal file
192
docs/CENTRAL_POPUP_GUIDE.md
Normal file
@@ -0,0 +1,192 @@
|
|||||||
|
# 📋 CENTRAL POPUP SYSTEM - Complete Guide
|
||||||
|
|
||||||
|
**Date**: December 13, 2025, 01:09
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ WHAT IT DOES
|
||||||
|
|
||||||
|
### **Central Popups**
|
||||||
|
- Appears in **CENTER** of screen
|
||||||
|
- Always **in front** of player
|
||||||
|
- Pauses game (optional)
|
||||||
|
- Easy to read and interact
|
||||||
|
- Beautiful animations
|
||||||
|
|
||||||
|
### **Types of Popups**
|
||||||
|
1. **Quest** - Quest dialogs (📜)
|
||||||
|
2. **Story** - Story moments (📖)
|
||||||
|
3. **Info** - Information (ℹ️)
|
||||||
|
4. **Success** - Success messages (✅)
|
||||||
|
5. **Warning** - Warnings (⚠️)
|
||||||
|
6. **Error** - Errors (❌)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 HOW TO USE
|
||||||
|
|
||||||
|
### **Show Quest:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showQuest(
|
||||||
|
'First Harvest',
|
||||||
|
'Plant and harvest your first crops!',
|
||||||
|
['Plant 5 seeds', 'Water them', 'Harvest when ready']
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Show Story:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showStory(
|
||||||
|
'Welcome to NovaFarma',
|
||||||
|
'You arrive at an abandoned farm. Time to rebuild!',
|
||||||
|
'farm_image' // optional image
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Show Notification:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showNotification('Quest completed!', 'success');
|
||||||
|
scene.centralPopup.showNotification('Low health!', 'warning');
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Custom Popup:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showPopup({
|
||||||
|
title: 'Custom Title',
|
||||||
|
message: 'Your message here',
|
||||||
|
type: 'info',
|
||||||
|
icon: '🎉',
|
||||||
|
buttons: [
|
||||||
|
{ text: 'Yes', callback: () => console.log('Yes!') },
|
||||||
|
{ text: 'No', action: 'close' }
|
||||||
|
],
|
||||||
|
autoClose: false
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 FEATURES
|
||||||
|
|
||||||
|
### **Automatic Positioning**
|
||||||
|
- Always centered on screen
|
||||||
|
- Responsive to screen size
|
||||||
|
- Scrolls with camera
|
||||||
|
|
||||||
|
### **Beautiful Design**
|
||||||
|
- Rounded corners
|
||||||
|
- Colored borders (based on type)
|
||||||
|
- Smooth animations
|
||||||
|
- Dark overlay behind
|
||||||
|
|
||||||
|
### **Interactive**
|
||||||
|
- Multiple buttons
|
||||||
|
- Hover effects
|
||||||
|
- Click handlers
|
||||||
|
- Auto-close option
|
||||||
|
|
||||||
|
### **Game Integration**
|
||||||
|
- Pauses game (optional)
|
||||||
|
- Sound effects
|
||||||
|
- Queue system (multiple popups)
|
||||||
|
- Priority levels
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📊 POPUP TYPES & COLORS
|
||||||
|
|
||||||
|
| Type | Color | Border | Icon | Use For |
|
||||||
|
|------|-------|--------|------|---------|
|
||||||
|
| Quest | Brown | Gold | 📜 | Quests, missions |
|
||||||
|
| Story | Dark Blue | Purple | 📖 | Story moments |
|
||||||
|
| Info | Dark Gray | Gray | ℹ️ | Information |
|
||||||
|
| Success | Dark Green | Green | ✅ | Achievements |
|
||||||
|
| Warning | Dark Red | Red | ⚠️ | Warnings |
|
||||||
|
| Error | Dark Red | Red | ❌ | Errors |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 SETTINGS
|
||||||
|
|
||||||
|
### **Enable/Disable:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.settings.enabled = false; // Disable
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Auto-Close:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.settings.autoClose = true;
|
||||||
|
scene.centralPopup.settings.autoCloseDelay = 5000; // 5 seconds
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Pause Game:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.settings.pauseGameOnPopup = true;
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Sound:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.settings.soundOnPopup = true;
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 EXAMPLES
|
||||||
|
|
||||||
|
### **Quest Accept/Decline:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showPopup({
|
||||||
|
title: 'New Quest Available',
|
||||||
|
message: 'Help the farmer harvest crops!',
|
||||||
|
type: 'quest',
|
||||||
|
icon: '📜',
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
text: 'Accept',
|
||||||
|
callback: () => {
|
||||||
|
// Start quest
|
||||||
|
scene.questSystem.startQuest('harvest_quest');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ text: 'Decline', action: 'close' }
|
||||||
|
],
|
||||||
|
autoClose: false
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Story Cutscene:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showStory(
|
||||||
|
'Day 1',
|
||||||
|
'The sun rises over your new farm. Time to get to work!',
|
||||||
|
'sunrise_image'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Achievement:**
|
||||||
|
```javascript
|
||||||
|
scene.centralPopup.showNotification(
|
||||||
|
'Achievement Unlocked: First Harvest!',
|
||||||
|
'success'
|
||||||
|
);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎉 RESULT
|
||||||
|
|
||||||
|
**Perfect for:**
|
||||||
|
- ✅ Quest dialogs
|
||||||
|
- ✅ Story moments
|
||||||
|
- ✅ Important notifications
|
||||||
|
- ✅ Achievements
|
||||||
|
- ✅ Warnings
|
||||||
|
- ✅ Any message that needs attention!
|
||||||
|
|
||||||
|
**Always visible, always centered, always beautiful!** 📋✨
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Osveži igro s F5 da vidiš!** 🔄
|
||||||
|
|
||||||
|
*Created: December 13, 2025, 01:09*
|
||||||
70
docs/EPILEPSY_WARNING_FIX.md
Normal file
70
docs/EPILEPSY_WARNING_FIX.md
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
# ✅ EPILEPSY WARNING - FIXED!
|
||||||
|
|
||||||
|
**Date**: December 13, 2025, 01:21
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 CHANGES MADE
|
||||||
|
|
||||||
|
### **1. Positioning Fixed**
|
||||||
|
- **Before**: Used `cameras.main.centerX/Y` (wrong!)
|
||||||
|
- **After**: Uses `scale.width/2` and `scale.height/2` (correct!)
|
||||||
|
|
||||||
|
### **2. Depth Increased**
|
||||||
|
- **Before**: `setDepth(10000)` (behind trees)
|
||||||
|
- **After**: `setDepth(99999)` (ALWAYS ON TOP!)
|
||||||
|
|
||||||
|
### **3. Better Design**
|
||||||
|
- Larger (700x500 instead of 600x400)
|
||||||
|
- Red border
|
||||||
|
- Bigger text
|
||||||
|
- Hover effects on buttons
|
||||||
|
|
||||||
|
### **4. Buttons Work**
|
||||||
|
- ✅ "ENABLE PROTECTION" - enables photosensitivity mode
|
||||||
|
- ✅ "CONTINUE WITHOUT" - continues without protection
|
||||||
|
- ✅ Hover effects (scale 1.1)
|
||||||
|
- ✅ Proper click handlers
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 NEW DESIGN
|
||||||
|
|
||||||
|
### **Size:**
|
||||||
|
- 700x500px (was 600x400px)
|
||||||
|
- Red border (4px)
|
||||||
|
- 98% opacity black background
|
||||||
|
|
||||||
|
### **Title:**
|
||||||
|
- 36px (was 32px)
|
||||||
|
- Red color
|
||||||
|
- Black stroke
|
||||||
|
|
||||||
|
### **Buttons:**
|
||||||
|
- Larger padding
|
||||||
|
- Hover effects
|
||||||
|
- Bold text
|
||||||
|
- Better colors
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ RESULT
|
||||||
|
|
||||||
|
### **Before:**
|
||||||
|
- Behind trees ❌
|
||||||
|
- Wrong position ❌
|
||||||
|
- Small ❌
|
||||||
|
- No hover effects ❌
|
||||||
|
|
||||||
|
### **After:**
|
||||||
|
- Always on top ✅
|
||||||
|
- Centered ✅
|
||||||
|
- Larger ✅
|
||||||
|
- Hover effects ✅
|
||||||
|
- Buttons work ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Osveži igro s F5 da vidiš!** 🔄
|
||||||
|
|
||||||
|
*Fixed: December 13, 2025, 01:21*
|
||||||
64
docs/EQUIPMENT_PANEL_FIX.md
Normal file
64
docs/EQUIPMENT_PANEL_FIX.md
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
# ✅ EQUIPMENT PANEL - FIXED!
|
||||||
|
|
||||||
|
**Date**: December 13, 2025, 01:23
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 CHANGES MADE
|
||||||
|
|
||||||
|
### **1. Size Reduced**
|
||||||
|
- **Before**: 80x80px (too big!)
|
||||||
|
- **After**: 60x60px (smaller, cleaner)
|
||||||
|
|
||||||
|
### **2. Position Moved**
|
||||||
|
- **Before**: Y=150 (blocking view)
|
||||||
|
- **After**: Y=400 (lower, out of way)
|
||||||
|
|
||||||
|
### **3. Farm Theme Colors**
|
||||||
|
- **Before**: Black (0x000000)
|
||||||
|
- **After**: Brown wood (0x4a3520)
|
||||||
|
- Added brown border
|
||||||
|
|
||||||
|
### **4. Text Simplified**
|
||||||
|
- **Before**: "EQUIPPED" + tool name
|
||||||
|
- **After**: "TOOL" only (name hidden)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 NEW DESIGN
|
||||||
|
|
||||||
|
### **Size:**
|
||||||
|
- 60x60px (was 80x80px)
|
||||||
|
- 25% smaller!
|
||||||
|
|
||||||
|
### **Colors:**
|
||||||
|
- Background: Brown wood
|
||||||
|
- Border: Saddle brown
|
||||||
|
- Label: Gold
|
||||||
|
|
||||||
|
### **Position:**
|
||||||
|
- Left side
|
||||||
|
- Y=400 (lower)
|
||||||
|
- Doesn't block HP bars
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ RESULT
|
||||||
|
|
||||||
|
### **Before:**
|
||||||
|
- Too big ❌
|
||||||
|
- Blocking view ❌
|
||||||
|
- Black color ❌
|
||||||
|
- Too much text ❌
|
||||||
|
|
||||||
|
### **After:**
|
||||||
|
- Smaller ✅
|
||||||
|
- Out of way ✅
|
||||||
|
- Farm colors ✅
|
||||||
|
- Simple ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Osveži igro s F5 da vidiš!** 🔄
|
||||||
|
|
||||||
|
*Fixed: December 13, 2025, 01:23*
|
||||||
53
docs/KAKO_OSVEZITI.md
Normal file
53
docs/KAKO_OSVEZITI.md
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
# 🔄 KAKO OSVEŽITI IGRO
|
||||||
|
|
||||||
|
**Namesto restarta aplikacije, samo osveži!**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 HITRI NAČIN
|
||||||
|
|
||||||
|
### **Windows/Linux:**
|
||||||
|
- Pritisni **F5** ali **Ctrl + R**
|
||||||
|
|
||||||
|
### **macOS:**
|
||||||
|
- Pritisni **Cmd + R**
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💡 KDAJ OSVEŽITI?
|
||||||
|
|
||||||
|
### **Po Spremembah Kode:**
|
||||||
|
1. Shrani datoteko
|
||||||
|
2. Pritisni **F5** v igri
|
||||||
|
3. Igra se ponovno naloži
|
||||||
|
|
||||||
|
### **Po Napakah:**
|
||||||
|
1. Pritisni **F5**
|
||||||
|
2. Preveri konzolo (F12)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 HITRI RELOAD
|
||||||
|
|
||||||
|
**Electron** podpira **hot reload**:
|
||||||
|
- Spremeni kodo
|
||||||
|
- Shrani
|
||||||
|
- Pritisni **F5**
|
||||||
|
- Igra se osveži!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ KDAJ RESTART?
|
||||||
|
|
||||||
|
**Restart aplikacije potrebuješ SAMO če:**
|
||||||
|
- Spreminjaš `package.json`
|
||||||
|
- Dodajaš nove npm pakete
|
||||||
|
- Spreminjaš Electron konfiguraciju
|
||||||
|
|
||||||
|
**Sicer samo F5!** ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**HITRO IN ENOSTAVNO!** 🎉
|
||||||
|
|
||||||
|
*Samo F5 namesto celotnega restarta!*
|
||||||
185
docs/KEYBOARD_SHORTCUTS.md
Normal file
185
docs/KEYBOARD_SHORTCUTS.md
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
# ⌨️ KEYBOARD SHORTCUTS - Complete List
|
||||||
|
|
||||||
|
**Date**: December 13, 2025, 01:27
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 MOVEMENT & BASIC CONTROLS
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **W/A/S/D** | Move player | Player.js |
|
||||||
|
| **SPACE** | Attack / Fishing catch | Player.js, FishingSystem.js |
|
||||||
|
| **E** | Interact | InteractionSystem.js |
|
||||||
|
| **ESC** | Pause menu | UIScene.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔢 INVENTORY & SLOTS
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **1-9** | Select inventory slot | GameScene.js |
|
||||||
|
| **ONE** | Select slot 1 | GameScene.js |
|
||||||
|
| **TWO** | Select slot 2 | GameScene.js |
|
||||||
|
| **THREE** | Select slot 3 | GameScene.js |
|
||||||
|
| **FOUR** | Select slot 4 | GameScene.js |
|
||||||
|
| **FIVE** | Select slot 5 | GameScene.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏗️ BUILD & CRAFT
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **B** | Toggle build mode | GameScene.js |
|
||||||
|
| **C** | Toggle crafting menu | UIScene.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎣 FISHING
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **R** | Cast fishing rod | FishingSystem.js |
|
||||||
|
| **SPACE** | Catch fish | FishingSystem.js |
|
||||||
|
| **LEFT** | Move bobber left | FishingSystem.js |
|
||||||
|
| **RIGHT** | Move bobber right | FishingSystem.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 👥 BREEDING & ANIMALS
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **F** | Toggle breeding UI | BreedingUISystem.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎬 CAMERA & SCREENSHOTS
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **F6** | Start camera mode | CameraSystem.js |
|
||||||
|
| **F7** | Take screenshot | CameraSystem.js |
|
||||||
|
| **F8** | Toggle cinematic mode | CameraSystem.js |
|
||||||
|
| **F10** | Stop camera mode | CameraSystem.js |
|
||||||
|
| **PAGEUP** | Zoom in | CameraSystem.js |
|
||||||
|
| **PAGEDOWN** | Zoom out | CameraSystem.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 💾 SAVE & LOAD
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **F5** | Quick save | UIScene.js |
|
||||||
|
| **F8** | Save game | GameScene.js |
|
||||||
|
| **F9** | Load game | GameScene.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🐉 DEBUG & TESTING
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **K** | Spawn boss | GameScene.js |
|
||||||
|
| **J** | Toggle joystick | UIScene.js |
|
||||||
|
| **Q** | Toggle quest tracker | UIScene.js |
|
||||||
|
| **M** | Toggle map | GameScene.js |
|
||||||
|
| **F3** | Toggle performance monitor | PerformanceMonitor.js |
|
||||||
|
| **F4** | Reload game | GameScene.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ♿ ACCESSIBILITY (Screen Reader)
|
||||||
|
|
||||||
|
| Key | Action | Location |
|
||||||
|
|-----|--------|----------|
|
||||||
|
| **Ctrl+H** | Help | ScreenReaderSystem.js |
|
||||||
|
| **Ctrl+R** | Repeat last | ScreenReaderSystem.js |
|
||||||
|
| **Ctrl+S** | Settings | ScreenReaderSystem.js |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚠️ CONFLICTS DETECTED!
|
||||||
|
|
||||||
|
### **F8 - DOUBLE USAGE:**
|
||||||
|
- ❌ Save game (GameScene.js)
|
||||||
|
- ❌ Toggle cinematic mode (CameraSystem.js)
|
||||||
|
- ❌ Save game (UIScene.js)
|
||||||
|
|
||||||
|
### **K - DOUBLE USAGE:**
|
||||||
|
- ❌ Spawn boss (GameScene.js)
|
||||||
|
- ❌ Toggle joystick (UIScene.js)
|
||||||
|
|
||||||
|
### **R - DOUBLE USAGE:**
|
||||||
|
- ❌ Cast fishing rod (FishingSystem.js)
|
||||||
|
- ❌ Repeat last (ScreenReaderSystem.js - needs Ctrl)
|
||||||
|
|
||||||
|
### **E - DOUBLE USAGE:**
|
||||||
|
- ❌ Interact (InteractionSystem.js)
|
||||||
|
- ❌ Unknown (UIScene.js)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✅ RECOMMENDED FIXES
|
||||||
|
|
||||||
|
### **Save/Load:**
|
||||||
|
- **F5** = Quick save ✅
|
||||||
|
- **F9** = Load game ✅
|
||||||
|
- **Remove F8** from save (use F5 only)
|
||||||
|
|
||||||
|
### **Camera:**
|
||||||
|
- **F6** = Start camera mode ✅
|
||||||
|
- **F7** = Screenshot ✅
|
||||||
|
- **F8** = Cinematic mode ✅
|
||||||
|
- **F10** = Stop camera ✅
|
||||||
|
|
||||||
|
### **Debug:**
|
||||||
|
- **K** = Spawn boss ✅
|
||||||
|
- **J** = Toggle joystick ✅
|
||||||
|
- **Remove K** from UIScene
|
||||||
|
|
||||||
|
### **Stats Panel (NEW):**
|
||||||
|
- **TAB** = Toggle stats panel (AVAILABLE!)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 FINAL ORGANIZED LIST
|
||||||
|
|
||||||
|
### **A-Z Keys:**
|
||||||
|
- **B** = Build mode
|
||||||
|
- **C** = Crafting
|
||||||
|
- **E** = Interact
|
||||||
|
- **F** = Breeding UI
|
||||||
|
- **J** = Joystick toggle
|
||||||
|
- **K** = Spawn boss
|
||||||
|
- **M** = Map
|
||||||
|
- **Q** = Quest tracker
|
||||||
|
- **R** = Fishing cast
|
||||||
|
- **W/A/S/D** = Movement
|
||||||
|
|
||||||
|
### **Function Keys:**
|
||||||
|
- **F3** = Performance monitor
|
||||||
|
- **F4** = Reload game
|
||||||
|
- **F5** = Quick save
|
||||||
|
- **F6** = Camera mode
|
||||||
|
- **F7** = Screenshot
|
||||||
|
- **F8** = Cinematic mode
|
||||||
|
- **F9** = Load game
|
||||||
|
- **F10** = Stop camera
|
||||||
|
|
||||||
|
### **Special Keys:**
|
||||||
|
- **ESC** = Pause
|
||||||
|
- **SPACE** = Attack/Catch
|
||||||
|
- **TAB** = Stats panel (NEW!)
|
||||||
|
- **1-9** = Inventory slots
|
||||||
|
- **LEFT/RIGHT** = Fishing bobber
|
||||||
|
- **PAGEUP/DOWN** = Zoom
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**All shortcuts organized!** ✅
|
||||||
|
|
||||||
|
*Created: December 13, 2025, 01:27*
|
||||||
42
docs/STATS_PANEL_PLAN.md
Normal file
42
docs/STATS_PANEL_PLAN.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# 📋 STATS PANEL - Toggle System
|
||||||
|
|
||||||
|
**Plan**: Make stats panel toggleable and follow player
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 CHANGES TO MAKE
|
||||||
|
|
||||||
|
### **1. Toggle on/off**
|
||||||
|
- Press TAB to show/hide
|
||||||
|
- Not always visible
|
||||||
|
- Clean screen when not needed
|
||||||
|
|
||||||
|
### **2. Follow Player**
|
||||||
|
- Panel appears near player
|
||||||
|
- Not fixed to screen
|
||||||
|
- Moves with character
|
||||||
|
|
||||||
|
### **3. Better Design**
|
||||||
|
- Transparent background
|
||||||
|
- Smaller size
|
||||||
|
- Only essential info
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 IMPLEMENTATION
|
||||||
|
|
||||||
|
### **Key Binding:**
|
||||||
|
- TAB = Toggle stats panel
|
||||||
|
|
||||||
|
### **Position:**
|
||||||
|
- Above player character
|
||||||
|
- Offset: (-50, -100) from player
|
||||||
|
|
||||||
|
### **Content:**
|
||||||
|
- HP, Hunger, Thirst
|
||||||
|
- Level, XP
|
||||||
|
- Current tool
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Will implement this next!** ✅
|
||||||
89
docs/UI_IMPROVEMENTS.md
Normal file
89
docs/UI_IMPROVEMENTS.md
Normal file
@@ -0,0 +1,89 @@
|
|||||||
|
# ✅ UI IMPROVEMENTS - Farm Theme!
|
||||||
|
|
||||||
|
**Date**: December 13, 2025, 01:12
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔧 CHANGES MADE
|
||||||
|
|
||||||
|
### **1. Central Popup System** ✅
|
||||||
|
- Popups appear in **CENTER** of screen
|
||||||
|
- Always **in front** of player
|
||||||
|
- Easy to read
|
||||||
|
- Beautiful animations
|
||||||
|
- For quests, story, notifications
|
||||||
|
|
||||||
|
### **2. Zombie & Farm Panels MOVED** ✅
|
||||||
|
- **Before**: Left side (blocking view)
|
||||||
|
- **After**: Right side (below minimap)
|
||||||
|
- No longer blocking important areas!
|
||||||
|
|
||||||
|
### **3. Farm-Friendly Colors** ✅
|
||||||
|
- **Before**: Dark purple/black (too dark)
|
||||||
|
- **After**: Brown/green farm colors
|
||||||
|
- Zombie panel: Brown wood (🪵)
|
||||||
|
- Farm panel: Green fields (🌾)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎨 NEW COLOR SCHEME
|
||||||
|
|
||||||
|
### **Zombie Worker Panel:**
|
||||||
|
- Background: Brown wood (`0x4a3520`)
|
||||||
|
- Border: Saddle brown (`0x8B4513`)
|
||||||
|
- Title: Gold (`#FFD700`)
|
||||||
|
- Text: Light green (`#90EE90`)
|
||||||
|
|
||||||
|
### **Farm Stats Panel:**
|
||||||
|
- Background: Dark green (`0x2a4a2a`)
|
||||||
|
- Border: Light green (`0x90EE90`)
|
||||||
|
- Title: Light green (`#90EE90`)
|
||||||
|
- Text: Gold (`#FFD700`)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📍 NEW POSITIONS
|
||||||
|
|
||||||
|
### **Right Side Layout:**
|
||||||
|
```
|
||||||
|
Top-Right:
|
||||||
|
├─ Mini Map (80px from top)
|
||||||
|
├─ Clock (20px from top)
|
||||||
|
├─ Gold Display (70px from top)
|
||||||
|
├─ Gen/Age (110px from top)
|
||||||
|
├─ Zombie Panel (200px from top) ← NEW
|
||||||
|
└─ Farm Panel (350px from top) ← NEW
|
||||||
|
```
|
||||||
|
|
||||||
|
### **Left Side (Now Clear!):**
|
||||||
|
```
|
||||||
|
Left Side:
|
||||||
|
├─ HP Bar
|
||||||
|
├─ Hunger Bar
|
||||||
|
├─ Thirst Bar
|
||||||
|
├─ XP Bar
|
||||||
|
└─ Level Display
|
||||||
|
```
|
||||||
|
|
||||||
|
**No more overlapping!** ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 RESULT
|
||||||
|
|
||||||
|
### **Before:**
|
||||||
|
- Panels on left blocking view ❌
|
||||||
|
- Dark purple/black colors ❌
|
||||||
|
- Hard to see important info ❌
|
||||||
|
|
||||||
|
### **After:**
|
||||||
|
- Panels on right, organized ✅
|
||||||
|
- Farm-friendly brown/green ✅
|
||||||
|
- Clear view of game ✅
|
||||||
|
- Easy to read ✅
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Osveži igro s F5 da vidiš spremembe!** 🔄
|
||||||
|
|
||||||
|
*Updated: December 13, 2025, 01:12*
|
||||||
@@ -155,6 +155,7 @@
|
|||||||
<script src="src/systems/TechnicalPerformanceSystem.js"></script> <!-- Technical & Performance -->
|
<script src="src/systems/TechnicalPerformanceSystem.js"></script> <!-- Technical & Performance -->
|
||||||
<script src="src/systems/PlatformSupportSystem.js"></script> <!-- Platform Support -->
|
<script src="src/systems/PlatformSupportSystem.js"></script> <!-- Platform Support -->
|
||||||
<script src="src/systems/SaveSystemExpansion.js"></script> <!-- Save System Expansion -->
|
<script src="src/systems/SaveSystemExpansion.js"></script> <!-- Save System Expansion -->
|
||||||
|
<script src="src/systems/CentralPopupSystem.js"></script> <!-- Central Popup System -->
|
||||||
<script src="src/systems/CameraSystem.js"></script> <!-- Camera System (Trailer/Screenshots) -->
|
<script src="src/systems/CameraSystem.js"></script> <!-- Camera System (Trailer/Screenshots) -->
|
||||||
|
|
||||||
<!-- Entities -->
|
<!-- Entities -->
|
||||||
|
|||||||
@@ -41,8 +41,8 @@ ErrorHandler.init();
|
|||||||
// Phaser Game Configuration
|
// Phaser Game Configuration
|
||||||
const config = {
|
const config = {
|
||||||
type: Phaser.CANVAS, // Canvas renderer za pixel-perfect ostrino
|
type: Phaser.CANVAS, // Canvas renderer za pixel-perfect ostrino
|
||||||
width: 640, // Pixel Art Viewport
|
width: 1024, // Larger viewport for better view
|
||||||
height: 360, // Pixel Art Viewport (16:9)
|
height: 768, // 4:3 aspect ratio
|
||||||
parent: 'game-container',
|
parent: 'game-container',
|
||||||
backgroundColor: '#1a1a2e',
|
backgroundColor: '#1a1a2e',
|
||||||
pixelArt: true,
|
pixelArt: true,
|
||||||
|
|||||||
@@ -2185,54 +2185,54 @@ class UIScene extends Phaser.Scene {
|
|||||||
createZombieStatsPanel() {
|
createZombieStatsPanel() {
|
||||||
const panelWidth = 180;
|
const panelWidth = 180;
|
||||||
const panelHeight = 130;
|
const panelHeight = 130;
|
||||||
const x = 20;
|
const x = this.scale.width - panelWidth - 20; // RIGHT SIDE
|
||||||
const y = 120; // Below player stats
|
const y = 200; // Below minimap
|
||||||
|
|
||||||
// Container
|
// Container
|
||||||
this.zombieStatsContainer = this.add.container(x, y);
|
this.zombieStatsContainer = this.add.container(x, y);
|
||||||
this.zombieStatsContainer.setDepth(1000);
|
this.zombieStatsContainer.setDepth(1000);
|
||||||
|
|
||||||
// Background
|
// Background - FARM THEME
|
||||||
const bg = this.add.graphics();
|
const bg = this.add.graphics();
|
||||||
bg.fillStyle(0x1a1a2e, 0.9);
|
bg.fillStyle(0x4a3520, 0.9); // Brown wood
|
||||||
bg.fillRect(0, 0, panelWidth, panelHeight);
|
bg.fillRect(0, 0, panelWidth, panelHeight);
|
||||||
bg.lineStyle(2, 0x8a2be2, 0.8); // Purple border
|
bg.lineStyle(3, 0x8B4513, 0.8); // Saddle brown
|
||||||
bg.strokeRect(0, 0, panelWidth, panelHeight);
|
bg.strokeRect(0, 0, panelWidth, panelHeight);
|
||||||
this.zombieStatsContainer.add(bg);
|
this.zombieStatsContainer.add(bg);
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
const title = this.add.text(panelWidth / 2, 12, '🧟 ZOMBIE', {
|
const title = this.add.text(panelWidth / 2, 12, '🧟 WORKER', {
|
||||||
fontSize: '12px',
|
fontSize: '14px',
|
||||||
fontFamily: 'Courier New',
|
fontFamily: 'Arial',
|
||||||
fill: '#8a2be2',
|
fill: '#FFD700',
|
||||||
fontStyle: 'bold'
|
fontStyle: 'bold'
|
||||||
}).setOrigin(0.5);
|
}).setOrigin(0.5);
|
||||||
this.zombieStatsContainer.add(title);
|
this.zombieStatsContainer.add(title);
|
||||||
|
|
||||||
// Stats Text
|
// Stats Text
|
||||||
this.zombieNameText = this.add.text(8, 30, 'Name: Worker #1', {
|
this.zombieNameText = this.add.text(8, 35, 'Name: Worker #1', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#ffffff'
|
fill: '#ffffff'
|
||||||
});
|
});
|
||||||
this.zombieStatsContainer.add(this.zombieNameText);
|
this.zombieStatsContainer.add(this.zombieNameText);
|
||||||
|
|
||||||
this.zombieTaskText = this.add.text(8, 48, 'Task: IDLE', {
|
this.zombieTaskText = this.add.text(8, 53, 'Task: IDLE', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#ffff00'
|
fill: '#90EE90'
|
||||||
});
|
});
|
||||||
this.zombieStatsContainer.add(this.zombieTaskText);
|
this.zombieStatsContainer.add(this.zombieTaskText);
|
||||||
|
|
||||||
this.zombieLevelText = this.add.text(8, 66, 'Level: 1 (0/100 XP)', {
|
this.zombieLevelText = this.add.text(8, 71, 'Level: 1 (0/100 XP)', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#00ff00'
|
fill: '#FFD700'
|
||||||
});
|
});
|
||||||
this.zombieStatsContainer.add(this.zombieLevelText);
|
this.zombieStatsContainer.add(this.zombieLevelText);
|
||||||
|
|
||||||
// Energy Bar
|
// Energy Bar
|
||||||
const energyLabel = this.add.text(8, 84, 'ENERGY:', { fontSize: '9px', fill: '#aaaaaa' });
|
const energyLabel = this.add.text(8, 89, 'ENERGY:', { fontSize: '10px', fill: '#cccccc' });
|
||||||
this.zombieStatsContainer.add(energyLabel);
|
this.zombieStatsContainer.add(energyLabel);
|
||||||
|
|
||||||
this.zombieEnergyBar = this.drawMiniBar(8, 98, panelWidth - 16, 12, 0x00aaff, 100);
|
this.zombieEnergyBar = this.drawMiniBar(8, 103, panelWidth - 16, 12, 0x90EE90, 100);
|
||||||
this.zombieStatsContainer.add(this.zombieEnergyBar.bg);
|
this.zombieStatsContainer.add(this.zombieEnergyBar.bg);
|
||||||
this.zombieStatsContainer.add(this.zombieEnergyBar.fill);
|
this.zombieStatsContainer.add(this.zombieEnergyBar.fill);
|
||||||
|
|
||||||
@@ -2243,51 +2243,51 @@ class UIScene extends Phaser.Scene {
|
|||||||
createFarmStatsPanel() {
|
createFarmStatsPanel() {
|
||||||
const panelWidth = 180;
|
const panelWidth = 180;
|
||||||
const panelHeight = 110;
|
const panelHeight = 110;
|
||||||
const x = 20;
|
const x = this.scale.width - panelWidth - 20; // RIGHT SIDE
|
||||||
const y = 270; // Below zombie stats
|
const y = 350; // Below zombie stats
|
||||||
|
|
||||||
// Container
|
// Container
|
||||||
this.farmStatsContainer = this.add.container(x, y);
|
this.farmStatsContainer = this.add.container(x, y);
|
||||||
this.farmStatsContainer.setDepth(1000);
|
this.farmStatsContainer.setDepth(1000);
|
||||||
|
|
||||||
// Background
|
// Background - FARM THEME
|
||||||
const bg = this.add.graphics();
|
const bg = this.add.graphics();
|
||||||
bg.fillStyle(0x1a2e1a, 0.9);
|
bg.fillStyle(0x2a4a2a, 0.9); // Dark green
|
||||||
bg.fillRect(0, 0, panelWidth, panelHeight);
|
bg.fillRect(0, 0, panelWidth, panelHeight);
|
||||||
bg.lineStyle(2, 0x00ff00, 0.8); // Green border
|
bg.lineStyle(3, 0x90EE90, 0.8); // Light green border
|
||||||
bg.strokeRect(0, 0, panelWidth, panelHeight);
|
bg.strokeRect(0, 0, panelWidth, panelHeight);
|
||||||
this.farmStatsContainer.add(bg);
|
this.farmStatsContainer.add(bg);
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
const title = this.add.text(panelWidth / 2, 12, '🌾 FARM', {
|
const title = this.add.text(panelWidth / 2, 12, '🌾 FARM', {
|
||||||
fontSize: '12px',
|
fontSize: '14px',
|
||||||
fontFamily: 'Courier New',
|
fontFamily: 'Arial',
|
||||||
fill: '#00ff00',
|
fill: '#90EE90',
|
||||||
fontStyle: 'bold'
|
fontStyle: 'bold'
|
||||||
}).setOrigin(0.5);
|
}).setOrigin(0.5);
|
||||||
this.farmStatsContainer.add(title);
|
this.farmStatsContainer.add(title);
|
||||||
|
|
||||||
// Stats
|
// Stats
|
||||||
this.farmCropsPlantedText = this.add.text(8, 32, 'Planted: 0', {
|
this.farmCropsPlantedText = this.add.text(8, 35, 'Planted: 0', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#ffffff'
|
fill: '#ffffff'
|
||||||
});
|
});
|
||||||
this.farmStatsContainer.add(this.farmCropsPlantedText);
|
this.farmStatsContainer.add(this.farmCropsPlantedText);
|
||||||
|
|
||||||
this.farmCropsHarvestedText = this.add.text(8, 50, 'Harvested: 0', {
|
this.farmCropsHarvestedText = this.add.text(8, 53, 'Harvested: 0', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#ffff00'
|
fill: '#FFD700'
|
||||||
});
|
});
|
||||||
this.farmStatsContainer.add(this.farmCropsHarvestedText);
|
this.farmStatsContainer.add(this.farmCropsHarvestedText);
|
||||||
|
|
||||||
this.farmGoldEarnedText = this.add.text(8, 68, 'Gold: 0g', {
|
this.farmGoldEarnedText = this.add.text(8, 71, 'Gold: 0g', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#ffd700'
|
fill: '#FFD700'
|
||||||
});
|
});
|
||||||
this.farmStatsContainer.add(this.farmGoldEarnedText);
|
this.farmStatsContainer.add(this.farmGoldEarnedText);
|
||||||
|
|
||||||
this.farmDaysText = this.add.text(8, 86, 'Days: 0', {
|
this.farmDaysText = this.add.text(8, 89, 'Days: 0', {
|
||||||
fontSize: '10px',
|
fontSize: '11px',
|
||||||
fill: '#aaaaaa'
|
fill: '#aaaaaa'
|
||||||
});
|
});
|
||||||
this.farmStatsContainer.add(this.farmDaysText);
|
this.farmStatsContainer.add(this.farmDaysText);
|
||||||
@@ -2490,47 +2490,50 @@ class UIScene extends Phaser.Scene {
|
|||||||
// Equipment Preview
|
// Equipment Preview
|
||||||
createEquipmentPreview() {
|
createEquipmentPreview() {
|
||||||
const previewX = 20;
|
const previewX = 20;
|
||||||
const previewY = 150;
|
const previewY = 400; // MOVED LOWER (was 150)
|
||||||
|
|
||||||
// Background
|
// Background - SMALLER
|
||||||
this.equipmentBg = this.add.graphics();
|
this.equipmentBg = this.add.graphics();
|
||||||
this.equipmentBg.fillStyle(0x000000, 0.6);
|
this.equipmentBg.fillStyle(0x4a3520, 0.8); // Brown wood color
|
||||||
this.equipmentBg.fillRoundedRect(previewX, previewY, 80, 80, 8);
|
this.equipmentBg.fillRoundedRect(previewX, previewY, 60, 60, 8); // 60x60 (was 80x80)
|
||||||
|
this.equipmentBg.lineStyle(2, 0x8B4513, 1);
|
||||||
|
this.equipmentBg.strokeRoundedRect(previewX, previewY, 60, 60, 8);
|
||||||
this.equipmentBg.setScrollFactor(0);
|
this.equipmentBg.setScrollFactor(0);
|
||||||
this.equipmentBg.setDepth(1000);
|
this.equipmentBg.setDepth(1000);
|
||||||
|
|
||||||
// Label
|
// Label - SMALLER
|
||||||
this.equipmentLabel = this.add.text(
|
this.equipmentLabel = this.add.text(
|
||||||
previewX + 40,
|
previewX + 30,
|
||||||
previewY - 5,
|
previewY - 5,
|
||||||
'EQUIPPED',
|
'TOOL',
|
||||||
{
|
{
|
||||||
font: 'bold 10px Arial',
|
font: 'bold 9px Arial',
|
||||||
fill: '#ffff00'
|
fill: '#FFD700'
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
this.equipmentLabel.setOrigin(0.5, 1);
|
this.equipmentLabel.setOrigin(0.5, 1);
|
||||||
this.equipmentLabel.setScrollFactor(0);
|
this.equipmentLabel.setScrollFactor(0);
|
||||||
this.equipmentLabel.setDepth(1001);
|
this.equipmentLabel.setDepth(1001);
|
||||||
|
|
||||||
// Icon sprite placeholder
|
// Icon sprite placeholder - SMALLER
|
||||||
this.equipmentIcon = this.add.rectangle(previewX + 40, previewY + 40, 32, 32, 0x888888);
|
this.equipmentIcon = this.add.rectangle(previewX + 30, previewY + 30, 24, 24, 0x888888);
|
||||||
this.equipmentIcon.setScrollFactor(0);
|
this.equipmentIcon.setScrollFactor(0);
|
||||||
this.equipmentIcon.setDepth(1001);
|
this.equipmentIcon.setDepth(1001);
|
||||||
|
|
||||||
// Tool name
|
// Tool name - HIDDEN (too much text)
|
||||||
this.equipmentName = this.add.text(
|
this.equipmentName = this.add.text(
|
||||||
previewX + 40,
|
previewX + 30,
|
||||||
previewY + 75,
|
previewY + 50,
|
||||||
'None',
|
'',
|
||||||
{
|
{
|
||||||
font: 'bold 12px Arial',
|
font: 'bold 8px Arial',
|
||||||
fill: '#ffffff'
|
fill: '#ffffff'
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
this.equipmentName.setOrigin(0.5, 0);
|
this.equipmentName.setOrigin(0.5, 0);
|
||||||
this.equipmentName.setScrollFactor(0);
|
this.equipmentName.setScrollFactor(0);
|
||||||
this.equipmentName.setDepth(1001);
|
this.equipmentName.setDepth(1001);
|
||||||
|
this.equipmentName.setVisible(false); // HIDDEN
|
||||||
|
|
||||||
console.log('🎮 Equipment preview created!');
|
console.log('🎮 Equipment preview created!');
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -283,42 +283,53 @@ class AccessibilitySystem {
|
|||||||
|
|
||||||
// EPILEPSY WARNING
|
// EPILEPSY WARNING
|
||||||
showEpilepsyWarning(onContinue) {
|
showEpilepsyWarning(onContinue) {
|
||||||
const warning = this.scene.add.container(
|
// Get UIScene for proper positioning
|
||||||
this.scene.cameras.main.centerX,
|
const uiScene = this.scene.scene.get('UIScene') || this.scene;
|
||||||
this.scene.cameras.main.centerY
|
|
||||||
|
const warning = uiScene.add.container(
|
||||||
|
uiScene.scale.width / 2,
|
||||||
|
uiScene.scale.height / 2
|
||||||
);
|
);
|
||||||
warning.setDepth(10000);
|
warning.setDepth(99999); // ALWAYS ON TOP
|
||||||
warning.setScrollFactor(0);
|
warning.setScrollFactor(0);
|
||||||
|
|
||||||
const bg = this.scene.add.rectangle(0, 0, 600, 400, 0x000000, 0.95);
|
// Dark background overlay
|
||||||
|
const bg = uiScene.add.rectangle(0, 0, 700, 500, 0x000000, 0.98);
|
||||||
|
bg.setStrokeStyle(4, 0xff0000);
|
||||||
|
|
||||||
const title = this.scene.add.text(0, -150, '⚠️ EPILEPSY WARNING', {
|
const title = uiScene.add.text(0, -180, '⚠️ EPILEPSY WARNING', {
|
||||||
fontSize: '32px',
|
fontSize: '36px',
|
||||||
color: '#ff0000',
|
color: '#ff0000',
|
||||||
fontStyle: 'bold'
|
fontStyle: 'bold',
|
||||||
|
stroke: '#000000',
|
||||||
|
strokeThickness: 4
|
||||||
}).setOrigin(0.5);
|
}).setOrigin(0.5);
|
||||||
|
|
||||||
const text = this.scene.add.text(0, -50,
|
const text = uiScene.add.text(0, -60,
|
||||||
'This game contains flashing lights\n' +
|
'This game contains flashing lights\n' +
|
||||||
'that may trigger seizures in people with\n' +
|
'that may trigger seizures in people with\n' +
|
||||||
'photosensitive epilepsy.\n\n' +
|
'photosensitive epilepsy.\n\n' +
|
||||||
'Player discretion is advised.',
|
'Player discretion is advised.',
|
||||||
{
|
{
|
||||||
fontSize: '18px',
|
fontSize: '20px',
|
||||||
color: '#ffffff',
|
color: '#ffffff',
|
||||||
align: 'center',
|
align: 'center',
|
||||||
wordWrap: { width: 500 }
|
wordWrap: { width: 600 },
|
||||||
|
lineSpacing: 8
|
||||||
}
|
}
|
||||||
).setOrigin(0.5);
|
).setOrigin(0.5);
|
||||||
|
|
||||||
const enableBtn = this.scene.add.text(0, 100, '[ ENABLE PROTECTION ]', {
|
const enableBtn = uiScene.add.text(0, 120, '[ ENABLE PROTECTION ]', {
|
||||||
fontSize: '20px',
|
fontSize: '24px',
|
||||||
color: '#00ff00',
|
color: '#00ff00',
|
||||||
backgroundColor: '#003300',
|
backgroundColor: '#003300',
|
||||||
padding: { x: 20, y: 10 }
|
padding: { x: 30, y: 15 },
|
||||||
|
fontStyle: 'bold'
|
||||||
}).setOrigin(0.5);
|
}).setOrigin(0.5);
|
||||||
|
|
||||||
enableBtn.setInteractive({ useHandCursor: true });
|
enableBtn.setInteractive({ useHandCursor: true });
|
||||||
|
enableBtn.on('pointerover', () => enableBtn.setScale(1.1));
|
||||||
|
enableBtn.on('pointerout', () => enableBtn.setScale(1.0));
|
||||||
enableBtn.on('pointerdown', () => {
|
enableBtn.on('pointerdown', () => {
|
||||||
this.settings.photosensitivity = true;
|
this.settings.photosensitivity = true;
|
||||||
this.applySettings();
|
this.applySettings();
|
||||||
@@ -327,12 +338,16 @@ class AccessibilitySystem {
|
|||||||
if (onContinue) onContinue();
|
if (onContinue) onContinue();
|
||||||
});
|
});
|
||||||
|
|
||||||
const continueBtn = this.scene.add.text(0, 150, '[ CONTINUE WITHOUT ]', {
|
const continueBtn = uiScene.add.text(0, 180, '[ CONTINUE WITHOUT ]', {
|
||||||
fontSize: '16px',
|
fontSize: '18px',
|
||||||
color: '#888888'
|
color: '#888888',
|
||||||
|
backgroundColor: '#222222',
|
||||||
|
padding: { x: 20, y: 10 }
|
||||||
}).setOrigin(0.5);
|
}).setOrigin(0.5);
|
||||||
|
|
||||||
continueBtn.setInteractive({ useHandCursor: true });
|
continueBtn.setInteractive({ useHandCursor: true });
|
||||||
|
continueBtn.on('pointerover', () => continueBtn.setScale(1.1));
|
||||||
|
continueBtn.on('pointerout', () => continueBtn.setScale(1.0));
|
||||||
continueBtn.on('pointerdown', () => {
|
continueBtn.on('pointerdown', () => {
|
||||||
warning.destroy();
|
warning.destroy();
|
||||||
if (onContinue) onContinue();
|
if (onContinue) onContinue();
|
||||||
|
|||||||
359
src/systems/CentralPopupSystem.js
Normal file
359
src/systems/CentralPopupSystem.js
Normal file
@@ -0,0 +1,359 @@
|
|||||||
|
/**
|
||||||
|
* CENTRAL POPUP SYSTEM
|
||||||
|
* Displays important messages, quests, and dialogs in center of screen
|
||||||
|
* Always appears in front of player for easy reading
|
||||||
|
*/
|
||||||
|
class CentralPopupSystem {
|
||||||
|
constructor(scene) {
|
||||||
|
this.scene = scene;
|
||||||
|
this.enabled = true;
|
||||||
|
|
||||||
|
// Current popup
|
||||||
|
this.currentPopup = null;
|
||||||
|
this.popupQueue = [];
|
||||||
|
this.isShowing = false;
|
||||||
|
|
||||||
|
// Settings
|
||||||
|
this.settings = {
|
||||||
|
enabled: true,
|
||||||
|
autoClose: true,
|
||||||
|
autoCloseDelay: 5000, // 5 seconds
|
||||||
|
pauseGameOnPopup: true,
|
||||||
|
soundOnPopup: true
|
||||||
|
};
|
||||||
|
|
||||||
|
this.loadSettings();
|
||||||
|
console.log('✅ Central Popup System initialized');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show popup in center of screen
|
||||||
|
*/
|
||||||
|
showPopup(config) {
|
||||||
|
const popup = {
|
||||||
|
title: config.title || 'Notification',
|
||||||
|
message: config.message || '',
|
||||||
|
type: config.type || 'info', // info, quest, warning, success, story
|
||||||
|
icon: config.icon || '📋',
|
||||||
|
buttons: config.buttons || [{ text: 'OK', action: 'close' }],
|
||||||
|
image: config.image || null,
|
||||||
|
autoClose: config.autoClose !== undefined ? config.autoClose : this.settings.autoClose,
|
||||||
|
onClose: config.onClose || null,
|
||||||
|
priority: config.priority || 'normal' // low, normal, high, critical
|
||||||
|
};
|
||||||
|
|
||||||
|
// Add to queue
|
||||||
|
this.popupQueue.push(popup);
|
||||||
|
|
||||||
|
// Show if not already showing
|
||||||
|
if (!this.isShowing) {
|
||||||
|
this.displayNextPopup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Display next popup from queue
|
||||||
|
*/
|
||||||
|
displayNextPopup() {
|
||||||
|
if (this.popupQueue.length === 0) {
|
||||||
|
this.isShowing = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isShowing = true;
|
||||||
|
const popup = this.popupQueue.shift();
|
||||||
|
|
||||||
|
// Get UIScene
|
||||||
|
const uiScene = this.scene.scene.get('UIScene');
|
||||||
|
if (!uiScene) return;
|
||||||
|
|
||||||
|
// Pause game if needed
|
||||||
|
if (this.settings.pauseGameOnPopup) {
|
||||||
|
this.scene.physics.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create popup container
|
||||||
|
const centerX = uiScene.scale.width / 2;
|
||||||
|
const centerY = uiScene.scale.height / 2;
|
||||||
|
|
||||||
|
this.currentPopup = uiScene.add.container(centerX, centerY);
|
||||||
|
this.currentPopup.setDepth(10000); // Always on top
|
||||||
|
this.currentPopup.setScrollFactor(0);
|
||||||
|
|
||||||
|
// Popup size based on type
|
||||||
|
const width = popup.type === 'story' ? 600 : 500;
|
||||||
|
const height = popup.type === 'story' ? 400 : 300;
|
||||||
|
|
||||||
|
// Background overlay (darken screen)
|
||||||
|
const overlay = uiScene.add.rectangle(0, 0, uiScene.scale.width * 2, uiScene.scale.height * 2, 0x000000, 0.7);
|
||||||
|
overlay.setOrigin(0.5);
|
||||||
|
this.currentPopup.add(overlay);
|
||||||
|
|
||||||
|
// Main popup background
|
||||||
|
const bg = uiScene.add.graphics();
|
||||||
|
|
||||||
|
// Color based on type
|
||||||
|
let bgColor = 0x2a2a3e;
|
||||||
|
let borderColor = 0x4e4e6e;
|
||||||
|
|
||||||
|
if (popup.type === 'quest') {
|
||||||
|
bgColor = 0x3a2a1e;
|
||||||
|
borderColor = 0xFFD700;
|
||||||
|
} else if (popup.type === 'warning') {
|
||||||
|
bgColor = 0x3e2a2a;
|
||||||
|
borderColor = 0xff4444;
|
||||||
|
} else if (popup.type === 'success') {
|
||||||
|
bgColor = 0x2a3e2a;
|
||||||
|
borderColor = 0x44ff44;
|
||||||
|
} else if (popup.type === 'story') {
|
||||||
|
bgColor = 0x1a1a2e;
|
||||||
|
borderColor = 0x8888ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Draw background with rounded corners
|
||||||
|
bg.fillStyle(bgColor, 0.95);
|
||||||
|
bg.fillRoundedRect(-width / 2, -height / 2, width, height, 16);
|
||||||
|
bg.lineStyle(4, borderColor, 1);
|
||||||
|
bg.strokeRoundedRect(-width / 2, -height / 2, width, height, 16);
|
||||||
|
this.currentPopup.add(bg);
|
||||||
|
|
||||||
|
// Icon
|
||||||
|
const iconText = uiScene.add.text(-width / 2 + 30, -height / 2 + 30, popup.icon, {
|
||||||
|
fontSize: '48px'
|
||||||
|
});
|
||||||
|
this.currentPopup.add(iconText);
|
||||||
|
|
||||||
|
// Title
|
||||||
|
const title = uiScene.add.text(0, -height / 2 + 50, popup.title, {
|
||||||
|
fontSize: '28px',
|
||||||
|
fontFamily: 'Arial',
|
||||||
|
fill: '#ffffff',
|
||||||
|
fontStyle: 'bold',
|
||||||
|
align: 'center'
|
||||||
|
}).setOrigin(0.5);
|
||||||
|
this.currentPopup.add(title);
|
||||||
|
|
||||||
|
// Separator line
|
||||||
|
const separator = uiScene.add.graphics();
|
||||||
|
separator.lineStyle(2, borderColor, 0.5);
|
||||||
|
separator.lineBetween(-width / 2 + 20, -height / 2 + 90, width / 2 - 20, -height / 2 + 90);
|
||||||
|
this.currentPopup.add(separator);
|
||||||
|
|
||||||
|
// Message
|
||||||
|
const message = uiScene.add.text(0, -height / 2 + 150, popup.message, {
|
||||||
|
fontSize: '18px',
|
||||||
|
fontFamily: 'Arial',
|
||||||
|
fill: '#dddddd',
|
||||||
|
align: 'center',
|
||||||
|
wordWrap: { width: width - 80 }
|
||||||
|
}).setOrigin(0.5, 0);
|
||||||
|
this.currentPopup.add(message);
|
||||||
|
|
||||||
|
// Image (if provided)
|
||||||
|
if (popup.image) {
|
||||||
|
const img = uiScene.add.image(0, -height / 2 + 120, popup.image);
|
||||||
|
img.setScale(0.5);
|
||||||
|
this.currentPopup.add(img);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
const buttonY = height / 2 - 50;
|
||||||
|
const buttonSpacing = 150;
|
||||||
|
const buttonStartX = -(popup.buttons.length - 1) * buttonSpacing / 2;
|
||||||
|
|
||||||
|
popup.buttons.forEach((btn, index) => {
|
||||||
|
const btnX = buttonStartX + index * buttonSpacing;
|
||||||
|
|
||||||
|
// Button background
|
||||||
|
const btnBg = uiScene.add.graphics();
|
||||||
|
btnBg.fillStyle(0x4a4a6e, 1);
|
||||||
|
btnBg.fillRoundedRect(btnX - 60, buttonY - 20, 120, 40, 8);
|
||||||
|
btnBg.lineStyle(2, borderColor, 1);
|
||||||
|
btnBg.strokeRoundedRect(btnX - 60, buttonY - 20, 120, 40, 8);
|
||||||
|
btnBg.setInteractive(
|
||||||
|
new Phaser.Geom.Rectangle(btnX - 60, buttonY - 20, 120, 40),
|
||||||
|
Phaser.Geom.Rectangle.Contains
|
||||||
|
);
|
||||||
|
|
||||||
|
// Hover effect
|
||||||
|
btnBg.on('pointerover', () => {
|
||||||
|
btnBg.clear();
|
||||||
|
btnBg.fillStyle(0x6a6a8e, 1);
|
||||||
|
btnBg.fillRoundedRect(btnX - 60, buttonY - 20, 120, 40, 8);
|
||||||
|
btnBg.lineStyle(2, borderColor, 1);
|
||||||
|
btnBg.strokeRoundedRect(btnX - 60, buttonY - 20, 120, 40, 8);
|
||||||
|
});
|
||||||
|
|
||||||
|
btnBg.on('pointerout', () => {
|
||||||
|
btnBg.clear();
|
||||||
|
btnBg.fillStyle(0x4a4a6e, 1);
|
||||||
|
btnBg.fillRoundedRect(btnX - 60, buttonY - 20, 120, 40, 8);
|
||||||
|
btnBg.lineStyle(2, borderColor, 1);
|
||||||
|
btnBg.strokeRoundedRect(btnX - 60, buttonY - 20, 120, 40, 8);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Click handler
|
||||||
|
btnBg.on('pointerdown', () => {
|
||||||
|
if (btn.action === 'close') {
|
||||||
|
this.closePopup(popup);
|
||||||
|
} else if (btn.callback) {
|
||||||
|
btn.callback();
|
||||||
|
this.closePopup(popup);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.currentPopup.add(btnBg);
|
||||||
|
|
||||||
|
// Button text
|
||||||
|
const btnText = uiScene.add.text(btnX, buttonY, btn.text, {
|
||||||
|
fontSize: '18px',
|
||||||
|
fontFamily: 'Arial',
|
||||||
|
fill: '#ffffff',
|
||||||
|
fontStyle: 'bold'
|
||||||
|
}).setOrigin(0.5);
|
||||||
|
this.currentPopup.add(btnText);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Auto-close timer
|
||||||
|
if (popup.autoClose && this.settings.autoClose) {
|
||||||
|
uiScene.time.delayedCall(this.settings.autoCloseDelay, () => {
|
||||||
|
this.closePopup(popup);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Play sound
|
||||||
|
if (this.settings.soundOnPopup && this.scene.soundManager) {
|
||||||
|
this.scene.soundManager.beepPickup();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Animate in
|
||||||
|
this.currentPopup.setScale(0.8);
|
||||||
|
this.currentPopup.setAlpha(0);
|
||||||
|
uiScene.tweens.add({
|
||||||
|
targets: this.currentPopup,
|
||||||
|
scale: 1,
|
||||||
|
alpha: 1,
|
||||||
|
duration: 300,
|
||||||
|
ease: 'Back.easeOut'
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(`📋 Popup shown: ${popup.title}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Close current popup
|
||||||
|
*/
|
||||||
|
closePopup(popup) {
|
||||||
|
if (!this.currentPopup) return;
|
||||||
|
|
||||||
|
const uiScene = this.scene.scene.get('UIScene');
|
||||||
|
if (!uiScene) return;
|
||||||
|
|
||||||
|
// Animate out
|
||||||
|
uiScene.tweens.add({
|
||||||
|
targets: this.currentPopup,
|
||||||
|
scale: 0.8,
|
||||||
|
alpha: 0,
|
||||||
|
duration: 200,
|
||||||
|
ease: 'Power2',
|
||||||
|
onComplete: () => {
|
||||||
|
this.currentPopup.destroy();
|
||||||
|
this.currentPopup = null;
|
||||||
|
|
||||||
|
// Resume game
|
||||||
|
if (this.settings.pauseGameOnPopup) {
|
||||||
|
this.scene.physics.resume();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Call onClose callback
|
||||||
|
if (popup.onClose) {
|
||||||
|
popup.onClose();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show next popup
|
||||||
|
this.displayNextPopup();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show quest popup
|
||||||
|
*/
|
||||||
|
showQuest(title, description, objectives) {
|
||||||
|
this.showPopup({
|
||||||
|
title: title,
|
||||||
|
message: description + '\n\nObjectives:\n' + objectives.map((obj, i) => `${i + 1}. ${obj}`).join('\n'),
|
||||||
|
type: 'quest',
|
||||||
|
icon: '📜',
|
||||||
|
buttons: [
|
||||||
|
{ text: 'Accept', action: 'close' },
|
||||||
|
{ text: 'Decline', action: 'close' }
|
||||||
|
],
|
||||||
|
autoClose: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show story popup
|
||||||
|
*/
|
||||||
|
showStory(title, text, image = null) {
|
||||||
|
this.showPopup({
|
||||||
|
title: title,
|
||||||
|
message: text,
|
||||||
|
type: 'story',
|
||||||
|
icon: '📖',
|
||||||
|
image: image,
|
||||||
|
buttons: [{ text: 'Continue', action: 'close' }],
|
||||||
|
autoClose: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show notification
|
||||||
|
*/
|
||||||
|
showNotification(message, type = 'info') {
|
||||||
|
const icons = {
|
||||||
|
'info': 'ℹ️',
|
||||||
|
'success': '✅',
|
||||||
|
'warning': '⚠️',
|
||||||
|
'error': '❌'
|
||||||
|
};
|
||||||
|
|
||||||
|
this.showPopup({
|
||||||
|
title: type.charAt(0).toUpperCase() + type.slice(1),
|
||||||
|
message: message,
|
||||||
|
type: type,
|
||||||
|
icon: icons[type] || 'ℹ️',
|
||||||
|
buttons: [{ text: 'OK', action: 'close' }],
|
||||||
|
autoClose: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Save settings
|
||||||
|
*/
|
||||||
|
saveSettings() {
|
||||||
|
localStorage.setItem('novafarma_popup_settings', JSON.stringify(this.settings));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Load settings
|
||||||
|
*/
|
||||||
|
loadSettings() {
|
||||||
|
const saved = localStorage.getItem('novafarma_popup_settings');
|
||||||
|
if (saved) {
|
||||||
|
this.settings = { ...this.settings, ...JSON.parse(saved) };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Destroy system
|
||||||
|
*/
|
||||||
|
destroy() {
|
||||||
|
if (this.currentPopup) {
|
||||||
|
this.currentPopup.destroy();
|
||||||
|
}
|
||||||
|
this.popupQueue = [];
|
||||||
|
console.log('📋 Central Popup System destroyed');
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user