35 lines
823 B
Vue
35 lines
823 B
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } from 'vue'
|
|
import useBackground from './util/useBackground'
|
|
import { BLOCK_SIZE, STAGE_WIDTH, STAGE_HEIGHT } from './level/def'
|
|
import { calcSunAngle } from './util/useTime'
|
|
|
|
export interface Props {
|
|
time: number
|
|
x: number
|
|
}
|
|
|
|
const props = defineProps<Props>()
|
|
const canvas = ref<HTMLCanvasElement | null>(null)
|
|
|
|
const sunY = computed(() => calcSunAngle(props.time))
|
|
|
|
|
|
onMounted(() => {
|
|
const canvasEl = canvas.value
|
|
if (canvasEl === null) return
|
|
|
|
const drawBackground = useBackground(
|
|
canvasEl,
|
|
~~(STAGE_WIDTH * BLOCK_SIZE / 1.0),
|
|
~~(STAGE_HEIGHT * BLOCK_SIZE / 1.0),
|
|
)
|
|
|
|
watch(props, () => drawBackground(props.x, sunY.value), { immediate: true })
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<canvas ref="canvas" id="background" />
|
|
</template>
|