Merge pull request #13507 from LetterN/subsystem-updoots
Ports the better statpannel design, fixes missing icons, and fixes statvoting [ready]
This commit is contained in:
silicons
+265
-177
@@ -7,149 +7,172 @@
|
||||
<meta http-equiv="Cache-Control" content="max-age=15; must-revalidate" />
|
||||
<link id="goonStyle" rel="stylesheet" type="text/css" href="browserOutput_white.css" media="all" />
|
||||
<style>
|
||||
body {
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
body.dark {
|
||||
background-color: #131313;
|
||||
color: #abc6ec;
|
||||
}
|
||||
body {
|
||||
font-family: Verdana, Geneva, Tahoma, sans-serif;
|
||||
font-size: 12px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
body.dark {
|
||||
background-color: #131313;
|
||||
color: #abc6ec;
|
||||
}
|
||||
|
||||
#menu {
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
padding: 7px;
|
||||
width: 100%;
|
||||
}
|
||||
.dark #menu {
|
||||
background-color: #131313;
|
||||
}
|
||||
#menu {
|
||||
background-color: #F0F0F0;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#statcontent {
|
||||
padding: 0 7px 7px 7px;
|
||||
}
|
||||
.dark #menu {
|
||||
background-color: #202020;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none
|
||||
}
|
||||
.dark a {
|
||||
color: #abc6ec;
|
||||
}
|
||||
a:hover, .dark a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
#statcontent {
|
||||
padding: 7px 7px 7px 7px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
a {
|
||||
color: black;
|
||||
text-decoration: none
|
||||
}
|
||||
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
.dark a {
|
||||
color: #abc6ec;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover, .dark a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
li a:hover:not(.active) {
|
||||
background-color: #111;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #333;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.button {
|
||||
background-color: #FFFFFE;
|
||||
border-color: rgba(255, 255, 254, 0.5);
|
||||
border-width: 1px;
|
||||
color: black;
|
||||
padding: 7px 14px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
margin: 2px 2px;
|
||||
cursor: pointer;
|
||||
border-radius: 10%;
|
||||
transition-duration: 0.25s;
|
||||
order: 3;
|
||||
}
|
||||
.dark button {
|
||||
background-color: #252525;
|
||||
border-color: rgba(37, 37, 36, 0.5);
|
||||
color: white;
|
||||
}
|
||||
.button:hover {
|
||||
border-color: rgba(255, 255, 254, 0.5);
|
||||
background-color: #252525;
|
||||
color: white;
|
||||
}
|
||||
.dark button:hover {
|
||||
border-color: rgba(37, 37, 36, 0.5);
|
||||
background-color: #FFFFFE;
|
||||
color: #252525;
|
||||
}
|
||||
.button:active, .button.active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.grid-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.grid-item {
|
||||
color: black;
|
||||
width: 150px;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
white-space: pre-wrap;
|
||||
padding-right: 12px; /* A little more than two spaces, to look good in IE8 where flex-justify does nothing */
|
||||
}
|
||||
.link {
|
||||
display: inline;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 7px 14px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
margin: 2px 2px;
|
||||
}
|
||||
.dark .link {
|
||||
color: #abc6ec;
|
||||
}
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
img {
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
li a {
|
||||
display: block;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 14px 16px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li a:hover:not(.active) {
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.button-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
overflow-x: hidden;
|
||||
white-space: pre-wrap;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #dfdfdf;
|
||||
border-color: #cecece;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
padding: 6px 4px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.25s;
|
||||
order: 3;
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.dark button {
|
||||
background-color: #444444;
|
||||
border-color: #343434;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #ececec;
|
||||
}
|
||||
|
||||
.dark button:hover {
|
||||
background-color: #4d4d4d;
|
||||
}
|
||||
|
||||
.button:active, .button.active {
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
border-top: 1px solid #cecece;
|
||||
border-left: 1px solid #cecece;
|
||||
border-right: 1px solid #cecece;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
|
||||
.dark .button:active, .dark .button.active {
|
||||
background-color: #131313;
|
||||
color: white;
|
||||
border-top: 1px solid #343434;
|
||||
border-left: 1px solid #343434;
|
||||
border-right: 1px solid #343434;
|
||||
border-bottom: 1px solid #131313;
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
color: black;
|
||||
width: 150px;
|
||||
font-size: 11px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
white-space: pre-wrap;
|
||||
padding-right: 12px; /* A little more than two spaces, to look good in IE8 where flex-justify does nothing */
|
||||
}
|
||||
|
||||
.link {
|
||||
display: inline;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 7px 14px;
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
margin: 2px 2px;
|
||||
}
|
||||
|
||||
.dark .link {
|
||||
color: #abc6ec;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
-ms-interpolation-mode: nearest-neighbor;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -267,9 +290,10 @@ if (window.location) {
|
||||
}); */
|
||||
|
||||
// Status panel implementation ------------------------------------------------
|
||||
var status_tab_parts = ["loading..."];
|
||||
var status_tab_parts = ["Loading..."];
|
||||
var current_tab = null;
|
||||
var mc_tab_parts = [["loading...", ""]];
|
||||
var mc_tab_parts = [["Loading...", ""]];
|
||||
var vote_parts = [[null]];
|
||||
var href_token = null;
|
||||
var spells = [];
|
||||
var spell_tabs = [];
|
||||
@@ -288,6 +312,8 @@ var statcontentdiv = document.querySelector('#statcontent');
|
||||
var storedimages = [];
|
||||
|
||||
function createStatusTab(name) {
|
||||
if (name.indexOf(".") != -1)
|
||||
name = name.split(".")[0];
|
||||
if(document.getElementById(name) || name.trim() == "")
|
||||
return;
|
||||
if(!verb_tabs.includes(name) && !permanent_tabs.includes(name))
|
||||
@@ -302,12 +328,8 @@ function createStatusTab(name) {
|
||||
B.className = "button";
|
||||
//ORDERING ALPHABETICALLY
|
||||
B.style.order = name.charCodeAt(0);
|
||||
if(name == "Status" || name == "MC") {
|
||||
if(name == "Status")
|
||||
B.style.order = 1;
|
||||
else
|
||||
B.style.order = 2;
|
||||
}
|
||||
if(name == "Status" || name == "MC")
|
||||
B.style.order = name == "Status" ? 1 : 2;
|
||||
//END ORDERING
|
||||
menu.appendChild(B);
|
||||
SendTabToByond(name);
|
||||
@@ -327,6 +349,19 @@ function removeStatusTab(name) {
|
||||
under_menu.style.height = menu.clientHeight + 'px';
|
||||
}
|
||||
|
||||
function sortVerbs() {
|
||||
verbs.sort(function (a, b) {
|
||||
var selector = a[0] == b[0] ? 1 : 0;
|
||||
if (a[selector].toUpperCase() < b[selector].toUpperCase()) {
|
||||
return 1;
|
||||
}
|
||||
else if (a[selector].toUpperCase() > b[selector].toUpperCase()) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
})
|
||||
}
|
||||
|
||||
window.onresize = function () {
|
||||
under_menu.style.height = menu.clientHeight + 'px';
|
||||
}
|
||||
@@ -365,19 +400,19 @@ function check_verbs() {
|
||||
for(var v = verb_tabs.length - 1; v >= 0; v--){
|
||||
verbs_cat_check(verb_tabs[v]);
|
||||
}
|
||||
//checkStatusTab(); // removes any empty status tabs
|
||||
}
|
||||
|
||||
function verbs_cat_check(cat) {
|
||||
var tabCat = cat.indexOf(".") != -1 ? cat.split(".")[0] : cat;
|
||||
var verbs_in_cat = 0;
|
||||
var verbcat = "";
|
||||
if(!verb_tabs.includes(cat)){
|
||||
removeStatusTab(cat);
|
||||
if(!verb_tabs.includes(tabCat)){
|
||||
removeStatusTab(tabCat);
|
||||
return;
|
||||
}
|
||||
for(var v = 0; v < verbs.length; v++){
|
||||
var part = verbs[v];
|
||||
verbcat = part[0];
|
||||
verbcat = part[0].indexOf(".") != -1 ? part[0].split(".") : part[0];
|
||||
if(verbcat != cat || verbcat.trim() == ""){
|
||||
continue;
|
||||
}
|
||||
@@ -387,8 +422,8 @@ function verbs_cat_check(cat) {
|
||||
}
|
||||
}
|
||||
if(verbs_in_cat != 1) {
|
||||
removeStatusTab(cat);
|
||||
if(current_tab == cat)
|
||||
removeStatusTab(tabCat);
|
||||
if(current_tab == tabCat)
|
||||
tab_change("Status");
|
||||
}
|
||||
}
|
||||
@@ -411,17 +446,20 @@ function add_verb_list(v) {
|
||||
to_add.sort(); // sort what we're adding
|
||||
for(var i = 0; i < to_add.length; i++) {
|
||||
var part = to_add[i];
|
||||
if (!part[0])
|
||||
continue;
|
||||
var category = part[0].indexOf(".") == -1 ? part[0] : part[0].split(".")[0]
|
||||
if(findVerbindex(part[1], verbs))
|
||||
continue;
|
||||
if(verb_tabs.includes(part[0])){
|
||||
if(verb_tabs.includes(category)){
|
||||
verbs.push(part);
|
||||
if(current_tab == part[0]) {
|
||||
draw_verbs(part[0]); // redraw if we added a verb to the tab we're currently in
|
||||
if(current_tab == category) {
|
||||
draw_verbs(category); // redraw if we added a verb to the tab we're currently in
|
||||
}
|
||||
} else if(part[0]) {
|
||||
verb_tabs.push(part[0]);
|
||||
} else if(category) {
|
||||
verb_tabs.push(category);
|
||||
verbs.push(part);
|
||||
createStatusTab(part[0]);
|
||||
createStatusTab(category);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -432,7 +470,7 @@ function remove_verb_list(v) {
|
||||
remove_verb(to_remove[i]);
|
||||
}
|
||||
check_verbs();
|
||||
verbs.sort();
|
||||
sortVerbs();
|
||||
if(verb_tabs.includes(current_tab))
|
||||
draw_verbs(current_tab);
|
||||
}
|
||||
@@ -455,7 +493,7 @@ function init_verbs(c, v) {
|
||||
}
|
||||
if(v) {
|
||||
add_verb_list(v);
|
||||
verbs.sort(); // sort them
|
||||
sortVerbs(); // sort them
|
||||
if(do_update) {
|
||||
draw_verbs(current_tab);
|
||||
}
|
||||
@@ -491,6 +529,12 @@ function update(global_data, ping_entry, other_entries) {
|
||||
else if(current_tab == "Debug Stat Panel")
|
||||
draw_debug();
|
||||
}
|
||||
/// citadel statvoting
|
||||
function update_voting(vote_data) {
|
||||
vote_parts = JSON.parse(vote_data);
|
||||
if(current_tab == "Status")
|
||||
draw_status();
|
||||
}
|
||||
|
||||
function update_mc(global_mc_data, coords_entry) {
|
||||
mc_tab_parts = JSON.parse(global_mc_data);
|
||||
@@ -586,7 +630,7 @@ function tab_change(tab) {
|
||||
}else if(tab == turfname) {
|
||||
draw_listedturf();
|
||||
} else {
|
||||
statcontentdiv[textContentKey] = "loading...";
|
||||
statcontentdiv[textContentKey] = "Loading...";
|
||||
}
|
||||
window.location.href = "byond://winset?statbrowser.is-visible=true";
|
||||
}
|
||||
@@ -667,6 +711,33 @@ function draw_status() {
|
||||
document.getElementById("statcontent").appendChild(div);
|
||||
}
|
||||
}
|
||||
//voting shitcode. See mc for more info.
|
||||
if(vote_parts && vote_parts[0][0]) { //null verification.
|
||||
var table = document.createElement("table");
|
||||
for(var i = 0; i < vote_parts.length; i++) {
|
||||
var part = vote_parts[i];
|
||||
var tr = document.createElement("tr");
|
||||
var td1 = document.createElement("td");
|
||||
td1[textContentKey] = part[0];
|
||||
var td2 = document.createElement("td");
|
||||
if(part[2]) {
|
||||
var a = document.createElement("a");
|
||||
if(part[2] === "disabled") {
|
||||
a.href = "byond://winset?command=Vote";
|
||||
} else {
|
||||
a.href = "?src=" + part[2];
|
||||
}
|
||||
a[textContentKey] = part[1];
|
||||
td2.appendChild(a);
|
||||
} else {
|
||||
td2[textContentKey] = part[1];
|
||||
}
|
||||
tr.appendChild(td1);
|
||||
tr.appendChild(td2);
|
||||
table.appendChild(tr);
|
||||
}
|
||||
document.getElementById("statcontent").appendChild(table);
|
||||
}
|
||||
if(verb_tabs.length == 0 || !verbs)
|
||||
{
|
||||
window.location.href = "byond://winset?command=Fix-Stat-Panel";
|
||||
@@ -912,29 +983,46 @@ function draw_spells(cat) {
|
||||
|
||||
function draw_verbs(cat){
|
||||
statcontentdiv[textContentKey] = "";
|
||||
var table = document.createElement("newdiv");
|
||||
var table = document.createElement("div");
|
||||
var additions = {}; // additional sub-categories to be rendered
|
||||
table.className = "grid-container";
|
||||
var command = ""; // typecast name to string
|
||||
verbs.sort();
|
||||
sortVerbs();
|
||||
verbs.reverse(); // sort verbs backwards before we draw
|
||||
for(var i = verbs.length - 1; i >= 0; i--) {
|
||||
var part = verbs[i]; // should be a list containing category and command
|
||||
if(!part[1]) continue;
|
||||
if(part[0] != cat){
|
||||
continue;
|
||||
for (var i = 0; i < verbs.length; ++i) {
|
||||
var part = verbs[i];
|
||||
var name = part[0];
|
||||
var command = part[1];
|
||||
|
||||
if (command && name.lastIndexOf(cat, 0) != -1 && (name.length == cat.length || name.charAt(cat.length) == ".")) {
|
||||
var subCat = name.lastIndexOf(".") != -1 ? name.split(".")[1] : null;
|
||||
if (subCat && !additions[subCat]) {
|
||||
var newTable = document.createElement("div");
|
||||
newTable.className = "grid-container";
|
||||
additions[subCat] = newTable;
|
||||
}
|
||||
|
||||
var a = document.createElement("a");
|
||||
a.href = "byond://winset?command=" + command.replace(/\s/g, "-");
|
||||
a[textContentKey] = command;
|
||||
a.className = "grid-item";
|
||||
(subCat ? additions[subCat] : table).appendChild(a);
|
||||
}
|
||||
}
|
||||
|
||||
// Append base table to view
|
||||
var content = document.getElementById("statcontent");
|
||||
content.appendChild(table);
|
||||
|
||||
// Append additional sub-categories if relevant
|
||||
for (var cat in additions) {
|
||||
if (additions.hasOwnProperty(cat)) {
|
||||
// do addition here
|
||||
var header = document.createElement("h3");
|
||||
header[textContentKey] = cat;
|
||||
content.appendChild(header);
|
||||
content.appendChild(additions[cat]);
|
||||
}
|
||||
if(part[0].trim() == ""){
|
||||
verbs.splice(i, 1);
|
||||
continue;
|
||||
}
|
||||
command = part[1];
|
||||
var a = document.createElement("a");
|
||||
a.href = "byond://winset?command=" + command.replace(/\s/g, "-");
|
||||
a[textContentKey] = command;
|
||||
a.className = "grid-item";
|
||||
table.appendChild(a);
|
||||
}
|
||||
document.getElementById("statcontent").appendChild(table);
|
||||
}
|
||||
|
||||
function set_theme(which) {
|
||||
|
||||
Reference in New Issue
Block a user