<template>
  <div
    class="starchart"
    :style="{
      width: `${store.stars.length * 24}px`,
      height: `${store.stars.length * 24}px`,
    }"
  >
    <SmallStar v-for="star in store.stars" :key="star.core.id" :star="star" />
  </div>
</template>

<script setup lang="ts">
import { useChartStore } from "@/state/stars";
import SmallStar from "@/components/SmallStar.vue";
const store = useChartStore();
store.fetchChart();
</script>

<style scoped lang="scss">
@import "@/assets/scss/colors.scss";

.starchart {
  cursor: grab;
  padding: 420px;
  position: relative;
  left: 0px;
  top: 0px;
}

.app {
  display: flex;
  flex-direction: column;
}

.nav {
  width: 100%;
  background-color: orange;
}
</style>
