feat: showcase branding in coordinate view [#2248]

src/game.ts

@@ -23,7 +23,7 @@ import { Point, configure as configurePointFacade } from './utility/pointfacade'
 import { pretty as version } from './utility/version';
 import { Ability } from './ability';
 import { Effect } from './effect';
-import { GameConfig } from './script';
+import { GameConfig, adjustBrand } from './script';
 import { Trap } from './utility/trap';
 import { Drop } from './drop';
 import { CreatureType, Realm, UnitData } from './data/types';
@@ -1304,6 +1304,8 @@ export default class Game {
 
 	// Removed individual args from definition because we are using the arguments variable.
 	onStartOfRound(/* creature, callback */) {
+		// position brand when round starts
+		adjustBrand();
 		this.triggerDeleteEffect('onStartOfRound', 'all');
 	}
 

src/index.ejs

@@ -669,6 +669,10 @@
 					<div id="queuewrapper"></div>
 				</div>
 
+				<div id="brandlogo" class="hide">
+					<div></div>
+				</div>
+
 				<div id="rightpanel">
 					<div style="position:relative">
 					<div id="playerbutton" class="quickinfowrapper togglescore vignette active frame button">

src/script.ts

@@ -456,3 +456,22 @@ export function isEmpty(obj) {
 
 	return true;
 }
+
+/**
+ * Method that resizes and positions brand logo
+ * based on the arena
+ */
+export function adjustBrand() {
+	// fix size
+	const arenaWidth = $j('#combatwrapper').innerWidth();
+	let scaledSize = (arenaWidth * 555) / 1070;
+	scaledSize = scaledSize > 555 ? 555 : scaledSize;
+	$j('#brandlogo div').css('background-size', scaledSize);
+	$j('#brandlogo div').css('width', scaledSize);
+
+	// fix position
+	const arenaMarginTopPx = $j('#combatwrapper canvas').css('margin-top');
+	const arenaMarginTop = Number(arenaMarginTopPx.slice(0, -2));
+	const offset = 125 - (19 * arenaMarginTop) / 65;
+	$j('#brandlogo').css('top', arenaMarginTop + offset);
+}

src/style/styles.less

@@ -2044,3 +2044,34 @@ input {
 	color: #fff;
 	top: 20%;
 }
+
+#brandlogo {
+	display: block;
+	margin: auto;
+	width: 100%;
+	opacity: 1;
+	z-index: 1;
+	position: absolute;
+	top: 105px;
+	transition: opacity 300ms cubic-bezier(.39,.58,.57,1);;
+
+	div {
+		height: 125px;
+		background-image: url('~assets/interface/AncientBeast.png');
+		background-repeat: no-repeat;
+		display: block;
+		width: 555px;
+		max-width: 555px;
+		margin: 0 auto;
+	}
+
+	&.hide {
+		opacity: 0;
+	}
+}
+
+@media only screen and (max-width: 410px) {
+	#brandlogo {
+		display: none;
+	}
+}

src/ui/hotkeys.js

@@ -107,15 +107,24 @@ export class Hotkeys {
 	}
 
 	pressShiftKeyDown() {
+		this.ui.$brandlogo.removeClass('hide');
 		this.ui.game.grid.showGrid(true);
 		this.ui.game.grid.showCurrentCreatureMovementInOverlay(this.ui.game.activeCreature);
 	}
 
 	pressShiftKeyUp() {
+		this.ui.$brandlogo.addClass('hide');
 		this.ui.game.grid.showGrid(false);
 		this.ui.game.grid.cleanOverlay();
 		this.ui.game.grid.redoLastQuery();
 	}
+	pressControlKeyDown() {
+		this.ui.$brandlogo.addClass('hide');
+	}
+
+	pressControlKeyUp() {
+		this.ui.$brandlogo.addClass('hide');
+	}
 
 	pressSpace() {
 		!this.ui.dashopen && this.ui.game.grid.confirmHex();
@@ -224,6 +233,22 @@ export function getHotKeys(hk) {
 				hk.pressShiftKeyUp();
 			},
 		},
+		ControlLeft: {
+			onkeydown() {
+				hk.pressControlKeyDown();
+			},
+			onkeyup() {
+				hk.pressControlKeyUp();
+			},
+		},
+		ControlRight: {
+			onkeydown() {
+				hk.pressControlKeyDown();
+			},
+			onkeyup() {
+				hk.pressControlKeyUp();
+			},
+		},
 		Space: {
 			onkeydown() {
 				hk.pressSpace();

src/ui/interface.js

@@ -2,6 +2,7 @@ import * as $j from 'jquery';
 import * as time from '../utility/time';
 import * as emoji from 'node-emoji';
 import { Hotkeys, getHotKeys } from './hotkeys';
+import { adjustBrand } from '../script';
 
 import { Button, ButtonStateEnum } from './button';
 import { Chat } from './chat';
@@ -29,12 +30,13 @@ export class UI {
 	 * NOTE : attributes and variables starting with $ are jquery element
 	 * and jquery function can be called directly from them.
 	 *
-	 * $display :		UI container
-	 * $queue :		Queue container
+	 * $display :	 	UI container
+	 * $queue :		  Queue container
 	 * $textbox :		Chat and log container
 	 * $activebox :	Current active creature panel (left panel) container
 	 * $dash :			Overview container
 	 * $grid :			Creature grid container
+	 * $brandlogo:  Brand logo container
 	 *
 	 * selectedCreature :	String :	ID of the visible creature card
 	 * selectedPlayer :	Integer :	ID of the selected player in the dash
@@ -57,6 +59,7 @@ export class UI {
 		this.$grid = $j(this.#makeCreatureGrid(document.getElementById('creaturerasterwrapper')));
 		this.$activebox = $j('#activebox');
 		this.$scoreboard = $j('#scoreboard');
+		this.$brandlogo = $j('#brandlogo');
 		this.active = false;
 
 		this.queue = UI.#getQueue(this, document.getElementById('queuewrapper'));
@@ -522,6 +525,9 @@ export class UI {
 			e.preventDefault();
 		});
 
+		// adjust brand logo on window resize
+		$j(window).on('resize', (ev) => adjustBrand());
+
 		this.$dash.find('.section.numbers .stat').on('mouseover', (event) => {
 			const $section = $j(event.target).closest('.section');
 			const which = $section.hasClass('stats') ? '.stats_desc' : '.masteries_desc';
@@ -2302,11 +2308,13 @@ export class UI {
 		}, 2000);
 
 		const onTurnEndMouseEnter = ifGameNotFrozen(() => {
+			ui.$brandlogo.removeClass('hide');
 			ui.game.grid.showGrid(true);
 			ui.game.grid.showCurrentCreatureMovementInOverlay(ui.game.activeCreature);
 		});
 
 		const onTurnEndMouseLeave = () => {
+			ui.$brandlogo.addClass('hide');
 			ui.game.grid.showGrid(false);
 			ui.game.grid.cleanOverlay();
 			ui.game.grid.redoLastQuery();

src/utility/hex.ts

@@ -565,13 +565,15 @@ export class Hex {
 			if (this.overlayClasses.match(/reachable/)) {
 				targetAlpha = true;
 				this.overlay.loadTexture('hex_path');
-			// hover when creature is inactive
-			} else if (this.overlayClasses.match(/hover/) 
-					&& this.displayClasses.indexOf(`creature player${player}`) === -1) {
+				// hover when creature is inactive
+			} else if (
+				this.overlayClasses.match(/hover/) &&
+				this.displayClasses.indexOf(`creature player${player}`) === -1
+			) {
 				this.display.loadTexture('hex_path');
 				this.display.alpha = 1;
 				this.overlay.loadTexture(`hex_hover_p${player}`);
-			// hover over active player
+				// hover over active player
 			} else if (this.overlayClasses.match(/hover/)) {
 				this.display.loadTexture('hex_path');
 			} else {