added subtitles element

other/audio-files.md

@@ -71,7 +71,7 @@
 
 
 ### Head 4
-* When I sleep I have the strangest dreams. Yesterday, I dreamt I was stuck at a deserted area speaking with giant flexible heads. 
+* When I sleep, I have the strangest dreams. Yesterday, I dreamt I was stuck at a deserted area speaking with giant flexible heads. 
     * File: when-I-sleep-I-have-the-strangest-dreams.mp3
     * Name: whenIsleep
 

other/script.md

@@ -36,7 +36,7 @@
 
 ### Head 4
 
-- When I sleep I have the strangest dreams. Yesterday, I dreamt I was stuck at a deserted area speaking with giant flexible heads.
+- When I sleep, I have the strangest dreams. Yesterday, I dreamt I was stuck at a deserted area speaking with giant flexible heads.
 
 - Ninety percent of the texts I produce consist of the same 50 words.
 

src/main.js

@@ -50,6 +50,7 @@ import {
   caveEntrance,
 } from "./scripts/positions.js";
 import { Ending } from "./scripts/ending.js";
+import { Subtitles } from "./scripts/subtitles.js";
 
 /**
  * Basics
@@ -113,6 +114,12 @@ mainMenu.appendChild(instructions);
 const ending = Ending();
 document.body.appendChild(ending);
 
+/**
+ * Subtitles
+ */
+const subtitles = Subtitles();
+document.body.appendChild(subtitles);
+
 /**
  * Loader
  */

src/scripts/subtitles.js

@@ -0,0 +1,28 @@
+// Author: Michael Kolesidis
+// Title: uncanny canyon
+
+// Copyright (c) 2023 Michael Kolesidis - https://michaelkolesidis.com/
+
+// Reproduction of any of the artwork on this website
+// for commercial use is not permitted without first
+// receiving written permission from the artist. You
+// cannot host, display, distribute or share this Work
+// in any form, including physical and digital. You
+// cannot use this Work in any commercial or non-commercial
+// product, website or project. You cannot sell this Work and
+// you cannot mint an NFTs of it.
+
+// Under the Copyright Law, it is fair use to reproduce a single
+// copy for personal or educational purposes, provided that no
+// changes are made to the content and provided that a copyright
+// notice attesting to the content is attached to the reproduction.
+// Beyond that, no further copies of works of art may be made or
+// distributed on this website without written permission.
+
+export const Subtitles = () => {
+  const subtitles = document.createElement("div");
+  subtitles.setAttribute("id", "subtitles");
+  subtitles.innerHTML = ``;
+
+  return subtitles;
+};

src/style.css

@@ -17,6 +17,7 @@ body {
   color: var(--white);
   font-size: 13px;
   overscroll-behavior: none;
+  overflow: hidden;
 }
 
 .lil-gui {
@@ -90,3 +91,19 @@ body {
   transition: opacity 10s ease-in-out;
   z-index: 3;
 }
+
+#subtitles {
+  z-index: 2;
+  position:sticky;
+  bottom: 2em;
+  padding: 0.2em;
+  opacity: 0;
+  background: black;
+  color: var(--white);
+  max-width: fit-content;
+  max-height: fit-content;
+  text-align: center;
+  font-size: 2em;
+  max-width: 60ch;
+  margin: auto;
+}