From c26ac0e636a71b850fa316f5bead6ba263b55492 Mon Sep 17 00:00:00 2001
From: oldmud0 <oldmud0@users.noreply.github.com>
Date: Mon, 14 May 2018 22:45:56 -0500
Subject: Turn it into a node package to use GoldenLayout

---
 .babelrc     |   9 +++++
 .gitignore   |   1 +
 client.html  | 124 +++++++++++++++++++++++++++++++----------------------------
 package.json |  29 ++++++++++++++
 src/ui.js    |  38 ++++++++++++++++++
 5 files changed, 143 insertions(+), 58 deletions(-)
 create mode 100644 .babelrc
 create mode 100644 package.json
 create mode 100644 src/ui.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..5d36355
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,9 @@
+{
+    "presets": [
+      ["env", {
+        "targets": {
+          "browsers": ["last 2 versions", "ie >= 11"]
+        }
+      }]
+    ]
+  }
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index cd2946a..a9c1763 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,3 +45,4 @@ $RECYCLE.BIN/
 Network Trash Folder
 Temporary Items
 .apdisk
+node_modules
\ No newline at end of file
diff --git a/client.html b/client.html
index a9cec08..9db9c37 100644
--- a/client.html
+++ b/client.html
@@ -3,11 +3,74 @@
     <title>Attorney Online session</title>
     <meta charset="utf-8">
     <link rel="stylesheet" type="text/css" href="client.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+    <!--<script src="golden/js/goldenlayout.js"></script>-->
+    <link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" />
+    <link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />
+    <script src="src/index.js" type="module"></script>
     <script src="client.js"></script>
 </head>
 
+<template id="client_wrapper">
+    <div id="client_gamewindow">
+        <img id="client_court" alt="Courtroom background" onerror="imgError(this);">
+        <img id="client_char" alt="Character sprite" onerror="imgError(this);">
+        <img id="client_bench" alt="Bench overlay">
+        <img id="client_fg" alt="Various overlay" onerror="imgError(this);">
+        <div id="client_name">
+            <p>Dolan</p>
+        </div>
+        <div id="client_chat">
+            <p id="client_inner_chat"></p>
+        </div>
+    </div>
+    <input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;">
+    <div id="client_emo">
+    </div>
+    <br>
+    <div id="client_buttons">
+        <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)">
+        <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)">
+        <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)">
+        <br>
+        <input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx">
+        <label for="sendsfx">SFX</label>
+    </div>
+</template>
+
+<template id="client_settings">
+    <div class="slider">Music<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()"></div>
+    <div class="slider">SFX <input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()"></div>
+    <div class="slider">Blip <input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()"></div>
+    <input id="change_character" type="button" onclick="changeCharacter()" value="Change character">
+</template>
+
+<template id="client_log"></template>
+
+<template id="misc" style="display: flex; flex-direction: column;">
+    <div id="client_bars">
+        <span style="background-image: url(&quot;misc/zdoh.png&quot;); width: 90px; height: 20px;">
+            <img class="client_defense" alt="Defense health" id="client_defense_hp" src="misc/advocat.png" style="clip-path: polygon(0px 0px, 90px 0px, 90px 20px, 0px 20px, 0px 0px); clip: rect(0px, 90px, 20px, 0px);">
+        </span>
+        <span style="background-image: url(&quot;misc/zdoh.png&quot;); width: 90px; height: 20px;" misc="">
+            <img class="client_prosecutor" alt="Prosecution health" id="client_prosecutor_hp" src="misc/procuror.png" style="clip-path: polygon(0px 0px, 90px 0px, 90px 20px, 0px 20px, 0px 0px); clip: rect(0px, 90px, 20px, 0px);" misc="">
+        </span>
+    </div>
+</template>
+
+<template id="ooc">
+    <textarea id="client_ooclog" style="/* margin: 25px 0px 0px; *//* height: 563px; *//* width: 615px; *//* min-width: 100%; */min-height: 20em;"></textarea>
+    <input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)">
+</template>
+
+<template id="music">
+    <select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="/* margin-top: 20px; *//* margin-bottom: 0px; *//* height: 361px; */">
+    </select>
+</template>
+
 <body>
     <span id="sound"></span>
+    <div id="here"></div>
     <div id="client_loading">
         <h1 id="client_loadingtext">Loading</h1>
         <button onclick="RetryButton()">RETRY</button>
@@ -16,64 +79,9 @@
         <button onclick="pickchar(1001)">SPECTATE</button>
         <table id="client_chartable"></table>
     </div>
-    <div style="display: flex; flex-wrap: wrap; flex-shrink: 1;">
-        <div>
-        <div id="client_wrapper">
-            <div id="client_gamewindow">
-                <img id="client_court" alt="Courtroom background" onerror="imgError(this);">
-                <img id="client_char" alt="Character sprite" onerror="imgError(this);">
-                <img id="client_bench" alt="Bench overlay">
-                <img id="client_fg" alt="Various overlay" onerror="imgError(this);">
-                <div id="client_name">
-                    <p>Dolan</p>
-                </div>
-                <div id="client_chat">
-                    <p id="client_inner_chat"></p>
-                </div>
-            </div>
-            <input id="client_inputbox" class="long" type="text" onkeypress="onEnter(event)" style="padding-left: 1px; padding-right: 1px;">
-            <div id="client_emo">
-            </div>
-            <br>
-            <div id="client_buttons">
-                <img src="misc/holdit.png" id="button_1" alt="Hold it!" class="client_button" onclick="toggleshout(1)">
-                <img src="misc/objection.png" id="button_2" alt="OBJECTION!" class="client_button" onclick="toggleshout(2)">
-                <img src="misc/takethat.png" id="button_3" alt="Take That!" class="client_button" onclick="toggleshout(3)">
-                <br>
-                <input type="checkbox" id="sendsfx" name="sendsfx" value="sendsfx">
-                <label for="sendsfx">SFX</label>
-            </div>
-        </div>	
-        <div id="client_settings">
-            <div class="slider">Music<input id="client_mvolume" class="long" type="range" min="0" max="100" value="80" onchange="changeMusicVolume()"></div>
-            <div class="slider">SFX <input id="client_svolume" class="long" type="range" min="0" max="100" value="70" onchange="changeSFXVolume()"></div>
-            <div class="slider">Blip <input id="client_bvolume" class="long" type="range" min="0" max="100" value="60" onchange="changeBlipVolume()"></div>
-            <input id="change_character" type="button" onclick="changeCharacter()" value="Change character">
-        </div>
-        </div>
-        <div id="client_chatlog" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));grid-template-rows: repeat(auto-fit, minmax(10em, 40em));">
-        <div style="display: flex; flex-direction: column;">
-            <div id="client_log" style="flex: 1"></div>
-            <div id="client_bars">
-                <span style="background-image: url(&quot;misc/zdoh.png&quot;); width: 90px; height: 20px;">
-                    <img class="client_defense" alt="Defense health" id="client_defense_hp" src="misc/advocat.png" style="clip-path: polygon(0px 0px, 90px 0px, 90px 20px, 0px 20px, 0px 0px); clip: rect(0px, 90px, 20px, 0px);">
-                </span>
-                <span style="background-image: url(&quot;misc/zdoh.png&quot;); width: 90px; height: 20px;" misc="">
-                    <img class="client_prosecutor" alt="Prosecution health" id="client_prosecutor_hp" src="misc/procuror.png" style="clip-path: polygon(0px 0px, 90px 0px, 90px 20px, 0px 20px, 0px 0px); clip: rect(0px, 90px, 20px, 0px);" misc="">
-                </span>
-            </div>
-        </div>
-        <div style="display: flex; flex-direction: column; /* grid-column: 2; */ /* grid-row: 1; */">
-            <textarea id="client_ooclog" style="/* margin: 25px 0px 0px; *//* height: 563px; *//* width: 615px; *//* min-width: 100%; */min-height: 20em;">
-            </textarea>
-            <input id="client_oocinputbox" class="long" type="text" onkeypress="onOOCEnter(event)">
-        </div>
-            <select id="client_musiclist" size="5" onclick="musiclist_click(event)" style="/* margin-top: 20px; *//* margin-bottom: 0px; *//* height: 361px; */">
-            </select>
-        </div>
-        <div id="client_error" class="error" style="display: none">
+    <div id="client_error" class="error" style="display: none">
             <p>CONNECTION ERROR</p><br>
             <button onclick="ReconnectButton()">RECONNECT</button>
-        </div>
     </div>
-</body></html>
\ No newline at end of file
+</body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..508a968
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "webao",
+  "version": "2.0.0",
+  "description": "Web-based Attorney Online client",
+  "main": "client.js",
+  "scripts": {
+    "babel": "babel ui.js -o ui.b.js",
+    "webpack": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stonedDiscord/stonedDiscord.github.io.git"
+  },
+  "author": "stonedDiscord",
+  "bugs": {
+    "url": "https://github.com/stonedDiscord/stonedDiscord.github.io/issues"
+  },
+  "homepage": "https://github.com/stonedDiscord/stonedDiscord.github.io#readme",
+  "devDependencies": {
+    "babel-cli": "^6.26.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-es2015": "^6.24.1",
+    "webpack": "^4.8.3",
+    "webpack-cli": "^2.1.3",
+    "uglify-es": "3.3.9"
+  }
+}
diff --git a/src/ui.js b/src/ui.js
new file mode 100644
index 0000000..ecbdb45
--- /dev/null
+++ b/src/ui.js
@@ -0,0 +1,38 @@
+import GoldenLayout from "./golden/js/goldenlayout.js";
+
+var config = {
+    settings: {
+        showPopoutIcon: false
+    },
+    content: [
+    {
+        type: "row",
+        content: [
+        {
+            type: "component",
+            componentName: "template",
+            componentState: { id: "client_wrapper" }
+        },
+        {
+            type: "column",
+            content: [
+            {
+                type: "component",
+                componentName: "template",
+                componentState: { id: "ooc" }
+            },
+            {
+                type: "component",
+                componentName: "template",
+                componentState: { id: "music" }
+            }]
+        }]
+    }]
+};
+
+var golden = new GoldenLayout(config);
+golden.registerComponent("template", function(container, componentState) {
+    container.getElement().html(document.querySelector("#" + componentState.id).content);
+});
+golden.init();
+console.log("initializing");
\ No newline at end of file
-- 
cgit