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:
dilgenfritz 2025-10-27 14:46:30 -05:00
parent 6752097979
commit 3a57f1ce71
20 changed files with 108 additions and 15 deletions

View File

@ -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', () => {

View File

@ -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/**/*"
],

94
src/README.md Normal file
View File

@ -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.

View File

@ -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) {