From 4c8f23cebac38fafb8a729a010816be2d24e86f4 Mon Sep 17 00:00:00 2001
From: ByteDice <bytedice.official@gmail.com>
Date: Sun, 19 Jan 2025 11:53:12 +0100
Subject: [PATCH] i have dementia

---
 toys/license/index.html | 11 ++++++-----
 toys/license/script.js  | 32 +++++++++++++++++++++++++-------
 toys/license/style.css  | 19 ++++++++++++++++++-
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/toys/license/index.html b/toys/license/index.html
index e097be7..56c5034 100644
--- a/toys/license/index.html
+++ b/toys/license/index.html
@@ -60,11 +60,12 @@
     
       <div>
         <div id="detailsContainer">
-          <h2>For      <h2  id="authorValue" >Byte Dice</h2></h2>
-          <h2>Issued   <h2  id="createdValue">2025-01-18</h2></h2>
-          <h2>Expires  <h2  id="expireValue" >never</h2></h2>
-          <h2>Identity <h2  id="genderValue" >unknown</h2></h2>
-          <h2>Silly    <div id="sillyValue"  >10/10</div></h2>
+          <h2>For      </h2><h2  id="authorValue" >Byte Dice</h2>
+          <h2>Issued   </h2><h2  id="createdValue">2025-01-18</h2>
+          <h2>Expires  </h2><h2  id="expireValue" >never</h2>
+          <h2>Identity </h2><h2  id="genderValue" >unknown</h2>
+          <h2>Silly</h2>
+          <div class="sillyGrid"><div id="sillyValue"></div></div>
         </div>
       </div>
 
diff --git a/toys/license/script.js b/toys/license/script.js
index dfd45de..cfb1cf8 100644
--- a/toys/license/script.js
+++ b/toys/license/script.js
@@ -36,18 +36,36 @@ identityInput.oninput = function() {
   genderValue.innerHTML = this.value
 }
 sillyInput.oninput = function() {
-  sillyNumberValue.innerHTML = prependZero(this.value)
+  setSillyValue(this.value)
 }
 signatureInput.oninput = function() {
   signatureValue.innerHTML = this.value
 }
 
 
-function onLoadLicense() {
-  authorValue.innerHTML  = prependZero(authorInput.value)
-  createdValue.innerHTML = prependZero(createdInput.value)
-  expireValue.innerHTML  = prependZero(expireInput.value)
-  genderValue.innerHTML  = prependZero(identityInput.value)
+function setSillyValue(value) {
+  sillyNumberValue.innerHTML = prependZero(value)
+  sillyValue.style.width = `${value * 10 + 0.1}%`
 
-  sillyNumberValue.innerHTML = prependZero(sillyInput.value)
+  let percent = value == 0 ? 0 : 100 / value
+  sillyValue.style.backgroundImage = `
+    repeating-linear-gradient(
+      to right, 
+    #000000 0px, 
+    #000000 3px,
+      transparent 3px, 
+      transparent ${percent}%
+    )
+  `
+}
+
+
+function onLoadLicense() {
+  authorValue.innerHTML    = authorInput.value
+  createdValue.innerHTML   = createdInput.value
+  expireValue.innerHTML    = expireInput.value
+  genderValue.innerHTML    = identityInput.value
+  signatureValue.innerHTML = signatureInput.value
+
+  setSillyValue(sillyInput.value)
 }
\ No newline at end of file
diff --git a/toys/license/style.css b/toys/license/style.css
index c9f0a3b..fe3c7b9 100644
--- a/toys/license/style.css
+++ b/toys/license/style.css
@@ -164,5 +164,22 @@ input {
   aspect-ratio: 1 / 1;
 }
 #sillyValue {
-  display: inline;
+  height: 100%;
+  background-color: #FF0000;
+
+}
+.sillyGrid {
+  width: 99%;
+  aspect-ratio: 10 / 1;
+  height: auto;
+  background-image: repeating-linear-gradient(
+    to right, 
+    #000000 0px, 
+    #000000 3px,
+    transparent 3px, 
+    transparent 10%
+  );
+  border: 3px solid black;
+  border-radius: 8px;
+  align-self: center;
 }
\ No newline at end of file