mit Container-Element angefangen, dummen Hintergrund eingebaut

client/SkribblContainer.js

+/**
+ * Custom element `<skribbl-container>` that functions as a root element for the game, containing and managing both the game and all its menus, taking care of high-level state managment.
+ */
+export default class SkribblContainer extends HTMLElement {
+	constructor(){
+		super();
+		this.attachShadow({mode:"open"});
+		this.shadowRoot.innerHTML = `
+			<style>
+				:host {
+					display: block;
+					position: fixed;
+					top: 0;
+					right: 0;
+					bottom: 0;
+					left: 0;
+					--background-color: #efefefef;
+					background-image: linear-gradient(var(--background-color),var(--background-color)), url(./res/background.png);
+				}
+			</style>
+		`;
+	}
+}
+customElements.define("skribbl-container",SkribblContainer);
\ No newline at end of file

client/res/.gitignore

+*.kra~
\ No newline at end of file

client/script.js

 import Signaler from "./Signaler.js";
+import SkribblContainer from "./SkribblContainer.js";
 
 document.addEventListener("DOMContentLoaded",async()=>{
 	if (document.location.hash){
@@ -16,24 +17,28 @@ document.addEventListener("DOMContentLoaded",async()=>{
 	}else{
 		/** @type {HTMLButtonElement} *///@ts-ignore
 		const button = document.getElementById("button");
-		button.addEventListener("click",async e=>{
+		await new Promise(resolve=>{button.addEventListener("click",async e=>{
 			button.disabled = true;
-			let id = await Signaler.host(async({connection,dataChannel})=>{
-				console.group("New connection!");
-				console.log("connection:",connection);
-				console.log("dataChannel:",dataChannel);
-				console.groupEnd();
-				dataChannel.onmessage = (e)=>{
-					console.log("Message through DataChannel:",e.data);
-				}
-				if (dataChannel.readyState!="open"){
-					await new Promise(resolve=>{
-						dataChannel.onopen = resolve;
-					});
-				}
-				dataChannel.send("Oh hello there :3");
-			});
-			alert(document.location.host+document.location.pathname+"#"+id);
+			resolve();
+		})});
+		let id = await Signaler.host(async({connection,dataChannel})=>{
+			console.group("New connection!");
+			console.log("connection:",connection);
+			console.log("dataChannel:",dataChannel);
+			console.groupEnd();
+			dataChannel.onmessage = (e)=>{
+				console.log("Message through DataChannel:",e.data);
+			}
+			if (dataChannel.readyState!="open"){
+				await new Promise(resolve=>{
+					dataChannel.onopen = resolve;
+				});
+			}
+			dataChannel.send("Oh hello there :3");
 		});
+		alert(document.location.host+document.location.pathname+"#"+id);
 	}
+	const game = new SkribblContainer();
+	document.body.innerHTML = "";
+	document.body.appendChild(game);
 });
\ No newline at end of file