Happy birthday, Yuriko!

- Readded the FloatingYuriko component previously in miracle
- Check the user's date for Yuriko's birthday in the JP timezone and automatically set headers and appearance of FloatingYuriko based on the date.
This commit is contained in:
Damillora 2021-03-17 22:50:02 +07:00
parent 131b45d302
commit b2621f26f2
14 changed files with 109 additions and 5 deletions

View File

@ -10,6 +10,8 @@
}, },
"dependencies": { "dependencies": {
"compression": "^1.7.1", "compression": "^1.7.1",
"dayjs": "^1.10.4",
"howler": "^2.2.1",
"node-fetch": "^2.6.1", "node-fetch": "^2.6.1",
"polka": "next", "polka": "next",
"sirv": "^1.0.0" "sirv": "^1.0.0"

14
src/node_modules/components/FloatingYuriko.svelte generated vendored Normal file
View File

@ -0,0 +1,14 @@
<script>
import { Howl, Howler } from "howler";
function yurikoSound() {
var sound = new Howl({
src: "/yuriko.ogg",
volume: 0.3
});
sound.play();
}
</script>
<div class="floating-yuriko hvr-float" on:click={yurikoSound}>
<img src="/yuriko-smol.png" alt="Yuriko" />
</div>

View File

@ -2,6 +2,7 @@
import NavItem from "./NavItem.svelte"; import NavItem from "./NavItem.svelte";
import NavSeparator from "./NavSeparator.svelte"; import NavSeparator from "./NavSeparator.svelte";
import DarkModeButton from "components/DarkModeButton.svelte"; import DarkModeButton from "components/DarkModeButton.svelte";
import { isYurikoBirthday } from "lib/yuriko-birthday.js";
let menu_shown = false; let menu_shown = false;
let detached = false; let detached = false;
@ -15,7 +16,7 @@
<div> <div>
<div class:site-header={true} class:enabled={menu_shown} class:detached> <div class:site-header={true} class:enabled={menu_shown} class:detached>
<div class:site-header__background={true} class:enabled={menu_shown} /> <div class:site-header__background={true} class:site-header__background--enabled={menu_shown} class:site-header__background--yuriko={isYurikoBirthday()} />
<div class="site-header__inner"> <div class="site-header__inner">
<header class="header"> <header class="header">
<div class="header__top"> <div class="header__top">

View File

@ -1,8 +1,9 @@
<script> <script>
import { isYurikoBirthday } from "lib/yuriko-birthday.js";
</script> </script>
<div class="page-header"> <div class="page-header">
<div class="page-header__background"> <div class:page-header__background={true} class:page-header__background--yuriko={isYurikoBirthday()} >
<div class="page-header__overlay" /> <div class="page-header__overlay" />
</div> </div>
<div class="page-header__contents"> <div class="page-header__contents">

18
src/node_modules/lib/yuriko-birthday.js generated vendored Normal file
View File

@ -0,0 +1,18 @@
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc);
dayjs.extend(timezone);
const isYurikoBirthday = function() {
const today = dayjs().tz("Asia/Tokyo");
console.log(today.date() +" "+today.hour());
const month = today.month();
const date = today.date();
return (month === 2 /* march */) && (date === 18);
}
export {
isYurikoBirthday
}

View File

@ -1,5 +1,7 @@
<script> <script>
import Header from 'components/Header.svelte'; import Header from 'components/Header.svelte';
import FloatingYuriko from 'components/FloatingYuriko.svelte';
import { isYurikoBirthday } from 'lib/yuriko-birthday.js';
</script> </script>
<style lang="scss" global> <style lang="scss" global>
@ -9,4 +11,7 @@
<Header></Header> <Header></Header>
<main> <main>
<slot></slot> <slot></slot>
</main> </main>
{#if isYurikoBirthday()}
<FloatingYuriko></FloatingYuriko>
{/if}

View File

@ -3,6 +3,7 @@
@import './utilities/transition'; @import './utilities/transition';
@import './utilities/spacing'; @import './utilities/spacing';
@import './utilities/backgrounds/283-yuika'; @import './utilities/backgrounds/283-yuika';
@import './utilities/backgrounds/765-yuriko';
@import './common/theme'; @import './common/theme';
@import './common/base'; @import './common/base';
@ -14,4 +15,5 @@
@import './components/mediaitem'; @import './components/mediaitem';
@import './components/projectitem'; @import './components/projectitem';
@import './components/gameitem'; @import './components/gameitem';
@import './components/copyarea'; @import './components/copyarea';
@import './components/floatingyuriko';

View File

@ -0,0 +1,28 @@
.floating-yuriko {
position: fixed;
right: 1rem;
bottom: 1rem;
margin-bottom: 0px;
cursor: pointer;
img {
height: 20vh;
}
}
.hvr-float {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-float:hover, .hvr-float:focus, .hvr-float:active {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}

View File

@ -21,7 +21,10 @@
opacity: 0%; opacity: 0%;
top: -23vh; top: -23vh;
&.enabled { &--yuriko {
@include bg-765-yuriko;
}
&--enabled {
opacity: 100%; opacity: 100%;
top: 0; top: 0;
} }

View File

@ -12,6 +12,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
@include bg-283-yuika; @include bg-283-yuika;
&--yuriko {
@include bg-765-yuriko;
}
} }
&__overlay { &__overlay {
width: 100%; width: 100%;

View File

@ -0,0 +1,17 @@
@mixin bg-765-yuriko() {
background-image: url('/images/bg/765-yuriko/bg-sm.jpg');
background-size: cover;
background-position: right 25% top 20%;
@include screen(sm) {
background-image: url('/images/bg/765-yuriko/bg-md.jpg');
}
@include screen(md) {
background-image: url('/images/bg/765-yuriko/bg-lg.jpg');
}
@include screen(lg) {
background-image: url('/images/bg/765-yuriko/bg-xl.jpg');
}
@include screen(xl) {
background-image: url('/images/bg/765-yuriko/bg-xxl.jpg')
}
}

BIN
static/yuriko-smol.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
static/yuriko.ogg Normal file

Binary file not shown.

View File

@ -1305,6 +1305,11 @@ dashdash@^1.12.0:
dependencies: dependencies:
assert-plus "^1.0.0" assert-plus "^1.0.0"
dayjs@^1.10.4:
version "1.10.4"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.4.tgz#8e544a9b8683f61783f570980a8a80eaf54ab1e2"
integrity sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw==
debug@2.6.9: debug@2.6.9:
version "2.6.9" version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -1644,6 +1649,11 @@ hosted-git-info@^2.1.4:
resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.8.tgz#7539bd4bc1e0e0a895815a2e0262420b12858488"
integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg== integrity sha512-f/wzC2QaWBs7t9IYqB4T3sR1xviIViXJRJTWBlx2Gf3g0Xi5vI7Yy4koXQ1c9OYDGHN9sBy1DQ2AB8fqZBWhUg==
howler@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/howler/-/howler-2.2.1.tgz#a521a9b495841e8bb9aa12e651bebba0affc179e"
integrity sha512-0iIXvuBO/81CcrQ/HSSweYmbT50fT2mIc9XMFb+kxIfk2pW/iKzDbX1n3fZmDXMEIpYvyyfrB+gXwPYSDqUxIQ==
html-minifier@^4.0.0: html-minifier@^4.0.0:
version "4.0.0" version "4.0.0"
resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56" resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"