shii.moe

Source for `shii.moe' website.
git clone git://git.knutsen.co/shii.moe
Log | Files | Refs | README | LICENSE

commit 0196de9615343a5d7325baba9e9c5c6e9d287135
parent 1e2fc11f2978cda7a238f41ff93180d0721f3d62
Author: knutsen <samuel@knutsen.co>
Date:   Fri,  2 Jul 2021 00:10:41 +0100

Smooth load mascots, noscript makes them always visible.

Diffstat:
Mpublic/image.js | 64+++++++++++++++++++++++++++++++++-------------------------------
Mpublic/style.css | 3+++
Mstatic/404.html | 1+
Mstatic/books.html | 7++++---
Mstatic/index.html | 5++++-
Mstatic/music.html | 7++++---
Mstatic/norsk.html | 7++++---
Mstatic/school.html | 7++++---
Mtemplates/guestbook.html | 7++++---
9 files changed, 61 insertions(+), 47 deletions(-)

diff --git a/public/image.js b/public/image.js @@ -1,31 +1,33 @@ -const YUI_COUNT = 17; -const NOVELTY = [11, 15, 16]; - -const mascot = document.getElementById("mascot"); -const favicon = document.querySelector("link[rel~='icon']"); -mascot.style.opacity = 0; - -const randomYui = (excludeList=[]) => { - if (!Array.isArray(excludeList)) - excludeList = []; - const picks = [...new Array(YUI_COUNT)] - .map((_, i) => i + 1) - .filter(e => !excludeList.includes(e)); - const pick = picks[Math.floor(Math.random() * picks.length)]; - const stem = "/mascots/" + pick; - mascot.style.opacity = 0; - mascot.setAttribute("src", stem + ".png"); - favicon.setAttribute("href", stem + "-square.png"); - - const loaded = () => { mascot.style.opacity = .85 }; - if (mascot.complete) loaded(); - else mascot.addEventListener('load', loaded); - - useColourScheme({ - 11: 'pink', - 15: 'green', - 16: 'rainbow' - }[pick] || 'default'); -} - -mascot.addEventListener("click", randomYui) +const MASCOT_COUNT = 17; +const MASCOTS = [...new Array(MASCOT_COUNT)].map((_, i) => i + 1) +const NOVELTY = [11, 15, 16]; //< Novelty/special mascots. + +const mascot = document.getElementById("mascot"); +const favicon = document.querySelector("link[rel~='icon']"); + +const setMascot = (pick) => { + const stem = `/mascots/${pick}`; + mascot.style.opacity = 0; + mascot.setAttribute('src', `${stem}.png`); + favicon.setAttribute('href', `${stem}-square.png`); + + const loaded = () => { mascot.style.opacity = .85 }; + if (mascot.complete) loaded(); + else mascot.addEventListener('load', loaded); +} + +const randomMascot = (excludeList=[]) => { + if (!Array.isArray(excludeList)) excludeList = []; + + const picks = MASCOTS.filter(e => !excludeList.includes(e)); + const pick = picks[Math.floor(Math.random() * picks.length)]; + setMascot(pick); + + useColourScheme({ + 11: 'pink', + 15: 'green', + 16: 'rainbow' + }[pick] || 'default'); +} + +mascot.addEventListener('click', randomMascot) diff --git a/public/style.css b/public/style.css @@ -163,6 +163,7 @@ pre code { } #mascot { + opacity: 0; /* before load */ max-height: var(--mascot-height); max-width: var(--mascot-max-width); position: fixed; @@ -217,6 +218,8 @@ h1 { color: black; text-align: center; font-variant: small-caps; + filter: drop-shadow(0px 0px 3px #0002); + text-shadow: 1.3pt 1.3pt #6800ff52; } li { diff --git a/static/404.html b/static/404.html @@ -40,6 +40,7 @@ transform: translateX(-50%); } </style> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> <img src="/mascots/17.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> diff --git a/static/books.html b/static/books.html @@ -4,7 +4,7 @@ <head> <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> - <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel='icon' type='image/png' href="/mascots/2-square.png"> <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -27,9 +27,10 @@ </div> - <img src="/mascots/1.png" id="mascot"></img> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> + <img src="/mascots/2.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> - <script>randomYui(NOVELTY);</script> + <script>randomMascot(NOVELTY);</script> </body> </html> diff --git a/static/index.html b/static/index.html @@ -21,6 +21,8 @@ <div class="titleButton"><a href="/books">Bøker</a></div> </div> + <noscript><p>Welcome, Based JavaScript Hater.</p></noscript> + <p>Hei, jeg heter Shimo, jeg studerer fysikk og kjemi på universitet. Jeg liker å lese (favoritten min er Kafka) og spile gitar. Waifuen min er Yui, selvfølgelig. @@ -44,9 +46,10 @@ </ol> </div> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> <img src="/mascots/1.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> - <script>randomYui(NOVELTY);</script> + <script>randomMascot(NOVELTY);</script> </body> </html> diff --git a/static/music.html b/static/music.html @@ -4,7 +4,7 @@ <head> <title>Musik!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> - <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel='icon' type='image/png' href="/mascots/3-square.png"> <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -52,9 +52,10 @@ </div> - <img src="/mascots/1.png" id="mascot"></img> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> + <img src="/mascots/3.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> - <script>randomYui(NOVELTY);</script> + <script>randomMascot(NOVELTY);</script> </body> </html> diff --git a/static/norsk.html b/static/norsk.html @@ -4,7 +4,7 @@ <head> <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> - <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel='icon' type='image/png' href="/mascots/4-square.png"> <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -28,9 +28,10 @@ </div> - <img src="/mascots/1.png" id="mascot"></img> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> + <img src="/mascots/4.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> - <script>randomYui(NOVELTY);</script> + <script>randomMascot(NOVELTY);</script> </body> </html> diff --git a/static/school.html b/static/school.html @@ -4,7 +4,7 @@ <head> <title>Shimo!!</title> <link rel='stylesheet' type='text/css' href="style.css"/> - <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel='icon' type='image/png' href="/mascots/5-square.png"> <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -27,9 +27,10 @@ </div> - <img src="/mascots/1.png" id="mascot"></img> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> + <img src="/mascots/5.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> - <script>randomYui(NOVELTY);</script> + <script>randomMascot(NOVELTY);</script> </body> </html> diff --git a/templates/guestbook.html b/templates/guestbook.html @@ -92,7 +92,7 @@ </style> <link rel='stylesheet' type='text/css' href="style.css"/> - <link rel='icon' type='image/png' href="/mascots/1-square.png"> + <link rel='icon' type='image/png' href="/mascots/8-square.png"> <link rel="preload" as="image" href="/background-300x300.png"> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> @@ -178,9 +178,10 @@ {% endif %} </div> - <img src="mascots/1.png" id="mascot"></img> + <noscript><style>#mascot { opacity: 0.85; }</style></noscript> + <img src="mascots/8.png" id="mascot"></img> <script src="colours.js"></script> <script src="image.js"></script> - <script>randomYui();</script> + <script>randomMascot(NOVELTY);</script> </body> </html>