@loolzaaa/vue-gaming-room

Vue Gaming Room

Vue 3 + Pinia client library for room-based web games: lobby, players, observers and public display screens (TVs), with a ready-to-use room UI and WebSocket state routing.

The library is the frontend part of the Vue Gaming Room Java Server ecosystem, but can be adapted to any server implementing the same protocol.

Features

• Create/join room UI with nickname and room code.
• Lobby with player list, readiness, colors and admin controls.
• Separate player and public display views after game start.
• Support for multiple observers/TVs on the same game.
• GamingRoom, RoomView, DisplayPlaceholder components.
• Pinia room store with room, member, token and WebSocket state.
• Automatic member token handling and one-time WebSocket ticket flow.
• Display fallback with a customizable image and text.
• Theme customization through Sass variables.
• Utility helpers for nickname, color and hold-to-confirm actions.

Requirements

• Vue 3
• Pinia
• axios
• Node.js and npm
• Vite (recommended; the library is built as an ES module)

Install

npm install axios pinia vue @loolzaaa/vue-gaming-room

Add the Vite constant used to build REST/WebSocket URLs:

// vite.config.js
export default defineConfig({
  define: {
    'env.VGR_BASE': 'import.meta.env.BASE_URL'
  }
})

Import the styles once:

// main.js
import '@loolzaaa/vue-gaming-room/style'

Quick start

<script setup>
import { GamingRoom } from '@loolzaaa/vue-gaming-room'
import RoomMain from '@/components/RoomMain.vue'
import DisplayMain from '@/components/DisplayMain.vue'
import SettingsMain from '@/components/SettingsMain.vue'
import bgImg from '@/assets/bg.jpeg'

const bgStyles = {
  position: '52% 0',
  opacity: 0.75,
  color: '#000'
}
</script>

<template>
  <GamingRoom
    :bgImg="bgImg"
    :bgStyles="bgStyles"
    :roomComp="RoomMain"
    :displayComp="DisplayMain"
    :settingsComp="SettingsMain"
    rulesLink="/rules.pdf"
    :displayFallbackImg="bgImg"
    displayFallbackText="Ожидание игры"
  />
</template>

roomComp renders the lobby and the player view. displayComp renders the public screen for observers after the game starts; if it is omitted, the customizable DisplayPlaceholder is used.

Documentation

• Client usage guide — components, props, role-specific state, store, utils, styling and server integration.
• Client TODO and known limitations.
• Server project — matching game server.
• Server guide and server TODO.

License

MIT