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.

package.json

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

src/node_modules/components/FloatingYuriko.svelte

@@ -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>

src/node_modules/components/Header.svelte

@@ -2,6 +2,7 @@
     import NavItem from "./NavItem.svelte";
     import NavSeparator from "./NavSeparator.svelte";
     import DarkModeButton from "components/DarkModeButton.svelte";
+    import { isYurikoBirthday } from "lib/yuriko-birthday.js";
 
     let menu_shown = false;
     let detached = false;
@@ -15,7 +16,7 @@
 
 <div>
     <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">
             <header class="header">
                 <div class="header__top">

src/node_modules/components/PageHeader.svelte

@@ -1,8 +1,9 @@
 <script>
+    import { isYurikoBirthday } from "lib/yuriko-birthday.js";
 </script>
 
 <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>
     <div class="page-header__contents">

src/node_modules/lib/yuriko-birthday.js

@@ -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
+}

src/routes/_layout.svelte

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

src/style/app.scss

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

src/style/components/_floatingyuriko.scss

@@ -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);
+}

src/style/components/_header.scss

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

src/style/components/_pageheader.scss

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

src/style/utilities/backgrounds/_765-yuriko.scss

@@ -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')
+    }
+}

yarn.lock

@@ -1305,6 +1305,11 @@ dashdash@^1.12.0:
   dependencies:
     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:
   version "2.6.9"
   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"
   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:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"