add background image

public/assets/ss-bulma.css

@@ -7,6 +7,16 @@
     transform: rotate(359deg);
   }
 }
+
+.main-background {
+  display: none;
+  height: 100vh;
+  width: 100vw;
+  z-index: 0;
+  left: 0;
+  top: 0;
+}
+
 .tabs,
 .pagination-previous,
 .pagination-next,

public/assets/ssr.css

@@ -1,6 +1,6 @@
 :root {
   --background: #222;
-  --foreground: #252525;
+  --foreground: #2e2e2e;
   --textColor: #eee;
   --ppColour: #8992e8;
   --alternate: #72a8ff;
@@ -15,6 +15,8 @@
   --color-behind: rgb(128, 0, 0);
   --color-highlight: darkgreen;
   --error: red;
+
+  --transparency: 0.95;
 }
 
 html {
@@ -23,7 +25,6 @@ html {
 
 body {
   color: var(--textColor);
-  background-color: var(--background) !important;
   margin: 0 auto;
   padding: 0 1rem;
   min-height: 100vh;
@@ -36,10 +37,22 @@ select {
   outline: none;
 }
 
+.main-background {
+  position: fixed;
+  display: block;
+  background: var(--background-image) !important;
+  filter: blur(4px) brightness(0.8);
+
+  background-size: cover !important;
+}
+
 .ssr-page-container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
+
+  position: relative;
+  opacity: var(--transparency);
 }
 
 .box {

src/App.svelte

@@ -14,7 +14,9 @@
   import RankingPage from './pages/Ranking.svelte';
   import SearchPage from './pages/Search.svelte';
   import TwitchPage from './pages/Twitch.svelte';
+  import { configStore } from './stores/config';
   import createContainerStore from './stores/container';
+  import { setGlobalCSSValue } from './utils/css';
 
   // When SSR was built (eg: 1 hour ago)
   export const buildDateAgo = moment(buildInfo.buildDate, "MMMM Do YYYY, h:mm:ss a").fromNow();
@@ -27,8 +29,12 @@
   setContext('pageContainer', containerStore);
 
   $: if (mainEl) containerStore.observe(mainEl)
+  
+  setGlobalCSSValue("background-image", "url(" + $configStore.preferences.backgroundImage + ")")
 </script>
 
+<div class="main-background" />
+
 <Router {url}>
   <Nav />
 
@@ -86,7 +92,7 @@
     }
 
     footer {
-        margin: 1rem 0;
+        padding: 1rem;
         font-size: .75em;
         text-align: center;
     }

src/components/Others/Settings.svelte

@@ -1,23 +1,24 @@
 <script>
-  import produce from 'immer'
+  import produce from 'immer';
-  import {configStore, DEFAULT_LOCALE, getSupportedLocales} from '../../stores/config'
+  import { getContext, onMount } from 'svelte';
-  import createTwitchService from '../../services/twitch'
+  import { ROUTER } from 'svelte-routing/src/contexts';
-  import {ROUTER} from 'svelte-routing/src/contexts'
+  import createTwitchService from '../../services/twitch';
-  import {getContext, onMount} from 'svelte'
+  import { DEFAULT_LOCALE, configStore, getSupportedLocales } from '../../stores/config';
-  import {opt} from '../../utils/js'
+  import eventBus from '../../utils/broadcast-channel-pubsub';
-  import eventBus from '../../utils/broadcast-channel-pubsub'
+  import { DAY } from '../../utils/date';
-  import {DAY} from '../../utils/date'
+  import { exportJsonData, importDataHandler } from '../../utils/export-import';
-  import {exportJsonData, importDataHandler} from '../../utils/export-import'
+  import { opt } from '../../utils/js';
-  import Dialog from '../Common/Dialog.svelte'
+  import Button from '../Common/Button.svelte';
-  import Button from '../Common/Button.svelte'
+  import Dialog from '../Common/Dialog.svelte';
-  import File from '../Common/File.svelte'
+  import File from '../Common/File.svelte';
-  import Select from "./Select.svelte"
+  import Select from "./Select.svelte";
 
   export let show = false;
 
   const DEFAULT_SCORE_COMPARISON_METHOD = 'in-place';
   const DEFAULT_SECONDARY_PP_METRICS = 'attribution';
   const DEFAULT_AVATAR_ICONS = 'only-if-needed';
+  const DEFAULT_BACKGROUND_IMAGE = "/assets/background.png";
 
   let twitchToken = null;
 
@@ -45,12 +46,14 @@
   let currentScoreComparisonMethod = DEFAULT_SCORE_COMPARISON_METHOD;
   let currentSecondaryPpMetrics = DEFAULT_SECONDARY_PP_METRICS;
   let currentAvatarIcons = DEFAULT_AVATAR_ICONS;
+  let currentBackgroundImage = DEFAULT_BACKGROUND_IMAGE;
 
   function onConfigUpdated(config) {
     if (config?.locale) currentLocale = config.locale;
     if (config?.scoreComparison) currentScoreComparisonMethod = config?.scoreComparison?.method ?? DEFAULT_SCORE_COMPARISON_METHOD;
     if (config?.preferences?.secondaryPp) currentSecondaryPpMetrics = config?.preferences?.secondaryPp ?? DEFAULT_SECONDARY_PP_METRICS;
     if (config?.preferences?.avatarIcons) currentAvatarIcons = config?.preferences?.avatarIcons ?? DEFAULT_AVATAR_ICONS;
+    if (config?.preferences?.backgroundImage) currentBackgroundImage = config?.preferences?.backgroundImage ?? DEFAULT_BACKGROUND_IMAGE;
   }
 
   function onSave() {
@@ -61,6 +64,7 @@
       draft.scoreComparison.method = currentScoreComparisonMethod;
       draft.preferences.secondaryPp = currentSecondaryPpMetrics;
       draft.preferences.avatarIcons = currentAvatarIcons;
+      draft.preferences.backgroundImage = currentBackgroundImage;
     })
 
     show = false;
@@ -72,6 +76,7 @@
       currentScoreComparisonMethod = $configStore.scoreComparison.method;
       currentSecondaryPpMetrics = $configStore.preferences.secondaryPp;
       currentAvatarIcons = $configStore.preferences.avatarIcons;
+      currentBackgroundImage = $configStore.preferences.backgroundImage;
     }
 
     show = false;
@@ -198,6 +203,11 @@
                     label={twitchBtnLabel} title={twitchBtnTitle}
                     on:click={() => window.location.href = twitchService.getAuthUrl(opt($activeRoute, 'uri', ''))}/>
           </section>
+
+          <section class="option">
+            <label title="Change the image in the background of the site">Background Image</label>
+            <input bind:value={currentBackgroundImage} />
+          </section>
         </section>
       {:else}
         Loading...

src/stores/config.js

@@ -30,6 +30,7 @@ const DEFAULT_CONFIG = {
   preferences: {
     secondaryPp: "attribution",
     avatarIcons: "only-if-needed",
+    backgroundImage: "/assets/background.png",
   },
   locale: DEFAULT_LOCALE,
 };
@@ -38,6 +39,7 @@ const newSettingsAvailableDefinition = {
   "scoreComparison.method": "Method of displaying the comparison of scores",
   "preferences.secondaryPp": "Setting the second PP metric",
   "preferences.avatarIcons": "Showing icons on avatars",
+  "preferences.backgroundImage": "Change the background image",
   locale: "Locale selection",
 };
 

src/utils/css.js

@@ -0,0 +1,4 @@
+export function setGlobalCSSValue(name, value) {
+  var r = document.querySelector(":root");
+  r.style.setProperty("--" + name, value);
+}