added picture logic & started on upload button

toys/license/index.html

@@ -58,16 +58,15 @@
             <option value="pan-kisser"   >Pan-kisser</option>
             <option value="trans-kisser" >Trans-kisser</option>
             <option value="bytedice"     >Byte Dice</option>
-            <option value="custom"       >Custom (upload)</option>
+            <option value="custom" id="customPic">Custom (upload)</option>
-          </select><br>
+          </select><input type="file" id="picUpload" accept=".png,.jpg,.jpeg,.webp"><br>
           <!-- picture -->
         </form>
 
         <h1>Extra</h1>
         <form>
           <!-- decorations like
-            the QR-code
+            the QR-code and other "accessories"
-            license bg-image/bg-color
           -->
         </form>
 
@@ -77,6 +76,7 @@
             license border radius
             pic border radius
             title gradient (2 colors + direction) or flag
+            license bg-image/bg-gradient
           -->
         </form>
       </div>
@@ -84,7 +84,7 @@
       <div id="licenseContainer" class="blackBorderRect">
         <h3 id="titleValue">Boykisser license</h3>
         <div style="width: max-content;">
-          <div id="picContainer" class="blackBorderRect"></div>
+          <img id="picValue" class="blackBorderRect" src="">
 
           <div id="signatureContainer">
             <p id="signatureValue">Byte Dice</p>

toys/license/license.css

@@ -12,9 +12,10 @@
   grid-template-columns: repeat(2, auto);
   grid-template-rows: repeat(2, auto);
 }
-#picContainer {
+#picValue {
   width: 150px;
   height: 150px;
+  display: block;
 }
 #credits {
   position: absolute;

toys/license/script.js

@@ -46,10 +46,16 @@ function setSillyValue(value) {
   `;
 }
 
-function setPictureValue() {
+const picInput = document.getElementById("picInput")
+const picValue = document.getElementById("picValue")
 
+function setPictureValue() {
+  let src = picInput.value != "custom" ? `/assets/boykissers/${picInput.value}.png` : ""
+  picValue.src = src
 }
 
+picInput.oninput = function() { setPictureValue() }
+
 function prependZero(number) {
   return number < 10 ? "0" + number : number;
 }
@@ -67,4 +73,8 @@ function onLoadLicense() {
   if (sillyInput) {
     setSillyValue(sillyInput.value);
   }
+
+  if (picInput) {
+    setPictureValue()
+  }
 }