support multiple scenes and passing between them

assets/web/app.js

@@ -111,8 +111,11 @@ tavern.onlogin = (s) => {
         login.style.display = 'none';
         game.style.display = 'flex';
         // get last 50 msgs (i think that is enough for now) when we get in
+        // TODO: Maybe move this into the server itself? that is a lot of stuff that we know are gonna happen...
+        // For now i'll keep it like that tho
         tavern.get_last_msgs(50);
-        tavern.get_current_scene();
+        // TODO: Perhaps figure out a way to show a certain scene? maybe on the server it would make more sense
+        tavern.get_scene_list();
     }
     else {
         alert("Invalid username or password!");
@@ -210,6 +213,14 @@ tavern.onshowscene = (show) => {
         tavern.onspawntoken(token);
     }
 }
+tavern.onscenelist = (list) => {
+    console.log(list);
+    let div = document.getElementById('scene-list');
+    div.innerHTML = '';
+    for (let scene of list.scenes) {
+        div.innerHTML += `<button onclick='tavern.get_scene(${scene[0]});'>${scene[1]}</button>`;
+    }
+}
 function onLoginClick() {
     let username = document.getElementById('login-username').value;
     let pass = document.getElementById('login-pass').value;

assets/web/index.html

@@ -36,8 +36,7 @@
         </div>
         <div id="game-view"
             style="display: flex; overflow: hidden; position: relative; top: 0px; left: 0px; flex-grow: 1;">
-            <div style="position:absolute; top: 10px; left: 5px; background-color: rgb(255, 166, 0); z-index: 5;">
-                floating<br>stuff
+            <div id="scene-list">
             </div>
             <div id="dice-roll-popup"
                 style="display:none; justify-content: center; width: 100%; height: 100%; background-color: transparent; position: absolute; z-index: 10; top: 0px; left: 0px">

assets/web/style.css

@@ -92,4 +92,23 @@ body {
 
 .dice-roll-row p {
     margin: 0px;
+}
+
+#scene-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    position: absolute;
+    top: 10px;
+    left: 5px;
+    z-index: 5;
+    border-color: black;
+    border-width: 2px;
+    border-style: solid;
+    background-color: black;
+}
+
+#scene-list button {
+    background-color: wheat;
+    border-width: 0px;
 }

assets/web/tavern.js

@@ -3,7 +3,6 @@ const tavern = {
 	msgs: [],
 	connected: false,
 	loggedIn: false,
-	currentScene: 0,
 	call: (f, ...args) => {
 		if (typeof (f) == "function") {
 			f(...args);
@@ -57,9 +56,11 @@ tavern.socket.onmessage = (m) => {
 		tavern.call(tavern.onmovetoken, m.move_token);
 	}
 	if (m.show_scene) {
-		tavern.currentScene = m.show_scene.scene;
 		tavern.call(tavern.onshowscene, m.show_scene);
 	}
+	if (m.scene_list) {
+		tavern.call(tavern.onscenelist, m.scene_list);
+	}
 }
 tavern.login = (username, password) => {
 	if (!tavern.connected || tavern.loggedIn) { return false; }
@@ -96,7 +97,11 @@ tavern.action_result = (name, source, targets, results) => {
 	if (!tavern.connected || tavern.loggedIn) { return false; }
 	tavern.socket.send(JSON.stringify({ action_result: { name: name, source: source ?? '', targets: targets ?? [], results: results } }));
 }
-tavern.get_current_scene = () => {
+tavern.get_scene = (id) => {
 	if (!tavern.connected || tavern.loggedIn) { return; }
-	tavern.socket.send(JSON.stringify('get_current_scene'))
-}
+	tavern.socket.send(JSON.stringify({ get_scene: { id: id } }))
+}
+tavern.get_scene_list = () => {
+	if (!tavern.connected || tavern.loggedIn) { return; }
+	tavern.socket.send(JSON.stringify('get_scene_list'))
+}