<template>
	<div class="full-screen-container w-h-full bg-cover fixed flex flex-col top-0 left-0 origin-top-left" ref="container">
		<slot></slot>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const { width, height } = screen

const container = ref(null)

const onResize = () => {
	const currentWidth = document.body.clientWidth
	container.value.style.transform = `scale(${currentWidth / width})`
}

onMounted(() => {
	container.value.style.width	 = `${width}px`
  container.value.style.height = `${height}px`
	window.addEventListener('resize', onResize)
})
onBeforeUnmount(() => {
	window.removeEventListener('resize', onResize)
})
</script>

<style scoped>
.full-screen-container {
	background-image: url('../../assets/img/bg-full.png');
}
</style>