2. Other improvements

- Deleted the file title_cards_dialog.html (it is not used) - Slightly improved UI for title card entry - Added ability to change font color in HEX (added to settings) - Added customization so you can speed up or slow down the text zoom - Need to manually add new localization strings for other languages
wrycu · Jun 13, 2024 · 0f7bfa8 · 0f7bfa8
1 parent 933fcc3
commit 0f7bfa8
Show file tree

Hide file tree

Showing 4 changed files with 130 additions and 25 deletions.
diff --git a/lang/en.json b/lang/en.json
@@ -216,27 +216,40 @@
     "ffg-star-wars-enhancements.controls.title-cards.title": "Title Cards",
     "ffg-star-wars-enhancements.controls.title-cards.toptext-label": "Top Text",
     "ffg-star-wars-enhancements.controls.title-cards.bottomtext-label": "Bottom Text",
+    "ffg-star-wars-enhancements.controls.title-cards.toptext-label-2": "Top Text",
+    "ffg-star-wars-enhancements.controls.title-cards.bottomtext-label-2": "Bottom Text",
     "ffg-star-wars-enhancements.controls.title-cards.launch": "Launch Title Cards",
     "ffg-star-wars-enhancements.title-cards.ui.name": "Title Cards settings",
     "ffg-star-wars-enhancements.title-cards.ui.hint": "Configure Title Cards",
     "ffg-star-wars-enhancements.title-cards.ui.label": "Open Configuration",
     "ffg-star-wars-enhancements.title-cards.title-cards-logo": "Title Cards Logo",
+    "ffg-star-wars-enhancements.title-cards.title-cards-text-color": "Text Color Hex",
+    "ffg-star-wars-enhancements.title-cards.title-cards-text-color-hint": "Logo Color Hex",
     "ffg-star-wars-enhancements.title-cards.title-cards-logo-hint": "Logo to display first",
     "ffg-star-wars-enhancements.title-cards.title-cards-music": "Title Cards music",
     "ffg-star-wars-enhancements.title-cards.title-cards-music-hint": "Music to play. Default settings are synced to the Book of Boba Fett intro",
     "ffg-star-wars-enhancements.title-cards.title-cards-music-delay": "Music start delay",
     "ffg-star-wars-enhancements.title-cards.title-cards-music-delay-hint": "Delay in seconds until the music starts playing",
-    "ffg-star-wars-enhancements.title-cards.title-cards-top-font-size": "Top Text Size",
+    "ffg-star-wars-enhancements.title-cards.title-cards-top-font-size": "Episode Top Text Size",
     "ffg-star-wars-enhancements.title-cards.title-cards-top-font-size-hint": "Size of the top text in px",
-    "ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size": "Bottom Text Size",
+    "ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size": "Episode Bottom Text Size",
     "ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size-hint": "Size of the bottom text in px",
+    "ffg-star-wars-enhancements.title-cards.title-cards-top-font-size-2": "Logo Top Text Size",
+    "ffg-star-wars-enhancements.title-cards.title-cards-top-font-size-hint-2": "Size of the top text in px",
+    "ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size-2": "Logo Bottom Text Size",
+    "ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size-hint-2": "Size of the bottom text in px",
     "ffg-star-wars-enhancements.title-cards.title-cards-logo-delay": "Logo delay",
     "ffg-star-wars-enhancements.title-cards.title-cards-logo-delay-hint": "Time in seconds until the logo appears",
     "ffg-star-wars-enhancements.title-cards.title-cards-logo-duration": "Logo duration",
     "ffg-star-wars-enhancements.title-cards.title-cards-logo-duration-hint": "Time in seconds the logo remains on screen",
     "ffg-star-wars-enhancements.title-cards.title-cards-text-delay": "Text delay",
     "ffg-star-wars-enhancements.title-cards.title-cards-text-delay-hint": "Time in seconds until the text appears",
     "ffg-star-wars-enhancements.title-cards.title-cards-text-duration": "Text duration",
+    "ffg-star-wars-enhancements.title-cards.title-cards-text-duration-hint": "Time in seconds until the text appears",
+    "ffg-star-wars-enhancements.title-cards.title-cards-zoom-speed": "Zoom speed",
+    "ffg-star-wars-enhancements.title-cards.title-cards-zoom-speed-hint": "Zoom speed in second (bigger = slower, smaller = faster)",
     "ffg-star-wars-enhancements.title-cards.title-cards-close-delay": "Window close delay",
+    "ffg-star-wars-enhancements.title-cards.title-cards-logo-head": "Logo",
+    "ffg-star-wars-enhancements.title-cards.title-cards-episode-head": "Episode",
     "ffg-star-wars-enhancements.title-cards.title-cards-close-delay-hint": "Time in seconds since the text disappeared to close the window. If 0, will not close the window"
 }
diff --git a/scripts/title_cards.js b/scripts/title_cards.js
@@ -5,15 +5,27 @@ export function title_cards_dialog() {
         title: game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.title"),
         content: `
           <form>
+            <h2>${game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-logo-head")}</h1>
             <div class="form-group">
-            <p>
-              <label>${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.toptext-label")}</label>
-              <input type='text' name='toptext'></input>
-              </p>
-              <p>
-              <label>${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.bottomtext-label")}</label>
-              <input type='text' name='bottomtext'></input>
-              </p>
+                <p>
+                <label>${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.toptext-label-2")}</label>
+                <input type='text' name='toptext-2' margin-right: 10px margin-left: 10px></input>
+                </p>
+                <p>
+                <label>${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.bottomtext-label-2")}</label>
+                <input type='text' name='bottomtext-2'></input>
+                </p>
+            </div>
+            <h2>${game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-episode-head")}</h1><br>
+			<div class="form-group">
+                <p>
+                <label>${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.toptext-label")}</label>
+                <input type='text' name='toptext' margin-right: 10px margin-left: 10px></input>
+                </p>
+                <p>
+                <label>${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.bottomtext-label")}</label>
+                <input type='text' name='bottomtext'></input>
+                </p>
             </div>
           </form>`,
         buttons: {
@@ -22,6 +34,8 @@ export function title_cards_dialog() {
                 label: `${game.i18n.localize("ffg-star-wars-enhancements.controls.title-cards.launch")}`,
                 callback: (html) => {
                     let data = {
+                        toptext2: html.find("input[name='toptext-2']").val(),
+                        bottomtext2: html.find("input[name='bottomtext-2']").val(),
                         toptext: html.find("input[name='toptext']").val(),
                         bottomtext: html.find("input[name='bottomtext']").val(),
                     };
@@ -72,6 +86,15 @@ export function init() {
         type: String,
         filePicker: "folder",
         default: "",
+    });
+	game.settings.register("ffg-star-wars-enhancements", "title-cards-text-color", { 
+        module: "ffg-star-wars-enhancements",
+        name: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-text-color"),
+        hint: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-text-color-hint"),
+        scope: "world",
+        config: false,
+        type: String,
+        default: "#ffd54e",
     });
     game.settings.register("ffg-star-wars-enhancements", "title-cards-music", {
         module: "ffg-star-wars-enhancements",
@@ -91,6 +114,24 @@ export function init() {
         config: false,
         type: Number,
         default: 0.0,
+    });
+	game.settings.register("ffg-star-wars-enhancements", "title-cards-top-font-size-2", {
+        module: "ffg-star-wars-enhancements",
+        name: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-top-font-size-2"),
+        hint: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-top-font-size-hint-2"),
+        scope: "world",
+        config: false,
+        type: Number,
+        default: 50,
+    });
+    game.settings.register("ffg-star-wars-enhancements", "title-cards-bottom-font-size-2", {
+        module: "ffg-star-wars-enhancements",
+        name: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size-2"),
+        hint: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-bottom-font-size-hint-2"),
+        scope: "world",
+        config: false,
+        type: Number,
+        default: 150,
     });
     game.settings.register("ffg-star-wars-enhancements", "title-cards-top-font-size", {
         module: "ffg-star-wars-enhancements",
@@ -99,7 +140,7 @@ export function init() {
         scope: "world",
         config: false,
         type: Number,
-        default: 150,
+        default: 30,
     });
     game.settings.register("ffg-star-wars-enhancements", "title-cards-bottom-font-size", {
         module: "ffg-star-wars-enhancements",
@@ -108,7 +149,7 @@ export function init() {
         scope: "world",
         config: false,
         type: Number,
-        default: 50,
+        default: 100,
     });
     game.settings.register("ffg-star-wars-enhancements", "title-cards-logo-delay", {
         module: "ffg-star-wars-enhancements",
@@ -145,6 +186,15 @@ export function init() {
         config: false,
         type: Number,
         default: 5,
+    });
+	game.settings.register("ffg-star-wars-enhancements", "title-cards-zoom-speed", {
+        module: "ffg-star-wars-enhancements",
+        name: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-zoom-speed"),
+        hint: game.i18n.localize("ffg-star-wars-enhancements.title-cards.title-cards-zoom-speed-hint"),
+        scope: "world",
+        config: false,
+        type: Number,
+        default: 35,
     });
     game.settings.register("ffg-star-wars-enhancements", "title-cards-close-delay", {
         module: "ffg-star-wars-enhancements",
@@ -240,12 +290,16 @@ class TitleCardsApplication extends Application {
      */
     getData() {
         let data = this.data;
+        data.textColor = game.settings.get("ffg-star-wars-enhancements", "title-cards-text-color");
         data.topSize = game.settings.get("ffg-star-wars-enhancements", "title-cards-top-font-size");
         data.bottomSize = game.settings.get("ffg-star-wars-enhancements", "title-cards-bottom-font-size");
+        data.topSize2 = game.settings.get("ffg-star-wars-enhancements", "title-cards-top-font-size-2");
+        data.bottomSize2 = game.settings.get("ffg-star-wars-enhancements", "title-cards-bottom-font-size-2");
         data.logoDelay = game.settings.get("ffg-star-wars-enhancements", "title-cards-logo-delay");
         data.logoDuration = game.settings.get("ffg-star-wars-enhancements", "title-cards-logo-duration");
         data.textDelay = game.settings.get("ffg-star-wars-enhancements", "title-cards-text-delay");
         data.textDuration = game.settings.get("ffg-star-wars-enhancements", "title-cards-text-duration");
+        data.zoomSpeed = game.settings.get("ffg-star-wars-enhancements", "title-cards-zoom-speed");
         return data;
     }
 
@@ -425,3 +479,4 @@ class title_cards_UISettings extends FormApplication {
         }
     }
 }
+
diff --git a/templates/title_cards.html b/templates/title_cards.html
@@ -1,6 +1,15 @@
 <div class="title-cards-bg">
-    <div class="title-cards-logo">
-        <img src="{{logo}}">
+    <div class="title-cards-logo">	
+        <div class="logo noselect">
+            {{#if logo}}
+            <img src="{{logo}}">
+            {{else}}
+            <div class="title-cards-text-logo">
+                <div class="top-text-logo">{{toptext2}}</div>
+                <div class="bottom-text-logo">{{bottomtext2}}</div>
+            </div>
+            {{/if}}
+        </div>
     </div>
 
     <div class="title-cards-text">
@@ -18,7 +27,7 @@
             width: 100%;
             height: 100%;
             background-color: #000;
-            color: #ffd54e;
+            color: {{textColor}};
             overflow: hidden;
         }
 
@@ -30,10 +39,27 @@
             width: 50%;
             height: auto;
             opacity: 0;
-            animation: logoAnimation {{logoDuration}}s ease-out {{logoDelay}}s, zoomIn 40s forwards;
+            animation: logoAnimation {{logoDuration}}s ease-out {{logoDelay}}s, zoomIn {{zoomSpeed}}s forwards;
             display: flex;
             justify-content: center;
         }
+
+        .title-cards-text-logo {
+            position: absolute;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 100%;
+            height: auto;
+            opacity: 0;
+            animation: logoAnimation {{logoDuration}}s ease-out {{logoDelay}}s, zoomIn {{zoomSpeed}}s forwards;
+            font-family: "News Cycle";
+            font-weight: bolder;
+        }
 
         @keyframes logoAnimation {
             0% {
@@ -63,9 +89,9 @@
             left: 50%;
             transform: translate(-50%, -50%);
             width: 100%;
-            height: 50%;
+            height: auto;
             opacity: 0;
-            animation: textFadeAnimation {{textDuration}}s ease-out {{textDelay}}s, zoomIn 40s forwards;
+            animation: textFadeAnimation {{textDuration}}s ease-out {{textDelay}}s, zoomIn {{zoomSpeed}}s forwards;
             font-family: "News Cycle";
             font-weight: bolder;
         }
@@ -87,6 +113,24 @@
             font-size: {{bottomSize}}px;
             align-items: flex-start;
         }
+
+        .top-text-logo,
+        .bottom-text-logo {
+            flex: 1;
+            display: flex;
+            line-height: 100%;
+
+        }
+
+        .top-text-logo {
+            font-size: {{topSize2}}px;
+            align-items: flex-end;
+        }
+
+        .bottom-text-logo {
+            font-size: {{bottomSize2}}px;
+            align-items: flex-start;
+        }
 
         @keyframes textFadeAnimation {
             0% {

diff --git a/templates/title_cards_dialog.html b/templates/title_cards_dialog.html