<template>
  <div class="discover">
    <label for="planet-color">pick a color</label>
    <input type="color" id="planet-color" v-model="color" class="colorpicker" />
    <button @click="send()">discover!</button>
    <p class="disclaimer">(discovered stars will show up for everyone)</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useChartStore } from "@/state/stars";
import router from "@/router";

const store = useChartStore();
const color = ref("#aaf0d1");

async function send() {
  await store.discover(color.value);
  console.log(color.value);
  router.push(`/visit/${store.visiting?.core.id}`);
  return;
}
</script>

<style scoped>
.discover {
  display: flex;
  flex-direction: column;
  gap: 1em;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.colorpicker,
::-moz-color-swatch {
  cursor: pointer;
  border: none;
  border-color: transparent;
  background-color: transparent;
  outline-style: none;
}

input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}
input[type="color"] {
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
}

label {
  color: #aaf0d1;
  cursor: pointer;
}

button {
  cursor: pointer;
  background-color: transparent;
  border-style: none;
  font-size: large;
  color: #aaf0d1;
}

button:focus,
button:hover {
  color: #f0d1aa;
}

.disclaimer {
  color: #f0d1aa;
}
</style>
