some work done on character sheets

static/css/seagull.css

@@ -4,6 +4,7 @@ div#root {
     display: flex;
     width: 100%;
     height: 100%;
+    z-index: 0;
 
     font-family: sans-serif;
 }
@@ -73,4 +74,39 @@ div.log-tick {
 
 div.log-msg {
     margin-left: 0.2em;
+}
+
+div#charsheet {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+
+    background-color: rgb(240, 240, 240);
+}
+
+div#charsheet-leftside {
+    display: flex;
+    flex-direction: column;
+}
+
+div#charsheet-rightside {
+    display: flex;
+    flex-direction: column;
+}
+
+div.attr {
+    font-size: larger;
+}
+
+div#modal-background {
+    z-index: -10;
+    background-color: rgba(0, 0, 0, 168);
+    visibility: hidden;
+}
+
+div#modal {
+    width: 90%;
+    height: 90%;
+    border: 1.25em double rgba(192, 192, 192, 255);
+    background-color: rgba(255, 255, 255, 255);
 }

static/js/seagull.js

@@ -22,7 +22,9 @@ const gamestate_default = {
     "xp": 0,
     "xp_next": 50,
     "enc_human": "pause",
-    "enc_seagull": "pause"
+    "enc_seagull": "pause",
+    "agility": 0,
+    "instinct": 0
 };
 
 var bool_log_alt = false
@@ -84,6 +86,38 @@ function record_log_with_choices() {
     tick_meter_running = false;
 }
 
+var modal_dialog_open = false;
+var dialog_queue = [];
+
+function modal_no_prop(event) { event.stopPropagation(); }
+
+async function open_modal_dialog(dialog) {
+    var modal_background = document.getElementById("modal-background");
+    if (!modal_background) {
+        modal_background = document.createElement("div");
+        modal_background.setAttribute("id", "modal-background");
+    }
+
+    var modal_root = document.getElementById("modal");
+    if (!modal_root) {
+        modal_root = document.createElement("div");
+        modal_root.setAttribute("id", "modal");
+        modal_root.onclick = modal_no_prop;
+        modal_background.appendChild(modal_root);
+    }
+
+    if (!modal_dialog_open) {
+        tick_meter_running = false;
+        modal_dialog_open = true;
+        modal_background.style = "z-index: 10 !important; visibility: visible !important;";
+    }
+
+    dialog_data = await fetch(`/dialog/${dialog}`)
+    .then(res => { return res.text(); });
+
+    modal_root.innerHTML = dialog_data;
+}
+
 function update_ui() {
     page_elements["lbl_name"].innerHTML = gamestate["name"];
     page_elements["lbl_tick"].innerHTML = gamestate["tick"];