feat(index): add character search screen

static/character-talents.html

@@ -68,6 +68,8 @@
 	const talentsData = JSON.parse(`{{{data}}}`);
 
 	for (let spec = 0; spec < 2; ++spec) {
+		const $spec = $(`#talents-spec-${spec}`);
+
 		let nbLearned = 0;
 		for (const tree of talentsData.trees) {
 			const learned = {};
@@ -90,7 +92,7 @@
 			const $tree = $("#talent-tree-template")
 				.clone(false)
 				.removeAttr("id")
-				.prependTo($(`#talents-spec-${spec}`));
+				.appendTo($spec);
 			$tree.find(".header .icon").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
 			$tree.find(".header .name").text(tree.name);
 
@@ -98,18 +100,19 @@
 		}
 
 		if (nbLearned === 0) {
-			$(`#talents-spec-${spec}`).hide();
+			$spec.hide();
 			$("#spec-links").hide();
 			continue;
 		}
 
-		const $glyphs = $(`#talents-spec-${spec}`).find(".glyphs");
+		const $glyphs = $spec.find(".glyphs");
 		for (const spell of talentsData.glyphs[spec]) {
 			const $a = $("<a>");
 			$a.attr("href", `{{aowow}}?spell=${spell}`);
 			$glyphs.append($a);
 			$glyphs.append("<br>");
 		}
+		$glyphs.parent().appendTo($spec);
 	}
 
 	function createTree(data, learnedTalents, container) {

static/css/datatables.css

@@ -0,0 +1,45 @@
+.dataTables_wrapper .dataTables_info,
+.dataTables_wrapper .dataTables_filter,
+.dataTables_wrapper .dataTables_length {
+	color: #e6e6e6;
+}
+
+.dataTables_wrapper .dataTables_filter input,
+.dataTables_wrapper .dataTables_length select {
+	color: #ffffff;
+}
+.dataTables_wrapper .dataTables_length select option {
+	color: #000000;
+}
+
+table.dataTable tbody tr {
+	background-color: #272727;
+}
+
+table.dataTable.stripe tbody tr.odd,
+table.dataTable.display tbody tr.odd {
+	background-color: #313131;
+}
+
+table.dataTable.hover tbody tr:hover,
+table.dataTable.display tbody tr:hover {
+	background-color: #3f3f3f;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
+.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
+	color: #a3a3a3 !important;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button,
+.dataTables_wrapper .dataTables_paginate {
+	color: #e6e6e6 !important;
+}
+
+table.dataTable.row-border tbody th,
+table.dataTable.row-border tbody td,
+table.dataTable.display tbody th,
+table.dataTable.display tbody td {
+	border-top: 1px solid #222222;
+}

static/css/index.css

@@ -0,0 +1,11 @@
+#select-realm {
+	margin-bottom: 16px;
+}
+
+#results {
+	width: 100% !important;
+}
+
+#results td {
+	text-align: center;
+}

static/index.html

@@ -1 +1,72 @@
-Armory
+<link rel="stylesheet" href="/css/index.css">
+<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
+<link rel="stylesheet" href="/css/datatables.css">
+<script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
+
+<h1>Armory</h1>
+
+{{#if (not (equalsLength realms 1))}}
+<select id="select-realm">
+	{{#each realms}}
+	<option>{{this}}</option>
+	{{/each}}
+</select>
+{{/if}}
+
+<table id="results" class="stripe hover row-border">
+	<thead>
+		<tr>
+			<th>Character name</th>
+			<th>Guild</th>
+			<th>Level</th>
+			<th>Race</th>
+			<th>Class</th>
+			<th>Online</th>
+		</tr>
+	</thead>
+	<tbody></tbody>
+</table>
+
+<script type="application/javascript">
+	let dt;
+
+	function initDataTables() {
+		dt = $("#results").DataTable({
+			processing: true,
+			serverSide: true,
+			ajax: {
+				url: `/search`,
+				data: d => {
+					d.realm = $("#select-realm").val();
+				},
+			},
+			columnDefs: [
+				{
+					targets: 0,
+					render: name => `<a href="/character/${$("#select-realm").val()}/${name}">${name}</a>`,
+				},
+				{
+					searchable: false,
+					targets: 3,
+					render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/race_${data}.jpg">`,
+				},
+				{
+					searchable: false,
+					targets: 4,
+					render: data => `<img src="{{aowow}}/static/images/wow/icons/medium/class_${data}.jpg">`,
+				},
+				{
+					searchable: false,
+					targets: 5,
+					render: online => online ? "🟢" : "🔴",
+				},
+			],
+		});
+	}
+
+	$("#select-realm").on("change", () => {
+		dt.draw();
+	});
+
+	initDataTables();
+</script>

static/partials/character-header.html

@@ -18,5 +18,12 @@
 <div>
 	<span class="char-realm">{{realm}}</span>
 </div>
+<div>
+	{{#if online}}
+	Online 🟢
+	{{else}}
+	Offline 🔴
+	{{/if}}
+</div>
 
 <br>