From c0faa59ca8723eef9fa2283b564f5e824bdead06 Mon Sep 17 00:00:00 2001 From: Victor Westerlund Date: Tue, 12 Oct 2021 15:46:49 +0200 Subject: [PATCH] dev21w41a --- assets/css/style.css | 60 +++++++++++++++++++++++++++++ assets/js/modules/WindowManager.mjs | 40 +++++++++++++++++++ assets/js/script.mjs | 16 ++++++++ index.html | 20 ++++++++++ player.html | 13 +++++++ 5 files changed, 149 insertions(+) create mode 100755 assets/css/style.css create mode 100755 assets/js/modules/WindowManager.mjs create mode 100755 assets/js/script.mjs create mode 100755 index.html create mode 100755 player.html diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100755 index 0000000..867c373 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,60 @@ +:root { + --color-background: 0,0,0; + --color-contrast: 255,255,255; +} + +html, +body { + margin: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + background-color: rgb(var(--color-background)); + color: rgba(var(--color-contrast)); + font-family: "Courier New", Courier, monospace; +} + +a { + text-decoration: none; + color: inherit; +} + +#play { + display: inline-block; + background-color: rgb(var(--color-contrast)); + color: rgba(var(--color-background)); + padding: 20px; + font-size: 18px; +} + +footer { + position: fixed; + box-sizing: border-box; + padding: 0 20px; + left: 0; + bottom: 0; +} + +@media (pointer: fine) { + #play:not(.unsupported) { + cursor: pointer; + } +} + +@media (hover: hover) { + #play:not(.unsupported) { + transition: 100ms background-color,100ms color; + cursor: pointer; + } + + #play:not(.unsupported):hover { + background-color: rgba(var(--color-contrast),.15); + color: rgb(var(--color-contrast)); + } + + a:hover { + text-decoration: underline; + } +} \ No newline at end of file diff --git a/assets/js/modules/WindowManager.mjs b/assets/js/modules/WindowManager.mjs new file mode 100755 index 0000000..c6b22ab --- /dev/null +++ b/assets/js/modules/WindowManager.mjs @@ -0,0 +1,40 @@ +import { default as Monkeydo } from "./monkeydo/Monkeydo.mjs"; + +export default class WindowManager { + constructor() { + const self = this; + + this.channels = { + lyrics: new BroadcastChannel("lyrics"), + credits: new BroadcastChannel("credits"), + art: new BroadcastChannel("art") + }; + + const methods = { + self: self, + pushText: (target,text) => { + const channels = self.channels[target]; + for(const channel of channels) { + channel.postMessage(["PUSH_TEXT",text]); + } + } + } + + this.player = new Monkeydo(methods); + } + + spawnPlayer(type) { + if(!type in this.channels) { + throw new Error(`Inavlid player type "${type}"`); + } + + // TODO + //const player = new PlayerWindow(type); + } + + play() { + this.spawnPlayer("lyrics"); + this.spawnPlayer("credits"); + this.spawnPlayer("art"); + } +} \ No newline at end of file diff --git a/assets/js/script.mjs b/assets/js/script.mjs new file mode 100755 index 0000000..7ab4a51 --- /dev/null +++ b/assets/js/script.mjs @@ -0,0 +1,16 @@ +import { default as Player } from "./modules/WindowManager.mjs"; + +const play = document.getElementById("play"); +const message = document.getElementById("message"); + +try { + if(typeof BroadcastChannel !== "function") { + throw new Error("BroadcastChannel API is not supported"); + } + const player = new Player(); + play.addEventListener("click",() => player.play()); +} catch(error) { + play.classList.add("unsupported"); + play.innerText = "Your browser can not play this demo"; + message.innerText = error; +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100755 index 0000000..fa3ddba --- /dev/null +++ b/index.html @@ -0,0 +1,20 @@ + + + + + + + Still Alive + + + +
+

Still Alive

+

+
+ + + + \ No newline at end of file diff --git a/player.html b/player.html new file mode 100755 index 0000000..4737595 --- /dev/null +++ b/player.html @@ -0,0 +1,13 @@ + + + + + + + ​ + + + + + + \ No newline at end of file