From 42e0ac2f8c6ded1c27f24b3f5947ef88ad379b5f Mon Sep 17 00:00:00 2001 From: Devin Spikowski Date: Mon, 18 Oct 2021 11:14:41 -0400 Subject: [PATCH] :egg: Let it snow - fixes #120 --- public/global.css | 21 +++++++++++++ public/index.html | 2 +- src/App.svelte | 20 ++++++++++-- src/LetItSnow.svelte | 74 ++++++++++++++++++++++++++++++++++++++++++++ src/util.js | 7 +++++ 5 files changed, 121 insertions(+), 3 deletions(-) create mode 100644 src/LetItSnow.svelte diff --git a/public/global.css b/public/global.css index 6c9cc68..97881ba 100644 --- a/public/global.css +++ b/public/global.css @@ -116,3 +116,24 @@ button:focus { small { font-size: 0.8em; } + +@keyframes snowing { + 0% { + transform: translate(var(--left-start), 0) rotate(var(--angle-start)); + } + 100% { + transform: translate(var(--left-end), 110vh) rotate(var(--angle-end)); + } +} + +* { + transition-property: color, background-color; + transition-duration: 0.15s; + transition-delay: 0s; + transition-timing-function: ease-out; +} + +.preload, +.preload * { + transition-property: none !important; +} diff --git a/public/index.html b/public/index.html index f57dd99..d25ed42 100644 --- a/public/index.html +++ b/public/index.html @@ -29,5 +29,5 @@ - + diff --git a/src/App.svelte b/src/App.svelte index a9fb3a5..82c66fb 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -8,6 +8,7 @@ detectTimeZone, encodeSnowflake, decodeSnowflake, + isSnowy, } from './util.js' import Help from './Help.svelte' import Output from './Output.svelte' @@ -17,6 +18,8 @@ import Switch from './Switch.svelte' import IconMoon from './IconMoon.svelte' import IconSun from './IconSun.svelte' + import LetItSnow from './LetItSnow.svelte' + import { onMount } from 'svelte' const dynamicMode = window.__SNOWSTAMP_DYNAMIC__ const { SNOWFLAKE_EPOCH } = process.env @@ -26,7 +29,8 @@ let snowflake = queries.s || (queries.f && decodeSnowflake(queries.f)) || '', timestamp, error, - url + url, + letItSnow let shareStamp = getLocalStorageBoolean('shareStamp', true) let shortenSnowflake = getLocalStorageBoolean('shortenSnowflake', true) @@ -43,16 +47,25 @@ localStorage.setItem('darkMode', darkMode) } + onMount(() => + setTimeout(() => window.document.body.classList.remove('preload')) + ) + // Validate snowflake and update timestamp or error function updateSnowflake() { timestamp = null error = null + letItSnow = false if (!snowflake.trim()) return try { timestamp = validateSnowflake(snowflake, EPOCH) updateURL() } catch (e) { - error = e + if (isSnowy(snowflake)) { + letItSnow = true + } else { + error = e + } } } @@ -133,6 +146,9 @@ {#if error}

❌ {error}

{/if} + {#if letItSnow} + + {/if}
diff --git a/src/LetItSnow.svelte b/src/LetItSnow.svelte new file mode 100644 index 0000000..ed10289 --- /dev/null +++ b/src/LetItSnow.svelte @@ -0,0 +1,74 @@ + + +

❄️ Let it snow

+ + diff --git a/src/util.js b/src/util.js index 089ce48..df77dca 100644 --- a/src/util.js +++ b/src/util.js @@ -43,6 +43,13 @@ export function decodeSnowflake(encodedSnowflake) { return chunks.map((chunk) => parseInt(chunk, 36).toString().slice(1)).join('') } +export function isSnowy(input) { + for (let snowText of ['❄', '❆', '❅', '🌨', '🌨️', '⛄', '☃', 'snow']) { + if (input.toLowerCase().includes(snowText)) return true + } + return false +} + // https://svelte.dev/repl/b4db6313dfeb4b50871a9b43398a6952?version=3.16.7 /** Selects the text inside a text node when the node is focused */ export function selectTextOnFocus(node) {