game flow
This commit is contained in:
Jose Conde
@ -5,28 +5,22 @@ import { storeToRefs } from 'pinia'
|
||||
import { inject, onBeforeUnmount, ref } from 'vue'
|
||||
import { onMounted } from 'vue'
|
||||
import useClipboard from 'vue-clipboard3'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const socketService: any = inject('socket')
|
||||
let data = ref('')
|
||||
let responseField = ref('')
|
||||
let statusField = ref('')
|
||||
let sessionId = ref('')
|
||||
let seed = ref('')
|
||||
let playerId = ref('')
|
||||
let selectdAction: any = undefined
|
||||
|
||||
const { toClipboard } = useClipboard()
|
||||
const gameStore = useGameStore()
|
||||
const { moveToMake, canMakeMove, sessionState, gameState } = storeToRefs(gameStore)
|
||||
const options = [
|
||||
{ value: 'createSession', default: '{"user": "arhuako"}' },
|
||||
{ value: 'startSession', default: (id: string) => `{"sessionId": "${id}"}` }
|
||||
// { value: 'joinSession', default: '{"user": "pepe", "sessionId": "arhuako"}' },
|
||||
// { value: 'leaveSession', default: '{"user": "pepe", "sessionId": "arhuako"}' },
|
||||
// { value: 'chat message', default: 'chat message' }
|
||||
]
|
||||
const { moveToMake, canMakeMove, sessionState, gameState, playerState } = storeToRefs(gameStore)
|
||||
|
||||
onMounted(async () => {})
|
||||
onMounted(async () => {
|
||||
startMatch()
|
||||
})
|
||||
|
||||
if (!playerState?.value) {
|
||||
const router = useRouter()
|
||||
router.push({ name: 'home' })
|
||||
}
|
||||
|
||||
function makeMove(move: any) {
|
||||
moveToMake.value = move
|
||||
@ -37,73 +31,19 @@ onBeforeUnmount(() => {
|
||||
// socketService.disconnect()
|
||||
})
|
||||
|
||||
function actionSelected() {
|
||||
if (selectdAction.value === 'createSession') {
|
||||
responseField.value = ''
|
||||
} else if (selectdAction.value === 'startSession') {
|
||||
data.value = selectdAction.default(sessionId.value)
|
||||
return
|
||||
}
|
||||
|
||||
data.value = selectdAction.default
|
||||
}
|
||||
|
||||
const getMessage = (msg: string) => {
|
||||
if (msg.startsWith('{') && msg.endsWith('}')) return JSON.parse(msg)
|
||||
return msg
|
||||
}
|
||||
|
||||
async function createSession() {
|
||||
const response = await socketService.sendMessageWithAck('createSession', { user: 'arhuako' })
|
||||
sessionId.value = response.sessionId
|
||||
playerId.value = response.playerId
|
||||
}
|
||||
|
||||
async function startSession() {
|
||||
if (sessionId.value) {
|
||||
async function startMatch() {
|
||||
const sessionId = sessionState?.value?.id
|
||||
const seed = sessionState?.value?.seed
|
||||
const playerId = playerState?.value?.id
|
||||
if (sessionId) {
|
||||
await socketService.sendMessageWithAck('startSession', {
|
||||
sessionId: sessionId.value,
|
||||
seed: seed.value.trim()
|
||||
sessionId: sessionId,
|
||||
playerId: playerId,
|
||||
seed: seed?.trim()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
async function joinSession() {
|
||||
if (sessionId.value) {
|
||||
const response = await socketService.sendMessageWithAck('joinSession', {
|
||||
user: 'pepe',
|
||||
sessionId: sessionId.value
|
||||
})
|
||||
// sessionId.value = response.sessionId
|
||||
playerId.value = response.playerId
|
||||
}
|
||||
}
|
||||
|
||||
async function sendMessage() {
|
||||
if (selectdAction && data.value.trim() !== '') {
|
||||
const response = await socketService.sendMessageWithAck(
|
||||
selectdAction.value,
|
||||
getMessage(data.value.trim())
|
||||
)
|
||||
handleResponse(response)
|
||||
}
|
||||
// socketService.emit('message', data.value)
|
||||
}
|
||||
|
||||
function handleResponse(response: any) {
|
||||
if (selectdAction.value === 'createSession') {
|
||||
sessionId.value = response.sessionId
|
||||
playerId.value = response.playerId
|
||||
}
|
||||
|
||||
data.value = ''
|
||||
const responseStr = JSON.stringify(response, null, 2)
|
||||
responseField.value = !responseField.value
|
||||
? responseStr
|
||||
: responseField.value + '\n---\n ' + responseStr
|
||||
selectdAction = undefined
|
||||
}
|
||||
|
||||
function copySeed() {
|
||||
if (sessionState?.value?.seed) toClipboard(sessionState.value.seed)
|
||||
}
|
||||
@ -116,18 +56,25 @@ function copySeed() {
|
||||
Running: {{ sessionState?.sessionInProgress }} Seed: {{ sessionState?.seed }}
|
||||
<button @click="copySeed">Copy!</button>
|
||||
</p>
|
||||
<p>FreeEnds: {{ gameState?.boardFreeEnds }} - {{ gameState?.currentPlayer?.name }}</p>
|
||||
<p v-if="sessionId">SessionID: {{ sessionId }} PlayerID: {{ playerId }}</p>
|
||||
<p>
|
||||
FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
|
||||
gameState?.currentPlayer?.name
|
||||
}}
|
||||
- Score: {{ gameState?.scoreboard }}
|
||||
</p>
|
||||
<p v-if="sessionState?.id">
|
||||
SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }}
|
||||
</p>
|
||||
</section>
|
||||
<section class="block">
|
||||
<div class="game-container">
|
||||
<GameComponent :playerId="playerId" :canMakeMove="canMakeMove" @move="makeMove" />
|
||||
<GameComponent :playerId="playerState?.id" :canMakeMove="canMakeMove" @move="makeMove" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="block">
|
||||
<!-- <section class="block">
|
||||
<div class="fixed-grid has-8-cols">
|
||||
<div class="grid" v-if="!sessionId">
|
||||
<div class="grid" v-if="!sessionState?.id">
|
||||
<div class="cell">
|
||||
<button style="width: 200px" class="button" @click="createSession">
|
||||
Create Session
|
||||
@ -156,60 +103,8 @@ function copySeed() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-1 action-select"></div>
|
||||
</div>
|
||||
|
||||
<div class="grid" style="margin-top: 16px; display: none">
|
||||
<div>
|
||||
<!-- <ul id="messages"></ul> -->
|
||||
<form id="form" action="">
|
||||
<div class="action-select select">
|
||||
<select
|
||||
v-model="selectdAction"
|
||||
id="event"
|
||||
autocomplete="off"
|
||||
@change="actionSelected"
|
||||
>
|
||||
<option value="">Select event</option>
|
||||
<option :key="option.value" v-for="option in options" :value="option">
|
||||
{{ option.value }}
|
||||
</option>
|
||||
</select>
|
||||
<button @click.prevent.stop="sendMessage">Send</button>
|
||||
</div>
|
||||
<!-- <p><input id="room" autocomplete="off" /></p> -->
|
||||
<p>
|
||||
<textarea
|
||||
v-model="data"
|
||||
id="message"
|
||||
autocomplete="off"
|
||||
placeholder="Data"
|
||||
></textarea>
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid">
|
||||
<div>
|
||||
<textarea
|
||||
:value="responseField"
|
||||
id="response"
|
||||
autocomplete="off"
|
||||
placeholder="Response"
|
||||
></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<textarea
|
||||
:value="statusField"
|
||||
id="status"
|
||||
autocomplete="off"
|
||||
placeholder="Game status"
|
||||
></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,10 +1,57 @@
|
||||
<script setup lang="ts">
|
||||
import { inject, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import useClipboard from 'vue-clipboard3'
|
||||
|
||||
import { useGameStore } from '@/stores/game'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { LoggingService } from '@/services/LoggingService'
|
||||
|
||||
let seed = ref('')
|
||||
|
||||
const router = useRouter()
|
||||
const gameStore = useGameStore()
|
||||
const { toClipboard } = useClipboard()
|
||||
const socketService: any = inject('socket')
|
||||
const logger: LoggingService = inject<LoggingService>('logger') as LoggingService
|
||||
|
||||
function startGame() {
|
||||
router.push({ name: 'game' })
|
||||
const { readyForStart, sessionState, isSessionStarted, playerState } = storeToRefs(gameStore)
|
||||
|
||||
async function setPlayerReady() {
|
||||
logger.debug('Starting game')
|
||||
if (!sessionState.value) {
|
||||
logger.error('No session found')
|
||||
return
|
||||
}
|
||||
await socketService.sendMessageWithAck('playerReady', {
|
||||
user: 'arhuako',
|
||||
sessionId: sessionState.value.id
|
||||
})
|
||||
readyForStart.value = true
|
||||
}
|
||||
|
||||
async function createMatch() {
|
||||
logger.debug('Creating match')
|
||||
socketService.sendMessageWithAck('createSession', { user: 'arhuako' })
|
||||
}
|
||||
|
||||
async function joinMatch() {
|
||||
const sessionId = sessionState?.value?.id
|
||||
const playerId = playerState?.value?.id
|
||||
if (sessionId && playerId) {
|
||||
await socketService.sendMessageWithAck('joinSession', {
|
||||
user: 'pepe',
|
||||
sessionId: sessionId
|
||||
})
|
||||
// sessionId.value = response.sessionId
|
||||
// playerId.value = response.playerId
|
||||
}
|
||||
}
|
||||
|
||||
async function startMatch() {
|
||||
if (sessionState.value && sessionState.value.id) {
|
||||
router.push({ name: 'game' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -14,8 +61,22 @@ function startGame() {
|
||||
<h1 class="title is-2">Welcome to the Player's Home Page</h1>
|
||||
<div class="block">
|
||||
<p>This is a protected route.</p>
|
||||
<p>{{ sessionState || 'No session' }}</p>
|
||||
<p>{{ playerState?.ready || 'No player state' }}</p>
|
||||
<p>Session started: {{ isSessionStarted }}</p>
|
||||
</div>
|
||||
<button class="button" @click="startGame">Start Game</button>
|
||||
<div class="block">
|
||||
<input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
|
||||
</div>
|
||||
<button class="button" @click="createMatch" v-if="!isSessionStarted">
|
||||
Create Match Session
|
||||
</button>
|
||||
<button class="button" @click="setPlayerReady" v-if="isSessionStarted">
|
||||
<span v-if="!readyForStart">Ready</span><span v-else>Unready</span>
|
||||
</button>
|
||||
<button class="button" @click="startMatch" v-if="readyForStart">
|
||||
<span>Start</span>
|
||||
</button>
|
||||
</section>
|
||||
<section class="section available-sessions">
|
||||
<h2 class="title is-4">Available Sessions</h2>
|
||||
|
||||
@ -1,15 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { AuthenticationService } from '@/services/AuthenticationService'
|
||||
import { inject, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
|
||||
function login() {
|
||||
const authService = inject<AuthenticationService>('auth')
|
||||
|
||||
async function login() {
|
||||
try {
|
||||
await authService?.login(username.value, password.value)
|
||||
router.push({ name: 'home' })
|
||||
} catch (error) {
|
||||
alert('Invalid username or password')
|
||||
}
|
||||
// if (username.value === 'admin' && password.value === 'password') {
|
||||
localStorage.setItem('token', 'true')
|
||||
router.push({ name: 'home' })
|
||||
// localStorage.setItem('token', 'true')
|
||||
// router.push({ name: 'home' })
|
||||
// } else {
|
||||
// alert('Invalid username or password')
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user