fix: update position of brandlogo only from css

FreezingMoon · Aug 24, 2024 · 2950a76 · 2950a76
1 parent bea13f6
commit 2950a76
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 53 deletions.
diff --git 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, adjustBrand } from './script';
+import { GameConfig } from './script';
 import { Trap } from './utility/trap';
 import { Drop } from './drop';
 import { CreatureType, Realm, UnitData } from './data/types';
@@ -1301,8 +1301,6 @@ 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/index.ejs b/src/index.ejs
@@ -673,10 +673,13 @@
 				<div id="queue">
 					<div id="queuewrapper"></div>
 				</div>
-
 				<div id="brandlogo" class="hide">
-					<div></div>
+					<div id="brandlogoinner" >
+						<div></div>
+					</div>
 				</div>
+			</div>
+
 
 				<div id="rightpanel">
 					<div style="position:relative">

diff --git a/src/script.ts b/src/script.ts
@@ -460,22 +460,3 @@ 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
@@ -302,7 +302,7 @@
 	bottom: 0;
 	height: 0;
 	width: 100%;
-	z-index: 2;
+	z-index: 5;
 }
 
 #rightpanel {
@@ -315,7 +315,7 @@
 #leftpanel {
 	position: absolute;
 	left: 0;
-	z-index: 0;
+	z-index: 3;
 }
 
 .button:not(.togglescore) {
@@ -877,7 +877,7 @@ div.section.info {
 	position: absolute;
 	left: 0;
 	top: 0;
-	z-index: 1;
+	z-index: 3;
 }
 
 .vignette {
@@ -1982,7 +1982,7 @@ input {
 	#rightpanel {
 		transform: scale(0.55) translate(40px, -170px);
 	}
-	
+
 	#scoreboardTitle {
 		font-size: medium;
 		margin: 0px !important;
@@ -2066,32 +2066,58 @@ input {
 }
 
 #brandlogo {
-	display: block;
-	margin: auto 25%;
-	width: 50%;
-	opacity: 1;
-	z-index: 1;
-	position: absolute;
-	top: 105px;
-	transition: opacity 300ms cubic-bezier(0.39, 0.58, 0.57, 1);
+	height: 100vh;
+    width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+	&.hide {
+		display: none;
+	}
+}
+
+#brandlogoinner {
+	aspect-ratio: 16/9;
+	display: flex;
+	justify-content: center;
 
+	@media (min-aspect-ratio: 16 / 9) {
+		height: 100%;
+		width: auto;
+	}
+
+	@media (max-aspect-ratio: 16 / 9) {
+		width: 100%;
+		height: auto;
+	}
 	div {
-		height: 125px;
 		background-image: url('~assets/interface/AncientBeast.png');
 		background-repeat: no-repeat;
-		display: block;
-		width: 555px;
-		max-width: 555px;
-		margin: 0 auto;
-	}
+		background-position-x: center;
+		background-position-y: top;
+		background-size: 50%;
+		width: 50%;
+		height:250px;
+		max-width: 1000px;
+		margin-top:12%;
+
+		@media (max-aspect-ratio: 16/9) {
+			margin-top:10%;
+		}
 
-	&.hide {
-		opacity: 0;
-	}
-}
+		@media (orientation:portrait) {
+			margin-top:5%;
+		}
 
-@media (max-height: 700px) and (orientation: landscape) {
-	#brandlogo {
-		display: none;
+		@media screen and (min-height: 300px) {
+			background-size: 60%;
+			width: 60%;
+		}
+
+		@media screen and (min-height: 600px){
+			background-size: 70%;
+			width: 70%;
+			margin-top: 9%;
+		}
 	}
 }
diff --git a/src/ui/interface.js b/src/ui/interface.js
@@ -2,7 +2,6 @@ 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';
@@ -579,9 +578,6 @@ 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';