<!DOCTYPE html>
<html>
<body>
<div id="id01"></div>
<script>
var botCommands = [
{
"command": "discord",
"userType": "mod",
"description": "You can join the Derpy Gaming Network discord by clicking this link: https://discord.gg/0nCaX7zRQ4pOgcXI"
},
{
"command": "minuette",
"userType": "user",
"description": "I am a Twitch Chat Bot."
},
{
"command": "twitter",
"userType": "caster",
"description": "Follow me on Twitter! | https://twitter.com/TheDerpySupport"
}
];
botFunction(botCommands);
function botFunction(arr) {
// new
// Options
var caption = 0; // Use table caption? binary
var botTHcapt = "Bot Command List"; //shows above table as title
var header = 1; // Use table row headers? binary
var botTHcmd = "!Command"; //shows above command column
var botTHusr = "Available to"; //shows above user column
var botTHdesc = "Output"; //shows above description column
var altColor = 0; //alternate background colors for rows
var exclPref = 0; // Use exclamation mark prefix in command column? binary
var userParse = 2; // 0= use as seen in array; 1=stylize only; 2=use icons only(still needs strings for alt text); 3=icons+stylized text
// for these to work, the part of the variable after undescore and before the IMG must match 'userType's
var usr_user = "Viewer"; // stylized name of viewer/user
var usr_userIMG = "http://i.imgur.com/tJ0wILN.png"; // URL string of viewer icon. leave 0 if no icon. otherwise, make URL string
var usr_subscriber = "Subscriber"; // stylized "sub"
var usr_subscriberIMG = 0; // URL string of sub icon. leave 0 if no icon. otherwise, make URL string
var usr_mod = "Moderator"; // stylized "mod"
var usr_modIMG = "http://i.imgur.com/eDLZuI9.png"; // URL string of mod sword. leave 0 if no icon. otherwise, make URL string
var usr_caster = "Broadcaster"; // stylized "streamer/broadcaster"
var usr_casterIMG = "http://i.imgur.com/DabFeOQ.png"; // URL of broadcaster icon. leave 0 if no icon. otherwise, make URL string
// Options end
// table
out = "<table class='botFunction' id='botFunction'>\n";
if(caption) {
out += "<caption>"+botTHcapt+"</caption>\n";
}
if(header) {
out += "<tr><th>"+botTHcmd+"</th><th>"+botTHusr+"</th><th>"+botTHdesc+"</th></tr>\n";
}
// list
for(i=0;i<arr.length;i++) {
(!altColor)?(out += "<tr>\n"):(out += "<tr class='"+((i%2)?"odd":"even")+"'>\n");
out += "<td class='cmd'>"+((exclPref)?"!":"")+arr[i].command+"</td>\n";
switch(userParse) {
case 1:
out += "<td class='user' style='padding-left:10px;width:125px;'>"+eval("usr_"+arr[i].userType)+"</td>\n";
break;
case 2:
out += "<td class='user' style='width:25px;'>"+((!usr_userIMG)?(""):("<img class='usericon' src='"+eval("usr_"+arr[i].userType+"IMG")+"' alt='"+eval("usr_"+arr[i].userType))+" />")+"</td>\n";
break;
case 3:
out += "<td class='user' style='padding-left:10px;width:150px;'>"+((!usr_userIMG)?(""):("<img class='usericon' src='"+eval("usr_"+arr[i].userType+"IMG")+"' alt='"+eval("usr_"+arr[i].userType))+" />")+" "+eval("usr_"+arr[i].userType)+"</td>\n";
break;
default:
out += "<td class='user' style='padding-left:10px;width:100px;'>"+arr[i].userType+"</td>\n";
}
out += "<td class='desc'>"+arr[i].description+"</td>\n";
out += "</tr>\n";
}
// list end
out += "</table>\n";
// table end
document.getElementById("id01").innerHTML = out;
// new end
//old
// var i;
// for(i = 0; i < arr.length; i++) {
// out += arr[i].command + " | " + arr[i].userType + " | " + arr[i].description +'<br>';
// }
// document.getElementById("id01").innerHTML = out;
//old end
}
</script>
<!-- new -->
<style type="text/css">
table.botFunction {
border-collapse:collapse;
border-style:outset;
border-width:5px;
}
table.botFunction caption {
}
table.botFunction tr {
}
table.botFunction tr.odd {
background-color:#DDD;
}
table.botFunction tr.even {
background-color:inherit;
}
table.botFunction th, table.botFunction td {
padding:5px;
border-style:solid;
border-width:1px;
}
table.botFunction th {
}
table.botFunction td {
}
table.botFunction td.cmd {
width:100px;
padding-left:10px;
}
table.botFunction td.user {
text-align:center;
}
table.botFunction td.desc {
}
img.usericon {
}
</style>
<!-- new end -->
</body>
</html>