📋 MR GameJam Project Manager

A modern, interactive project management web application built with vanilla HTML, CSS, and JavaScript using MVC architecture. Perfect for managing game jam projects and other collaborative tasks.

✨ Features

📊 Multiple View Modes

• Kanban Board: Drag-and-drop task management with columns (To Do, In Progress, Review, Done)
• Gantt Chart: Visual timeline view with zoom controls and date navigation
• List View: Detailed table view with search and sorting capabilities
• Team View: Organize tasks by team members

🎯 Project Management

• Create and manage multiple projects
• Project wizard for quick setup with predefined game jam tasks
• Project import/export to .mrproject files
• Local storage persistence (no backend required)
• Edit and delete projects

✅ Task Management

• Create tasks with detailed information:
  • Name, description, status, priority
  • Start and end dates
  • Progress tracking (0-100%)
  • User assignment
  • Parent-child task relationships
• Drag-and-drop task movement between statuses
• Task search and filtering
• Multiple sorting options

👥 User Management

• Add and manage team members
• Assign tasks to users
• View tasks by team member

💾 Data Persistence

• Automatic local storage saving
• Export projects to .mrproject files
• Import projects from .mrproject files
• Backup and recovery functionality

🚀 Getting Started

Installation

1. Clone or download this repository
2. Open index.html in a modern web browser
3. No build process or dependencies required!

Usage

1. Create a New Project:

   • Click the "✨ New Project" button
   • Use the project wizard to quickly set up a game jam project
   • Or create a custom project manually

2. Manage Tasks:

   • Click the "➕" button in any Kanban column to add a task
   • Click on a task to edit it
   • Drag tasks between columns to change status
   • Use the List view for detailed task management

3. Switch Views:

   • Use the tab buttons at the top to switch between Kanban, Gantt, List, and Team views

4. Manage Users:

   • Click "👥 User Management" to add team members
   • Assign tasks to users in the task modal

5. Backup & Recovery:

   • Click "📤 Backup" to export your project
   • Click "📥 Recover" to import a previously exported project

📁 Project Structure

MRSimpleProjectManagerWeb/
├── index.html              # Main HTML file
├── styles.css              # Application styles
├── app.js                  # Main application controller
├── models/                 # Data models
│   ├── DataStore.js        # Local storage and data management
│   ├── Project.js          # Project model
│   ├── Task.js             # Task model
│   └── User.js             # User model
├── views/                  # View components
│   ├── ProjectListView.js  # Project selector view
│   ├── KanbanView.js       # Kanban board view
│   ├── GanttView.js        # Gantt chart view
│   ├── ListView.js         # List/table view
│   ├── TeamView.js         # Team member view
│   └── UsersView.js        # User management view
└── controllers/            # Controllers (MVC pattern)
    ├── ModalController.js  # Modal management
    ├── ProjectController.js # Project operations
    ├── ProjectWizardController.js # Project wizard
    ├── TaskController.js   # Task operations
    └── UserController.js   # User operations

🏗️ Architecture

This application follows the MVC (Model-View-Controller) pattern:

• Models: Data structures and business logic (models/)
• Views: UI rendering components (views/)
• Controllers: Handle user interactions and coordinate between models and views (controllers/)

Key Components

• DataStore: Manages all data persistence using localStorage
• Views: Render different visualizations of the same data
• Controllers: Handle user actions and update models/views accordingly
• Modals: All user input is handled through modal dialogs (no popups)

🎨 Design Features

• Modern UI: Clean, intuitive interface with smooth interactions
• Emoji Icons: Fun and expressive emoji-based icons throughout
• Responsive: Optimized for 1200x1024 resolution
• Interactive: Drag-and-drop, smooth transitions, and real-time updates
• No Popups: All interactions use modal dialogs for a better UX

💻 Technologies

• HTML5: Semantic markup
• CSS3: Modern styling with flexbox and grid
• Vanilla JavaScript: No frameworks or dependencies
• LocalStorage API: Client-side data persistence
• File API: Import/export functionality

📝 File Format

Projects are exported as .mrproject files, which are JSON files containing:

• Project information (name, description, dates)
• All tasks with their properties
• All users/team members
• Relationships between tasks

🔧 Browser Compatibility

Works best in modern browsers that support:

• ES6 JavaScript features
• LocalStorage API
• File API
• Drag and Drop API