From abe1eddd49fbf6b1bb9500c15d4c74ddd4684121 Mon Sep 17 00:00:00 2001
From: Jan Umbach <jan@umbach.dev>
Date: Sat, 22 Jun 2024 13:15:23 +0200
Subject: [PATCH] shx-3d-render

---
 snippets/shx-3d-render-input.liquid | 52 ++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 15 deletions(-)

diff --git a/snippets/shx-3d-render-input.liquid b/snippets/shx-3d-render-input.liquid
index 3bd7ffe..e6b5647 100644
--- a/snippets/shx-3d-render-input.liquid
+++ b/snippets/shx-3d-render-input.liquid
@@ -98,61 +98,73 @@
     const FilamentList = {
         "10": {
             "name": "Schwarz (Matt)",
-            "hex": "#000000"
+            "hex": "#000000",
+            "matte": true
         },
         "11": {
             "name": "Weiß (Matt)",
-            "hex": "#FFFFFF"
+            "hex": "#FFFFFF",
+            "matte": true
         },
         "12": {
             "name": "Gold (Glänzend)",
             "hex": "#FFD700",
-            "shiny": "true"
+            "silk": true
         },
         "13": {
             "name": "Rot (Glänzend)",
             "hex": "#BB0000",
-            "shiny": "true"
+            "silk": true
         },
         "14": {
             "name": "Holz (Matt)",
-            "hex": "#b47c4d"
+            "hex": "#b47c4d",
+            "matte": true
         },
         "17": {
             "name": "Blau (Fluoreszierend)",
-            "hex": "#1166FF"
+            "hex": "#1166FF",
+            "matte": true
         },
         "18": {
             "name": "Orange (Fluoreszierend)",
-            "hex": "#FFA500"
+            "hex": "#FFA500",
+            "matte": true
         },
         "19": {
             "name": "Diamant-Smaragdgrün (Glitzernd)",
-            "hex": "#1C2F1C"
+            "hex": "#1C2F1C",
+            "silk": true
         },
         "21": {
             "name": "Rosa (Matt)",
-            "hex": "#FFC0CB"
+            "hex": "#FFC0CB",
+            "matte": true
         },
         "22": {
             "name": "Hellblau (Matt)",
-            "hex": "#aaa"
+            "hex": "#aaa",
+            "matte": true
         },
         "23": {
             "name": "Schokolade (Matt)",
-            "hex": "#2b1d0e"
+            "hex": "#2b1d0e",
+            "matte": true
         },
         "26": {
             "name": "Beige (Matt)",
-            "hex": "#f5f5dc"
+            "hex": "#f5f5dc",
+            "matte": true
         },
         "27": {
             "name": "Marineblau (Matt)",
-            "hex": "#101060"
+            "hex": "#101060",
+            "matte": true
         },
         "28": {
             "name": "Gelb (Matt)",
-            "hex": "#EEE700"
+            "hex": "#EEE700",
+            "matte": true
         },
 
 
@@ -243,8 +255,18 @@
         for(let color in options) {
             html += `
                 <input type="radio" id="${inputID}-${color}" form="product-form-${section_id}" name="properties[${inputName}]" value="${options[color].name} #${color}" ${inputVal === color ? 'checked' : ''}>
-                <label for="${inputID}-${color}" style="background-color: ${options[color].hex};"></label>
+                <label for="${inputID}-${color}" style="background-color: ${options[color].hex};">
             `;
+
+            if(options[color].matte) {
+                html += `<span style="color: white; font-size: 0.8rem; position: absolute; bottom: 0; right: 0;">Matt</span>`;
+            }
+
+            if(options[color].silk) {
+                html += `<span style="color: white; font-size: 0.8rem; position: absolute; bottom: 0; right: 0;">Seide</span>`;
+            }
+
+            html += `</label>`;
         }
 
         html += `</div>`;