Skip to content

Commit

Permalink
Deploy preview for PR 5081 🛫
Browse files Browse the repository at this point in the history
  • Loading branch information
@RedSparr0w
RedSparr0w committed Feb 8, 2024
1 parent b5d58ff commit bfa68f8
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 2 deletions.
4 changes: 3 additions & 1 deletion docs/preview/pr-5081/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2161,7 +2161,7 @@ <h5>Welcome to the Battle Frontier!</h5>
<div class="card-header p-0" data-toggle="collapse" href="#mapBody">
<span data-bind="text: `Town Map (${GameConstants.camelCaseToString(GameConstants.Region[player.region])})`">Town Map</span>
</div>
<button class='btn btn-sm' style="position: absolute; left: 0px; top: 0px; width: auto; height: 41px;" data-toggle="popover" data-trigger="hover" data-html="true" data-title="Map Legend:"
<button class='btn btn-lg py-0 px-2' style="position: absolute; left: 0px; top: 0px; width: auto; height: 41px; font-size: 24px;" data-toggle="popover" data-trigger="hover" data-html="true" data-title="Map Legend:"
data-content=""
data-placement="bottom" data-bind="attr: {'data-content': `<div class='row map-legend'>
<div class='col-12'>
Expand All @@ -2179,6 +2179,8 @@ <h5>Welcome to the Battle Frontier!</h5>
<i>NOTE: These colors can be customized in the settings menu</i>
</div>
</div>`}">ⓘ</button>
<button class='btn btn-lg py-0 px-2' style="position: absolute; left: 40px; top: 0px; width: auto; height: 41px; font-size: 24px;" data-toggle="tooltip" data-trigger="hover"
data-content="Toggle Full-screen" data-placement="bottom" data-bind="click: () => document.getElementById('townMap').classList.toggle('full-screen')">&#x26F6;</button>
<button class='btn btn-sm' style="position: absolute; right: 48px; top: 0px; width: auto; height: 41px;"
data-bind='style: { background: DayCycle.color() },
tooltip: {
Expand Down
96 changes: 96 additions & 0 deletions docs/preview/pr-5081/scripts/script.min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1651,6 +1651,7 @@ class Game {
RoamingPokemonList.generateIncreasedChanceRoutes(now);
WeatherApp.initialize();
PokemonContestController.generateDailyContest(now);
MapNavigation.enableZoom();
if (Settings.getSetting('disableOfflineProgress').value === false) {
this.computeOfflineEarnings();
}
Expand Down Expand Up @@ -46855,6 +46856,101 @@ MapHelper.moveToRoute = function (route, region) {
MapHelper.accessToRoute = function (route, region) {
return this.routeExist(route, region) && Routes.getRoute(region, route).isUnlocked();
};
class MapNavigation {
static enableZoom() {
this.svgImage = document.getElementById('map');
this.svgContainer = document.getElementById('mapBody');
this.svgImage.setAttribute('viewBox', `${this.viewBox.x} ${this.viewBox.y} ${this.viewBox.w} ${this.viewBox.h}`);
// Zooming
this.svgContainer.addEventListener('wheel', (e) => {
// Don't scroll the page
e.preventDefault();
// If already min/max scale, return;
const canScale = e.deltaY > 0 ? this.scale > 1 : this.scale < 5;
if (!canScale) {
return;
}
// Mouse pos, we want to zoom towards the mouse
const mx = e.offsetX;
const my = e.offsetY;
// New dimensions
const dw = this.viewBox.w * Math.sign(-e.deltaY) * 0.07;
const dh = this.viewBox.h * Math.sign(-e.deltaY) * 0.07;
const dx = (dw * mx) / this.svgContainer.clientWidth;
const dy = (dh * my) / this.svgContainer.clientHeight;
// Update out positioning and size
this.viewBox.w = Math.min(this.svgSize.w, this.viewBox.w - dw);
this.viewBox.h = Math.min(this.svgSize.h, this.viewBox.h - dh);
this.viewBox.x = Math.max(0, Math.min(this.svgSize.w - this.viewBox.w, this.viewBox.x + dx));
this.viewBox.y = Math.max(0, Math.min(this.svgSize.h - this.viewBox.h, this.viewBox.y + dy));
this.svgImage.setAttribute('viewBox', `${this.viewBox.x} ${this.viewBox.y} ${this.viewBox.w} ${this.viewBox.h}`);
// Remember our current scale
this.scale = this.svgSize.w / this.viewBox.w;
}, { passive: false });
// Panning
let isPanning = false;
let startPoint = { x: 0, y: 0 };
let endPoint = { x: 0, y: 0 };
this.svgContainer.onmousedown = (e) => {
isPanning = true;
startPoint = { x: e.x, y: e.y };
};
this.svgContainer.onmousemove = (e) => {
if (!isPanning) {
return;
}
endPoint = { x: e.x, y: e.y };
// TODO: Fix this calculation
// No idea why / 3, but it's close enough
const dx = (startPoint.x - endPoint.x) / (this.scale / 3);
const dy = (startPoint.y - endPoint.y) / (this.scale / 3);
const movedViewBox = {
// Don't let it go outside the bounds (min, max, calculated position + movement)
x: Math.max(0, Math.min(this.svgSize.w - this.viewBox.w, this.viewBox.x + dx)),
y: Math.max(0, Math.min(this.svgSize.h - this.viewBox.h, this.viewBox.y + dy)),
};
this.svgImage.setAttribute('viewBox', `${movedViewBox.x} ${movedViewBox.y} ${this.viewBox.w} ${this.viewBox.h}`);
};
this.svgContainer.onmouseup = (e) => {
if (!isPanning) {
return;
}
isPanning = false;
endPoint = { x: e.x, y: e.y };
// TODO: Fix this calculation
// No idea why / 3, but it's close enough
const dx = (startPoint.x - endPoint.x) / (this.scale / 3);
const dy = (startPoint.y - endPoint.y) / (this.scale / 3);
// Don't let it go outside the bounds (min, max, calculated position + movement)
this.viewBox.x = Math.max(0, Math.min(this.svgSize.w - this.viewBox.w, this.viewBox.x + dx));
this.viewBox.y = Math.max(0, Math.min(this.svgSize.h - this.viewBox.h, this.viewBox.y + dy));
this.svgImage.setAttribute('viewBox', `${Math.max(0, this.viewBox.x)} ${this.viewBox.y} ${this.viewBox.w} ${this.viewBox.h}`);
};
this.svgContainer.onmouseleave = (e) => {
this.svgContainer.onmouseup(e);
};
// when our region or subregion changes, the map changes, reset the zoom/pan
player._region.subscribe(() => {
this.resetZoom();
});
player._subregion.subscribe(() => {
this.resetZoom();
});
}
static resetZoom() {
this.viewBox.w = this.svgSize.w;
this.viewBox.h = this.svgSize.h;
this.viewBox.x = 0;
this.viewBox.y = 0;
this.scale = 1;
this.svgImage.setAttribute('viewBox', `${this.viewBox.x} ${this.viewBox.y} ${this.viewBox.w} ${this.viewBox.h}`);
}
}
MapNavigation.viewBox = {
x: 0, y: 0, w: 1600, h: 960,
};
MapNavigation.scale = 1;
MapNavigation.svgSize = { w: 1600, h: 960 };
/// <reference path="../../declarations/GameHelper.d.ts" />
/// <reference path="../../declarations/DataStore/common/Feature.d.ts" />
class ZMoves {
Expand Down
2 changes: 1 addition & 1 deletion docs/preview/pr-5081/styles/styles.min.css
View file

Large diffs are not rendered by default.

0 comments on commit bfa68f8

Please sign in to comment.