PWA fixed
This commit is contained in:
231
src/components/PlayerForm.vue
Normal file
231
src/components/PlayerForm.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<template>
|
||||
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex justify-center items-center p-4" @click.self="closeModal">
|
||||
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl w-full max-w-md">
|
||||
<h2 class="text-2xl font-semibold mb-4">{{ isEditing ? 'Edit Player' : 'Add New Player' }}</h2>
|
||||
<form @submit.prevent="submitForm">
|
||||
<!-- Name -->
|
||||
<div class="mb-4">
|
||||
<label for="playerName" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Name</label>
|
||||
<input type="text" id="playerName" v-model="editablePlayer.name" required class="input-base mt-1">
|
||||
</div>
|
||||
|
||||
<!-- Remaining Time -->
|
||||
<div class="mb-4">
|
||||
<label for="remainingTime" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Remaining Time (MM:SS or -MM:SS)</label>
|
||||
<input type="text" id="remainingTime" v-model="currentTimeFormatted" @blur="validateCurrentTimeFormat" placeholder="e.g., 55:30 or -02:15" required class="input-base mt-1">
|
||||
<p v-if="currentTimeFormatError" class="text-red-500 text-xs mt-1">{{ currentTimeFormatError }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Avatar -->
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar</label>
|
||||
<div class="mt-1 flex items-center">
|
||||
<img
|
||||
v-if="editablePlayer.avatar"
|
||||
:src="editablePlayer.avatar"
|
||||
alt="Avatar"
|
||||
class="w-16 h-16 rounded-full object-cover mr-4 border"
|
||||
/>
|
||||
<DefaultAvatarIcon
|
||||
v-else
|
||||
class="w-16 h-16 rounded-full object-cover mr-4 border text-gray-400 bg-gray-200 p-1"
|
||||
/>
|
||||
<button type="button" @click="capturePhoto" class="btn btn-secondary text-sm mr-2">Take Photo</button>
|
||||
<button type="button" @click="useDefaultAvatar" class="btn btn-secondary text-sm">Default</button>
|
||||
</div>
|
||||
<p v-if="cameraError" class="text-red-500 text-xs mt-1">{{ cameraError }}</p>
|
||||
</div>
|
||||
|
||||
<!-- "Pass Turn / My Pause" Hotkey -->
|
||||
<div class="flex items-center justify-between mb-6"> <!-- Added flex container and margin -->
|
||||
<label for="playerHotkey" class="text-sm font-medium text-gray-700 dark:text-gray-300 whitespace-nowrap mr-3">
|
||||
"Pass Turn / My Pause" Hotkey:
|
||||
</label>
|
||||
<div class="flex items-center"> <!-- Group input and clear button -->
|
||||
<input
|
||||
type="text"
|
||||
id="playerHotkey"
|
||||
:value="editablePlayer.hotkey ? editablePlayer.hotkey.toUpperCase() : ''"
|
||||
@keydown.prevent="captureHotkey($event, 'player')"
|
||||
placeholder="-"
|
||||
class="input-base w-12 h-8 text-center font-mono text-lg p-0"
|
||||
readonly
|
||||
maxlength="1"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
@click="clearHotkey('player')"
|
||||
class="text-xs text-blue-500 hover:underline ml-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="flex justify-end space-x-3 mt-6">
|
||||
<button type="button" @click="closeModal" class="btn btn-secondary">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" :disabled="!!currentTimeFormatError">{{ isEditing ? 'Save Changes' : 'Add Player' }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, watch, onMounted, computed } from 'vue';
|
||||
import { useStore } from 'vuex';
|
||||
import { CameraService } from '../services/CameraService';
|
||||
import { formatTime, parseTime } from '../utils/timeFormatter';
|
||||
import DefaultAvatarIcon from './DefaultAvatarIcon.vue';
|
||||
import { AudioService } from '../services/AudioService';
|
||||
|
||||
const props = defineProps({
|
||||
player: Object,
|
||||
});
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
|
||||
const store = useStore();
|
||||
const DEFAULT_AVATAR_MARKER = null;
|
||||
|
||||
const isEditing = computed(() => !!props.player);
|
||||
const editablePlayer = reactive({
|
||||
id: null,
|
||||
name: '',
|
||||
avatar: DEFAULT_AVATAR_MARKER,
|
||||
initialTimerSec: 3600,
|
||||
currentTimerSec: 3600,
|
||||
hotkey: '',
|
||||
});
|
||||
|
||||
const currentTimeFormatted = ref('60:00');
|
||||
const currentTimeFormatError = ref('');
|
||||
const cameraError = ref('');
|
||||
|
||||
const maxNegativeSeconds = computed(() => store.getters.maxNegativeTimeReached);
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
if (isEditing.value && props.player) {
|
||||
editablePlayer.id = props.player.id;
|
||||
editablePlayer.name = props.player.name;
|
||||
editablePlayer.avatar = props.player.avatar;
|
||||
editablePlayer.initialTimerSec = props.player.initialTimerSec;
|
||||
editablePlayer.currentTimerSec = props.player.currentTimerSec;
|
||||
editablePlayer.hotkey = props.player.hotkey || '';
|
||||
currentTimeFormatted.value = formatTime(props.player.currentTimerSec);
|
||||
} else {
|
||||
editablePlayer.avatar = DEFAULT_AVATAR_MARKER;
|
||||
editablePlayer.initialTimerSec = 3600;
|
||||
editablePlayer.currentTimerSec = 3600;
|
||||
currentTimeFormatted.value = formatTime(editablePlayer.currentTimerSec);
|
||||
}
|
||||
});
|
||||
|
||||
watch(currentTimeFormatted, (newTime) => {
|
||||
validateCurrentTimeFormat();
|
||||
if (!currentTimeFormatError.value) {
|
||||
editablePlayer.currentTimerSec = parseTime(newTime);
|
||||
if (!isEditing.value) {
|
||||
editablePlayer.initialTimerSec = editablePlayer.currentTimerSec;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function validateCurrentTimeFormat() {
|
||||
const time = currentTimeFormatted.value;
|
||||
const isNegativeInput = time.startsWith('-');
|
||||
if (!/^-?(?:[0-9]+:[0-5]\d)$/.test(time)) {
|
||||
currentTimeFormatError.value = 'Invalid format. Use MM:SS or -MM:SS (e.g., 05:30, -02:15).';
|
||||
} else {
|
||||
const parsedSeconds = parseTime(time);
|
||||
if (isNegativeInput && parsedSeconds > 0) {
|
||||
currentTimeFormatError.value = 'Negative time should parse to negative seconds.';
|
||||
} else if (parsedSeconds < maxNegativeSeconds.value) {
|
||||
currentTimeFormatError.value = `Time cannot be less than ${formatTime(maxNegativeSeconds.value)}.`;
|
||||
}
|
||||
else {
|
||||
currentTimeFormatError.value = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
async function capturePhoto() {
|
||||
cameraError.value = '';
|
||||
try {
|
||||
AudioService.resumeContext();
|
||||
const photoDataUrl = await CameraService.getPhoto();
|
||||
editablePlayer.avatar = photoDataUrl;
|
||||
} catch (error) {
|
||||
console.error('Failed to capture photo:', error);
|
||||
cameraError.value = error.message || 'Could not capture photo.';
|
||||
}
|
||||
}
|
||||
|
||||
function useDefaultAvatar() {
|
||||
editablePlayer.avatar = DEFAULT_AVATAR_MARKER;
|
||||
}
|
||||
|
||||
function captureHotkey(event, type) {
|
||||
event.preventDefault();
|
||||
let key = event.key;
|
||||
if (event.code === 'Space') {
|
||||
key = ' ';
|
||||
} else if (key.length > 1 && key !== ' ') {
|
||||
return;
|
||||
}
|
||||
key = key.toLowerCase();
|
||||
|
||||
if (type === 'player') {
|
||||
const existingPlayerHotkey = store.state.players.some(p => p.hotkey === key && p.id !== editablePlayer.id);
|
||||
const globalHotkeyInUseStopPause = store.state.globalHotkeyStopPause === key;
|
||||
const globalHotkeyInUseRunAll = store.state.globalHotkeyRunAll === key;
|
||||
|
||||
if (existingPlayerHotkey) {
|
||||
alert(`Hotkey "${key.toUpperCase()}" is already assigned to another player.`);
|
||||
return;
|
||||
}
|
||||
if (globalHotkeyInUseStopPause) {
|
||||
alert(`Hotkey "${key.toUpperCase()}" is already assigned as the Global Stop/Pause hotkey.`);
|
||||
return;
|
||||
}
|
||||
if (globalHotkeyInUseRunAll) {
|
||||
alert(`Hotkey "${key.toUpperCase()}" is already assigned as the Global Run All Timers hotkey.`);
|
||||
return;
|
||||
}
|
||||
editablePlayer.hotkey = key;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function clearHotkey(type) {
|
||||
if (type === 'player') {
|
||||
editablePlayer.hotkey = '';
|
||||
}
|
||||
}
|
||||
|
||||
function submitForm() {
|
||||
validateCurrentTimeFormat();
|
||||
if (currentTimeFormatError.value) return;
|
||||
|
||||
const playerPayload = { ...editablePlayer };
|
||||
|
||||
if (playerPayload.currentTimerSec <= maxNegativeSeconds.value) {
|
||||
playerPayload.isSkipped = true;
|
||||
} else if (playerPayload.isSkipped && playerPayload.currentTimerSec > maxNegativeSeconds.value) {
|
||||
playerPayload.isSkipped = false;
|
||||
}
|
||||
|
||||
if (!isEditing.value) {
|
||||
playerPayload.initialTimerSec = playerPayload.currentTimerSec;
|
||||
}
|
||||
|
||||
emit('save', playerPayload);
|
||||
closeModal();
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user