<script setup>
import { ref, onMounted } from "vue";
import MainPage from "./MainPage.vue";
import Slider from "./components/Slider.vue";
import useWebsocket from "./utils/useWebsocket";
import { useWsStore } from "./store";
const store = useWsStore();

// use websocket
let urlPath = ref(document.location.pathname);
if (urlPath.value === "/") {
  urlPath.value = "/1-1";
}
useWebsocket(store, urlPath.value);

// size setting
// const size = ref(80);
// onMounted(() => {
//   setSize(size.value);
// });

// style update
// const styles = ref({});
// function setSize(value) {
//   const v = (value / 100).toFixed(2);
//   styles.value = {
//     transform: `scale(${v})`,
//     // transform: `scale(${v * 24 / 33}, ${v})`,
//     transformOrigin: "top left",
//   };
// }
</script>

<template>
  <div id="app-container">
    <MainPage :path="urlPath" />
    <Slider :size="size" @size-change="setSize" />
  </div>
</template>

<style scoped>
#app-container {
  width: 100vw;
  height: 100vh;
  background: #fff;
}
</style>
