158 lines
3.9 KiB
Svelte
158 lines
3.9 KiB
Svelte
<script>
|
|
import { FormField, TextField, Button, Slider } from 'attractions';
|
|
import { onMount } from 'svelte';
|
|
import IoMdCheckmark from 'svelte-icons/io/IoMdCheckmark.svelte'
|
|
import IoMdAlert from 'svelte-icons/io/IoMdAlert.svelte'
|
|
import Chart from './Chart.svelte';
|
|
import { currentChartID } from './stores';
|
|
|
|
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 error = '';
|
|
|
|
let name = '';
|
|
let top = '';
|
|
let left = '';
|
|
let right = '';
|
|
let bot = '';
|
|
let fontSize = 12;
|
|
|
|
let disableButton = false;
|
|
async function trySubmit() {
|
|
disableButton = true;
|
|
|
|
try {
|
|
console.log('hello?');
|
|
const response = await fetch('https://chartmaker.oat.zone/create', {
|
|
method: 'POST',
|
|
mode: 'cors',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({name, top, left, right, bot}),
|
|
});
|
|
|
|
const code = await response.text();
|
|
currentChartID.set(code);
|
|
window.location.hash = '#' + code;
|
|
} catch(err) {
|
|
disableButton = false;
|
|
error = err.toString();
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
|
|
#error {
|
|
width: 400px;
|
|
background-color: rgba(255, 59, 59, 0.1);
|
|
border-radius: 20px;
|
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
|
|
text-align: left;
|
|
padding: 1em;
|
|
}
|
|
</style>
|
|
|
|
<div id="form">
|
|
let's make a chart!
|
|
|
|
<br><br>
|
|
|
|
<FormField
|
|
name="Name"
|
|
>
|
|
<TextField bind:value={name} placeholder="scrunklo moral status" disabled={disableButton} />
|
|
</FormField>
|
|
|
|
<FormField
|
|
name="X Axis"
|
|
help="Left to right"
|
|
>
|
|
<TextField bind:value={left} placeholder={example[0] || ''} disabled={disableButton} />
|
|
<TextField bind:value={right} placeholder={example[1] || ''} disabled={disableButton} />
|
|
</FormField>
|
|
|
|
<FormField
|
|
name="Y Axis"
|
|
help="Top to bottom"
|
|
>
|
|
<TextField bind:value={top} placeholder={example[2] || ''} disabled={disableButton} />
|
|
<TextField bind:value={bot} placeholder={example[3] || ''} disabled={disableButton} />
|
|
</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)}}
|
|
disabled={disableButton}
|
|
>
|
|
<span slot="tooltip-content" let:value>{value}px</span>
|
|
</Slider>
|
|
</FormField>
|
|
|
|
{#if error}
|
|
<div style="width: 100%; display: flex; justify-content: center">
|
|
<div id="error">
|
|
<div style="width: 16px; height: 16px; display: inline-block;"><IoMdAlert/></div>
|
|
{error}
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<div style="width: 100%; display: flex; justify-content: center">
|
|
<Button filled on:click={trySubmit} disabled={disableButton}>
|
|
<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>
|