Merge pull request #10 from Miodec/master

Merge

gulpfile.js

@@ -133,6 +133,7 @@ const refactoredSrc = [
   "./src/js/popups/edit-tags-popup.js",
   "./src/js/popups/custom-theme-popup.js",
   "./src/js/popups/import-settings-popup.js",
+  "./src/js/popups/custom-background-filter.js",
 
   "./src/js/settings/language-picker.js",
   "./src/js/settings/theme-picker.js",

src/js/account.js

@@ -64,7 +64,7 @@ export function getDataAndInit() {
       if (snap.refactored === false) {
         CloudFunctions.removeSmallTests({ uid: user.uid });
       }
-      if (!Config.changedBeforeDb) {
+      if (!UpdateConfig.changedBeforeDb) {
         if (Config.cookieConfig === null) {
           AccountButton.loading(false);
           UpdateConfig.apply(DB.getSnapshot().config);

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 CommandlineLists from "./commandline-lists";
+import * as BackgroundFilter from "./custom-background-filter";
 
 export let cookieConfig = null;
 export let dbConfigLoaded = false;
@@ -116,6 +117,7 @@ let defaultConfig = {
   oppositeShiftMode: "off",
   customBackground: "",
   customBackgroundSize: "cover",
+  customBackgroundFilter: [0, 1, 1, 1, 1],
 };
 
 function isConfigKeyValid(name) {
@@ -1373,7 +1375,7 @@ export function setCustomBackground(value, nosave) {
 }
 
 export function setCustomBackgroundSize(value, nosave) {
-  if (value != "cover" && value != "contain") {
+  if (value != "cover" && value != "contain" && value!= "max") {
     value = "cover";
   }
   config.customBackgroundSize = value;
@@ -1381,6 +1383,13 @@ export function setCustomBackgroundSize(value, nosave) {
   if (!nosave) saveToCookie();
 }
 
+export function setCustomBackgroundFilter(array, nosave) {
+  config.customBackgroundFilter = array;
+  BackgroundFilter.loadConfig(config.customBackgroundFilter);
+  BackgroundFilter.apply();
+  if (!nosave) saveToCookie();
+}
+
 export function apply(configObj) {
   if (configObj == null || configObj == undefined) {
     Notifications.add("Could not apply config", -1, 3);
@@ -1397,6 +1406,7 @@ export function apply(configObj) {
     setCustomTheme(configObj.customTheme, true, true);
     setCustomBackground(configObj.customBackground, true);
     setCustomBackgroundSize(configObj.customBackgroundSize, true);
+    setCustomBackgroundFilter(configObj.customBackgroundFilter, true);
     setQuickTabMode(configObj.quickTab, true);
     setKeyTips(configObj.showKeyTips, true);
     setTimeConfig(configObj.time, true);

src/js/input-controller.js

@@ -52,40 +52,41 @@ function handleTab(event) {
     // );
     return;
   } else if (
-    $(".pageTest").hasClass("active") &&
     !TestUI.resultCalculating &&
     $("#commandLineWrapper").hasClass("hidden") &&
     $("#simplePopupWrapper").hasClass("hidden")
   ) {
-    if (Config.quickTab) {
-      if (Config.mode == "zen" && !event.shiftKey) {
-        //ignore
-      } else {
-        if (event.shiftKey) ManualRestart.set();
-
-        if (
-          TestLogic.active &&
-          Config.repeatQuotes === "typing" &&
-          Config.mode === "quote"
-        ) {
-          TestLogic.restart(true, false, event);
+    if ($(".pageTest").hasClass("active")) {
+      if (Config.quickTab) {
+        if (Config.mode == "zen" && !event.shiftKey) {
+          //ignore
         } else {
-          TestLogic.restart(false, false, event);
+          if (event.shiftKey) ManualRestart.set();
+
+          if (
+            TestLogic.active &&
+            Config.repeatQuotes === "typing" &&
+            Config.mode === "quote"
+          ) {
+            TestLogic.restart(true, false, event);
+          } else {
+            TestLogic.restart(false, false, event);
+          }
+        }
+      } else {
+        if (
+          !TestUI.resultVisible &&
+          ((TestLogic.hasTab && event.shiftKey) ||
+            (!TestLogic.hasTab && Config.mode !== "zen") ||
+            (Config.mode === "zen" && event.shiftKey))
+        ) {
+          event.preventDefault();
+          $("#restartTestButton").focus();
         }
       }
-    } else {
-      if (
-        !TestUI.resultVisible &&
-        ((TestLogic.hasTab && event.shiftKey) ||
-          (!TestLogic.hasTab && Config.mode !== "zen") ||
-          (Config.mode === "zen" && event.shiftKey))
-      ) {
-        event.preventDefault();
-        $("#restartTestButton").focus();
-      }
+    } else if (Config.quickTab) {
+      UI.changePage("test");
     }
-  } else if (Config.quickTab) {
-    UI.changePage("test");
   }
 }
 

src/js/popups/custom-background-filter.js

@@ -0,0 +1,118 @@
+import * as UpdateConfig from "./config";
+import * as Notifications from "./notifications";
+
+let filters = {
+  blur: {
+    value: 0,
+    default: 0,
+  },
+  brightness: {
+    value: 1,
+    default: 1,
+  },
+  saturate: {
+    value: 1,
+    default: 1,
+  },
+  opacity: {
+    value: 1,
+    default: 1,
+  },
+};
+
+export function getCSS() {
+  let ret = "";
+  Object.keys(filters).forEach((filterKey) => {
+    if (filters[filterKey].value != filters[filterKey].default) {
+      ret += `${filterKey}(${filters[filterKey].value}${
+        filterKey == "blur" ? "rem" : ""
+      }) `;
+    }
+  });
+  return ret;
+}
+
+export function apply() {
+  let filterCSS = getCSS();
+  $(".customBackground").css({
+    filter: filterCSS,
+  });
+}
+
+function syncSliders() {
+  $(".section.customBackgroundFilter .blur input").val(filters["blur"].value);
+  $(".section.customBackgroundFilter .brightness input").val(
+    filters["brightness"].value
+  );
+  $(".section.customBackgroundFilter .saturate input").val(
+    filters["saturate"].value
+  );
+  $(".section.customBackgroundFilter .opacity input").val(
+    filters["opacity"].value
+  );
+}
+
+$(".section.customBackgroundFilter .blur input").on("input", (e) => {
+  filters["blur"].value = $(
+    ".section.customBackgroundFilter .blur input"
+  ).val();
+  updateNumbers();
+  apply();
+});
+
+$(".section.customBackgroundFilter .brightness input").on("input", (e) => {
+  filters["brightness"].value = $(
+    ".section.customBackgroundFilter .brightness input"
+  ).val();
+  updateNumbers();
+  apply();
+});
+
+$(".section.customBackgroundFilter .saturate input").on("input", (e) => {
+  filters["saturate"].value = $(
+    ".section.customBackgroundFilter .saturate input"
+  ).val();
+  updateNumbers();
+  apply();
+});
+
+$(".section.customBackgroundFilter .opacity input").on("input", (e) => {
+  filters["opacity"].value = $(
+    ".section.customBackgroundFilter .opacity input"
+  ).val();
+  updateNumbers();
+  apply();
+});
+
+$(".section.customBackgroundFilter  .save.button").click((e) => {
+  let arr = [];
+  Object.keys(filters).forEach((filterKey) => {
+    arr.push(filters[filterKey].value);
+  });
+  UpdateConfig.setCustomBackgroundFilter(arr, false);
+  Notifications.add("Custom background filters saved", 1);
+});
+
+export function loadConfig(config) {
+  filters.blur.value = config[0];
+  filters.brightness.value = config[1];
+  filters.saturate.value = config[2];
+  filters.opacity.value = config[3];
+  updateNumbers();
+  syncSliders();
+}
+
+function updateNumbers() {
+  $(".section.customBackgroundFilter .blur .value").html(
+    parseFloat(filters.blur.value).toFixed(1)
+  );
+  $(".section.customBackgroundFilter .brightness .value").html(
+    parseFloat(filters.brightness.value).toFixed(1)
+  );
+  $(".section.customBackgroundFilter .saturate .value").html(
+    parseFloat(filters.saturate.value).toFixed(1)
+  );
+  $(".section.customBackgroundFilter .opacity .value").html(
+    parseFloat(filters.opacity.value).toFixed(1)
+  );
+}

src/js/settings.js

@@ -755,20 +755,6 @@ $(".pageSettings .section.customBackgroundSize .inputAndButton .save").on(
   }
 );
 
-$(".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) {

src/js/test/test-ui.js

@@ -255,6 +255,14 @@ export function screenshot() {
     if (firebase.auth().currentUser == null)
       $(".pageTest .loginTip").removeClass("hidden");
   }
+  setTimeout(() => {
+    $("#notificationCenter").removeClass("hidden");
+    $("#commandLineMobileButton").removeClass("hidden");
+    $(".pageTest .ssWatermark").addClass("hidden");
+    $(".pageTest .buttons").removeClass("hidden");
+    if (firebase.auth().currentUser == null)
+      $(".pageTest .loginTip").removeClass("hidden");
+  }, 3000);
 }
 
 export function updateWordElement(showError) {

src/js/theme-controller.js

@@ -4,7 +4,6 @@ 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;
@@ -152,10 +151,8 @@ export function clearRandom() {
 }
 
 export function applyCustomBackground() {
-  $("body").css({
+  $(".customBackground").css({
     backgroundImage: `url(${Config.customBackground})`,
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "center center",
     backgroundAttachment: "fixed",
   });
   if (Config.customBackground === "") {
@@ -166,9 +163,13 @@ export function applyCustomBackground() {
 }
 
 export function applyCustomBackgroundSize() {
-  if (Config.customBackgroundSize != "") {
-    $("body").css({
+  if (Config.customBackgroundSize == "max"){
+    $(".customBackground").css({
+      backgroundSize: "100% 100%" ,
+    });
+  } else if (Config.customBackgroundSize != "") {
+    $(".customBackground").css({
       backgroundSize: Config.customBackgroundSize,
     });
   }
-}
+}

src/sass/style.scss

@@ -44,6 +44,22 @@ input {
   font-family: var(--font);
 }
 
+input[type="range"] {
+  -webkit-appearance: none;
+  padding: 0;
+  width: 100%;
+  height: 1rem;
+  border-radius: var(--roundness);
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    padding: 0;
+    width: 2rem;
+    height: 1rem;
+    border-radius: var(--roundness);
+    background-color: var(--main-color);
+  }
+}
+
 input[type="color"] {
   -webkit-appearance: none;
   padding: 0;
@@ -113,6 +129,18 @@ body {
   background: var(--bg-color);
 }
 
+.customBackground {
+  content: "";
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  background-position: center center;
+  background-repeat: no-repeat;
+  z-index: -999;
+}
+
 html {
   overflow-y: scroll;
 }
@@ -2741,6 +2769,34 @@ key {
       }
     }
 
+    &.customBackgroundFilter {
+      .groups {
+        grid-area: buttons;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 2rem;
+        margin-top: 2rem;
+        .group {
+          display: grid;
+          grid-template-columns: 1fr auto 2fr;
+          gap: 1rem;
+          .title,
+          .value {
+            color: var(--text-color);
+          }
+        }
+      }
+      .saveContainer {
+        grid-column: -1/-3;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 1rem;
+      }
+      .fas {
+        margin-right: 0rem;
+      }
+    }
+
     &.customTheme {
       grid-template-columns: 1fr 1fr 1fr 1fr;
       justify-items: stretch;
@@ -2987,7 +3043,8 @@ key {
     &.keymapLayout,
     &.fontFamily,
     &.funbox,
-    &.keymapStyle {
+    &.keymapStyle,
+    &.customBackgroundFilter {
       grid-template-columns: 2fr 1fr;
       grid-template-areas:
         "title tabs"
@@ -3542,6 +3599,15 @@ key {
     }
   }
 
+  .pageSettings .section.customBackgroundFilter {
+    .groups {
+      grid-template-columns: 1fr;
+    }
+    .saveContainer {
+      grid-column: -1/-2;
+    }
+  }
+
   #commandLine,
   #commandLineInput {
     width: 500px !important;

static/index.html

@@ -14,7 +14,32 @@
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
     <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
-    <link rel="shortcut icon" href="images/fav.png" />
+    <link rel="shortcut icon" href="images/favicon/fav.png" />
+    <link
+      href="images/favicon/apple-touch-icon-180x180.png"
+      rel="apple-touch-icon"
+      sizes="180x180"
+    />
+    <link
+      href="images/favicon/apple-touch-icon-152x152.png"
+      rel="apple-touch-icon"
+      sizes="152x152"
+    />
+    <link
+      href="images/favicon/apple-touch-icon-120x120.png"
+      rel="apple-touch-icon"
+      sizes="120x120"
+    />
+
+    <link
+      href="images/favicon/apple-touch-icon-76x76.png"
+      rel="apple-touch-icon"
+      sizes="76x76"
+    />
+    <link
+      rel="apple-touch-icon"
+      href="images/favicon/apple-touch-icon-60x60.png"
+    />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
@@ -54,7 +79,7 @@
     </script>
     <script async src="https://s.nitropay.com/ads-693.js"></script>
   </head>
-
+  <div class="customBackground"></div>
   <body>
     <div id="backgroundLoader" style="display: none"></div>
     <div id="notificationCenter">
@@ -2925,7 +2950,7 @@
                 <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.
+                  fully visible. Max fits the image corner to corner.
                 </div>
                 <div>
                   <div class="inputAndButton">
@@ -2961,6 +2986,48 @@
                     >
                       contain
                     </div>
+                    <div
+                      class="button"
+                      customBackGroundSize="max"
+                      tabindex="0"
+                      onclick="this.blur();"
+                    >
+                      max
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="section customBackgroundFilter">
+                <h1>custom background filter</h1>
+                <div class="text">
+                  Apply various effects to the custom background.
+                </div>
+                <div class="groups">
+                  <div class="group blur">
+                    <div class="title">blur</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="5" value="0" step="0.1" />
+                  </div>
+                  <div class="group brightness">
+                    <div class="title">brightness</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="2" value="1" step="0.1" />
+                  </div>
+                  <div class="group saturate">
+                    <div class="title">saturate</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="2" value="1" step="0.1" />
+                  </div>
+                  <div class="group opacity">
+                    <div class="title">opacity</div>
+                    <div class="value"></div>
+                    <input type="range" min="0" max="1" value="1" step="0.1" />
+                  </div>
+                  <div class="saveContainer">
+                    <div class="save button" style="grid-column: 3">
+                      <!-- <i class="fas fa-save fa-fw"></i> -->
+                      save
+                    </div>
                   </div>
                 </div>
               </div>

static/languages/czech.json

@@ -167,8 +167,6 @@
     "málo",
     "myslit",
     "stejně",
-    "-li",
-    "Český",
     "moc",
     "problém",
     "milión",

static/themes/_list.json

@@ -4,6 +4,11 @@
     "bgColor": "#111",
     "textColor": "#eee"
   },
+  {
+    "name": "muted",
+    "bgColor": "#525252",
+    "textColor": "#B1E4E3"
+  },
   {
     "name": "dark_magic_girl",
     "bgColor": "#091f2c",

static/themes/muted.css

@@ -0,0 +1,8 @@
+:root {
+    --bg-color: #525252;
+    --main-color: #C5B4E3;
+    --caret-color: #B1E4E3;
+    --sub-color: #939eae;
+    --text-color: #B1E4E3;
+    --error-color: #EDC1CD;
+  }