<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>
