Bot Land Rankings

Developer
Tim
Size
3,592 Kb
Views
18,216
  1. Bot Land Rankings Previews
  2. Bot Land Rankings HTML Codes
  3. Bot Land Rankings CSS Codes
  4. Bot Land Rankings JS Codes

How do I make an bot land rankings?

What is a bot land rankings? How do you make a bot land rankings? This script and codes were developed by Tim on 30 October 2022, Sunday.

Bot Land Rankings Previews
IQ Test

Bot Land Rankings - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bot Land Rankings</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Bot Land Rankings</h1>
<div class="container"> <div class="menu"> <input id="search" placeholder="Search Name"/> <input type="radio" name="order" value="attack"/>Attack <input type="radio" name="order" value="defense" checked="checked"/>Defense </div> <div style="font-size:0.75em; color:#bbb">Status only works for players who used the same username for Twitch and Bot Land.</div> <table id="ranking"> <thead> <tr> <th>Rank</th> <th>Name</th> <th>Attack Skill</th> <th>Defense Skill</th> <th id="status-switch">Status</th> </tr> </thead> <tbody></tbody> </table>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Bot Land Rankings - Script Codes CSS Codes

body{ display: flex; flex-direction: column; flex-direction: column; align-items: center; font-family: 'Roboto';
}
.container{ display: flex; flex-direction: column; align-items: center;
}
.menu{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;
}
#search{ width: 200px; margin-bottom: 10px;
}
.hide{ display: none;
}
.bottomRow td{ border-bottom: 1px solid #ccc;
}
/*TABLE FORMATTING*/
table{ border-spacing: 0;
}
thead tr:first-child th{ border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;
}
th:first-child{ border-left: 1px solid #ccc;
}
th{ padding: 0 4px; border-right: 1px solid #ccc; font-weight: 100; font-size: 1.1em; user-select: none;
}
td:first-child{ border-left: 1px solid #ccc;
}
td{ border-right: 1px solid #ccc;
}
tbody tr:last-child td{ border-bottom: 1px solid #ccc;
}
tbody tr:hover{ background: #eee;
}
table{ cursor: default;
}
input:after{ cursor: default;
}
/* STATUS LIGHTS */
.status{ width: 10px; height: 10px; border-radius: 50%; margin: 0 auto;
}
.online{ background: #5eb95e;
}
.offline{ background: #dd514c;
}

Bot Land Rankings - Script Codes JS Codes

const URL_ATTACK = 'http://acct.bot.land:8080/rankings?orderByAttackRank'
const URL_DEFENSE = 'http://acct.bot.land:8080/rankings?orderByDefenseRank'
const URL_CHATTER = 'https://tmi.twitch.tv/group/user/adam13531/chatters'
const URL_CROSSORIGIN = 'https://crossorigin.me/'
function generateTable(data) { $('#ranking tbody').empty() data.rankings.forEach((el,i)=>{ let tr = $('<tr/>') tr.append($('<td/>').text(i+1)) tr.append($('<td/>').text(el.name)) tr.append($('<td/>').text(el.atk_estimated_skill)) tr.append($('<td/>').text(el.def_estimated_skill)) $('#ranking tbody').append(tr) }) $.get(URL_CROSSORIGIN+URL_CHATTER, statusColumn)
}
function statusColumn(data){ let viewers = data.chatters.viewers.concat(data.chatters.moderators) viewers = viewers.map((x)=>x.toLowerCase()) $('#ranking tbody tr').each((i,el)=>{ let name = $(el).find('td').eq(1).text() let status = (viewers.indexOf(name.toLowerCase()) !== -1) ? 'online' : 'offline' let td = $('<td/>') let light = $('<div/>',{class:'status'}) light.addClass(status) td.append(light) $(el).append(td) $(el).removeClass('hide bottomRow') if($('#status-switch').hasClass('online') && status !== 'online'){ $(el).addClass('hide') } }) search()
}
function offlineMessage(){ $('h1').text('BOT LAND IS CURRENTLY OFFLINE').css('color','red')
}
function refresh(){ let val = $('input[type=radio][name=order]:checked').val() switch(val){ case 'attack': $.get(URL_ATTACK,generateTable).fail(offlineMessage) break default: $.get(URL_DEFENSE,generateTable).fail(offlineMessage) break }
}
function search(){ let val = $('#search').val() if(val === ''){ return } $('#ranking tr').each((i,el)=>{ if(i===0){return} $(el).removeClass('hide bottomRow') let name = $(el).find('td').eq(1).text() let status = $(el).find('td').eq(4).find('div').hasClass('online') if(name.toLowerCase().indexOf(val.toLowerCase()) === -1){ $(el).addClass('hide') } else if($('#status-switch').hasClass('online') && !status){ $(el).addClass('hide') } }) //Add border for last row $('tbody tr:not(.hide):last').addClass('bottomRow')
}
$('#search').on('input', search);
$('input[type=radio][name=order]').change(refresh)
$('body').on('click','#status-switch',(e)=>{ $(e.target).toggleClass('online') refresh()
})
$('body').ready(refresh)
Bot Land Rankings - Script Codes
Bot Land Rankings - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 30, 2022
Rating 3
Size 3,592 Kb
Views 18,216
Do you need developer help for Bot Land Rankings?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim (maytim) Script Codes
Name
Phaser.io Sidescroller
A Pen by Tim
Reddit API Gifs
Javascript Pong Game
Custom Multi Column Data Entry Select
Pixi JS
Pixel paint
Double Helix Animation - Jade and Sass
GPU Part Picker
Custom Dropdown
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!