(e)
| 2028 | } |
| 2029 | |
| 2030 | onWindowResize (e) { |
| 2031 | if (!this.campaign) { |
| 2032 | return |
| 2033 | } |
| 2034 | const mapHeight = 1280 |
| 2035 | const mapWidth = 1920 |
| 2036 | const sideControlsGutter = 240 |
| 2037 | const layoutWidth = mapWidth + (sideControlsGutter * 2) |
| 2038 | const $gameplayContainer = this.$el.find('.gameplay-container') |
| 2039 | const $resizableGameplayContent = this.$el.find('.resizable-gameplay-content') |
| 2040 | const $map = $resizableGameplayContent.find('.map') |
| 2041 | const $portalsContainer = $resizableGameplayContent.find('.portals-container') |
| 2042 | const pageWidth = $gameplayContainer.length ? $gameplayContainer.width() : this.$el.width() |
| 2043 | const availableHeight = $gameplayContainer.length ? $gameplayContainer.height() : this.$el.height() |
| 2044 | const aspectRatio = layoutWidth / mapHeight |
| 2045 | const widthRatio = pageWidth / layoutWidth |
| 2046 | const heightRatio = availableHeight / mapHeight |
| 2047 | |
| 2048 | let resultingWidth, resultingHeight |
| 2049 | // Make sure we can see the whole map, fading to background in one dimension. |
| 2050 | if (heightRatio <= widthRatio) { |
| 2051 | // Left and right margin |
| 2052 | resultingHeight = availableHeight |
| 2053 | resultingWidth = resultingHeight * aspectRatio |
| 2054 | } else { |
| 2055 | // Top and bottom margin |
| 2056 | resultingWidth = pageWidth |
| 2057 | resultingHeight = resultingWidth / aspectRatio |
| 2058 | } |
| 2059 | // Ensure we don't exceed available height due to rounding |
| 2060 | if (resultingHeight > availableHeight) { |
| 2061 | resultingHeight = availableHeight |
| 2062 | resultingWidth = resultingHeight * aspectRatio |
| 2063 | } |
| 2064 | const resultingMarginX = (pageWidth - resultingWidth) / 2 |
| 2065 | const resultingMarginY = (availableHeight - resultingHeight) / 2 |
| 2066 | $resizableGameplayContent.css({ width: resultingWidth, height: resultingHeight, 'margin-left': resultingMarginX, 'margin-top': resultingMarginY }) |
| 2067 | |
| 2068 | const mapWidthInLayout = resultingWidth * (mapWidth / layoutWidth) |
| 2069 | const mapMarginX = (resultingWidth - mapWidthInLayout) / 2 |
| 2070 | $map.css({ width: mapWidthInLayout, height: resultingHeight, 'margin-left': mapMarginX, 'margin-top': 0 }) |
| 2071 | $portalsContainer.css({ width: '', height: '', 'margin-left': '', 'margin-top': '' }) |
| 2072 | if (this.pointerInterval) { |
| 2073 | this.highlightNextLevel() |
| 2074 | } |
| 2075 | // Rebuild visual connections so they stay aligned with the resized map. |
| 2076 | if (this.campaign) { |
| 2077 | this.createVisualConnections() |
| 2078 | } |
| 2079 | } |
| 2080 | |
| 2081 | playAmbientSound () { |
| 2082 | if (!me.get('volume')) { return } |
no test coverage detected