<script>
import Ticker from 'svelte-ticker';
import {HsvPicker} from 'svelte-color-picker';
import { enhance } from '$app/forms';

function colorCallback(rgba) {
    let r = rgba.detail.r;
    let g = rgba.detail.g;
    let b = rgba.detail.b;
    let a = rgba.detail.a;

    let horizontal = document.querySelector(".horizontal");
    horizontal.style.color = `rgb(${r},${g},${b})`;
}

/** @type {import('./$types').ActionData} */
export let form;
let chyron_text = 'chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here.  Mooooo.  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';

</script>

<div class="main">
	<div class="container">
        <h1>Scrolltron</h1>
	</div>
    <p></p>
    <div class="picker">
		<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
	</div>
    <p></p>
	<div class="form">
		  <p><input bind:value={chyron_text} placeholder="{chyron_text}">
		  </p>
	</div>

    <div class="horizontal">
         <!-- delay affects text starting point offset-->
        <Ticker pausing=false duration=60 delay=-5>
			{chyron_text}
        </Ticker>
    </div>
</div>


<style>
	h3 {
		padding:0;
		margin:0;
		font-family: sans-serif;
	}
	p {
		margin:30px 5px;
	}
    .horizontal{
        padding:376px;
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(128, 128, 128, 0);
        @keyframes horizontal {
		100% { transform: translateX(-50%); }
    	}
    }
	.main {
	}
	.container{
		color: pink;
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(128, 128, 128, 0);
	}
	.form{
		color: rgb(156, 102, 30);
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(128, 128, 128, 0);
	}
		.picker{
		color: rgb(61, 177, 206);
		font-family: Verdana, sans-serif;
		font-weight: 600;
		font-size: 2.75em;
		background: rgba(128, 128, 128, 0);
	}
</style>
