mirror of
https://github.com/CHOMPStation2/CHOMPStation2.git
synced 2025-12-10 10:12:45 +00:00
dafd19c708
- Chat remains between client reconnects if your client didn't close (so things like using the reconnect button, or autoreconnects at round end when that feels like working) - The client doesn't send pings to the server, the server sends pings to the client. This fixes AFK measurements for AFK kick purposes. - Turn latency indicator into a green/red indicator to show if you're connected, and when clicked will perform a one-time ping (and block doing it again for 10 seconds). It will display '?ms' if it never got a reply, or '999ms' if it did, but it was over 1s.
192 lines
8.4 KiB
HTML
192 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html debug="true">
|
|
<head>
|
|
<title>VChat</title>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
|
|
<!-- Styles -->
|
|
<link rel="stylesheet" type="text/css" href="semantic.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="vchat-font-embedded.css" />
|
|
<link rel="stylesheet" type="text/css" href="ss13styles.css" />
|
|
|
|
<!-- Important scripts -->
|
|
<script type="text/javascript" src="polyfills.js"></script>
|
|
<script type="text/javascript" src="vue.min.js"></script>
|
|
<script type="text/javascript" src="vchat.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="loader">
|
|
<p>You probably shouldn't see this page. This generally means chat is very broken.</p>
|
|
<p>You can wait a few seconds to see if it loads, or try OOC > Reload VChat.</p>
|
|
</div>
|
|
<div id="app" @mouseup="on_mouseup" style="display: none;" :class="{ inverted: inverted }">
|
|
|
|
<!-- Top menu -->
|
|
<div id="topmenu" class="ui top fixed menu" :class="{ inverted: inverted }">
|
|
<div v-for="(tab,index) in tabs" class="item" :class="{ active: tab.active }" @click="switchtab(tab)" @click.ctrl="editmode">
|
|
<i v-show="editing && !tab.immutable && index >= 2" class="icon-left-open-outline" @click.stop.prevent="movetab(tab,-1)" title="Move tab left"></i>
|
|
{{tab.name}}
|
|
<i v-show="editing && !tab.immutable" class="icon-cancel-circled-outline" @click.stop.prevent="deltab(tab)" title="Delete tab"></i>
|
|
<i v-show="editing && !tab.immutable && index != tabs.length-1" class="icon-right-open-outline" @click.stop.prevent="movetab(tab,1)" title="Move tab right"></i>
|
|
<div v-if="tab_unread_count(tab) > 0" class="ui top right attached red label">{{tab_unread_count(tab)}}</div>
|
|
</div>
|
|
|
|
<div class="right menu">
|
|
<div class="item" @click="newtab" title="New Tab"><i class="icon-folder-add"></i></div>
|
|
<div class="item" @click="pause" title="Pause Autoscroll">
|
|
<i class="icon-pause-outline" :class="{ blinkwarn: paused }"></i>
|
|
</div>
|
|
<div class="item" @click="editmode" title="Edit Mode">
|
|
<i class="icon-cog-outline" :class="{ blinkwarn: editing }"></i>
|
|
</div>
|
|
<div class="item" title="Click to test latency">
|
|
<span class="ui circular label" :class="ping_classes" @click="do_latency_test">
|
|
<template v-if="latency">
|
|
{{latency}}ms
|
|
</template>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Editor box -->
|
|
<div id="contentbox">
|
|
<div v-show="editing" id="editbox" class="ui segment" :class="{ inverted: inverted }">
|
|
<div class="ui internally celled grid" :class="{ inverted: inverted }">
|
|
<div class="row">
|
|
<div class="sixteen wide column">
|
|
<div class="ui center aligned header" :class="{ inverted: inverted }">
|
|
<h2>VChat Settings</h2>
|
|
</div>
|
|
<div style="text-align: center;"><a href="#" @click="editmode">Close Settings</a></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="eight wide column">
|
|
<h3>'{{active_tab.name}}' Tab Settings</h3>
|
|
<span v-show="active_tab.immutable">This tab is immutable. You cannot make changes.</span>
|
|
<div v-show="!active_tab.immutable">
|
|
<a href="#" @click="renametab">Rename Tab</a> - <a href="#" @click="deltab">Delete Tab</a>
|
|
<h5>Messages to display:</h5>
|
|
<div class="ui form">
|
|
<div class="grouped fields">
|
|
<div class="field" v-for="type in type_table" :title="type.tooltip">
|
|
<div v-show="!type.admin || is_admin" class="ui slider checkbox" :class="{ inverted: inverted, disabled: type.required || active_tab.immutable, checked: type.required || active_tab.immutable }">
|
|
<input type="checkbox" id="type.becomes" :value="type.becomes" v-model="active_tab.categories" :disabled="type.required || active_tab.immutable" :checked="type.required || active_tab.immutable"><label :for="type.becomes">{{type.pretty}}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="eight wide column">
|
|
<h3>Global Settings</h3>
|
|
<div class="ui form" :class="{ inverted: inverted }">
|
|
<div class="grouped fields">
|
|
<div class="field">
|
|
<div class="ui slider checkbox" :class="{ inverted: inverted }">
|
|
<input type="checkbox" id="darkmode" v-model="inverted"><label for="darkmode">Dark Mode</label>
|
|
</div>
|
|
</div>
|
|
<div class="field">
|
|
<div class="ui slider checkbox" :class="{ inverted: inverted }">
|
|
<input type="checkbox" id="combining" v-model="animated"><label for="animated">Animate Messages</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inline fields">
|
|
<label>Combine Messages</label>
|
|
<div class="field" title="Combine no messages together.">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" id="cnone" name="crushing" v-model.number="crushing" value="0">
|
|
<label for="cnone">None</label>
|
|
</div>
|
|
</div>
|
|
<div class="field" title="Try to combine the newest and last message.">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" id="cone" name="crushing" v-model.number="crushing" value="1">
|
|
<label for="cone">One</label>
|
|
</div>
|
|
</div>
|
|
<div class="field" title="Try to combine the newest and last 3 messages.">
|
|
<div class="ui radio checkbox">
|
|
<input type="radio" id="cthree" name="crushing" v-model.number="crushing" value="3">
|
|
<label for="cthree">Three</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="inline fields">
|
|
<div class="field" title="Font size (Min 0.2, Max 5, Default 0.9)">
|
|
<label>Font Scale</label>
|
|
<input class="inputbox" type="number" name="fontsize" placeholder="0.9" v-model.lazy.number="fontsize" required @keyup.enter="blur_this($event)">
|
|
</div>
|
|
</div>
|
|
<div class="inline fields">
|
|
<div class="field" title="Line height % (Min 100, Max 200, Default 130)">
|
|
<label>Line Height %</label>
|
|
<input class="inputbox" type="number" name="lineheight" placeholder="130" v-model.lazy.number="lineheight" required @keyup.enter="blur_this($event)">
|
|
</div>
|
|
</div>
|
|
<div class="inline fields">
|
|
<div class="field" title="Hides messages for performance (Min 50, Max 2000, Default 200)">
|
|
<label># Stored Messages</label>
|
|
<input class="inputbox" type="number" name="showingnum" placeholder="200" v-model.lazy.number="showingnum" required @keyup.enter="blur_this($event)">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="ui button" @click="save_chatlog">Export Chatlog</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Messages box -->
|
|
<div v-show="!editing" id="messagebox" class="ui segment" @click="click_message" :class="{ inverted: inverted }" :style="{fontSize: fontsize+'em', lineHeight: lineheight+'%'}">
|
|
<transition-group name="msgsanim" tag="span" :css="animated">
|
|
<!-- We're filtering -->
|
|
<template v-if="current_categories.length">
|
|
<div v-show="unshown_messages > 0" key="hidewarn1"><span class='notice'>[ {{unshown_messages}} previous messages archived for performance. ]</span></div>
|
|
<div v-for="message in shown_messages" :key="message.id">
|
|
<span v-html="message.content"></span>
|
|
<span v-show="message.repeats > 1" class="ui grey circular label">x{{message.repeats}}</span>
|
|
</div>
|
|
</template>
|
|
<!-- We're not filtering, messages go directly to dom -->
|
|
<template v-else>
|
|
<div v-show="archived_messages.length > 0" key="hidewarn2"><span class='notice'>[ {{archived_messages.length}} previous messages archived for performance. ]</span></div>
|
|
<div v-for="message in messages" :key="message.id">
|
|
<span v-html="message.content"></span>
|
|
<span v-show="message.repeats > 1" class="ui grey circular label">x{{message.repeats}}</span>
|
|
</div>
|
|
</template>
|
|
</transition-group>
|
|
</div>
|
|
|
|
</div>
|
|
<!--
|
|
<div class="ui segment">
|
|
active_tab: {{active_tab}}<br>
|
|
current_categories: {{current_categories}}<br>
|
|
messages.length: {{messages.length}}<br>
|
|
archived_messages.length: {{archived_messages.length}}<br>
|
|
shown_messages.length: {{shown_messages.length}}<br>
|
|
</div>
|
|
-->
|
|
|
|
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
//Document Ready
|
|
(function(){
|
|
start_vchat();
|
|
document.getElementById("loader").style.display = 'none';
|
|
document.getElementById("app").style.display = 'block';
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|