Merge branch 'master' into tribe

functions/index.js

@@ -1782,6 +1782,7 @@ exports.saveConfig = functions.https.onCall((request, response) => {
       }
       if (err) return;
       if (key === "resultFilters") return;
+      if (key === "customBackground") return;
       let val = obj[key];
       if (Array.isArray(val)) {
         val.forEach((valarr) => {

src/js/account/result-filters.js

@@ -340,7 +340,8 @@ $(
       });
       filters[group][filter] = true;
     } else {
-      filters[group][filter] = !filters[group][filter];
+      toggle(group, filter);
+      // filters[group][filter] = !filters[group][filter];
     }
   }
   updateActive();

src/js/commandline-lists.js

@@ -1596,6 +1596,15 @@ export let defaultCommands = {
         Commandline.show();
       },
     },
+    {
+      id: "changeCustomBackground",
+      display: "Change custom background...",
+      defaultValue: "",
+      input: true,
+      exec: (input) => {
+        UpdateConfig.setCustomBackground(input);
+      },
+    },
     {
       id: "changeTheme",
       display: "Change theme...",

src/js/commandline.js

@@ -7,15 +7,18 @@ import * as TestUI from "./test-ui";
 
 let commandLineMouseMode = false;
 
-function showInput(command, placeholder) {
+function showInput(command, placeholder, defaultValue = "") {
   $("#commandLineWrapper").removeClass("hidden");
   $("#commandLine").addClass("hidden");
   $("#commandInput").removeClass("hidden");
   $("#commandInput input").attr("placeholder", placeholder);
-  $("#commandInput input").val("");
+  $("#commandInput input").val(defaultValue);
   $("#commandInput input").focus();
   $("#commandInput input").attr("command", "");
   $("#commandInput input").attr("command", command);
+  if (defaultValue != "") {
+    $("#commandInput input").select();
+  }
 }
 
 function showFound() {
@@ -142,7 +145,7 @@ function trigger(command) {
     if (obj.id == command) {
       if (obj.input) {
         input = true;
-        showInput(obj.id, obj.display);
+        showInput(obj.id, obj.display, obj.defaultValue);
       } else {
         obj.exec();
         if (obj.subgroup !== null && obj.subgroup !== undefined) {

src/js/config.js

@@ -16,6 +16,7 @@ import * as TestLogic from "./test-logic";
 import * as PaceCaret from "./pace-caret";
 import * as UI from "./ui";
 import * as Tribe from "./tribe";
+import * as CommandlineLists from "./commandline-lists";
 
 export let cookieConfig = null;
 export let dbConfigLoaded = false;
@@ -114,6 +115,8 @@ let defaultConfig = {
   monkey: false,
   repeatQuotes: "off",
   oppositeShiftMode: "off",
+  customBackground: "",
+  customBackgroundSize: "cover",
 };
 
 function isConfigKeyValid(name) {
@@ -506,6 +509,10 @@ export function setPaceCaret(val, nosave) {
   if (val == undefined) {
     val = "off";
   }
+  // if (val == "pb" && firebase.auth().currentUser === null) {
+  //   Notifications.add("PB pace caret is unavailable without an account", 0);
+  //   return;
+  // }
   // if (config.mode === "zen" && val != "off") {
   //   Notifications.add(`Can't use pace caret with zen mode.`, 0);
   //   val = "off";
@@ -1219,7 +1226,7 @@ export function setCustomTheme(boolean, nosave) {
   if (boolean !== undefined) config.customTheme = boolean;
   if (boolean) {
     ThemeController.set("custom");
-  } else {
+  } else if (!boolean && !nosave) {
     ThemeController.set(config.theme);
   }
   if (!nosave) saveToCookie();
@@ -1227,7 +1234,7 @@ export function setCustomTheme(boolean, nosave) {
 
 export function setTheme(name, nosave) {
   config.theme = name;
-  setCustomTheme(false, true);
+  setCustomTheme(false, true, true);
   ThemeController.set(config.theme);
   if (!nosave) saveToCookie();
 }
@@ -1435,6 +1442,37 @@ export function setFontSize(fontSize, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setCustomBackground(value, nosave) {
+  if (value == null || value == undefined) {
+    value = "";
+  }
+  value = value.trim();
+  if (
+    /(https|http):\/\/(www\.|).+\..+\/.+(\.png|\.gif|\.jpeg|\.jpg)/gi.test(
+      value
+    ) ||
+    value == ""
+  ) {
+    config.customBackground = value;
+    CommandlineLists.defaultCommands.list.filter(
+      (command) => command.id == "changeCustomBackground"
+    )[0].defaultValue = value;
+    ThemeController.applyCustomBackground();
+    if (!nosave) saveToCookie();
+  } else {
+    Notifications.add("Invalid custom background URL", 0);
+  }
+}
+
+export function setCustomBackgroundSize(value, nosave) {
+  if (value != "cover" && value != "contain") {
+    value = "cover";
+  }
+  config.customBackgroundSize = value;
+  ThemeController.applyCustomBackgroundSize();
+  if (!nosave) saveToCookie();
+}
+
 export function apply(configObj) {
   if (configObj == null || configObj == undefined) {
     Notifications.add("Could not apply config", -1, 3);
@@ -1447,8 +1485,10 @@ export function apply(configObj) {
   });
   if (configObj && configObj != null && configObj != "null") {
     setTheme(configObj.theme, true);
-    setCustomTheme(configObj.customTheme, true);
     setCustomThemeColors(configObj.customThemeColors, true);
+    setCustomTheme(configObj.customTheme, true, true);
+    setCustomBackground(configObj.customBackground, true);
+    setCustomBackgroundSize(configObj.customBackgroundSize, true);
     setQuickTabMode(configObj.quickTab, true);
     setKeyTips(configObj.showKeyTips, true);
     setTimeConfig(configObj.time, true);

src/js/settings.js

@@ -267,6 +267,10 @@ async function initGroups() {
     "alwaysShowCPM",
     UpdateConfig.setAlwaysShowCPM
   );
+  groups.customBackgroundSize = new SettingsGroup(
+    "customBackgroundSize",
+    UpdateConfig.setCustomBackgroundSize
+  );
 }
 
 async function fillSettingsPage() {
@@ -369,6 +373,10 @@ async function fillSettingsPage() {
       })
       .appendTo(fontsEl);
   });
+
+  $(".pageSettings .section.customBackgroundSize input").val(
+    Config.customBackground
+  );
 }
 
 export let settingsFillPromise = fillSettingsPage();
@@ -727,3 +735,48 @@ $(".pageSettings .sectionGroupTitle").click((e) => {
       );
   }
 });
+
+$(".pageSettings #resetPersonalBestsButton").on("click", (e) => {
+  SimplePopups.list.resetPersonalBests.show();
+});
+
+$(".pageSettings #updateAccountEmail").on("click", (e) => {
+  SimplePopups.list.updateEmail.show();
+});
+
+$(".pageSettings .section.customBackgroundSize .inputAndButton .save").on(
+  "click",
+  (e) => {
+    UpdateConfig.setCustomBackground(
+      $(
+        ".pageSettings .section.customBackgroundSize .inputAndButton input"
+      ).val()
+    );
+  }
+);
+
+$(".pageSettings .section.customBackgroundSize .inputAndButton .cover").on(
+  "click",
+  (e) => {
+    UpdateConfig.setCustomBackgroundSize("cover");
+  }
+);
+
+$(".pageSettings .section.customBackgroundSize .inputAndButton .contain").on(
+  "click",
+  (e) => {
+    UpdateConfig.setCustomBackgroundSize("contain");
+  }
+);
+
+$(".pageSettings .section.customBackgroundSize .inputAndButton input").keypress(
+  (e) => {
+    if (e.keyCode == 13) {
+      UpdateConfig.setCustomBackground(
+        $(
+          ".pageSettings .section.customBackgroundSize .inputAndButton input"
+        ).val()
+      );
+    }
+  }
+);

src/js/theme-controller.js

@@ -4,6 +4,7 @@ import * as Misc from "./misc";
 import * as Notifications from "./notifications";
 import Config from "./config";
 import * as UI from "./ui";
+import config from "./config";
 
 let isPreviewingTheme = false;
 let randomTheme = null;
@@ -149,3 +150,25 @@ export function randomiseTheme() {
 export function clearRandom() {
   randomTheme = null;
 }
+
+export function applyCustomBackground() {
+  $("body").css({
+    backgroundImage: `url(${Config.customBackground})`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center center",
+    backgroundAttachment: "fixed",
+  });
+  if (Config.customBackground === "") {
+    $("#words").removeClass("noErrorBorder");
+  } else {
+    $("#words").addClass("noErrorBorder");
+  }
+}
+
+export function applyCustomBackgroundSize() {
+  if (Config.customBackgroundSize != "") {
+    $("body").css({
+      backgroundSize: Config.customBackgroundSize,
+    });
+  }
+}

src/sass/style.scss

@@ -107,10 +107,10 @@ body {
   margin: 0;
   padding: 0;
   min-height: 100vh;
-  background: var(--bg-color);
   font-family: var(--font);
   color: var(--main-color);
   overflow-x: hidden;
+  background: var(--bg-color);
 }
 
 html {
@@ -1607,12 +1607,12 @@ a:hover {
 @keyframes caretFlashHard {
   0%,
   50% {
-    opacity: 0;
+    opacity: 1;
   }
 
   51%,
   100% {
-    opacity: 1;
+    opacity: 0;
   }
 }
 
@@ -2703,6 +2703,11 @@ key {
     1px 1px 0px var(--bg-color), -1px 1px 0px var(--bg-color);
 }
 
+#words.noErrorBorder {
+  .word.error {
+    text-shadow: none;
+  }
+}
 // .word letter {
 // transition: .1s;
 // height: 1rem;
@@ -3073,6 +3078,28 @@ key {
       }
     }
 
+    &.customBackgroundSize {
+      .inputAndButton {
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+        input {
+          grid-column: 1/3;
+        }
+
+        .save {
+          grid-column: 3/4;
+          height: auto;
+
+          .fas {
+            margin-right: 0rem;
+            vertical-align: sub;
+          }
+        }
+      }
+    }
+
     &.customTheme {
       grid-template-columns: 1fr 1fr 1fr 1fr;
       justify-items: stretch;

static/index.html

@@ -3066,6 +3066,50 @@
                   </div>
                 </div>
               </div>
+              <div class="section customBackgroundSize">
+                <h1>custom background</h1>
+                <div class="text">
+                  Set an image url to be a custom background image. Cover fits
+                  the image to cover the screen. Contain fits the image to be
+                  fully visible.
+                </div>
+                <div>
+                  <div class="inputAndButton">
+                    <input
+                      type="text"
+                      placeholder="image url"
+                      class="input"
+                      tabindex="0"
+                      onClick="this.select();"
+                    />
+                    <div
+                      class="button save"
+                      tabindex="0"
+                      onclick="this.blur();"
+                    >
+                      <i class="fas fa-save fa-fw"></i>
+                    </div>
+                  </div>
+                  <div class="buttons">
+                    <div
+                      class="button"
+                      customBackgroundSize="cover"
+                      tabindex="0"
+                      onclick="this.blur();"
+                    >
+                      cover
+                    </div>
+                    <div
+                      class="button"
+                      customBackgroundSize="contain"
+                      tabindex="0"
+                      onclick="this.blur();"
+                    >
+                      contain
+                    </div>
+                  </div>
+                </div>
+              </div>
               <div class="section themes">
                 <h1>theme</h1>
                 <div class="tabs">
@@ -3371,7 +3415,7 @@
                     class="button off danger"
                     id="resetPersonalBestsButton"
                     tabindex="0"
-                    onclick="this.blur();simplePopups.resetPersonalBests.show();"
+                    onclick="this.blur();"
                   >
                     reset personal bests
                   </div>
@@ -3387,7 +3431,7 @@
                     class="button off danger"
                     id="updateAccountEmail"
                     tabindex="0"
-                    onclick="this.blur();simplePopups.updateEmail.show();"
+                    onclick="this.blur();"
                   >
                     update email
                   </div>