Dynamically adjust width of extra locations

wooferzfg · Jul 26, 2023 · 531b62b · 531b62b
1 parent 5334492
commit 531b62b
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/src/css/main.scss b/src/css/main.scss
@@ -598,13 +598,11 @@ button:hover:enabled {
 .extra-locations {
   float: left;
   background-color: rgba(160, 160, 160, 0.85);
-  width: 750px;
   height: 242px;
   margin-right: 8px;
   margin-bottom: 8px;
 
   .extra-location {
-    width: 144px;
     float: left;
     background-position-y: 15px;
     display: flex;
@@ -650,7 +648,6 @@ button:hover:enabled {
 
 .statistics {
   float: left;
-  width: 740px;
   background-color: rgba(80, 80, 80, 0.85);
   height: 85px;
   margin: 0 0 8px 0;

diff --git a/src/ui/extra-location.jsx b/src/ui/extra-location.jsx
@@ -12,6 +12,22 @@ import Item from './item';
 import KeyDownWrapper from './key-down-wrapper';
 
 class ExtraLocation extends React.PureComponent {
+  static NUM_CONSISTENT_ITEMS = 4;
+
+  static ITEM_WIDTH = 24;
+
+  static EXTRA_WIDTH = 10;
+
+  static MIN_WIDTH = 120;
+
+  static getWidth() {
+    const numItems = this.NUM_CONSISTENT_ITEMS
+      + (LogicHelper.isRandomDungeonEntrances() ? 1 : 0)
+      + (LogicHelper.isRandomBossEntrances() ? 1 : 0);
+
+    return Math.max(this.ITEM_WIDTH * numItems + this.EXTRA_WIDTH, this.MIN_WIDTH);
+  }
+
   compassItem() {
     const {
       clearSelectedItem,
@@ -325,6 +341,7 @@ class ExtraLocation extends React.PureComponent {
         onMouseOut={clearSelectedLocation}
         role="button"
         tabIndex="0"
+        style={{ width: ExtraLocation.getWidth() }}
       >
         {this.dungeonItems()}
         {this.locationIcon()}

diff --git a/src/ui/extra-locations-table.jsx b/src/ui/extra-locations-table.jsx
@@ -9,6 +9,14 @@ import TrackerState from '../services/tracker-state';
 import ExtraLocation from './extra-location';
 
 class ExtraLocationsTable extends React.PureComponent {
+  static NUM_EXTRA_LOCATIONS = 5;
+
+  static EXTRA_WIDTH = 30;
+
+  static getWidth() {
+    return this.NUM_EXTRA_LOCATIONS * ExtraLocation.getWidth() + this.EXTRA_WIDTH;
+  }
+
   extraLocation(locationName) {
     const {
       clearSelectedItem,
@@ -62,7 +70,7 @@ class ExtraLocationsTable extends React.PureComponent {
     return (
       <div
         className="extra-locations"
-        style={{ backgroundColor }}
+        style={{ backgroundColor, width: ExtraLocationsTable.getWidth() }}
       >
         {this.extraLocation(LogicHelper.DUNGEONS.DRAGON_ROOST_CAVERN)}
         {this.extraLocation(LogicHelper.DUNGEONS.FORBIDDEN_WOODS)}

diff --git a/src/ui/launcher.jsx b/src/ui/launcher.jsx
@@ -15,7 +15,7 @@ import 'react-toggle/style.css';
 
 export default class Launcher extends React.PureComponent {
   static openTrackerWindow(route) {
-    const windowWidth = 1627;
+    const windowWidth = 1677;
     const windowHeight = 585;
 
     window.open(

diff --git a/src/ui/statistics.jsx b/src/ui/statistics.jsx
@@ -3,7 +3,15 @@ import React from 'react';
 
 import LogicCalculation from '../services/logic-calculation';
 
+import ExtraLocationsTable from './extra-locations-table';
+
 class Statistics extends React.PureComponent {
+  static WIDTH_DIFFERENCE = -10;
+
+  static getWidth() {
+    return ExtraLocationsTable.getWidth() + this.WIDTH_DIFFERENCE;
+  }
+
   render() {
     const {
       backgroundColor,
@@ -15,7 +23,7 @@ class Statistics extends React.PureComponent {
     return (
       <div
         className="statistics"
-        style={{ backgroundColor }}
+        style={{ backgroundColor, width: Statistics.getWidth() }}
       >
         <table className="left-table">
           <tbody>