<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 = document.location.pathname;
if (urlPath === "/") {
  urlPath = "/1-1";
}
useWebsocket(store, urlPath);

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

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

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

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