Converted pop-up boxes to use css flex

css/popupboxes.scss

@@ -8,6 +8,8 @@
     z-index: 10; /* Sit on top */
     left: 0;
     top: 0;
+    align-items:center;
+    justify-content:center;
     width: 100%;
     height: 100%;
     overflow: auto;
@@ -16,10 +18,21 @@
 
 .popup-box-content {
     background-color: var(--my-background-color);
-    margin: 15% auto;
     padding: 12px;
     border: 5px solid var(--my-highlight-color);
     width: 70%;
+    max-height:80%;
+    /*
+    margin: auto;
+    height:auto;
+    max-height:80%;
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
+    */
+    overflow-y:auto;
     color: var(--my-font-color);
 }
 
@@ -141,11 +154,12 @@
 
 #game-options-content {
     background-color: var(--my-background-color);
-    margin: 15% auto;
     padding: 10px;
     border: 5px solid var(--my-highlight-color);
-    width: 60%;
     color: var(--my-font-color);
+    width: 80%;
+    max-height:80%;
+    overflow-y:auto;
 }
 
 #game-options-left-panel,

css/workinprogress.scss

@@ -6,6 +6,14 @@
     color: var(--my-font-color);
     width: 99%;
     height: 100%;
+    overflow-y: hidden;
+}
+
+.generic-fullscreen-container-scroll {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    padding-right: 20px;
 }
 
 #work-in-progress-container {

dist/engine.css

@@ -1116,7 +1116,14 @@ a:visited {
 .generic-fullscreen-container {
   color: var(--my-font-color);
   width: 99%;
-  height: 100%; }
+  height: 100%;
+  overflow-y: hidden; }
+
+.generic-fullscreen-container-scroll {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+  padding-right: 20px; }
 
 #work-in-progress-container {
   position: fixed; }
@@ -1171,6 +1178,8 @@ a:visited {
   /* Sit on top */
   left: 0;
   top: 0;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: 100%;
   overflow: auto;
@@ -1178,10 +1187,21 @@ a:visited {
 
 .popup-box-content {
   background-color: var(--my-background-color);
-  margin: 15% auto;
   padding: 12px;
   border: 5px solid var(--my-highlight-color);
   width: 70%;
+  max-height: 80%;
+  /*
+    margin: auto;
+    height:auto;
+    max-height:80%;
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
+    */
+  overflow-y: auto;
   color: var(--my-font-color); }
 
 .popup-box-button,
@@ -1289,11 +1309,12 @@ a:visited {
 
 #game-options-content {
   background-color: var(--my-background-color);
-  margin: 15% auto;
   padding: 10px;
   border: 5px solid var(--my-highlight-color);
-  width: 60%;
-  color: var(--my-font-color); }
+  color: var(--my-font-color);
+  width: 80%;
+  max-height: 80%;
+  overflow-y: auto; }
 
 #game-options-left-panel,
 #game-options-right-panel {

index.html

@@ -766,7 +766,9 @@
     </div>
 
     <!-- Red Pill Container -->
-    <div id="red-pill-container" class="generic-fullscreen-container"></div>
+    <div id="red-pill-container" class="generic-fullscreen-container">
+        <div id="red-pill-content" class="generic-fullscreen-container-scroll"></div>
+    </div>
 
     <!-- Cinematic Text Container -->
     <div id="cinematic-text-container" class="generic-fullscreen-container"></div>
@@ -813,7 +815,7 @@
                 <tr id="character-int-wrapper">
                     <td>Int:&nbsp;</td><td id="character-int-text" class="character-stat-cell"></td>
                 </tr>
-            <table>
+            </table>
         </div>
         <div class="character-quick-options">
             <span id="character-overview-save-button"> Save Game </span>

src/RedPill.js

@@ -19,7 +19,7 @@ import {yesNoBoxCreate, yesNoBoxGetYesButton,
 function writeRedPillLine(line) {
     return new Promise(function(resolve, reject) {
 
-        var container = document.getElementById("red-pill-container");
+        var container = document.getElementById("red-pill-content");
         var pElem = document.createElement("p");
         container.appendChild(pElem);
 
@@ -134,7 +134,7 @@ function giveSourceFile(bitNodeNumber) {
 
 function loadBitVerse(destroyedBitNodeNum, flume=false) {
     //Clear the screen
-    var container = document.getElementById("red-pill-container");
+    var container = document.getElementById("red-pill-content");
     removeChildrenFromElement(container);
 
     //Create the Bit Verse

utils/GameOptions.js

@@ -35,7 +35,7 @@ function gameOptionsBoxClose() {
 
 function gameOptionsBoxOpen() {
     var box = document.getElementById("game-options-container");
-    box.style.display = "block";
+    box.style.display = "flex";
     setTimeout(function() {
         gameOptionsOpened = true;
     }, 500);

utils/YesNoBox.js

@@ -32,7 +32,7 @@ function yesNoBoxCreate(txt) {
 
     var c = document.getElementById("yes-no-box-container");
     if (c) {
-        c.style.display = "block";
+        c.style.display = "flex";
     } else {
         console.log("ERROR: Container not found for YesNoBox");
     }
@@ -75,7 +75,7 @@ function yesNoTxtInpBoxCreate(txt) {
 
     var c = document.getElementById("yes-no-text-input-box-container");
     if (c) {
-        c.style.display = "block";
+        c.style.display = "flex";
     } else {
         console.log("ERROR: Container not found for YesNoTextInputBox");
     }

utils/uiHelpers/createPopup.ts

@@ -9,7 +9,7 @@ import { getElementById } from "./getElementById";
 export function createPopup(id: string, elems: HTMLElement[]) {
     const container: HTMLDivElement = createElement("div", {
             class: "popup-box-container",
-            display: "block",
+            display: "flex",
             id,
         }) as HTMLDivElement;
     const content: HTMLElement = createElement("div", {