diff --git a/.env b/.env index af5acd2..2a01ab5 100644 --- a/.env +++ b/.env @@ -1,2 +1,2 @@ -VITE_LOG_LEVEL= 'debug' +VITE_LOG_LEVEL= 'error' VITE_API_URL= 'http://localhost:3000/api' \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 44126bc..7f44a77 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "dayjs": "^1.11.11", "pinia": "^2.1.7", "pino": "^9.2.0", + "pixi-actions": "^1.1.11", "pixi-filters": "^6.0.4", "pixi.js": "^8.2.1", "socket.io-client": "^4.7.5", @@ -3809,6 +3810,14 @@ "resolved": "https://registry.npmjs.org/pino-std-serializers/-/pino-std-serializers-7.0.0.tgz", "integrity": "sha512-e906FRY0+tV27iq4juKzSYPbUj2do2X2JX4EzSca1631EB2QJQUqGbDuERal7LCtOpxl6x3+nvo9NPZcmjkiFA==" }, + "node_modules/pixi-actions": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/pixi-actions/-/pixi-actions-1.1.11.tgz", + "integrity": "sha512-03gMHGZsMg0KrIuDMUUPHq0mnjBjDBXJsrJkhrQO0o1hzsJ1ejcn9zhHRp99oqHkyicLuVJu5iBmblMg0xEYBA==", + "peerDependencies": { + "pixi.js": ">7.0.0" + } + }, "node_modules/pixi-filters": { "version": "6.0.4", "resolved": "https://registry.npmjs.org/pixi-filters/-/pixi-filters-6.0.4.tgz", diff --git a/package.json b/package.json index 68c3bb4..7edcfd6 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "dayjs": "^1.11.11", "pinia": "^2.1.7", "pino": "^9.2.0", + "pixi-actions": "^1.1.11", "pixi-filters": "^6.0.4", "pixi.js": "^8.2.1", "socket.io-client": "^4.7.5", diff --git a/src/App.vue b/src/App.vue index ea4825e..3f514b1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,10 +1,29 @@ diff --git a/src/assets/images/backgrounds/bg-green.png b/src/assets/images/backgrounds/bg-green.png new file mode 100644 index 0000000..4517c97 Binary files /dev/null and b/src/assets/images/backgrounds/bg-green.png differ diff --git a/src/common/constants.ts b/src/common/constants.ts index 13fb737..a0f3ddd 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -1,7 +1,13 @@ -export const defaultContainerOptions = { +export const DEFAULT_CONTAINER_OPTIONS = { width: 100, height: 100, x: 0, y: 0, visible: true } +export const ORIENTATION_ANGLES: { [key: string]: number } = { + north: 0, + east: Math.PI / 2, + south: Math.PI, + west: (3 * Math.PI) / 2 +} diff --git a/src/common/helpers.ts b/src/common/helpers.ts index d7a98b5..32bfe42 100644 --- a/src/common/helpers.ts +++ b/src/common/helpers.ts @@ -1,6 +1,6 @@ -import { Graphics, Container } from 'pixi.js' -import type { ContainerOptions, TileDto } from './interfaces' -import { defaultContainerOptions } from './constants' +import { Graphics, Container, Text } from 'pixi.js' +import type { ContainerOptions, Dimension, TileDto } from './interfaces' +import { DEFAULT_CONTAINER_OPTIONS } from './constants' export function getColorBackground(container: Container, colorName: string, alpha: number = 0.5) { const graphics = new Graphics() @@ -14,7 +14,7 @@ export function getColorBackground(container: Container, colorName: string, alph } export function createContainer(options: ContainerOptions) { - const opts = { ...defaultContainerOptions, ...options } + const opts = { ...DEFAULT_CONTAINER_OPTIONS, ...options } const container = new Container() const rect = new Graphics().rect(opts.x, opts.y, opts.width, opts.height) @@ -30,6 +30,54 @@ export function createContainer(options: ContainerOptions) { return container } +export function createButton( + textStr: string, + dimension: Dimension, + action: Function, + parent?: Container +): Container { + const { x, y, width, height } = dimension + const rectangle = new Graphics().roundRect(x, y, width + 4, height + 4, 5).fill(0xffff00) + const text = new Text({ + text: textStr, + style: { + fontFamily: 'Arial', + fontSize: 12, + fontWeight: 'bold', + fill: 0x121212, + align: 'center' + } + }) + text.anchor = 0.5 + const container = new Container() + container.addChild(rectangle) + container.addChild(text) + + text.y = y + height / 2 + text.x = x + width / 2 + + container.eventMode = 'static' + container.cursor = 'pointer' + rectangle.alpha = 0.7 + text.alpha = 0.7 + container.on('pointerdown', () => action()) + container.on('pointerover', () => { + rectangle.alpha = 1 + text.alpha = 1 + }) + + container.on('pointerout', () => { + rectangle.alpha = 0.7 + text.alpha = 0.7 + }) + + if (parent !== undefined) { + parent.addChild(container) + } + + return container +} + export async function wait(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)) } diff --git a/src/common/interfaces.ts b/src/common/interfaces.ts index 7d9900d..64de1dd 100644 --- a/src/common/interfaces.ts +++ b/src/common/interfaces.ts @@ -17,8 +17,10 @@ export interface TileDto { y?: number width?: number height?: number + playerId?: string } -export interface MatchSessionState { +export interface MatchSessionDto { + _id: string id: string name: string creator: string @@ -38,7 +40,7 @@ export interface MatchSessionState { playersReady: number } -export interface GameState { +export interface GameDto { id: string players: PlayerDto[] tilesInBoneyard: TileDto[] @@ -85,3 +87,13 @@ export interface SocketEvent { event: string data: any } + +export interface AnimationOptions { + x?: number + y?: number + rotation?: number + scale?: number + duration?: number + width?: number + height?: number +} diff --git a/src/components/GameComponent.vue b/src/components/GameComponent.vue index c1e6114..59d5ba9 100644 --- a/src/components/GameComponent.vue +++ b/src/components/GameComponent.vue @@ -1,5 +1,5 @@ - Welcome to the Player's Home Page + Welcome to the {{ user.username }}'s Home Page This is a protected route. {{ sessionState || 'No session' }} @@ -93,17 +132,30 @@ async function startMatch() { Create Match Session - + + - + Available Sessions - - There are no available sessions at the moment. + + + No sessions available + + + {{ session.name }} + {{ session }} + joinMatch(session._id)"> + Join ({{ session._id }}) + + diff --git a/src/views/MatchView.vue b/src/views/MatchView.vue new file mode 100644 index 0000000..d3bf642 --- /dev/null +++ b/src/views/MatchView.vue @@ -0,0 +1,114 @@ + + + + + Match Page + + Session ID: {{ matchSession._id }} + Session Name: {{ matchSession.name }} + Session started: {{ isSessionStarted }} + Host: {{ amIHost }} + {{ sessionState || 'No session' }} + + + Waiting for host to start session + + ReadyUnready + + + Start + + + + Cancel + + + + + +
This is a protected route.
{{ sessionState || 'No session' }}
There are no available sessions at the moment.
No sessions available
{{ session.name }}
{{ session }}
Session ID: {{ matchSession._id }}
Session Name: {{ matchSession.name }}
Session started: {{ isSessionStarted }}
Host: {{ amIHost }}
Waiting for host to start session