51 lines
842 B
Svelte
51 lines
842 B
Svelte
<g {transform}>
|
|
<path d={path} class:active on:click />
|
|
</g>
|
|
|
|
<script>
|
|
export let arc;
|
|
export let radius;
|
|
export let active = false;
|
|
|
|
const rotation = {
|
|
F: 0,
|
|
FS: 300,
|
|
AS: 240,
|
|
A: 180,
|
|
AP: 120,
|
|
FP: 60,
|
|
};
|
|
|
|
let y, x_delta;
|
|
$: y = Math.round(radius * (1 - Math.sin((60 / 180) * Math.PI)));
|
|
$: x_delta = Math.round(radius * Math.cos((60 / 180) * Math.PI));
|
|
|
|
let path;
|
|
$: path = `M ${radius},${radius} L ${
|
|
radius - x_delta
|
|
},${y} A ${radius},${radius} 0 0 1 ${radius + x_delta},${y} Z`;
|
|
|
|
let transform;
|
|
$: transform = `rotate(${rotation[arc]},${radius},${radius})`;
|
|
</script>
|
|
|
|
<style>
|
|
path {
|
|
fill: lightgrey;
|
|
stroke: white;
|
|
stroke-width: 2px;
|
|
}
|
|
|
|
path:hover {
|
|
fill: pink;
|
|
}
|
|
|
|
path.active:hover {
|
|
fill: pink;
|
|
}
|
|
|
|
path.active {
|
|
fill: #313131;
|
|
}
|
|
</style>
|