Imperium Maledictum Digital

Appearance

Technology Stack ​

Comprehensive overview of all technologies used in the Imperium Maledictum Digital project.

Frontend Technologies ​

Core Framework ​

Vue 3 (v3.4.21) ​

  • Composition API for better TypeScript support and code organization
  • Single File Components for component encapsulation
  • Reactive data binding for real-time UI updates
  • Template-based rendering with minimal overhead
javascript
// Example Vue 3 Composition API usage
import { ref, computed, onMounted } from 'vue'

export default {
  setup() {
    const character = ref(null)
    const totalSkills = computed(() => 
      Object.keys(character.value?.skills || {}).length
    )
    
    onMounted(async () => {
      character.value = await loadCharacter()
    })
    
    return { character, totalSkills }
  }
}

State Management ​

Pinia (v3.0.2) ​

  • Official Vue.js state management
  • TypeScript support out of the box
  • Devtools integration
  • Modular store design
javascript
// Character store example
export const useCharacterStore = defineStore('character', {
  state: () => ({
    characters: [],
    currentCharacter: null
  }),
  
  getters: {
    getCharacterById: (state) => (id) => 
      state.characters.find(char => char.id === id)
  },
  
  actions: {
    async loadCharacters() {
      this.characters = await dbAdapter.getAllCharacters()
    }
  }
})

Routing ​

Vue Router (v4.3.0) ​

  • Client-side routing
  • Route guards for access control
  • Lazy loading for code splitting
  • HTML5 history mode
javascript
const routes = [
  {
    path: '/character/:id',
    component: () => import('./views/CharacterView.vue'),
    props: true
  }
]

Build Tools ​

Vite (v5.2.6) ​

  • Lightning-fast HMR (Hot Module Replacement)
  • Native ES modules in development
  • Optimized production builds
  • Plugin ecosystem

Key Features:

  • Instant server start
  • Pre-bundling dependencies
  • CSS code splitting
  • Asset optimization

Build Configuration ​

javascript
// vite.config.js
export default {
  plugins: [vue()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'pinia'],
          'game-data': ['./src/data/skills.js', './src/data/talents.js']
        }
      }
    }
  }
}

Desktop Framework ​

Electron (v36.2.1) ​

  • Cross-platform desktop applications
  • Native OS integration
  • File system access
  • System tray support
javascript
// Main process
const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      contextIsolation: true,
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  win.loadFile('index.html')
}

Electron Builder (v26.0.12) ​

  • Multi-platform builds
  • Auto-update support
  • Code signing
  • Installer generation

Database Technologies ​

SQLite (better-sqlite3 v11.10.0) ​

  • Embedded database for desktop
  • Synchronous API for simplicity
  • Full SQL support
  • ACID compliance
javascript
const Database = require('better-sqlite3')
const db = new Database('imperium.db')

// Example query
const characters = db.prepare('SELECT * FROM characters WHERE _deleted = 0').all()

Storage Comparison ​

Cloud Infrastructure ​

Cloudflare Workers ​

  • Serverless edge computing
  • Global deployment (275+ cities)
  • Zero cold starts
  • WebAssembly support
javascript
// Worker example
export default {
  async fetch(request, env) {
    const { pathname } = new URL(request.url)
    
    if (pathname.startsWith('/api/')) {
      return handleAPI(request, env)
    }
    
    return env.ASSETS.fetch(request)
  }
}

Cloudflare KV ​

  • Globally distributed key-value storage
  • Eventually consistent
  • Low latency reads
  • 25MB value size limit
javascript
// KV operations
await env.CHARACTERS_KV.put(key, JSON.stringify(character))
const character = await env.CHARACTERS_KV.get(key, 'json')

Documentation ​

VitePress (v1.6.3) ​

  • Static site generator
  • Vue-powered
  • Markdown-centric
  • Fast build times

Mermaid Integration (v11.6.0) ​

  • Diagram as code
  • Architecture visualization
  • Flow charts and ERDs
  • Dark theme support

Development Tools ​

Concurrently (v9.1.2) ​

  • Run multiple npm scripts in parallel
  • Cross-platform support
  • Colored output
json
{
  "scripts": {
    "electron:dev": "concurrently \"npm run dev\" \"npm run electron\""
  }
}

Wait-on (v8.0.3) ​

  • Wait for resources before starting processes
  • HTTP endpoint polling
  • File system watching
json
{
  "scripts": {
    "electron": "wait-on http://localhost:5173 && electron ."
  }
}

Wrangler ​

  • Cloudflare Workers CLI
  • Local development server
  • Deploy and manage workers
  • KV namespace management
bash
# Development
wrangler dev

# Deployment
wrangler deploy

# KV operations
wrangler kv:namespace create "CHARACTERS_KV"

Package Management ​

npm (v8+) ​

  • Dependency management
  • Script runner
  • Version locking with package-lock.json
  • Workspace support

Dependencies Overview ​

Browser Support ​

Minimum Requirements ​

  • Chrome 90+
  • Firefox 88+
  • Safari 14+
  • Edge 90+

Progressive Enhancement ​

  • Service Worker for offline support
  • Local storage fallback
  • Responsive design
  • Touch support

Security Considerations ​

Content Security Policy ​

html
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; 
               script-src 'self' 'unsafe-inline'; 
               style-src 'self' 'unsafe-inline';">

Electron Security ​

javascript
// Context isolation
webPreferences: {
  contextIsolation: true,
  nodeIntegration: false,
  preload: path.join(__dirname, 'preload.js')
}

API Security ​

  • Token-based authentication
  • CORS configuration
  • Rate limiting
  • Input validation

Performance Optimizations ​

Code Splitting ​

javascript
// Route-based splitting
const CharacterView = () => import('./views/CharacterView.vue')
const AdminPanel = () => import('./views/AdminView.vue')

Asset Optimization ​

  • Image compression
  • Font subsetting
  • CSS purging
  • Tree shaking

Caching Strategy ​

javascript
// Service Worker caching
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  )
})

Future Considerations ​

Potential Additions ​

  1. TypeScript - Type safety and better IDE support
  2. Vitest - Unit testing framework
  3. Playwright - E2E testing
  4. Sentry - Error tracking
  5. Analytics - Usage insights

Upgrade Path ​

  • Vue 3 → Vue 3.5+ (minor updates)
  • Electron quarterly updates
  • Vite major versions yearly
  • Security patches monthly