7.0.9

custom fonts
livecountsedit · Aug 25, 2024 · 10042d1 · 10042d1
1 parent 686b061
commit 10042d1
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 6 deletions.
diff --git a/counter.js b/counter.js
@@ -1,6 +1,6 @@
 const LCEDIT = {
-    saveVersion: 3,
-    versionName: "7.0.8",
+    saveVersion: 4,
+    versionName: "7.0.9",
     util: {
         clamp: (input, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) => {
             if (isNaN(input)) input = 0;
@@ -174,6 +174,9 @@ let defaultCounter = {
     counterColor: "#000000",
     customRate: "",
     downColor: "#000000",
+    font: "Arial, Helvetica, sans-serif",
+    fontType: 5,
+    fontWeight: 400,
     footer: "",
     footerColor: "#000000",
     gainPer: 2,

diff --git a/livecountsedit/index.css b/livecountsedit/index.css
@@ -43,7 +43,7 @@ body {
     border: 1px solid var(--border-color, #ddd);
     outline: none;
     cursor: pointer;
-    transition: .3s;
+    transition: background-color .3s;
     border-radius: 15px;
 }
 

diff --git a/livecountsedit/index.html b/livecountsedit/index.html
@@ -5,6 +5,7 @@
     <link href="../odometer/odometer.css" rel="stylesheet">
     <link href="../bootstrap.css" rel="stylesheet">
     <link href="./index.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <link rel="icon" href="../logo.png">
     <meta charSet="utf-8" />
@@ -56,7 +57,7 @@
         </div>
     </div>
     <div class="page-footer">
-        <span>Version 7.0.8 - <a href="../index.html">Back to main page</a> - <a href="https://github.com/livecountsedit/livecountsedit.github.io/wiki/New-Updates-Not-Working%3F">Not working?</a> - <a href="../about/discord.html">Join the Livecountsedit Discord Server.</a> This site is a parody of popular realtime counters.</span>
+        <span>Version 7.0.9 - <a href="../index.html">Back to main page</a> - <a href="https://github.com/livecountsedit/livecountsedit.github.io/wiki/New-Updates-Not-Working%3F">Not working?</a> - <a href="../about/discord.html">Join the Livecountsedit Discord Server.</a> This site is a parody of popular realtime counters.</span>
     </div>
     <script src="../odometer/odometer.js"></script>
     <script src="../highstock.js"></script>

diff --git a/livecountsedit/lcedit.js b/livecountsedit/lcedit.js
@@ -52,6 +52,10 @@ window.onload = function () {
         document.querySelector('#gainType').addEventListener('input', event => {
             updateGainType(event.target.value);
         })
+        updateFontType(counter.settings.fontType);
+        document.querySelector('#fontType').addEventListener('input', event => {
+            updateFontType(event.target.value);
+        })
         let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
         let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
             return new bootstrap.Tooltip(tooltipTriggerEl);
@@ -86,7 +90,7 @@ function submit() {
             saveData.counters[0].updateSettings(result.data);
             updateStuff()
         } else {
-            addEventListener('fileReady', () => { // this took forever to fix brUHHHHHHHHH
+            addEventListener('fileReady', () => {
                 ready++
                 if (ready === result.files) {
                     saveData.counters[0].updateSettings(result.data);
@@ -168,6 +172,7 @@ function updateStuff() {
     LCEDIT.util.setVisible(document.querySelector('#counter-chart'), counter.settings.showChart)
     LCEDIT.util.setVisible(document.querySelector('#counter-footer'), counter.settings.showFooter)
     document.querySelector('#counter-banner').style.filter = `blur(${counter.settings.bannerBlur}px)`
+    loadMyFont();
     if (counter.settings.showChart) chart.update(getChartOptions());
     updateCounter();
     if (!saveData.paused) saveData.updater = setInterval(updateCounter, saveData.updateInterval * 1000)
@@ -264,8 +269,40 @@ function updateGainType(v) {
             if (k) k.disabled = (i != v)
         }
     }
-} 
+}
+
+function updateFontType(v) {
+    LCEDIT.util.setVisible(document.querySelector(".custom-font-input"), (v == 5 || v == 6));
+}
 
+function loadMyFont() {
+    let font;
+    switch (counter.settings.fontType) {
+        case 1:
+            font = "serif";
+            break;
+        case 2:
+            font = "sans-serif";
+            break;
+        case 3:
+            font = "monospace";
+            break;
+        case 4:
+            font = "math";
+            break;
+        case 5:
+            font = counter.settings.font;
+            break;
+        case 6:
+            document.head.innerHTML += `<link href="https://fonts.googleapis.com/css?family=${encodeURIComponent(counter.settings.font).replaceAll("%20","+")}:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">`;
+            font = counter.settings.font;
+            break;
+        default:
+            font = "none";
+    }
+    document.querySelector(".counter-content").style.fontFamily = font;
+    document.querySelector(".counter").style.fontWeight = counter.settings.fontWeight;
+}
 
 function setPaused(paused) {
     if (paused) {

diff --git a/livecountsedit/lcedit.json b/livecountsedit/lcedit.json
@@ -303,6 +303,63 @@
                                     "inputNumberStep": "any"
                                 }
                             ]
+                        },
+                        {
+                            "type": "section",
+                            "elements": [
+                                {
+                                    "label": "Font type",
+                                    "id": "fontType",
+                                    "type": "option",
+                                    "tag": "select",
+                                    "intputRequired": true,
+                                    "selectOptions": [
+                                        ["0", "Default"],
+                                        ["1", "Serif"],
+                                        ["2", "Sans Serif"],
+                                        ["3", "Monospace"],
+                                        ["4", "Math"],
+                                        ["5", "Custom (System)"],
+                                        ["6", "Custom (Google Fonts)"]
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            "type": "section",
+                            "class": "custom-font-input",
+                            "elements": [
+                                {
+                                    "label": "Font",
+                                    "id": "font",
+                                    "type": "option",
+                                    "tag": "input",
+                                    "inputType": "text"
+                                }
+                            ]
+                        },
+                        {
+                            "type": "section",
+                            "elements": [
+                                {
+                                    "label": "Font weight",
+                                    "id": "fontWeight",
+                                    "info": "How thin or bold the font is. Only affects the number of the counter. Note: Not all font weights are supported on all fonts.",
+                                    "type": "option",
+                                    "tag": "select",
+                                    "selectOptions": [
+                                        ["100", "Thin"],
+                                        ["200", "Extra Light"],
+                                        ["300", "Light"],
+                                        ["400", "Regular"],
+                                        ["500", "Medium"],
+                                        ["600", "Semibold"],
+                                        ["700", "Bold"],
+                                        ["800", "Extra Bold"],
+                                        ["900", "Black"]
+                                    ]
+                                }
+                            ]
                         }
                     ]
                 }