This commit is contained in:
parent
b2fe5751f1
commit
c2b5017324
BIN
public/assets/background.png
Normal file
BIN
public/assets/background.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.7 MiB |
@ -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,
|
||||
|
@ -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 {
|
||||
|
@ -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,12 +29,16 @@
|
||||
setContext('pageContainer', containerStore);
|
||||
|
||||
$: if (mainEl) containerStore.observe(mainEl)
|
||||
|
||||
setGlobalCSSValue("background-image", "url(" + $configStore.preferences.backgroundImage + ")")
|
||||
</script>
|
||||
|
||||
<div class="main-background" />
|
||||
|
||||
<Router {url}>
|
||||
<Nav />
|
||||
|
||||
<main bind:this={mainEl}>
|
||||
<main bind:this={mainEl}>
|
||||
<div class="ssr-page-container">
|
||||
<Route path="/u/:initialPlayerId/*initialParams" let:params>
|
||||
<PlayerPage initialPlayerId={params.initialPlayerId} initialParams={params.initialParams}/>
|
||||
@ -86,7 +92,7 @@
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 1rem 0;
|
||||
padding: 1rem;
|
||||
font-size: .75em;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -1,23 +1,24 @@
|
||||
<script>
|
||||
import produce from 'immer'
|
||||
import {configStore, DEFAULT_LOCALE, getSupportedLocales} from '../../stores/config'
|
||||
import createTwitchService from '../../services/twitch'
|
||||
import {ROUTER} from 'svelte-routing/src/contexts'
|
||||
import {getContext, onMount} from 'svelte'
|
||||
import {opt} from '../../utils/js'
|
||||
import eventBus from '../../utils/broadcast-channel-pubsub'
|
||||
import {DAY} from '../../utils/date'
|
||||
import {exportJsonData, importDataHandler} from '../../utils/export-import'
|
||||
import Dialog from '../Common/Dialog.svelte'
|
||||
import Button from '../Common/Button.svelte'
|
||||
import File from '../Common/File.svelte'
|
||||
import Select from "./Select.svelte"
|
||||
import produce from 'immer';
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import { ROUTER } from 'svelte-routing/src/contexts';
|
||||
import createTwitchService from '../../services/twitch';
|
||||
import { DEFAULT_LOCALE, configStore, getSupportedLocales } from '../../stores/config';
|
||||
import eventBus from '../../utils/broadcast-channel-pubsub';
|
||||
import { DAY } from '../../utils/date';
|
||||
import { exportJsonData, importDataHandler } from '../../utils/export-import';
|
||||
import { opt } from '../../utils/js';
|
||||
import Button from '../Common/Button.svelte';
|
||||
import Dialog from '../Common/Dialog.svelte';
|
||||
import File from '../Common/File.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...
|
||||
|
@ -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",
|
||||
};
|
||||
|
||||
|
4
src/utils/css.js
Normal file
4
src/utils/css.js
Normal file
@ -0,0 +1,4 @@
|
||||
export function setGlobalCSSValue(name, value) {
|
||||
var r = document.querySelector(":root");
|
||||
r.style.setProperty("--" + name, value);
|
||||
}
|
Reference in New Issue
Block a user