feat(character/pvp): add pvp page

static/character-pvp.hbs

@@ -0,0 +1,42 @@
+<link rel="stylesheet" type="text/css" href="/css/character-pvp.css">
+{{> emblems}}
+
+{{> character-header }}
+
+<div class="columns is-multiline">
+	<div class="column has-text-centered is-size-5 is-full-touch is-one-quarter-desktop">
+		{{#eq faction 1}}
+		<img class="faction" src="/img/PlusManz-Alliance.png">
+		{{else}}
+		<img class="faction" src="/img/PlusManz-Horde.png">
+		{{/eq}}
+
+		<div>Total Kills: {{kills.total}}</div>
+		<div>Kills Today: {{kills.today}}</div>
+		<div>Kills Yesterday: {{kills.yesterday}}</div>
+	</div>
+
+	{{#each arenaTeams}}
+	<div class="column is-full-touch is-one-quarter-desktop">
+		<div class="box arena-team" data-team-id="{{this.id}}">
+			<div class="info has-text-centered">
+				<div class="is-size-4">{{this.name}}</div>
+				<div class="is-size-5">{{this.type}}v{{this.type}} Team</div>
+				<div>Rating: {{this.rating}}</div>
+				<div>{{this.seasonWins}} W / {{subtract this.seasonGames this.seasonWins}} L</div>
+			</div>
+			<div class="emblem-container">
+				<div class="arena-emblem">
+					<canvas width="74" height="128"></canvas>
+				</div>
+			</div>
+		</div>
+	</div>
+	{{/each}}
+</div>
+
+<script type="application/javascript">
+	{{#each arenaTeams}}
+	createArenaEmblem({{this.type}}, {{{JSONstringify this.emblem}}}, $(".arena-team[data-team-id={{this.id}}] .arena-emblem")[0]);
+	{{/each}}
+</script>

static/character-talents.hbs

@@ -53,7 +53,7 @@
 </div>
 
 <script type="application/javascript">
-	const talentsData = JSON.parse(`{{{data}}}`);
+	const talentsData = {{{JSONstringify data}}};
 
 	for (let spec = 0; spec < 2; ++spec) {
 		const $spec = $(`#talents-spec-${spec}`);

static/character.hbs

@@ -66,7 +66,7 @@
 		debug: () => { },
 	};
 
-	const charData = JSON.parse(`{{{data}}}`);
+	const charData = {{{JSONstringify data}}};
 	const races = {
 		1: "human",
 		2: "orc",

static/css/character-pvp.css

@@ -0,0 +1,9 @@
+.arena-team {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.arena-team .info {
+	margin-right: 2rem;
+}

static/css/emblems.css

@@ -0,0 +1,26 @@
+.guild-emblem .images,
+.arena-emblem .images {
+	display: none;
+}
+
+.guild-emblem {
+	display: flex;
+	flex-shrink: 0;
+	width: 128px;
+	height: 128px;
+}
+
+.guild-emblem canvas {
+	width: 96px;
+	height: 96px;
+	margin: auto;
+}
+
+.circle {
+	clip-path: circle(50% at 50% 50%);
+}
+
+.arena-emblem {
+	width: 74px;
+	height: 128px;
+}

static/css/guild.css

@@ -2,7 +2,7 @@
 	display: flex;
 }
 
-#guild-header .emblem {
+#guild-header .emblem-container {
 	margin-right: 1em;
 }
 
@@ -21,26 +21,8 @@
 	margin-right: 4px;
 }
 
-#emblem-images {
-	display: none;
-}
-
-#emblem {
+.guild-emblem {
 	background: url("/img/guild-emblems/circle.png") no-repeat center;
-	display: flex;
-	flex-shrink: 0;
-	height: 128px;
-	width: 128px;
-}
-
-#emblem canvas {
-	height: 96px;
-	width: 96px;
-	margin: auto;
-}
-
-.circle {
-	clip-path: circle(50% at 50% 50%);
 }
 
 #members_processing {

static/guild.hbs

@@ -1,13 +1,15 @@
 <link rel="stylesheet" type="text/css" href="/css/guild.css">
 {{> datatables}}
+{{> emblems}}
 
 <a href="/">Back to Armory</a>
 <br><br>
 
 <div id="guild-header">
-	<div class="emblem">
-		<div id="emblem" class="shape-outer circle">
-			<canvas class="shape-inner circle" width="128" height="96"></canvas>
+	<div class="emblem-container">
+		<div class="guild-emblem circle">
+			<div class="images"></div>
+			<canvas class="circle" width="128" height="96"></canvas>
 		</div>
 	</div>
 
@@ -36,14 +38,6 @@
 </div>
 
 <br>
-<div id="emblem-images">
-	<img id="emblem-bg-upper" src="/img/guild-emblems/Background_{{emblem.background}}_TU_U.PNG">
-	<img id="emblem-bg-lower" src="/img/guild-emblems/Background_{{emblem.background}}_TL_U.PNG">
-	<img id="emblem-icon-upper" src="/img/guild-emblems/Emblem_{{emblem.icon}}_{{emblem.iconColor}}_TU_U.PNG">
-	<img id="emblem-icon-lower" src="/img/guild-emblems/Emblem_{{emblem.icon}}_{{emblem.iconColor}}_TL_U.PNG">
-	<img id="emblem-border-upper" src="/img/guild-emblems/Border_{{emblem.border}}_{{emblem.borderColor}}_TU_U.PNG">
-	<img id="emblem-border-lower" src="/img/guild-emblems/Border_{{emblem.border}}_{{emblem.borderColor}}_TL_U.PNG">
-</div>
 
 <table id="members" class="stripe hover row-border">
 	<thead>
@@ -60,59 +54,7 @@
 </table>
 
 <script type="application/javascript">
-	function createEmblem() {
-		const canvas = $("#emblem canvas")[0];
-		const ctx = canvas.getContext("2d");
-
-		const mask = $("#emblem-mask")[0];
-		const bgUpper = $("#emblem-bg-upper")[0];
-		const bgLower = $("#emblem-bg-lower")[0];
-		const iconUpper = $("#emblem-icon-upper")[0];
-		const iconLower = $("#emblem-icon-lower")[0];
-
-		ctx.beginPath();
-		ctx.moveTo(0, 0);
-		ctx.lineTo(26, 0);
-		ctx.lineTo(64, 28);
-		ctx.lineTo(102, 0);
-		ctx.lineTo(128, 0);
-		ctx.lineTo(128, 96);
-		ctx.lineTo(0, 96);
-		ctx.closePath();
-		ctx.clip();
-		drawEmblemLayer(canvas, ctx, "bg");
-		drawEmblemLayer(canvas, ctx, "icon");
-		drawEmblemLayer(canvas, ctx, "border");
-	}
-
-	function drawEmblemLayer(canvas, ctx, layer) {
-		const upper = $(`#emblem-${layer}-upper`)[0];
-		const lower = $(`#emblem-${layer}-lower`)[0];
-
-		const w = upper.width / 2;
-		const uh = upper.height;
-		const lh = lower.height;
-
-		ctx.drawImage(upper, 0, 0, w, uh, w, 0, w, uh);
-		ctx.drawImage(lower, 0, 0, w, lh, w, upper.height, w, lh);
-		ctx.save();
-		ctx.scale(-1, 1);
-		ctx.drawImage(upper, 0, 0, w, uh, 0, 0, -w, uh);
-		ctx.drawImage(lower, 0, 0, w, lh, 0, upper.height, -w, lh);
-		ctx.restore();
-	}
-
-	const emblemLoadPromises = $("#emblem-images img").map((idx, img) => {
-		return new Promise((res, rej) => {
-			if (img.complete) {
-				res();
-			} else {
-				img.addEventListener("load", res);
-				img.addEventListener("error", rej);
-			}
-		});
-	});
-	Promise.all(emblemLoadPromises).then(createEmblem);
+	createGuildEmblem({{{JSONstringify emblem}}}, $(".emblem-container .guild-emblem")[0]);
 
 	dt = $("#members").DataTable({
 		processing: true,