diff options
Diffstat (limited to 'client.html')
| -rw-r--r-- | client.html | 124 |
1 files changed, 66 insertions, 58 deletions
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 |