rank.js

var time_periods = [];
var count = 0;
var update_rate = 9;
var time_period = 0;
var border = 20;
var max_time_period;
var current_player_data;
var player_ranks = new Object();
var player_colors = new Object();

var img_arch_cape;
var img_arch_logo;
var img_arch;
var img_hero_mattock;

function setup() {
	split_raw_data();
	max_time_period = time_periods.length;
	getPlayerRanks();
	frameRate(30);
	createCanvas(screen.width, screen.height);
	background('#2d2d2d');
	current_player_data = getPlayerData();
	setColors();
}

function draw() {
	clear();
	background('#2d2d2d');
	count++;
	if (count%update_rate == 0) {
		time_period ++;
		if (time_period == max_time_period) {
			time_period = max_time_period;
		}
		updateColors();
		current_player_data = getPlayerData();
	}
	drawDetails();
	draw_players();
	if (time_period == 1) {
		//noLoop();
	}
	if (time_period == max_time_period) {
		noLoop();
	}
}

function updateColors() {
	let j = 5;
	for (let i = 0; i < 5; i++) {
		if (current_player_data[i]["end_pos"] > 4) {
			for (j; j < current_player_data.length; j++) {
				if (current_player_data[j]['end_pos'] < 5) {
					player_colors[current_player_data[j]['player']] = player_colors[current_player_data[i]['player']];
					delete player_colors[current_player_data[i]['player']];
					j++;
					//current_player_data[j]['color'] = current_player_data[i]['color'];
					//current_player_data[i]['color'] = '';
					break;
				}
			}
		}
	}
}

function setColors() {
	let colors = ['red','blue','green','yellow','purple'];
	for (let i = 0; i < 5; i++) {
		player_colors[current_player_data[i]['player']] = colors[i];
		//current_player_data[i]['color'] = colors[i];
	}
}

function drawGraphFast(player, player_x , player_y, color) {
	stroke(color);
	strokeWeight(2);
	let line_width = 1200/(time_period+1);
	let tile_height = (screen.height - 40 - 400/3 - 10) / 25;
	let x_end = false;
	let y_end = false;
	let end_rank;
	for (let i = 0; i < time_period; i++) {
		i = Math.min(i, (max_time_period - 1));
		let start_rank = player_ranks[player]['data'][i];
		end_rank = player_ranks[player]['data'][i+1];
		if (start_rank > 25 || end_rank > 25) {
			x_end = false;
			y_end = false;
			continue;
		}
		let x_start = 20+100+line_width*i;
		x_end = 20+100+line_width*(i+1);
		let y_start = 20+tile_height*(start_rank-0.5) + 400/3 + 10;
		y_end = 20+tile_height*(end_rank-0.5) + 400/3 + 10;
		line(x_start, y_start, x_end, y_end);
	}
	if (!x_end) {
		x_end = 20+100+line_width*(Math.min((max_time_period - 1),time_period));
	}
	if (!y_end) {
		end_rank = player_ranks[player]['data'][Math.min((max_time_period - 1),time_period)];
		y_end = 20+tile_height*(end_rank-0.5) + 400/3 + 10;
	}
	if (end_rank < 26) {
		line(x_end, y_end, player_x-10, player_y+tile_height*0.5-2)
	}
}

function drawGraph(player, player_x , player_y, color) {
	stroke(color);
	strokeWeight(2);
	let line_width = 1200/count;
	let tile_height = (screen.height - 40) / 25;
	let x_end = 20+100;
	let y_end;// = 20+tile_height*(start_rank-0.5)
	for (let i = 1; i <= Math.min(time_period,(max_time_period - 1)); i++) {
		i = Math.min(i, (max_time_period - 1));
		let start_rank = player_ranks[player]['data'][i-1];
		let end_rank = player_ranks[player]['data'][i];
		if (start_rank > 25 || end_rank > 25) {
			continue;
		}
		let line_height = tile_height*((end_rank-0.5) - (start_rank-0.5)) / update_rate;
		for (let j = 0; j < update_rate; j++) {
			let x_start = 20+100+line_width*((i-1)*update_rate+j);
			x_end = 20+100+line_width*((i-1)*update_rate+j+1);
			let y_start = 20+tile_height*(start_rank-0.5)+line_height*j;
			y_end = 20+tile_height*(start_rank-0.5)+line_height*(j+1);
			line(x_start, y_start, x_end, y_end);
		}
	}
	if (time_period < 432) {
		line(x_end, y_end, player_x-50, player_y+tile_height*0.5)
	}
}

function drawDetails() {
	let tile_height = (screen.height - 40 - 400/3 - 10) / 25;
	let box_height = tile_height - 6;
	let box_width = box_height;
	let corner_rounding = 15;
	let left_margin = 40;
	for (let i = 0; i < 25; i++) {
		let top_margin = 20+2+i*tile_height+400/3 + 10;

		strokeWeight(1);
		stroke('#1d1d1d');
		line_top_margin = top_margin+box_height+3;
		if (i != 24) {
			line(left_margin, line_top_margin, left_margin+100+1300+20, line_top_margin)
		}

		strokeWeight(3);
		stroke('black');
		let tile_color = '#5d5d5d';
		let text_color = 'white';
		let player_emoji = ' ';
		/*if (i == 0) {
			tile_color = '#FFD700';
			text_color = 'black';
		} else if (i == 1) {
			tile_color = '#C0C0C0';
			text_color = 'black';
		} else if (i == 2) {
			tile_color = '#cd7f32';
			text_color = 'black';
		}*/
		fill(tile_color);
		rect(left_margin, top_margin, box_width, box_height, corner_rounding, corner_rounding, corner_rounding, corner_rounding);
		strokeWeight(0);
		fill(text_color);
		textAlign(CENTER);
		textSize(18);
		text(i+1, left_margin+3.5, top_margin+7, box_width, box_height);
	}
	let text_array_1 = [
		['The ', 'white'],
		['Gold', '#FFD700'],
		[', ', 'white'],
		['Silver', '#C0C0C0'],
		[', and ', 'white'],
	];
	let text_array_2 = [
		['Bronze ', '#CD7F32'],
		['indicate the', 'white'],
	];
	let text_array_3 = [
		['first 3 players to get', 'white'],
	];
	let text_array_4 = [
		['99 Archeology.', 'white'],
	];
	textAlign(LEFT);
	textSize(20);
	let text_box_x = (screen.width - 1600 - 40) / 2 + 1620 - 193/2;
	let text_box_y = 240;
	drawtext(text_box_x,text_box_y,text_array_1)
	drawtext(text_box_x,text_box_y+22,text_array_2)
	drawtext(text_box_x,text_box_y+44,text_array_3)
	drawtext(text_box_x,text_box_y+66,text_array_4)

	text_array_1 = [
		['Made by ', 'white'],
	];
	text_array_2 = [
		['Hoppingmad9', '#00FFFF'],
	];
	textAlign(CENTER);
	textSize(24);
	text_box_x = (screen.width - 1600 - 40) / 2 + 1620;
	text_box_y = 940;
	drawtext(text_box_x,text_box_y,text_array_1)
	drawtext(text_box_x,text_box_y+26,text_array_2)

	fill('#1d1d1d');
	noStroke();
	rect(0,0,screen.width,20);
	rect(0,screen.height-20,screen.width,20);
	rect(0,0,20,screen.height);
	rect(screen.width-20,0,20,screen.height);

	image(img_arch_logo, screen.width/2-1279/2/3, -20, 1279/2.1, 400/2.1);
	image(img_arch_cape, (screen.width - 1600 - 40) / 2 + 1620 - 457/2/1.8, (screen.height - 40 - 400/3 - 10)/2+20+400/3 + 10 - 901/2/1.8, 457/1.8, 901/1.8);
	image(img_arch, 30, 30);
	image(img_hero_mattock, screen.width - 30 - 53*2, 30, 53*2, 49*2);
}

function drawtext( x, y, text_array ) {

    var pos_x = x;
    for ( var i = 0; i < text_array.length; ++ i ) {
        var part = text_array[i];
        var t = part[0];
        var c = part[1];
        var w = textWidth( t );
        fill( c );
        text( t, pos_x, y);
        pos_x += w;
    }
}

function preload() {
	img_arch_cape = loadImage('Archaeology_cape_equipped.png');
	img_arch_logo = loadImage('Archaeology_logo.png');
	img_arch = loadImage('Archaeology.png');
	img_hero_mattock = loadImage('Hero_mattock.png');
}

function getPlayerRanks() {
	for (let i = 0; i < max_time_period; i++) {
		for (let j = 0; j < 25; j++) {
			if (time_periods[i][j]['player'] in player_ranks) {
				player_ranks[time_periods[i][j]['player']]["data"][i] = j+1;
			}else {
				let temp_array = [];
				temp_array.length = max_time_period;
				temp_array.fill(35);
				player_ranks[time_periods[i][j]['player']] = {color: '', data:temp_array};
				player_ranks[time_periods[i][j]['player']]["data"][i] = j+1;
			}
		}
	}
}

function getPlayerData() {
	let current_player_data = time_periods[Math.min(time_period,max_time_period-1)];
	let new_player_data = time_periods[Math.min(time_period+1,max_time_period-1)];
	let player_data = [];
	for (let i = 0; i < 25; i++) {
		player_data.push({player: current_player_data[i]["player"], start_pos: i, end_pos: 25, level: current_player_data[i]["level"]});
	}
	for (let i = 0; i < 25; i++) {
		let found = false;
		for (let j = 0; j < 25; j++) {
			if (new_player_data[i]["player"] == player_data[j]["player"]) {
				player_data[j]["end_pos"] = i;
				found = true;
				break;
			}
		}
		if (!found) {
			player_data.push({player: new_player_data[i]["player"], start_pos: 25, end_pos: i, level: new_player_data[i]["level"]});
		}
	}
	return player_data;
}

function draw_players() {
	let tile_height = (screen.height - 40 - 400/3 - 10) / 25;
	let box_height = tile_height - 6;
	let box_width = 200;
	let corner_rounding = 15;
	let left_margin = 20+100+1200+100;

	for (let i = current_player_data.length-1; i >= 0; i--) {
		let start_top_margin = 20+2+current_player_data[i]["start_pos"]*tile_height + 400/3 + 10;
		let end_top_margin = 20+2+current_player_data[i]["end_pos"]*tile_height + 400/3 + 10;
		let cycle = count%update_rate;
		let top_margin = (start_top_margin*(update_rate-cycle)+end_top_margin*cycle)/update_rate;

		strokeWeight(3);
		stroke('black');
		let tile_color = '#5d5d5d';
		let text_color = 'white';
		let player_emoji = ' ';
		if (current_player_data[i]['player'] == "le me") {
			tile_color = '#FFD700';
			text_color = 'black';
		} else if (current_player_data[i]['player'] == "L33") {
			tile_color = '#C0C0C0';
			text_color = 'black';
		} else if (current_player_data[i]['player'] == "Roskat") {
			tile_color = '#CD7F32';
			text_color = 'black';
		} else if (current_player_data[i]['player'] == "Exogor") {
			player_emoji += '😴';
		}
		fill(tile_color);
		rect(left_margin, top_margin, box_width, box_height, corner_rounding, corner_rounding, corner_rounding, corner_rounding);
		strokeWeight(0);
		fill(text_color);
		textAlign(LEFT);
		textSize(20);
		text(current_player_data[i]['player']+player_emoji, left_margin+10, top_margin+7, box_width, box_height);
		textAlign(RIGHT);
		text(current_player_data[i]['level'], left_margin, top_margin+7, box_width, box_height);
		//let colors = ['red','blue','green','yellow','pink','orange','purple','brown','lime'];
		//if (current_player_data[i]['end_pos'] !== 26 && current_player_data[i]['start_pos'] !== 26) {
		if (i < 5) {
			drawGraphFast(current_player_data[i]['player'], left_margin, top_margin, player_colors[current_player_data[i]['player']]);
		}

		fill('#1d1d1d');
		noStroke();
		rect(0,screen.height-20,screen.width,20);
	}
}

function split_raw_data() {
	var data = raw_data[2]["data"];
	let i,tempArray, chunk = 25;
	for (i=0; i < data.length; i+=chunk) {
		temp_array = data.slice(i,i+chunk);
		time_periods.push(temp_array);
	}
}