From 54bd7f384070d3f0dda9c461cd49eb51d16db72a Mon Sep 17 00:00:00 2001 From: Jose Conde Date: Wed, 17 Jul 2024 22:52:07 +0200 Subject: [PATCH] 0.1.4 --- .hmrc | 24 ++++++++--- CHANGELOG.md | 13 +++++- Dockerfile | 40 ++++++++++++++--- nginx/default.conf | 6 +++ nginx/nginx.conf | 23 ++++++++++ package.json | 10 ++--- src/App.vue | 31 +++++++++++++ src/assets/base.css | 18 +++++--- src/common/constants.ts | 13 +++++- src/common/helpers.ts | 2 - src/game/Board.ts | 22 +++++++++- src/game/Game.ts | 3 +- src/i18n/en.json | 4 +- src/i18n/es.json | 6 ++- src/main.ts | 3 +- src/router/index.ts | 2 +- src/views/HomeView.vue | 96 +++++++++++++++++++++++------------------ src/views/MatchView.vue | 5 +++ 18 files changed, 242 insertions(+), 79 deletions(-) create mode 100644 nginx/default.conf create mode 100644 nginx/nginx.conf diff --git a/.hmrc b/.hmrc index ea41d68..27b113e 100644 --- a/.hmrc +++ b/.hmrc @@ -1,9 +1,11 @@ { "path": "G:\\Other\\Development\\Projects\\[ideas]\\domino-client", "name": "domino-client", - "initialVersion": "0.1.0", - "version": "0.1.0", + "initialVersion": "0.1.4", + "version": "0.1.4", "docker": { + "useRegistry": true, + "registry": "192.168.1.115:5000", "repository": "arhuako/domino-client" }, "repository": { @@ -12,16 +14,15 @@ "manage": true }, "changelog": { - "create": true, "managed": true, "createHTML": true, "htmlPath": "public" }, "_backupInitial": { "name": "domino-client", - "version": "0.0.0", + "version": "0.1.0", "private": true, - "type": "module", + "type": "commonjs", "scripts": { "dev": "vite", "build": "run-p type-check \"build-only {@}\" --", @@ -30,7 +31,12 @@ "build-only": "vite build", "type-check": "vue-tsc --build --force", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", - "format": "prettier --write src/" + "format": "prettier --write src/", + "docker-build": "docker build -t arhuako/domino-client:latest .", + "docker-tag": "docker tag arhuako/domino-client:latest 192.168.1.115:5000/arhuako/domino-client:0.1.0", + "docker-push": "docker push 192.168.1.115:5000/arhuako/domino-client:latest && docker push 192.168.1.115:5000/arhuako/domino-client:0.1.0", + "publish": "npm run docker-build && npm run docker-tag && npm run docker-push", + "serve": "npm run build-only && http-server ./dist -c-1" }, "dependencies": { "@pixi/sound": "^6.0.0", @@ -60,6 +66,7 @@ "@vue/tsconfig": "^0.5.1", "eslint": "^8.57.0", "eslint-plugin-vue": "^9.23.0", + "http-server": "^14.1.1", "jsdom": "^24.1.0", "npm-run-all2": "^6.2.0", "prettier": "^3.2.5", @@ -68,6 +75,11 @@ "vite": "^5.3.1", "vitest": "^1.6.0", "vue-tsc": "^2.0.21" + }, + "author": "arhuako", + "reposityory": { + "type": "git", + "url": "https://gitea.xintanalabs.net/arhuako/domino-client" } } } diff --git a/CHANGELOG.md b/CHANGELOG.md index e8cfef1..6c44610 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,16 @@ # Changelog + All notable changes to this project will be documented in this file. ## Unreleased -Initial commit + +### Added + +- Initial commit +- Match page back button +- Team play +- Movement synchronized netween clients and AI players + +### Fixed + +- Button statuses diff --git a/Dockerfile b/Dockerfile index 0d5d3e4..7ef885d 100644 --- a/Dockerfile +++ b/Dockerfile @@ -1,7 +1,37 @@ +# Create the container from the alpine linux image +#FROM alpine:3.7 FROM node:22-alpine -WORKDIR /usr/src/app -COPY package*.json ./ -RUN npm i + +# Add nginx and nodejs +#RUN apk add --update nginx nodejs +RUN apk add --update nginx + +# Create the directories we will need +RUN mkdir -p /tmp/nginx/vue-single-page-app +RUN mkdir -p /var/log/nginx +RUN mkdir -p /var/www/html + +# Copy the respective nginx configuration files +COPY nginx/nginx.conf /etc/nginx/nginx.conf +COPY nginx/default.conf /etc/nginx/conf.d/default.conf + +# Set the directory we want to run the next commands for +WORKDIR /tmp/nginx/vue-single-page-app + COPY . . -EXPOSE 8080 -CMD ["npm", "run", "serve"] \ No newline at end of file +# Copy our source code into the container +# Install the dependencies, can be commented out if you're running the same node version +RUN npm install + +# run webpack and the vue-loader +RUN npm run build-only + + +# copy the built app to our served directory +RUN cp -r dist/* /var/www/html + +# make all files belong to the nginx user +RUN chown nginx:nginx /var/www/html + +# start nginx and keep the process from backgrounding and the container from quitting +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/nginx/default.conf b/nginx/default.conf new file mode 100644 index 0000000..3017689 --- /dev/null +++ b/nginx/default.conf @@ -0,0 +1,6 @@ +server { + location / { + root /var/www/html; + try_files $uri $uri/ /index.html; + } +} \ No newline at end of file diff --git a/nginx/nginx.conf b/nginx/nginx.conf new file mode 100644 index 0000000..76cb496 --- /dev/null +++ b/nginx/nginx.conf @@ -0,0 +1,23 @@ +user nginx; +worker_processes 1; + +error_log /var/log/nginx/error.log warn; +pid /var/run/nginx.pid; + + +events { + worker_connections 1024; +} + +http { + include /etc/nginx/mime.types; + default_type application/octet-stream; + + sendfile off; + + keepalive_timeout 60; + + #gzip on; + + include /etc/nginx/conf.d/*.conf; +} \ No newline at end of file diff --git a/package.json b/package.json index 8077807..7123578 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "domino-client", - "version": "0.1.0", + "version": "0.1.3", "private": true, "type": "commonjs", "scripts": { @@ -12,11 +12,11 @@ "type-check": "vue-tsc --build --force", "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore", "format": "prettier --write src/", - "docker-build": "docker build -t arhuako/domino-client:latest .", - "docker-tag": "docker tag arhuako/domino-client:latest 192.168.1.115:5000/arhuako/domino-client:0.1.0", - "docker-push": "docker push 192.168.1.115:5000/arhuako/domino-client:latest && docker push 192.168.1.115:5000/arhuako/domino-client:0.1.0", + "docker-build": "docker build -t 192.168.1.115:5000/arhuako/domino-client:latest .", + "docker-tag": "docker tag 192.168.1.115:5000/arhuako/domino-client:latest 192.168.1.115:5000/arhuako/domino-client:0.1.4", + "docker-push": "docker push 192.168.1.115:5000/arhuako/domino-client:latest && docker push 192.168.1.115:5000/arhuako/domino-client:0.1.4", "publish": "npm run docker-build && npm run docker-tag && npm run docker-push", - "serve": "npm run build-only && http-server ./dist -c-1" + "serve": "npm run build-only && http-server ./dist -c-1 -s " }, "dependencies": { "@pixi/sound": "^6.0.0", diff --git a/src/App.vue b/src/App.vue index 3f514b1..2222138 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ import { inject, onMounted, onUnmounted } from 'vue' import { RouterView } from 'vue-router' import type { AuthenticationService } from './services/AuthenticationService' import { useEventBusStore } from './stores/eventBus' +import { sound } from '@pixi/sound' const auth: AuthenticationService = inject('auth') as AuthenticationService auth.fromStorage() @@ -17,8 +18,38 @@ const handleBeforeUnload = (evt: any) => { // console.log('location.href :>> ', location.pathname) } +// document.addEventListener('visibilitychange', () => { +// console.log('visibilitychange') +// let playingOnHide = false +// if (document.hidden) { +// playingOnHide = true +// sound.pauseAll() +// } else { +// // Page became visible! Resume playing if audio was "playing on hide" +// if (playingOnHide) { +// sound.resumeAll() +// } +// } +// }) + +// const soundContextResume = () => { +// const context = sound.context.audioContext +// if (context.state === 'suspended' || context.state === 'interrupted') { +// context.resume() +// } +// } + +// document.addEventListener('click', function (event) { +// console.log('click document :>> ', event) +// console.log('screen :>> ', screen) +// // if (event.target instanceof HTMLButtonElement) { +// // sound.play('click') +// // } +// }) + onMounted(() => { window.addEventListener('beforeunload', handleBeforeUnload) + // window.addEventListener('focus', soundContextResume) }) onUnmounted(() => { diff --git a/src/assets/base.css b/src/assets/base.css index f5503ae..40d4f57 100644 --- a/src/assets/base.css +++ b/src/assets/base.css @@ -1,9 +1,17 @@ :root { - /* bulma color variables */ --bulma-primary-h: 40deg; --bulma-primary-s: 48%; - --bulma-primary-l: 48%; - --bulma-info-h: 168deg; - --bulma-info-s: 58%; - --bulma-info-l: 28%; + --bulma-primary-l: 38%; + --bulma-link-h: 36deg; + --bulma-link-s: 19%; + --bulma-link-l: 16%; + --bulma-info-h: 192deg; + --bulma-info-l: 34%; + --bulma-success-s: 52%; + --bulma-success-l: 38%; + --bulma-warning-h: 58deg; + --bulma-warning-s: 61%; + --bulma-warning-l: 41%; + --bulma-danger-s: 74%; + --bulma-danger-l: 37%; } diff --git a/src/common/constants.ts b/src/common/constants.ts index a0f3ddd..9974fb0 100644 --- a/src/common/constants.ts +++ b/src/common/constants.ts @@ -3,11 +3,20 @@ export const DEFAULT_CONTAINER_OPTIONS = { height: 100, x: 0, y: 0, - visible: true + visible: true, } export const ORIENTATION_ANGLES: { [key: string]: number } = { north: 0, east: Math.PI / 2, south: Math.PI, - west: (3 * Math.PI) / 2 + west: (3 * Math.PI) / 2, } + +export const DIRECTION_INDEXES: { [key: string]: number } = { + north: 0, + east: 1, + south: 2, + west: 3, +} + +export const DIRECTIONS = ['north', 'east', 'south', 'west'] diff --git a/src/common/helpers.ts b/src/common/helpers.ts index 1bbd7ac..e61be82 100644 --- a/src/common/helpers.ts +++ b/src/common/helpers.ts @@ -99,8 +99,6 @@ export async function wait(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)) } -export const DIRECTIONS = ['north', 'east', 'south', 'west'] - export function isTilePair(tile: TileDto): boolean { return !!(tile.pips && tile.pips[0] === tile.pips[1]) } diff --git a/src/game/Board.ts b/src/game/Board.ts index 59b8928..b57b10a 100644 --- a/src/game/Board.ts +++ b/src/game/Board.ts @@ -2,11 +2,11 @@ import { Application, Container, EventEmitter, Text, Ticker } from 'pixi.js' import { Scale, type ScaleFunction } from '@/game/utilities/scale' import type { AnimationOptions, Movement, PlayerDto, TileDto } from '@/common/interfaces' import { Tile } from '@/game/Tile' -import { DIRECTIONS, createContainer, isTilePair } from '@/common/helpers' +import { createContainer, isTilePair } from '@/common/helpers' import { createText } from '@/game/utilities/fonts' import { LoggingService } from '@/services/LoggingService' import { GlowFilter } from 'pixi-filters' -import { ORIENTATION_ANGLES } from '@/common/constants' +import { DIRECTION_INDEXES, DIRECTIONS, ORIENTATION_ANGLES } from '@/common/constants' import type { OtherHand } from './OtherHand' import { sound } from '@pixi/sound' import { t } from '@/i18n' @@ -181,6 +181,8 @@ export class Board extends EventEmitter { const tileDto = tile.toPlain() let direction = move.type === 'left' ? this.leftDirection : this.rightDirection + move.direction = this.hasSpaceToMove(move) + if (this.tiles.length === 0) { x = 0 y = 0 @@ -592,6 +594,22 @@ export class Board extends EventEmitter { return [canPlayNorth, canPlayEast, canPlaySouth, canPlayWest] } + hasSpaceToMove(move: Movement): string | undefined { + if (move.tile === undefined || move.direction === undefined) { + return undefined + } + + const nextValidMoves = this.nextTileValidMoves(move.tile, move.type) + let index = DIRECTION_INDEXES[move.direction] + let valid = nextValidMoves[index] + while (!valid && index < nextValidMoves.length) { + index++ + valid = nextValidMoves[index % nextValidMoves.length] + } + + return DIRECTIONS[index] + } + clean() { this.tiles = [] this.boneyard = [] diff --git a/src/game/Game.ts b/src/game/Game.ts index 482c000..08ad5ba 100644 --- a/src/game/Game.ts +++ b/src/game/Game.ts @@ -81,8 +81,7 @@ export class Game extends EventEmitter { iniialStuff(app: Application) { app.stage.addChild(this.backgroundLayer) const background = new Sprite(Assets.get(`bg-${this.options.background}`)) - background.width = this.app.canvas.width - background.height = this.app.canvas.height + this.backgroundLayer.addChild(background) } diff --git a/src/i18n/en.json b/src/i18n/en.json index 3a8caa9..70f94ca 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -44,5 +44,7 @@ "starting_game": "Starting game...", "your-turn": "Your turn!", "player-turn": "{0}'s turn!" - } + }, + "back": "Back", + "session-name": "Session Name" } diff --git a/src/i18n/es.json b/src/i18n/es.json index 9c79065..36c08fd 100644 --- a/src/i18n/es.json +++ b/src/i18n/es.json @@ -20,7 +20,7 @@ "welcome-to-the-user-username-s-home-page": "Bienvenido a la página de inicio de {0}", "available-sessions": "Sesiones disponibles", "background-color": "Color de fondo", - "blue-fabric": "Fabrica azul", + "blue-fabric": "Tela azul", "cancel": "Cancelar", "copy": "Copiar", "game": { @@ -44,5 +44,7 @@ "seed": "Semilla", "seed-session-seed": "Semilla: {0}", "start": "Comenzar", - "yellow-fabric": "Tela amarilla" + "yellow-fabric": "Tela amarilla", + "back": "Volver", + "session-name": "Nombre de la sesión" } diff --git a/src/main.ts b/src/main.ts index 45cd707..8567c29 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,9 +1,8 @@ -import './assets/main.css' - import { createApp } from 'vue' import { createPinia } from 'pinia' import '../node_modules/bulma/css/bulma.css' +import './assets/main.css' import App from './App.vue' import router from './router' diff --git a/src/router/index.ts b/src/router/index.ts index 4e223a1..97fc4f7 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -51,7 +51,7 @@ const router = createRouter({ ], }, { - path: '/game:id', + path: '/game/:id', component: AuthenticatedLayout, children: [ { diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index f1e2488..1acc97a 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -15,7 +15,7 @@ let background = ref('green') let teamed = ref(false) let pointsToWin = ref(100) let seed = ref('') -let sessionName = ref('Test Value') +let sessionName = ref(`Test #${Date.now()}`) let matchSessions = ref([]) let dataInterval: any @@ -130,7 +130,6 @@ async function deleteMatch(id: string) { async function loadData() { const listResponse = await gameService.listMatchSessions() matchSessions.value = listResponse.data - sessionName.value = `Test #${Date.now()}` } onMounted(() => { @@ -156,7 +155,7 @@ function copy(sessionSeed: string) {
- +
@@ -226,53 +225,64 @@ function copy(sessionSeed: string) {
-
- - +
+

{{ sessionState?.name }}

+
Players
+
+

{{ player.name }}

+

{{ player.ready ? 'Ready' : 'Not ready' }}

+
+
+ + - + +
-
+

{{ $t('available-sessions') }}

{{ $t('no-sessions-available') }}

-
-
-
-
-

{{ session.name }}

-

{{ $t('id-session-_id', [session._id]) }}

-

{{ $t('players-session-players-length', [session.players.length]) }}

-

- {{ $t('seed-session-seed', [session.seed]) }} - -

-

{{ $t('status-session-status', [session.status]) }}

-
-
-
-

- - {{ $t('join') }} - -

-

- - {{ $t('delete') }} - -

+
+
+
+
+
+

{{ session.name }}

+

{{ $t('id-session-_id', [session._id]) }}

+

{{ $t('players-session-players-length', [session.players.length]) }}

+

+ {{ $t('seed-session-seed', [session.seed]) }} + +

+

{{ $t('status-session-status', [session.status]) }}

+
+ + +
+
diff --git a/src/views/MatchView.vue b/src/views/MatchView.vue index 298ec01..397d380 100644 --- a/src/views/MatchView.vue +++ b/src/views/MatchView.vue @@ -73,6 +73,11 @@ onBeforeMount(() => {
+
+ +