diff options
| -rw-r--r-- | .babelrc | 9 | ||||
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | client.html | 124 | ||||
| -rw-r--r-- | package.json | 29 | ||||
| -rw-r--r-- | src/ui.js | 38 |
5 files changed, 143 insertions, 58 deletions
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 @@ -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("misc/zdoh.png"); 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("misc/zdoh.png"); 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("misc/zdoh.png"); 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("misc/zdoh.png"); 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 |