## Major Features Added - **🎛️ Complete Admin Dashboard**: Real-time player monitoring with detailed stats - **👥 Player Management**: Individual and mass player kicking with proper notifications - **🎯 Global Round Control**: Advance/retreat rounds across all rooms simultaneously - **⏸️ Game Control**: Pause/resume games from admin interface - **🔔 Client Notifications**: Players receive alerts for kicks and round changes ## Technical Improvements - **🏗️ Official Colyseus API**: Replaced global variable hacks with `matchMaker.query()` and `matchMaker.remoteRoomCall()` - **📡 Proper Client Communication**: Implemented broadcast messages for `adminKicked`, `gamePaused`, `gameResumed`, `roundChanged` - **🎮 Enhanced GameRoom Methods**: Added `pauseGame()`, `resumeGame()`, `advanceRound()`, `previousRound()`, `_forceClientDisconnect()`, `_forceDisconnectAllClients()`, `getInspectData()` ## UI/UX Enhancements - **📊 Detailed Player Info**: Name, room, role, producer type, and current tokens (🦃☕🌽) - **🚫 Proper Kick Notifications**: Clients auto-redirect to home with clear messaging - **🎨 Improved Admin Interface**: Better organized controls for non-technical commentators - **📱 Responsive Design**: Works well on different screen sizes ## Bug Fixes - **🔧 Fixed Admin Service URLs**: Now correctly calls Colyseus server (port 2567) instead of admin server (port 3001) - **✅ Mass Kick Notifications**: All players receive proper notifications when expelled en masse - **🔄 Auto-redirect**: Kicked clients properly return to home screen ## Architecture - **🏗️ Clean API Design**: All admin endpoints use official Colyseus patterns - **🔒 Type Safety**: Maintained TypeScript sync between server and clients - **📦 Microservices Ready**: Separated concerns between game server and admin interface **Breaking Changes:** None - fully backward compatible **Migration:** No migration needed
69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<div id="app">
|
|
<Home
|
|
v-if="currentScreen === 'home'"
|
|
@join-game="onJoinGame"
|
|
@show-settings="showSettings = true"
|
|
/>
|
|
<Game v-else-if="currentScreen === 'game'" :game-client="gameClient" />
|
|
|
|
<!-- Settings Modal -->
|
|
<Settings v-if="showSettings" @close="showSettings = false" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import Home from '@/components/Home.vue'
|
|
import Game from '@/components/Game.vue'
|
|
import Settings from '@/components/Settings.vue'
|
|
import { GameClient } from '@/services/gameClient'
|
|
import { logger } from '@/services/logger'
|
|
|
|
const currentScreen = ref<'home' | 'game'>('home')
|
|
const gameClient = ref<GameClient | null>(null)
|
|
const showSettings = ref(false)
|
|
|
|
const onJoinGame = (client: any) => {
|
|
gameClient.value = client
|
|
currentScreen.value = 'game'
|
|
logger.info('Transitioning to game screen')
|
|
|
|
// Handle admin kick notification
|
|
client.onAdminKicked((data: any) => {
|
|
// Show alert message
|
|
alert(`🚫 ${data.message}`)
|
|
|
|
// Return to home screen
|
|
currentScreen.value = 'home'
|
|
gameClient.value = null
|
|
|
|
logger.info('Player kicked by admin, returned to home screen')
|
|
})
|
|
|
|
// Handle round change notification
|
|
client.onRoundChanged((data: any) => {
|
|
// Show alert message
|
|
alert(`🎯 ${data.message}`)
|
|
|
|
logger.info('Round changed by admin:', data)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
#app {
|
|
min-height: 100vh;
|
|
}
|
|
</style> |