Refactor file structure with feature-based organization
New Structure: - src/core/ - Core game engine (game.js, gameModeManager.js, main.js, preload.js) - src/features/ - Feature modules organized by functionality: - webcam/ - Photography system (webcamManager.js) - tasks/ - Task management (interactiveTaskManager.js, aiTaskManager.js) - audio/ - Audio system (audioManager.js) - images/ - Image management (popupImageManager.js, image-discovery-fix.js) - ui/ - UI components (flashMessageManager.js) - src/data/ - Game data and configuration (gameData.js) - src/styles/ - CSS stylesheets (styles.css and variants) - src/utils/ - Utility functions (desktop-file-manager.js) Benefits: - Feature-based organization for better maintainability - Clear separation of concerns - Easier testing and debugging - Scalable architecture for future development - Self-contained feature modules Updated package.json, index.html paths, and main.js for new structure. Added comprehensive README.md documenting the architecture.
This commit is contained in:
parent
6752097979
commit
3a57f1ce71
24
index.html
24
index.html
|
|
@ -5,7 +5,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: file: http://localhost:*; connect-src 'self' http://localhost:* ws://localhost:*; img-src 'self' data: file:; script-src 'self' 'unsafe-inline' 'unsafe-eval';"">
|
||||
<title>Edge & Punishment - How long can you last?</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="stylesheet" href="src/styles/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="game-container">
|
||||
|
|
@ -1081,7 +1081,7 @@
|
|||
</main>
|
||||
</div>
|
||||
|
||||
<script src="gameData.js"></script>
|
||||
<script src="src/data/gameData.js"></script>
|
||||
<!-- Statistics Modal -->
|
||||
<div id="stats-modal" class="modal" style="display: none;">
|
||||
<div class="modal-content">
|
||||
|
|
@ -1205,16 +1205,16 @@
|
|||
</body>
|
||||
|
||||
<!-- Script Loading Order -->
|
||||
<script src="flashMessageManager.js"></script>
|
||||
<script src="popupImageManager.js"></script>
|
||||
<script src="aiTaskManager.js"></script>
|
||||
<script src="audioManager.js"></script>
|
||||
<script src="image-discovery-fix.js"></script>
|
||||
<script src="gameModeManager.js"></script>
|
||||
<script src="interactiveTaskManager.js"></script>
|
||||
<script src="webcamManager.js"></script>
|
||||
<script src="desktop-file-manager.js"></script>
|
||||
<script src="game.js"></script>
|
||||
<script src="src/features/ui/flashMessageManager.js"></script>
|
||||
<script src="src/features/images/popupImageManager.js"></script>
|
||||
<script src="src/features/tasks/aiTaskManager.js"></script>
|
||||
<script src="src/features/audio/audioManager.js"></script>
|
||||
<script src="src/features/images/image-discovery-fix.js"></script>
|
||||
<script src="src/core/gameModeManager.js"></script>
|
||||
<script src="src/features/tasks/interactiveTaskManager.js"></script>
|
||||
<script src="src/features/webcam/webcamManager.js"></script>
|
||||
<script src="src/utils/desktop-file-manager.js"></script>
|
||||
<script src="src/core/game.js"></script>
|
||||
<script>
|
||||
// Force apply emergency fix
|
||||
window.addEventListener('load', () => {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"name": "edge-and-punishment",
|
||||
"version": "1.0.0",
|
||||
"description": "An edging challenge game where skipping tasks floods your screen with consequences - How long can you last?",
|
||||
"main": "main.js",
|
||||
"main": "src/core/main.js",
|
||||
"scripts": {
|
||||
"start": "electron .",
|
||||
"build": "electron-builder",
|
||||
|
|
@ -26,7 +26,6 @@
|
|||
"files": [
|
||||
"**/*",
|
||||
"!node_modules/**/*",
|
||||
"!src/**/*",
|
||||
"!dist/**/*",
|
||||
"!.git/**/*"
|
||||
],
|
||||
|
|
|
|||
|
|
@ -0,0 +1,94 @@
|
|||
# Source Code Structure
|
||||
|
||||
This directory contains the organized source code for the Edge & Punishment game, structured by feature and responsibility.
|
||||
|
||||
## 📁 Directory Organization
|
||||
|
||||
### `/core` - Core Game Engine
|
||||
- **`game.js`** - Main game logic, state management, and flow control
|
||||
- **`gameModeManager.js`** - Game mode selection and scenario management
|
||||
- **`main.js`** - Electron main process (desktop application entry point)
|
||||
- **`preload.js`** - Electron preload script for secure IPC communication
|
||||
|
||||
### `/features` - Feature Modules
|
||||
Organized by functional area, each feature is self-contained:
|
||||
|
||||
#### `/features/webcam` - Photography System
|
||||
- **`webcamManager.js`** - Camera access, photo capture, progress tracking, and photo galleries
|
||||
|
||||
#### `/features/tasks` - Task Management
|
||||
- **`interactiveTaskManager.js`** - Task execution, photography integration, and scenario handling
|
||||
- **`aiTaskManager.js`** - AI-powered task generation using local Ollama models
|
||||
|
||||
#### `/features/audio` - Audio System
|
||||
- **`audioManager.js`** - Background music, sound effects, and audio controls
|
||||
|
||||
#### `/features/images` - Image Management
|
||||
- **`popupImageManager.js`** - Consequence image popups and display management
|
||||
- **`image-discovery-fix.js`** - Image loading and scanning utilities
|
||||
|
||||
#### `/features/ui` - User Interface
|
||||
- **`flashMessageManager.js`** - Motivational flash messages and UI feedback
|
||||
|
||||
### `/data` - Game Data & Configuration
|
||||
- **`gameData.js`** - Task definitions, game content, and configuration data
|
||||
|
||||
### `/styles` - CSS Stylesheets
|
||||
- **`styles.css`** - Main application styles
|
||||
- **`styles-dark-edgy.css`** - Dark theme variant
|
||||
- **`styles-gaming.css`** - Gaming theme variant
|
||||
- **`styles-original-backup.css`** - Original styles backup
|
||||
|
||||
### `/utils` - Utility Functions
|
||||
- **`desktop-file-manager.js`** - File system operations and desktop integration
|
||||
|
||||
## 🎯 Design Principles
|
||||
|
||||
### Feature-Based Organization
|
||||
- Each feature directory is self-contained
|
||||
- Clear separation of concerns
|
||||
- Easy to locate and modify specific functionality
|
||||
|
||||
### Core vs Features
|
||||
- **Core**: Essential game engine and platform code
|
||||
- **Features**: Modular functionality that can be developed independently
|
||||
|
||||
### Data Separation
|
||||
- Game content separated from logic
|
||||
- Styles organized by theme
|
||||
- Configuration centralized
|
||||
|
||||
## 🔄 Dependencies
|
||||
|
||||
### Inter-Feature Communication
|
||||
Features communicate through:
|
||||
- Global event system
|
||||
- Shared game state (managed by core)
|
||||
- Well-defined APIs
|
||||
|
||||
### Loading Order
|
||||
Scripts are loaded in dependency order in `index.html`:
|
||||
1. Data layer (`gameData.js`)
|
||||
2. UI components (`flashMessageManager.js`, etc.)
|
||||
3. Feature modules (tasks, audio, images, webcam)
|
||||
4. Core game engine (`game.js`)
|
||||
|
||||
## 🚀 Benefits
|
||||
|
||||
- **Maintainability**: Easy to find and modify specific features
|
||||
- **Scalability**: New features can be added without affecting existing code
|
||||
- **Testing**: Features can be tested in isolation
|
||||
- **Collaboration**: Team members can work on different features simultaneously
|
||||
- **Debugging**: Issues are easier to locate and fix
|
||||
|
||||
## 📝 Adding New Features
|
||||
|
||||
1. Create a new directory under `/features/[feature-name]`
|
||||
2. Add your feature files to the directory
|
||||
3. Update `index.html` to include your scripts in the correct order
|
||||
4. Document your feature in this README
|
||||
5. Ensure proper error handling and cleanup
|
||||
|
||||
## 🔧 Build Process
|
||||
|
||||
The build process includes all `src/` files thanks to the updated `package.json` configuration. No additional build steps are required for the new structure.
|
||||
|
|
@ -77,7 +77,7 @@ async function createWindow() {
|
|||
titleBarStyle: 'default'
|
||||
});
|
||||
|
||||
mainWindow.loadFile('index.html');
|
||||
mainWindow.loadFile(path.join(__dirname, '..', '..', 'index.html'));
|
||||
|
||||
mainWindow.once('ready-to-show', () => {
|
||||
if (windowState.isMaximized) {
|
||||
Loading…
Reference in New Issue