From 9eb2465db9388895ed8a3dc3236418b33c87423f Mon Sep 17 00:00:00 2001
From: Jeff Moe <moe@spacecruft.org>
Date: Sun, 25 Dec 2022 18:40:49 -0700
Subject: [PATCH] Background picker. Doesnt work with older svelte-color-picker

---
 src/routes/+page.svelte | 48 +++++++++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 417b790..87d9ada 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -3,36 +3,49 @@ import Ticker from 'svelte-ticker';
 import {HsvPicker} from 'svelte-color-picker';
 import { enhance } from '$app/forms';
 
-function colorCallback(chryon_font_color) {
-    let r = chryon_font_color.detail.r;
-    let g = chryon_font_color.detail.g;
-    let b = chryon_font_color.detail.b;
-    let a = chryon_font_color.detail.a;
+
+function chyron_font_color_Callback(chyron_font_color) {
+    let r = chyron_font_color.detail.r;
+    let g = chyron_font_color.detail.g;
+    let b = chyron_font_color.detail.b;
+    let a = chyron_font_color.detail.a;
     let horizontal = document.querySelector(".horizontal");
-    horizontal.style.color = `rgb(${r},${g},${b},${a})`;
+    horizontal.style.color = `rgba(${r},${g},${b},${a})`;
+}
+
+function chyron_background_color_Callback(chyron_background_color) {
+    let rb = chyron_background_color.detail.r;
+    let gb = chyron_background_color.detail.g;
+    let bb = chyron_background_color.detail.b;
+    let ab = chyron_background_color.detail.a;
+    let hz_background = document.querySelector(".horizontal");
+    hz_background.style.background = `rgba(${rb},${gb},${bb},${ab})`;
 }
 
 /** @type {import('./$types').ActionData} */
 export let form;
 let chyron_text_01 = 'chyron text here.  Mooooo.';
 let chyron_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here.  Mooooo. 555.';
-let chyron_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.'
-let chyron_text_04 = '  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.'
+let chyron_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
+let chyron_text_04 = '  1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
 
 let chyron_font_size = 2.75;
 let chyron_font_weight = 600;
 let chyron_speed = 30;
 
-
 </script>
 
 <div class="main">
 	<div class="container">
-        <h1>Scrolltron</h1>
+        <!-- <center><h3>Scrolltron</h3></center> -->
+	</div>
+	<br>
+	<div class="font_color_picker">
+		Font Color: <HsvPicker on:colorChange={chyron_font_color_Callback} startColor={"#00FF00"}/>
 	</div>
     <p></p>
-    <div class="picker">
-		<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
+    <div class="background_color_picker">
+		Background Color: <HsvPicker on:colorChange={chyron_background_color_Callback} startColor={"#5500FF"}/>
 	</div>
 	<div class="form">
 		<p>
@@ -76,7 +89,7 @@ let chyron_speed = 30;
     .horizontal{
         /* padding:426px;*/
 		font-family: Verdana, sans-serif;
-		background: rgba(30, 24, 150, 0.4);
+		/*background: rgba(30, 24, 150, 0.4);*/
         @keyframes horizontal {
 		100% { transform: translateX(-50%); }
     	}
@@ -97,11 +110,18 @@ let chyron_speed = 30;
 		font-size: 2.75em;
 		background: rgba(128, 128, 128, 0);
 	}
-		.picker{
+		.font_color_picker{
 		color: rgb(61, 177, 206);
 		font-family: Verdana, sans-serif;
 		font-weight: 600;
 		font-size: 2.75em;
 		background: rgba(128, 128, 128, 0);
 	}
+		.background_color_picker{
+		color: rgb(197, 123, 27);
+		font-family: Verdana, sans-serif;
+		font-weight: 600;
+		font-size: 2.75em;
+		background: rgba(128, 128, 128, 0);
+	}
 </style>