diff --git a/site/src/components/Game.vue b/site/src/components/Game.vue index af4ba2c..81c75c1 100644 --- a/site/src/components/Game.vue +++ b/site/src/components/Game.vue @@ -83,21 +83,48 @@ const timeLeft = ref(15000); const timestamp = useTimestamp({ callback: (t) => { timeLeft.value = props.game.deadline - t; + if (!notYet.value && storedAction.value != null) { + emit('action', storedAction.value); + storedAction.value = null; + } }, interval: 60, }); watch(() => props.game.deadline, (now) => { initTimeLeft.value = now - timestamp.value; -}, {immediate: true}); -const moveColor = computed(() => timeLeft.value > 3000 ? 'primary' : 'red'); +}, { immediate: true }); +const notYet = computed(() => initTimeLeft.value - timeLeft.value < 3000); +const moveColor = computed(() => { + if (storedAction.value != null) { + return 'green'; + } + if (timeLeft.value > 3000) { + return 'gray'; + } + return 'red'; +}); + +const storedAction = ref(null); function attack(left: boolean) { const action = left === props.dealer ? 'self' : 'across'; + if (notYet.value) { + storedAction.value = { action }; + return; + } + // Emit the action immediately if enough time has passed, since we don't + // want the tick rate to be the difference between winning and losing. + storedAction.value = null; emit('action', { action }); } function useItem(evt: number) { const action = evt.toString() as "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7"; + if (notYet.value) { + storedAction.value = { action }; + return; + } + storedAction.value = null; emit('action', { action }); }