cpu
ca3ba141a7
added systemd service howto traefik nginix set_real_ip_from improved readme visuals fixed on mobile labels removed updated readme fixed visuals overlay for the hotkey disable screen lock clean up git precommit hooks clean up clean up update check for update feature added build-time information fixed date clean up added hook script fix fix fix hooks fixed webhook setup players stay in run all timers mode mqtt mqtt allways connected mqtt messages work capturing mqtt in edit player mqtt in Setup updated readme state of the mqtt Global Pass turn offline mode docs: update documentation to reflect current codebase and MQTT features - Update README.md with global MQTT commands - Enhance architecture.md with comprehensive data model and MQTT state - Update development.md with project structure and workflow - Remove redundant script listings - Fix formatting and organization rebase
263 lines
11 KiB
Vue
263 lines
11 KiB
Vue
<template>
|
|
<div class="flex flex-col h-screen overflow-hidden" :class="{'dark': theme === 'dark'}">
|
|
<!-- Header Bar -->
|
|
<header class="p-3 bg-gray-100 dark:bg-gray-800 shadow-md flex justify-between items-center shrink-0">
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="navigateToSetup" class="btn btn-secondary text-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline mr-1" viewBox="0 0 20 20" fill="currentColor"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" /></svg>
|
|
Setup
|
|
</button>
|
|
<button v-if="gameMode === 'normal'" @click="switchToAllTimersMode" class="btn btn-warning text-sm">
|
|
Run All Timers
|
|
</button>
|
|
<button v-if="gameMode === 'allTimers'" @click="switchToNormalMode" class="btn btn-warning text-sm">
|
|
Back to Normal Mode
|
|
</button>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2">
|
|
<button @click="navigateToInfo" class="btn-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
</button>
|
|
<button @click="toggleMute" class="btn-icon">
|
|
<svg v-if="!isMuted" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /></svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15zm9.949-9.949a1 1 0 00-1.414 0L12 7.05l-2.085-2.085a1 1 0 00-1.414 1.414L10.586 8.5l-2.085 2.085a1 1 0 001.414 1.414L12 9.914l2.085 2.085a1 1 0 001.414-1.414L13.414 8.5l2.085-2.085a1 1 0 000-1.414z" /></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="flex-grow overflow-hidden flex flex-col" ref="gameArea">
|
|
<!-- Normal Mode -->
|
|
<div v-if="gameMode === 'normal' && currentPlayer && nextPlayer" class="h-full flex flex-col">
|
|
<PlayerDisplay
|
|
:player="currentPlayer"
|
|
is-current-player-area
|
|
area-class="bg-gray-100 dark:bg-gray-800"
|
|
@tapped="handleCurrentPlayerTap"
|
|
class="flex-1 min-h-0"
|
|
/>
|
|
<div class="shrink-0 h-1 bg-blue-500"></div>
|
|
<PlayerDisplay
|
|
:player="nextPlayer"
|
|
is-next-player-area
|
|
area-class="bg-gray-200 dark:bg-gray-700"
|
|
@swiped-up="handlePassTurn"
|
|
class="flex-1 min-h-0"
|
|
/>
|
|
</div>
|
|
|
|
<!-- All Timers Running Mode -->
|
|
<div v-if="gameMode === 'allTimers'" class="p-4 h-full flex flex-col">
|
|
<div class="mb-4 flex justify-start items-center">
|
|
<h2 class="text-2xl font-semibold">All Timers Mode</h2>
|
|
</div>
|
|
<div class="flex-grow overflow-y-auto space-y-2">
|
|
<!-- Use playersToListInAllTimersMode -->
|
|
<PlayerListItem
|
|
v-for="(player) in playersToListInAllTimersMode"
|
|
:key="player.id"
|
|
:player="player"
|
|
@tapped="() => handlePlayerTapAllTimers(indexInFullList(player.id))"
|
|
/>
|
|
<p v-if="playersToListInAllTimersMode.length === 0 && players.length > 0 && anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
|
|
All players are skipped or an issue occurred.
|
|
</p>
|
|
<p v-if="playersToListInAllTimersMode.length === 0 && players.length > 0 && !anyTimerCouldRun" class="text-center text-gray-500 dark:text-gray-400 py-6">
|
|
All players are skipped.
|
|
</p>
|
|
<p v-if="players.length === 0" class="text-center text-gray-500 dark:text-gray-400 py-6">
|
|
No players to display.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
|
|
import { useStore } from 'vuex';
|
|
import { useRouter } from 'vue-router';
|
|
import PlayerDisplay from '../components/PlayerDisplay.vue';
|
|
import PlayerListItem from '../components/PlayerListItem.vue';
|
|
import { AudioService } from '../services/AudioService';
|
|
import { WakeLockService } from '../services/WakeLockService';
|
|
|
|
const store = useStore();
|
|
const router = useRouter();
|
|
|
|
const theme = computed(() => store.getters.theme);
|
|
const players = computed(() => store.getters.players);
|
|
const currentPlayer = computed(() => store.getters.currentPlayer);
|
|
const nextPlayer = computed(() => store.getters.nextPlayer);
|
|
const gameMode = computed(() => store.getters.gameMode);
|
|
const isMuted = computed(() => store.getters.isMuted);
|
|
const gameRunning = computed(() => store.getters.gameRunning);
|
|
|
|
let timerInterval = null;
|
|
|
|
// Shows all non-skipped players when in 'allTimers' mode.
|
|
const playersToListInAllTimersMode = computed(() => {
|
|
if (gameMode.value === 'allTimers' && players.value) {
|
|
return players.value.filter(p => !p.isSkipped);
|
|
}
|
|
return [];
|
|
});
|
|
|
|
// This computed is still used for audio logic and auto-revert
|
|
const anyTimerRunningInAllMode = computed(() => {
|
|
if (!players.value) return false;
|
|
return players.value.some(p => p.isTimerRunning && !p.isSkipped);
|
|
});
|
|
|
|
const anyTimerCouldRun = computed(() => {
|
|
if (!players.value) return false;
|
|
return players.value.some(p => !p.isSkipped);
|
|
});
|
|
|
|
|
|
const indexInFullList = (playerId) => {
|
|
if (!players.value) return -1;
|
|
return players.value.findIndex(p => p.id === playerId);
|
|
}
|
|
|
|
// ... (onMounted, onUnmounted, watchers, navigation, and other methods remain the same)
|
|
onMounted(async () => {
|
|
if (!players.value || players.value.length < 2) {
|
|
router.push({ name: 'Setup' });
|
|
return;
|
|
}
|
|
|
|
timerInterval = setInterval(() => {
|
|
store.dispatch('tick');
|
|
}, 1000);
|
|
|
|
if (gameRunning.value) {
|
|
await WakeLockService.request();
|
|
}
|
|
});
|
|
|
|
onUnmounted(async () => {
|
|
clearInterval(timerInterval);
|
|
AudioService.stopContinuousTick();
|
|
AudioService.cancelPassTurnSound();
|
|
await WakeLockService.release();
|
|
});
|
|
|
|
watch(gameRunning, async (isRunning) => {
|
|
if (isRunning) {
|
|
await WakeLockService.request();
|
|
} else {
|
|
if (!WakeLockService.isActive()) return;
|
|
setTimeout(async () => {
|
|
if (!store.getters.gameRunning && WakeLockService.isActive()) {
|
|
await WakeLockService.release();
|
|
}
|
|
}, 3000);
|
|
}
|
|
});
|
|
|
|
watch(gameMode, (newMode) => {
|
|
AudioService.stopContinuousTick();
|
|
AudioService.cancelPassTurnSound();
|
|
|
|
if (newMode === 'allTimers') {
|
|
if (anyTimerRunningInAllMode.value) {
|
|
AudioService.startContinuousTick();
|
|
}
|
|
} else {
|
|
if (currentPlayer.value && currentPlayer.value.isTimerRunning) {
|
|
AudioService.playPassTurnAlert();
|
|
}
|
|
}
|
|
});
|
|
|
|
watch(anyTimerRunningInAllMode, (isRunning) => {
|
|
if (gameMode.value === 'allTimers') {
|
|
if (isRunning) {
|
|
AudioService.startContinuousTick();
|
|
} else {
|
|
AudioService.stopContinuousTick();
|
|
}
|
|
}
|
|
});
|
|
|
|
watch(currentPlayer, (newPlayer, oldPlayer) => {
|
|
if (gameMode.value === 'normal' && newPlayer && newPlayer.isTimerRunning && oldPlayer && newPlayer.id !== oldPlayer.id) {
|
|
AudioService.playPassTurnAlert();
|
|
}
|
|
}, { deep: true });
|
|
|
|
watch(() => currentPlayer.value?.isTimerRunning, (isRunning, wasRunning) => {
|
|
if (gameMode.value === 'normal' && currentPlayer.value) {
|
|
if (isRunning === true && wasRunning === false) {
|
|
AudioService.playPassTurnAlert();
|
|
} else if (isRunning === false && wasRunning === true) {
|
|
AudioService.cancelPassTurnSound();
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
const navigateToSetup = async () => {
|
|
await WakeLockService.release();
|
|
const isAnyTimerActive = store.getters.gameRunning;
|
|
if (isAnyTimerActive) {
|
|
if (window.confirm('Game is active. Going to Setup will pause all timers. Continue?')) {
|
|
store.commit('PAUSE_ALL_TIMERS');
|
|
router.push({ name: 'Setup' });
|
|
}
|
|
} else {
|
|
router.push({ name: 'Setup' });
|
|
}
|
|
};
|
|
|
|
const navigateToInfo = async () => {
|
|
await WakeLockService.release();
|
|
if (store.getters.gameRunning) {
|
|
store.commit('PAUSE_ALL_TIMERS');
|
|
}
|
|
router.push({ name: 'Info' });
|
|
};
|
|
|
|
const toggleMute = () => { store.dispatch('setMuted', !isMuted.value); };
|
|
const handleCurrentPlayerTap = () => { store.dispatch('toggleCurrentPlayerTimerNormalMode'); };
|
|
const handlePassTurn = () => {
|
|
if(currentPlayer.value && !currentPlayer.value.isSkipped) {
|
|
AudioService.cancelPassTurnSound();
|
|
const wasRunning = currentPlayer.value.isTimerRunning;
|
|
store.dispatch('passTurn').then(() => {
|
|
const newCurrentPlayer = store.getters.currentPlayer;
|
|
if (wasRunning && gameMode.value === 'normal' && newCurrentPlayer && newCurrentPlayer.isTimerRunning) {
|
|
AudioService.playPassTurnAlert();
|
|
}
|
|
});
|
|
}
|
|
};
|
|
const handlePlayerTapAllTimers = (playerIndex) => { store.dispatch('togglePlayerTimerAllTimersMode', playerIndex); };
|
|
const switchToAllTimersMode = () => { store.dispatch('switchToAllTimersMode'); };
|
|
const switchToNormalMode = () => { store.dispatch('switchToNormalMode'); };
|
|
|
|
// Auto-revert logic
|
|
watch(anyTimerRunningInAllMode, (anyRunning) => {
|
|
// Only revert if we are IN allTimers mode and NO timers are running
|
|
if (gameMode.value === 'allTimers' && !anyRunning && players.value && players.value.length > 0) {
|
|
const nonSkippedPlayersExist = players.value.some(p => !p.isSkipped);
|
|
if (nonSkippedPlayersExist) {
|
|
setTimeout(() => {
|
|
// Double check condition before switching, state might change rapidly
|
|
if(gameMode.value === 'allTimers' && !store.getters.players.some(p => p.isTimerRunning && !p.isSkipped)){
|
|
console.log("All timers paused in AllTimersMode, reverting to Normal Mode.");
|
|
store.dispatch('switchToNormalMode');
|
|
}
|
|
}, 250); // A small delay to prevent flickering if a timer is immediately restarted
|
|
} else {
|
|
// All players are skipped, so stay in all timers mode but paused.
|
|
console.log("All players skipped in AllTimersMode, staying paused.");
|
|
AudioService.stopContinuousTick();
|
|
}
|
|
}
|
|
});
|
|
</script> |