diff --git a/src/App.vue b/src/App.vue index 03d6af3..6bb5d41 100644 --- a/src/App.vue +++ b/src/App.vue @@ -14,6 +14,7 @@ import Buffer from "./components/Buffer.vue"; import Matrix from "./components/Matrix.vue"; import { Game } from "./game/Game"; + import {useTimer} from "./components/timer"; export default defineComponent({ components: { @@ -23,6 +24,7 @@ Matrix }, setup() { + const {updateCountdown} = useTimer(); const game = new Game({ matrix: [ "AA", "BB", "CC", @@ -50,6 +52,7 @@ provide("sequences", readonly(sequences)); provide("size", readonly(size)); provide("matrix", readonly(matrix)); + updateCountdown(game, remainingMilliseconds); return { level diff --git a/src/components/Timer.vue b/src/components/Timer.vue index 710eeac..cfe41d8 100644 --- a/src/components/Timer.vue +++ b/src/components/Timer.vue @@ -10,23 +10,10 @@ export default defineComponent({ setup() { - const remainingTime = inject("remainingMilliseconds") as Ref; + const remainingMilliseconds = inject("remainingMilliseconds") as Ref; const timeoutMilliseconds = inject("timeoutMilliseconds") as Ref; - 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, diff --git a/src/components/timer.ts b/src/components/timer.ts new file mode 100644 index 0000000..c01fb0d --- /dev/null +++ b/src/components/timer.ts @@ -0,0 +1,28 @@ +import { Game } from '@/game/Game'; +import { Ref } from 'vue'; + +interface Timer { + updateCountdown(game: Game, remainingMilliseconds: Ref): void +} + +export function useTimer(): Timer { + function updateCountdown(game: Game, remainingMilliseconds: Ref) { + const updateTime = () => { + remainingMilliseconds.value = game.remainingMilliseconds; + + if (remainingMilliseconds.value > 0) { + requestAnimationFrame(() => { + updateTime(); + }); + } + } + + requestAnimationFrame(() => { + updateTime(); + }); + } + + return { + updateCountdown + } +} diff --git a/src/sass/main.scss b/src/sass/main.scss index 0863808..f0fc522 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -5,6 +5,7 @@ $yellow: #d0ee58; * { box-sizing: border-box; + user-select: none; } html, body { @@ -105,6 +106,7 @@ main { width: 32px; height: 32px; margin: 0 5px 5px 0; + cursor: pointer; } }