103 lines
2.4 KiB
Svelte
103 lines
2.4 KiB
Svelte
<script>
|
|
import { FormField, TextField, Button, Slider } from 'attractions';
|
|
import { onMount } from 'svelte';
|
|
import IoMdCheckmark from 'svelte-icons/io/IoMdCheckmark.svelte'
|
|
import Chart from './Chart.svelte';
|
|
|
|
const examples = [
|
|
['wouldn\'t make a pipebomb', 'would make a pipebomb',
|
|
'would eat a pipebomb', 'wouldn\'t eat a pipebomb'],
|
|
['knows what sex is', 'doesn\'t know what sex is',
|
|
'has sex', 'doesn\'t have sex'],
|
|
['doesn\'t want to cause chaos', 'wants to cause chaos',
|
|
'causes chaos', 'doesn\'t cause chaos'],
|
|
['lawful', 'chaotic',
|
|
'good', 'evil'],
|
|
['women want me', 'women don\'t want me',
|
|
'fish want me', 'fish don\'t want me'],
|
|
];
|
|
|
|
let example = [];
|
|
|
|
onMount(() => {
|
|
example = examples[Math.floor(Math.random() * examples.length)];
|
|
});
|
|
|
|
let top = '';
|
|
let left = '';
|
|
let right = '';
|
|
let bot = '';
|
|
let fontSize = 12;
|
|
</script>
|
|
|
|
<style>
|
|
#form {
|
|
text-align: center;
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#preview {
|
|
text-align: center;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
max-height: 512px;
|
|
}
|
|
#previewcontainer {
|
|
width: 512px;
|
|
height: auto;
|
|
}
|
|
</style>
|
|
|
|
<div id="form">
|
|
let's make a chart!
|
|
|
|
<br><br>
|
|
|
|
<FormField
|
|
name="X Axis"
|
|
help="Left to right"
|
|
>
|
|
<TextField bind:value={left} placeholder={example[0] || ''} />
|
|
<TextField bind:value={right} placeholder={example[1] || ''} />
|
|
</FormField>
|
|
|
|
<FormField
|
|
name="Y Axis"
|
|
help="Top to bottom"
|
|
>
|
|
<TextField bind:value={top} placeholder={example[2] || ''} />
|
|
<TextField bind:value={bot} placeholder={example[3] || ''} />
|
|
</FormField>
|
|
|
|
<FormField
|
|
name="Font Size"
|
|
help="Adjust if necessary"
|
|
>
|
|
<Slider
|
|
bind:value={fontSize}
|
|
min={8}
|
|
max={20}
|
|
step={1}
|
|
tooltips="active"
|
|
ticks={{mode: 'step', step: 1, subDensity: 100/(20-8)}}
|
|
>
|
|
<span slot="tooltip-content" let:value>{value}px</span>
|
|
</Slider>
|
|
</FormField>
|
|
|
|
<div style="width: 100%; display: flex; justify-content: center">
|
|
<Button filled>
|
|
<div style="width: 16px; height: 16px; display: block-inline; padding-right: 6px;"><IoMdCheckmark/></div> create!
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="preview">
|
|
<div id="previewcontainer">
|
|
{#key top + left + right + bot + fontSize} <!-- awful hack -->
|
|
<Chart topText={top} leftText={left} rightText={right} bottomText={bot} fontSize={fontSize}/>
|
|
{/key}
|
|
</div>
|
|
</div> |