81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<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>
|