www/ranking.html

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<style>
			table, td {
				border: 1px solid black;
  				border-collapse: collapse;
				background-color: rgb(255, 169, 111);
				font-family: Arial, Helvetica, sans-serif;
				text-align: center;
				vertical-align: middle;
			}

			th{
				border: 1px solid black;
				background-color: rgb(255, 110, 58);
  				border-collapse: collapse;
				font-family: Arial, Helvetica, sans-serif;
				text-align: center;
				vertical-align: middle;
				top: 0;
			}

			button{
				width: 100%;
				height: 100%;
				font-size: 100%;
				border-radius: 0px;
				border: 0;
				background-color: rgb(255, 110, 58);
				cursor: pointer;
				text-align: center;
				font-family: Arial, Helvetica, sans-serif;
				font-weight: 600;
				font-style: normal;
				align-items: center;
	 		}

			@media (prefers-color-scheme: light) {
				body {
					background-color: white;

				}
			}
			@media (prefers-color-scheme: dark) {
				body {
					background-color: #21262d;
				}
			}
		</style>
		<title>Ranking</title>
		<link rel="stylesheet" href="main.css">
		
	</head>
	<body style="font-size: 100%; direction: ltr">
		<div class="nav-bar">
			<a href="/" style="background-color: rgb(255,108,0); font-weight: 900;">Main</a>
			<a href="/login.html">Login</a>
			<a href="/users.html">Users</a>
			<a href="/create-user.html">Create User</a>
			<a href="/management.html">Start Game</a>
			<a href="/assign.html">Assign</a>
			<a href="/ranking.html" class="active">Ranked</a>
			<a href="/robots.html">Upload</a>
			<a href="/user-management.html">User Manage</a>
		</div>
		<div style="margin: 20px">
			
			</div>
			
			<table style="width:95%; margin: 2.5%;" id="ranking">
				<tr>
					<th><button onclick="SortTable(0)">Games</button></th>
					<th><button onclick="SortTable(1)">Team</button></th>
					<th><button onclick="SortTable(2)">Score</button></th>
					<th><button onclick="SortTable(3)">Auto Score</button></th>
					<th><button onclick="SortTable(4)">Auto Duck</button></th>
					<th><button onclick="SortTable(5)">Auto Tower</button></th>
					<th><button onclick="SortTable(6)">Tower</button></th>
					<th><button onclick="SortTable(7)">Shared</button></th>
					<th><button onclick="SortTable(8)">Ducks</button></th>
					<th><button onclick="SortTable(9)">Cap</button></th>
				</tr>
				${DATA}
			</table>
		</div>
	</body>
	<script>
		function SortTable(col) {
			var table, rows, switching, i, x, y, shouldSwitch;
			table = document.getElementById("ranking");
			switching = true;
			/*Make a loop that will continue until
			no switching has been done:*/
			while (switching) {
				//start by saying: no switching is done:
				switching = false;
				rows = table.rows;
				/*Loop through all table rows (except the
				first, which contains table headers):*/
				for (i = 1; i < (rows.length - 1); i++) {
					//start by saying there should be no switching:
					shouldSwitch = false;
					/*Get the two elements you want to compare,
					one from current row and one from the next:*/
					x = rows[i].getElementsByTagName("TD")[col];
					y = rows[i + 1].getElementsByTagName("TD")[col];
					//check if the two rows should switch place:
					if (Number(x.innerHTML) < Number(y.innerHTML)) {
					//if so, mark as a switch and break the loop:
					shouldSwitch = true;
					break;
					}
				}
				if (shouldSwitch) {
					/*If a switch has been marked, make the switch
					and mark that a switch has been done:*/
					rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
					switching = true;
				}
			}
		}

		SortTable(0);
</script>
</html>