ストロークの太さと色変更に対応

index.html

@@ -129,7 +129,7 @@
         }
 
         #result {
-            background: rgba(0, 0, 0, 0.8);
+            background: rgb(0, 0, 0);
             text-align: center;
         }
 
@@ -154,7 +154,7 @@
         }
 
         .watermark {
-            -webkit-text-stroke: 1px rgba(0, 0, 0, 0.8);
+            -webkit-text-stroke: 1px rgb(0, 0, 0);
             paint-order: stroke fill;
             color: rgba(255, 255, 255, 0.8);
         }
@@ -164,12 +164,13 @@
             font-family: "Noto Sans JP";
         }
     </style>
-    <style id="text-shadow">
-        #mainMassage input,
-        .shadow-text {
-            text-shadow: 1px -0px 0 rgba(0, 0, 0, 0.8), 1px 0px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), -1px 0px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);
+    <style id="text-shadowPreview">
+        #mainMassage input {
+            text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);
         }
     </style>
+    <style id="text-shadow">
+    </style>
     <link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
         rel="stylesheet">
 </head>
@@ -183,7 +184,8 @@
             <div class="row">
                 <div class="col-lg-7 p-0 m-0 relative" id="edit">
                     <div id="emptySpace" class="row p-0 m-0">
-                        <p class="watermark text-end">Gal-Game UI Editor<br>https://huggingface.co/spaces/SenY/GalGameUI</p>
+                        <p class="watermark text-end">Gal-Game UI Editor<br>https://huggingface.co/spaces/SenY/GalGameUI
+                        </p>
                     </div>
                     <div id="messageWindow" class="row">
                         <div class="col-12 p-0 m-0 h-100">
@@ -259,7 +261,7 @@
                     </div>
                 </div>
                 <div class="col-lg-5 text-light bg-dark bg-gradient" id="controller">
-                    <h5><u>All images are processed on your browser. No data are sent to any servers.</u></h5>
+                    <h6><u>All images are processed on your browser. No data are sent to any servers.</u></h6>
                     <div class="input-group">
                         <button id="render" type="button" class="btn btn-success">Render</button>
                     </div>
@@ -309,9 +311,9 @@
                     </div>
                     <div class="input-group">
                         <button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
-                            (For preview)</button>
-                        <button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
                             (Recommended)</button>
+                        <button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
+                            (Shadow)</button>
                         <div class="vr"></div>
                         <button id="userInterfaceToggle" type="button"
                             class="btn btn-primary opacity-50">Fake-UI</button>
@@ -325,6 +327,14 @@
                         <input name="mainMessagePaddingSize" type="range" class="form-control form-range"
                             id="mainMessagePaddingSize" value="0" step="0.1" min="0" max="2">
                     </div>
+                    <div class="input-group">
+                        <span class="input-group-text bg-secondary text-light">StrokeColor</span>
+                        <input name="strokeColor" type="color" class="form-control form-control-color" id="strokeColor"
+                            value="#000000">
+                        <span class="input-group-text bg-secondary text-light">StrokeWeight</span>
+                        <input name="strokeWeight" type="range" class="form-control form-range" id="strokeWeight"
+                            value="0.05" step="0.01" min="0.01" max="0.2">
+                    </div>
                     <div class="input-group">
                         <button id="waterMarkToggle" type="button" class="btn btn-warning">WaterMark</button>
                     </div>
@@ -389,17 +399,17 @@
                         <li>Text-Stroke</li>
                         <li>
                             <ul>
-                                <li>For Preview</li>
+                                <li>Recommended</li>
                                 <li>
                                     <ul>
-                                        <li>text-shadowで8方向に1pxずつ置いてレンダリングしたもの。プレビュー画面ではこちらの方が綺麗に出る。</li>
+                                        <li>-webkit-text-strokeをフォントサイズの5%で設定したもの。大抵の場合実際のレンダリングではこちらのほうが綺麗に出るがプレビューでは表示がおかしくなる。
+                                        </li>
                                     </ul>
                                 </li>
-                                <li>Recommended</li>
+                                <li>Shadow</li>
                                 <li>
                                     <ul>
-                                        <li>-webkit-text-strokeをフォントサイズの5%で設定したもの。大抵の場合実際のレンダリングではこちらのほうが綺麗に出るがプレビューでは表示がおかしくなる。
-                                        </li>
+                                        <li>text-shadowで8方向に1pxずつ置いてレンダリングしたもの。webkit意外の場合など</li>
                                     </ul>
                                 </li>
                             </ul>
@@ -635,25 +645,47 @@
             document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
             createEditor();
         });
+        const setStroke = function (mode) {
+            let strokeSize = Math.ceil(document.querySelector("#left input").style.fontSize.replace("px", "") * document.getElementById("strokeWeight").value);
+            let strokeColor = hex2rgb(document.getElementById("strokeColor").value);
+            let css = '.shadow-text {-webkit-text-stroke: ' + strokeSize + 'px rgb(0, 0, 0) ;paint-order: stroke fill;}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
+            let css2 = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
+            document.getElementById("text-shadow").textContent = css;
+            document.getElementById("text-shadowPreview").textContent = css2;
+            if(mode == "b"){
+                document.getElementById("text-shadow").textContent = '.shadow-text {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
+                document.getElementById("text-shadowPreview").textContent = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
+            }
+        }
+        setStroke();
+        document.getElementById("strokeWeight").addEventListener("change", function () {
+            setStroke();
+        });
+        document.getElementById("strokeColor").addEventListener("change", function () {
+            setStroke();
+        });
+
         document.getElementById("textShadowToggleA").addEventListener("click", function () {
             document.getElementById("textShadowToggleB").classList.add("opacity-50");
             this.classList.toggle("opacity-50");
             if (this.classList.contains("opacity-50")) {
                 document.getElementById("text-shadow").textContent = "";
+                document.getElementById("text-shadowPreview").textContent = "";
             } else {
-                document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {text-shadow: 1px -0px 0 rgba(0, 0, 0, 0.8), 1px 0px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), -1px 0px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);}';
+                setStroke();
             }
         });
         document.getElementById("textShadowToggleB").addEventListener("click", function () {
             document.getElementById("textShadowToggleA").classList.add("opacity-50");
             this.classList.toggle("opacity-50");
-            let strokeSize = Math.ceil(document.querySelector("#left input").style.fontSize.replace("px", "") / 20);
             if (this.classList.contains("opacity-50")) {
                 document.getElementById("text-shadow").textContent = "";
+                document.getElementById("text-shadowPreview").textContent = "";
             } else {
-                document.getElementById("text-shadow").textContent = '#mainMassage input, .shadow-text {-webkit-text-stroke: ' + strokeSize + 'px black;paint-order: stroke fill;}';
+                setStroke("b");
             }
         });
+
         document.getElementById("userInterfaceToggle").addEventListener("click", function () {
             this.classList.toggle("opacity-50");
             if (!this.classList.contains("opacity-50")) {