jeobeardy
/
Jeobeardy
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Added timer functionality

This commit is contained in:
Baer 2026-05-08 15:44:34 +02:00
parent 600c3a1836
commit 5e9bf4b31c
8 changed files with 173 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/server/websocket/handler.js
View File

@ -452,6 +452,22 @@ exports.handleMessage = ( gameSocketList, socket, dataRaw ) => {
reject( new Error("No playerId found for connection") );
}
break;
case "startTimer":
if( socket.locals.isHost ){
sendAllPlayers( socket, gameSocketList, "timerStarted", "A timer has been started", { timerAmount: payload });
resolve();
} else {
reject( new Error("No playerId found for connection") );
}
break;
case "stopTimer":
if( socket.locals.isHost ){
sendAllPlayers( socket, gameSocketList, "timerStopped", "The timer has been stopped", {});
resolve();
} else {
reject( new Error("No playerId found for connection") );
}
break;
}
});
}

4
src/webapp/assets/scss/styles.scss
View File

@ -205,3 +205,7 @@ $utilities: map-merge(
color: $gray-600;
opacity: 1;
}
.fs-sm {
font-size: .75em;
}

32
src/webapp/components/pages/Game.vue
View File

@ -44,7 +44,6 @@ let audioInstance = ref(null);
let showingAnswer = ref( false );
let showingQuestion = ref( false );
const isBoardSelected = computed( () => {
return selectedObject.value instanceof Board;
});
@ -153,9 +152,11 @@ function setUpListeners(){
});
gameStore.addSocketListener("questionLocked", ( _data ) => {
gameStore.acceptAnswers = false;
if( isFreeTextAnswerType.value ){
for( let i in gameStore.players ){
gameStore.players[i].isAnswering = true;
}
}
});
gameStore.addSocketListener("playerAnswersRevealed", ( data ) => {
for( let playerAnswer of data.payload.revealedAnswers ){
@ -206,10 +207,18 @@ function setUpListeners(){
gameStore.addSocketListener("questionLayerSelected", ( data ) => {
questionIndex.value = Number( data.payload.questionIndex );
});
gameStore.addSocketListener("timerStarted", ( data ) => {
gameStore.setUpTimer(Number( data.payload.timerAmount ));
});
gameStore.addSocketListener("timerStopped", ( data ) => {
gameStore.clearTimer();
});
}
function playerBuzzered( data ){
gameStore.acceptAnswers = false;
gameStore.clearTimer();
if( gameStore.playerId === data.payload.playerId ){
buzzBuzz.play();
}
@ -314,7 +323,8 @@ function questionAnsweredRevert( cIndex, bEIndex ){
gameStore.sendEvent("questionAnsweredRevert", payload );
}
function manualPointsAdjustment( playerId, playerName, points ){
function manualPointsAdjustment( playerId, playerName, arePointsAdded ){
let points = ( arePointsAdded ? gameStore.hostData.manualAdjustmentValue : -1 * gameStore.hostData.manualAdjustmentValue );
let payload = {
reopenQuestion: gameStore.acceptAnswers,
playerId: playerId,
@ -369,6 +379,17 @@ function revealPlayerAnswers( playerIds ){
gameStore.sendEvent("revealPlayerAnswers", payload);
}
function startTimer( timerAmount ){
if( gameStore.isHost ){
gameStore.sendEvent("startTimer", timerAmount );
}
}
function stopTimer(){
if( gameStore.isHost ){
gameStore.sendEvent("stopTimer", {});
}
}
gameStore.getBoardToGame( route.params.gameId )
.then( () => {
selectedObject.value = gameStore.board;
@ -402,8 +423,11 @@ onBeforeRouteLeave((to, from) => {
}
});
const isFreeTextAnswerType = computed(() => {
return gameStore.board.categories[categoryIndex.value].boardEntries[boardEntryIndex.value].answer.answerInteraction === 'freeTextInteraction';
})
//TODO List:
// -Profile Pic
// -More Question Types
// -Height of Category Headers (on Multiline)
@ -489,6 +513,8 @@ onBeforeRouteLeave((to, from) => {
@questionAnswered="questionAnswered"
@questionAnsweredRevert="questionAnsweredRevert"
@letNextPlayerChoose="letNextPlayerChoose"
@startTimer="startTimer"
@stopTimer="stopTimer"
/>
</div>

47
src/webapp/components/views/BoardEntryView.vue
View File

@ -1,8 +1,9 @@
<script setup>
import { computed } from 'vue';
import { computed, ref, watch } from 'vue';
import QuestionView from "@/components/views/QuestionView.vue"
import AnswerView from "@/components/views/AnswerView.vue"
import { useGameStore } from '@/stores/GameStore';
const props = defineProps({
board: Object,
@ -34,12 +35,18 @@ const props = defineProps({
const emit = defineEmits(["specificQuestionLayerSelected", "backToBoard", "playerBuzzered", "playAudio", "stopAudio", "showQuestion", "showAnswer", "hideQuestion", "hideAnswer" ]);
const gameStore = useGameStore();
let boardEntry = computed( () => {
return props.board.categories[props.cIndex].boardEntries[props.bEIndex];
})
const showingQuestion = computed( () => {
return props.isAnswerRevealed || ( props.isQuestionRevealed && !props.anyPlayerIsAnswering );
return props.isAnswerRevealed || ( props.isQuestionRevealed && (isFreeTextAnswerType.value || !props.anyPlayerIsAnswering) );
});
const isFreeTextAnswerType = computed(() => {
return gameStore.board.categories[props.cIndex].boardEntries[props.bEIndex].answer.answerInteraction === 'freeTextInteraction';
});
function showQuestion(){
@ -73,6 +80,34 @@ function stopAudio(){
emit( "stopAudio" );
}
const progressRef = ref(null);
let timerAnimation = null;
watch(
() => gameStore.timer.amount,
(newVal) => {
if( newVal !== null ){
if( timerAnimation !== null ){
timerAnimation.cancel();
timerAnimation = null;
}
animateTimer(newVal);
} else if(timerAnimation !== null ){
timerAnimation.cancel();
timerAnimation = null;
}
}
)
function animateTimer(timerAmountInS){
timerAnimation = progressRef.value.animate([
{ width: '100%' },
], {
duration: 1000 * timerAmountInS,
iterations: 1,
})
}
</script>
<template>
@ -140,8 +175,10 @@ function stopAudio(){
</template>
</div>
</div>
<div :class="[{'d-none': gameStore.timer.timeoutId === null}]" class="position-absolute bottom-0 start-0 w-100">
<div class="progress bg-primary" role="progressbar" aria-label="Basic example" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div ref="progressRef" class="progress-bar bg-pink-accent-primary" style="width: 0"></div>
</div>
</div>
</div>
</template>
<style scoped>
</style>

39
src/webapp/components/views/HostInteractionView.vue
View File

@ -1,6 +1,8 @@
<script setup>
import { computed } from 'vue';
import { useGameStore } from '@/stores/GameStore';
const props = defineProps({
objToDisplay: String,
board: Object,
@ -12,7 +14,9 @@ const props = defineProps({
}
});
const emit = defineEmits( "lockQuestion", "revealPlayerAnswers", "letNextPlayerChoose" );
const emit = defineEmits( "lockQuestion", "revealPlayerAnswers", "letNextPlayerChoose", "stopTimer", "startTimer" );
const gameStore = useGameStore();
let boardEntry = computed( () => {
if( props.objToDisplay === "BoardEntry" ){
@ -33,14 +37,41 @@ function letNextPlayerChoose(){
emit("letNextPlayerChoose");
}
function startTimer(){
emit("startTimer", gameStore.hostData.timerAmount);
}
function stopTimer(){
emit("stopTimer");
}
</script>
<template>
<div
v-if="boardEntry !== undefined"
class="d-flex flex-column justify-content-center border-top border-pink-accent-primary interaction-size"
class="d-flex flex-column justify-content-center border-top border-pink-accent-primary py-2 interaction-size"
>
<div class="row mx-1 mb-0">
<div class="col">
<label for="manual-adjustment-value">Point Adjustment Value</label>
<input v-model="gameStore.hostData.manualAdjustmentValue" id="manual-adjustment-value" type="text" name="manual-adjustment-value" class="form-control form-control-sm border-pink-accent-primary">
</div>
</div>
<div class="row mx-1 mb-3">
<div class="col">
<label for="timer-value">Timer Length <span class="fs-sm">(in seconds)</span></label>
<div class="d-flex gap-1">
<input v-model="gameStore.hostData.timerAmount" id="timer-value" type="number" min="1" class="form-control form-control-sm border-pink-accent-primary" :disabled="gameStore.timer.timeoutId !== null">
<button v-if="gameStore.timer.timeoutId === null" class="btn btn-sm btn-pink-accent-primary text-nowrap" @click="startTimer">
Start Timer
<font-awesome-icon icon="fa-solid fa-play"/>
</button>
<button v-else class="btn btn-sm btn-pink-accent-primary text-nowrap" @click="stopTimer">
Stop Timer
<font-awesome-icon icon="fa-solid fa-stop"/>
</button>
</div>
</div>
</div>
<div class="row mx-2">
<div class="col-12 text-center text-truncate">
Answer: {{ boardEntry.answer.answerText }}
@ -69,7 +100,7 @@ function letNextPlayerChoose(){
<style scoped>
.interaction-size{
height: 6rem;
min-height: 6rem;
}
.no-resize{
resize: none;

10
src/webapp/components/views/PlayersView.vue
View File

@ -29,11 +29,9 @@ const emit = defineEmits( "manualPointsAdjustment", "answerRuled", "revealPlayer
let buttonDivHeight = ref("3rem");
let navbarHeight = ref("4rem");
let manualAdjustmentValue = ref( 100 );
function manualPointsAdjustment( playerId, playerName, arePointsAdded ) {
let points = ( arePointsAdded ? manualAdjustmentValue.value : -1 * manualAdjustmentValue.value );
emit("manualPointsAdjustment", playerId, playerName, points );
emit("manualPointsAdjustment", playerId, playerName, arePointsAdded );
}
function answerRuled( playerId, playerName, isAnswerCorrect ){
@ -73,12 +71,6 @@ function letPlayerChoose( playerId ){
<div class="d-flex flex-column px-3" :style="[{'height': 'calc( 100vh - ' + (navbarHeight - buttonDivHeight) + 'px)' }]">
<div class="my-3">
<h3 class="border-bottom border-3 border-pink-accent-primary fw-bold">Players</h3>
<div v-if="props.isHost" class="row mb-3">
<div class="col">
<label for="manual-adjustment-value">Manual Adjustment Value</label>
<input v-model="manualAdjustmentValue" id="manual-adjustment-value" type="text" name="manual-adjustment-value" class="form-control form-control-sm border-pink-accent-primary">
</div>
</div>
<template v-for="(player) in props.players" :key="player._id">
<PlayerListEntry
:player="player"

3
src/webapp/main.js
View File

@ -5,7 +5,7 @@ import { FontAwesomeIcon, FontAwesomeLayers } from "@fortawesome/vue-fontawesome
import { library } from "@fortawesome/fontawesome-svg-core";
import { faDragon, faRightToBracket, faUsers, faUserPlus, faSpinner, faPlusSquare, faBorderAll, faPen, faTrash, faAngleDown, faAngleUp,
faPlus, faMinus, faAngleRight, faSquare, faPlay, faCircleExclamation, faSquareCheck, faSquareMinus, faHandPointer, faFloppyDisk,
faEye, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
faEye, faRotateLeft, faStop } from "@fortawesome/free-solid-svg-icons";
import { faCircleUser, faSquarePlus } from "@fortawesome/free-regular-svg-icons";
@ -44,6 +44,7 @@ library.add({
faFloppyDisk,
faEye,
faRotateLeft,
faStop,
});

41
src/webapp/stores/GameStore.js
View File

@ -4,6 +4,7 @@ import { useUserStore } from "@/stores/UserStore";
import { GAME_STATES } from "@/services/GameService";
import Board from "@/models/Board";
import { boardResponseToBoardModel } from "@/services/util";
import { nextTick } from 'vue';
const gService = new GameService();
@ -26,6 +27,11 @@ export const useGameStore = defineStore('game', {
isPlayerChoosing: false,
chosenEntry: undefined,
keepAliveInterval: undefined,
timer: {
timeoutId: null, //null | timeoutId
amount: null,
},
hostData: {},
}
},
actions: {
@ -63,6 +69,12 @@ export const useGameStore = defineStore('game', {
isHost: res.data.isHost,
gameState: res.data.gameState,
}
if(isHost){
this.hostData = {
manualAdjustmentValue: 100,
timerAmount: 15,
}
}
this.gameCode = res.data.gameCode;
resolve( data );
} else {
@ -83,6 +95,10 @@ export const useGameStore = defineStore('game', {
this.gameState = GAME_STATES.INIT;
this.gameCode = res.data.code;
this.isHost = true;
this.hostData = {
manualAdjustmentValue: 100,
timerAmount: 15,
}
resolve();
} else {
reject( res.data.error );
@ -182,6 +198,10 @@ export const useGameStore = defineStore('game', {
this.removeSocketListener("noUser");
this.players = data.payload.players;
this.isHost = true;
this.hostData = {
manualAdjustmentValue: 100,
timerAmount: 15,
}
resolve( data.payload.gameId );
});
@ -321,6 +341,27 @@ export const useGameStore = defineStore('game', {
this.addSocketListener("payloadIncomplete", ( _data ) => {
console.error("Invalid or Incomplete Payload!");
});
},
setUpTimer(timerAmountInS){
this.timer.timeoutId = setTimeout(() => {
this.acceptAnswers = false;
clearTimeout(this.timer);
this.timer.timeoutId = null;
nextTick(() => {
this.timer.amount = null;
});
if(this.isHost){
this.sendEvent("lockQuestion", {});
}
}, timerAmountInS * 1000);
this.timer.amount = timerAmountInS;
},
clearTimer(){
if(this.timer.timeoutId){
clearTimeout(this.timer.timeoutId);
this.timer.timeoutId = null;
this.timer.amount = null;
}
}
},
})