diff --git a/functions/index.js b/functions/index.js index 473b12a12..d23d0adbc 100644 --- a/functions/index.js +++ b/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) => { diff --git a/src/js/account/result-filters.js b/src/js/account/result-filters.js index d6754557d..ad46511fc 100644 --- a/src/js/account/result-filters.js +++ b/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(); diff --git a/src/js/commandline-lists.js b/src/js/commandline-lists.js index bd8edf35a..ed2da742a 100644 --- a/src/js/commandline-lists.js +++ b/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...", diff --git a/src/js/commandline.js b/src/js/commandline.js index cef4c12d9..1be6feec2 100644 --- a/src/js/commandline.js +++ b/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) { diff --git a/src/js/config.js b/src/js/config.js index 2dbc653cf..7d70f15c0 100644 --- a/src/js/config.js +++ b/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); diff --git a/src/js/settings.js b/src/js/settings.js index 726865f12..62597b727 100644 --- a/src/js/settings.js +++ b/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() + ); + } + } +); diff --git a/src/js/theme-controller.js b/src/js/theme-controller.js index e556135da..5f739befc 100644 --- a/src/js/theme-controller.js +++ b/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, + }); + } +} diff --git a/src/sass/style.scss b/src/sass/style.scss index 3c01d16d1..b546d78f5 100644 --- a/src/sass/style.scss +++ b/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; diff --git a/static/index.html b/static/index.html index 841f5eba4..f4ff6c47f 100644 --- a/static/index.html +++ b/static/index.html @@ -3066,6 +3066,50 @@ +