marvin/breach
1
0
Fork 0
mirror of https://github.com/Kugelschieber/breach.git synced 2026-01-18 20:10:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Count down timer and some styling.

Browse Source
This commit is contained in:
Marvin Blum
2020-12-21 16:10:26 +01:00
parent 95f2a715b4
commit a66f6e1fa4
4 changed files with 36 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Timer.vue
View File

@@ -10,23 +10,10 @@
export default defineComponent({
setup() {
const remainingTime = inject("remainingMilliseconds") as Ref<number>;
const remainingMilliseconds = inject("remainingMilliseconds") as Ref<number>;
const timeoutMilliseconds = inject("timeoutMilliseconds") as Ref<number>;
const progress = computed(() => remainingTime.value/timeoutMilliseconds.value*100);
const countdown = computed(() => (remainingTime.value/1000).toFixed(2));
/*const updateTime = () => {
remainingTime.value = Math.max(0, (props.time.getTime() - new Date().getTime()) / 1000);
if (remainingTime.value > 0) {
requestAnimationFrame(() => {
updateTime();
});
}
}
requestAnimationFrame(() => {
updateTime();
});*/
const progress = computed(() => remainingMilliseconds.value/timeoutMilliseconds.value*100);
const countdown = computed(() => (remainingMilliseconds.value/1000).toFixed(2));
return {
countdown,

28
src/components/timer.ts Normal file
View File

@@ -0,0 +1,28 @@
import { Game } from '@/game/Game';
import { Ref } from 'vue';
interface Timer {
updateCountdown(game: Game, remainingMilliseconds: Ref<number>): void
}
export function useTimer(): Timer {
function updateCountdown(game: Game, remainingMilliseconds: Ref<number>) {
const updateTime = () => {
remainingMilliseconds.value = game.remainingMilliseconds;
if (remainingMilliseconds.value > 0) {
requestAnimationFrame(() => {
updateTime();
});
}
}
requestAnimationFrame(() => {
updateTime();
});
}
return {
updateCountdown
}
}