Make brand logo self adjustable to screen size

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/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

@@ -2051,7 +2051,7 @@ input {
 	width: 100%;
 	opacity: 1;
 	z-index: 1;
-	position: relative;
+	position: absolute;
 	top: 105px;
 	transition: opacity 300ms cubic-bezier(.39,.58,.57,1);;
 
@@ -2070,21 +2070,7 @@ input {
 	}
 }
 
-@media only screen and (max-width: 744px) {
-	#brandlogo div {
-		width: 400px;
-		background-size: 400px;
-	}
-}
-
-@media only screen and (max-width: 597px) {
-	#brandlogo div {
-		width: 300px;
-		background-size: 300px;
-	}
-}
-
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 410px) {
 	#brandlogo {
 		display: none;
 	}