Add setting fields and configure them when opening window

public/html/settings.html

@@ -313,6 +313,27 @@
             </div>
             <div class="settings-item" id="discord-rpc-conf" style="display: none;">
                 <h2 i18id="DRPConf">Discord RPC</h2>
+                
+                <h3>Launcher</h3>
+
+                <h4>Details/Information</h4>
+                <input type="text" id="rpc-launch-details" class="text-field" placeholder="Preparing to launch" />
+
+                <h3>In-Game</h3>
+
+                <div class="checkbox" id="rpc-game-elapsed">
+                    <span>Elapsed Time</span>
+
+                    <div class="checkbox-mark">
+                        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="45.701px" height="45.7px" viewBox="0 0 45.701 45.7" xml:space="preserve"><g><g><path d="M20.687,38.332c-2.072,2.072-5.434,2.072-7.505,0L1.554,26.704c-2.072-2.071-2.072-5.433,0-7.504 c2.071-2.072,5.433-2.072,7.505,0l6.928,6.927c0.523,0.522,1.372,0.522,1.896,0L36.642,7.368c2.071-2.072,5.433-2.072,7.505,0 c0.995,0.995,1.554,2.345,1.554,3.752c0,1.407-0.559,2.757-1.554,3.752L20.687,38.332z"/></g></g></svg>
+                    </div>
+                </div>
+
+                <h4>Details/Information</h4>
+                <input type="text" id="rpc-game-details" class="text-field" placeholder="In-Game" />
+
+                <h4>Extra Text</h4>
+                <input type="text" id="rpc-game-state" class="text-field" placeholder="" />
             </div>
         </div>
     </body>

src/sass/components.sass

@@ -12,6 +12,22 @@
         p, span, div
             color: map.get($theme-map, "text")
 
+        /* Text Field
+
+        .text-field
+            width: calc(100% - 28px)
+            border-radius: 16px
+            padding: 8px
+            background-color: map.get($theme-map, "background2")
+            color: map.get($theme-map, "text")
+            border: unset
+            outline: none
+            font-size: 15px
+
+            &:placeholder 
+                color: map.get($theme-map, "text")
+            
+
         /* Directory selector
 
         .directory-selector

src/ts/lib/LauncherLib.ts

@@ -34,6 +34,14 @@ const config = new store ({
         patch: null, // Installed patch info ({ version, state } - related game's version and patch's state)
         runner: null, // Selected runner ({ folder, executable })
         rpc: false, // Discord RPC
+        rpcsettings: {
+            launcher: 'Preparing to launch',
+            ingame: {
+                details: 'In-Game',
+                state: null,
+                elapsed: true
+            }
+        },
         playtime: 0, // Number of seconds user spent in game
         hud: 'none', // none / dxvk / mangohud
         shaders: 'none', // none / shader's folder

src/ts/settings.ts

@@ -212,6 +212,13 @@ $(() => {
         $('#discord-rpc-conf').toggle();
         $('#discord-rpc-conf-btn').toggle();
 
+        if (LauncherLib.getConfig('rpcsettings.ingame.elapsed'))
+            $('#rpc-game-elapsed').addClass('checkbox-active');
+
+        $('#rpc-game-state').attr('placeholder', LauncherLib.getConfig('rpcsettings.ingame.state'));
+        $('#rpc-game-details').attr('placeholder', LauncherLib.getConfig('rpcsettings.ingame.details'));
+        $('#rpc-launch-details').attr('placeholder', LauncherLib.getConfig('rpcsettings.launcher'));
+
     $('#discord-rpc').on('classChange', () => {
         LauncherLib.updateConfig('rpc', $('#discord-rpc').hasClass('checkbox-active'));