From be649d3600681d3143592772c11ca5380da8fdb4 Mon Sep 17 00:00:00 2001
From: David Padilla <davidpadilla.f22@gmail.com>
Date: Mon, 2 Oct 2023 11:24:55 -0500
Subject: [PATCH] Make brand logo self adjustable to screen size

---
 src/game.ts           |  4 +++-
 src/script.ts         | 19 +++++++++++++++++++
 src/style/styles.less | 18 ++----------------
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/game.ts b/src/game.ts
index d88790ef6..99cc9f809 100644
--- a/src/game.ts
+++ b/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');
 	}
 
diff --git a/src/script.ts b/src/script.ts
index fa3e55b31..b6560bc4c 100644
--- a/src/script.ts
+++ b/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);
+}
diff --git a/src/style/styles.less b/src/style/styles.less
index 382d22a83..94c2d45de 100644
--- a/src/style/styles.less
+++ b/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;
 	}