2024-07-24 15:30:46 +01:00
4 changed files with 68 additions and 10 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -248,3 +248,5 @@ $RECYCLE.BIN/
 *.lnk

 # End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux
+
+*.mp3
--- a/0.mp3
+++ b/0.mp3
--- a/1.mp3
+++ b/1.mp3
--- a/2.mp3
+++ b/2.mp3
--- a/3.mp3
+++ b/3.mp3
--- a/4.mp3
+++ b/4.mp3
--- a/5.mp3
+++ b/5.mp3
--- a/6.mp3
+++ b/6.mp3
--- a/7.mp3
+++ b/7.mp3
--- a/8.mp3
+++ b/8.mp3
--- a/9.mp3
+++ b/9.mp3
--- a/start-server.sh
+++ b/start-server.sh
@@ -0,0 +1,2 @@
+#!/bin/sh
+uvicorn server:app --host 0.0.0.0 --port 443 --ssl-keyfile private.key.pem --ssl-certfile domain.cert.pem > server.log 2> server.err < /dev/null
--- a/web/index.html
+++ b/web/index.html
@@ -2,11 +2,9 @@
 <html>
 	<head>
 		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
 		<title>infinifi</title>

-		<link rel="stylesheet" href="./style.css">
+		<link rel="preload" href="./style.css" as="style">
 		<link rel="modulepreload" href="./bg.js">
 		<link rel="modulepreload" href="./script.js">
 		<link rel="preload" href="./images/cat-0.png" as="image">
@@ -14,6 +12,14 @@
 		<link rel="prefetch" href="./images/cat-1.png" as="image">
 		<link rel="prefetch" href="./images/cat-2.png" as="image">
 		<link rel="prefetch" href="./images/cat-3.png" as="image">
+		<link rel="stylesheet" href="/style.css">
+
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+
+		<meta name="twitter:card" content="summary"></meta>
+		<meta name="twitter:site" content="@kennethnym"></meta>
+		<meta name="twitter:title" content="infinifi"></meta>
+		<meta name="twitter:description" content="infinite lo-fi beats in the background"></meta>
 	</head>
 	<body>
 		<div class="container">
--- a/web/script.js
+++ b/web/script.js
@@ -97,6 +97,30 @@ function animateCat() {
 	}, 500);
 }

+/**
+ * Allow audio to be played/paused using the space bar
+ */
+function enableSpaceBarControl() {
+	document.addEventListener("keydown", (event) => {
+		if (event.code === "Space") {
+			playBtn.classList.add("button-active");
+			playBtn.dispatchEvent(new MouseEvent("mousedown"));
+			clickAudio.play();
+		}
+	});
+	document.addEventListener("keyup", (event) => {
+		if (event.code === "Space") {
+			playBtn.classList.remove("button-active");
+			clickReleaseAudio.play();
+		}
+	});
+	document.addEventListener("keypress", (event) => {
+		if (event.code === "Space") {
+			playBtn.click();
+		}
+	});
+}
+
 playBtn.onmousedown = () => {
 	clickAudio.play();
 	document.addEventListener(
@@ -127,3 +151,4 @@ volumeSlider.oninput = () => {

 volumeSlider.value = 100;
 animateCat();
+enableSpaceBarControl();
--- a/web/style.css
+++ b/web/style.css
@@ -36,6 +36,13 @@ body {
  background-color: var(--base);
  overflow: hidden;
 }
+@media (min-width: 768px) {
+  body {
+    width: calc(100% - 8rem - 2px);
+    height: calc(100vh - 10rem - 2px);
+    padding: 4rem;
+  }
+}

 h1,
 h2,
@@ -66,6 +73,11 @@ footer {
  align-items: center;
  justify-content: center;
 }
+@media (min-width: 768px) {
+  footer {
+    padding: 2rem 0;
+  }
+}

 footer > span {
  color: var(--text);
@@ -245,12 +257,14 @@ input[type="range"]::-ms-fill-upper {
  }
 }

+.button.button-active,
 .button:active {
  background: var(--text) !important;
  color: var(--base);
  transform: translate(4px, 4px);
 }

+.button.button-active::after,
 .button:active::after {
  content: none;
 }