# Clan Website - Neomorphic Design

A vanilla JavaScript single-page application for Arma 3 clan/org management with a neomorphic UI design.

## Structure

### Architecture
- **Strict Mode**: No ES6 modules, no forms/links - uses ordered script tags
- **Pattern**: IIFE-based component system with prototypal inheritance
- **Router**: Button-based navigation without hash/history API
- **Components**: Reusable UI elements
- **Pages**: Full-page views

### Directory Layout
```
_site/
├── index.html          # Main HTML with script loading order
├── style.css           # Neomorphic CSS (nested syntax)
├── script.js           # Original actor menu system (preserved)
├── js/
│   ├── BaseComponent.js              # Base class for components
│   ├── BasePage.js                   # Base class for pages
│   ├── Router.js                     # Navigation router
│   ├── main.js                       # App initialization
│   ├── components/
│   │   ├── DashboardWidget.js        # Dashboard widget cards
│   │   └── MemberCard.js             # Member roster cards
│   └── pages/
│       ├── HomePage.js                # Dashboard with widgets
│       ├── RosterPage.js              # Member roster
│       └── MissionsPage.js            # Operations list
```

## Script Loading Order (CRITICAL)

Scripts must load in this exact order:
1. BaseComponent.js
2. Components (DashboardWidget, MemberCard)
3. BasePage.js
4. Pages (HomePage, RosterPage, MissionsPage)
5. Router.js
6. main.js

## Adding New Pages

1. **Create page file**: `js/pages/YourPage.js`
```javascript
'use strict';

const YourPage = (function() {
  function YourPage() {
    BasePage.call(this);
  }
  
  YourPage.prototype = Object.create(BasePage.prototype);
  YourPage.prototype.constructor = YourPage;
  
  YourPage.prototype.render = function() {
    return '<div class="page">Your content</div>';
  };
  
  return YourPage;
})();
```

2. **Add script tag** to index.html (before Router.js)
3. **Register route** in js/main.js
4. **Add nav button** in index.html

## Adding New Components

1. **Create component file**: `js/components/YourComponent.js`
```javascript
'use strict';

const YourComponent = (function() {
  function YourComponent(container, data) {
    BaseComponent.call(this, container);
    this.data = data;
  }
  
  YourComponent.prototype = Object.create(BaseComponent.prototype);
  YourComponent.prototype.constructor = YourComponent;
  
  YourComponent.prototype.render = function() {
    return '<div class="your-component">Content</div>';
  };
  
  return YourComponent;
})();
```

2. **Add script tag** to index.html (after BaseComponent.js, before BasePage.js)
3. **Use in page** afterMount() method

## Styling

Uses nested CSS syntax (as per user preference). All styles follow neomorphic design:
- Soft shadows: `-5px -5px 10px #eeeeee70, 5px 5px 10px #99999970`
- Inset on active: `inset -2px -2px 4px #eeeeee70, inset 2px 2px 4px #99999970`
- White background: `#fff`
- Border radius: `15-25px`

## Integration with Arma 3

The original actor menu system in `script.js` is preserved. To integrate:
- Data can be fetched via `A3API` methods
- Store data in `window.orgData` for pages to consume
- Update `fetchMembers()` and `fetchMissions()` methods in pages

## Notes

- No hash routing (buttons only)
- No form elements
- All navigation via `data-route` attributes
- Components auto-cleanup on page destroy
- Fully compatible with Arma 3's CEF environment
