Skip to content

Commit

Permalink
wip: map selector
Browse files Browse the repository at this point in the history
  • Loading branch information
tsa96 authored and PeenScreeker committed Sep 8, 2024
1 parent b46c6b5 commit d01849c
Show file tree
Hide file tree
Showing 5 changed files with 349 additions and 434 deletions.
2 changes: 1 addition & 1 deletion layout/pages/map-selector/map-entry.xml
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
<Image class="button__icon" src="file://{images}/star.svg" textureheight="40" />
</ToggleButton>
</Panel>
<Label id="MapEntryTier" class="map-entry__text map-entry__tier" text="T{d:tier}" />
<Label id="MapEntryTier" class="map-entry__text map-entry__tier" text="T{s:tier}" />
<Panel id="MapPB" class="map-entry__pb" onmouseout="UiToolkitAPI.HideTextTooltip()">
<Label id="PBLabel" class="map-entry__text map-entry__pb-text" />
<Image id="PBIcon" class="map-entry__pb-icon" textureheight="32" />
Expand Down
84 changes: 44 additions & 40 deletions layout/pages/map-selector/map-selector.xml
Original file line number Diff line number Diff line change
Expand Up @@ -41,51 +41,55 @@
<Button class="button button--green ml-2" onactivate="MapSelectorHandler.requestMapUpdate()">
<Label class="button__text" text="#Common_Update" />
</Button>
<ToggleButton id="FilterToggle" class="ml-2 button togglebutton togglebutton--blue" selected="false" onactivate="MapSelection.toggleFilterCollapse()">
<Label class="button__text button__text--left" text="#MapSelector_Filters" />
<Image class="button__icon button__icon--right" src="file://{images}/filter-menu.svg" textureheight="32" />
</ToggleButton>
<Button id="FilterErase" class="ml-2 button button--red" onactivate="MapSelection.clearFilters()">
<Button id="FilterErase" class="ml-2 button button--red" onactivate="MapSelectorHandler.clearFilters()">
<Image class="button__icon" src="file://{images}/filter-remove.svg" textureheight="32" />
</Button>
</Panel>
</Panel>
<Panel id="MapFilters" class="mapselector-filters mapselector-filters--filters-retracted">
<Panel class="full-width">
<Panel id="GamemodeFilters" class="mapselector-filters__row mapselector-filters__gamemodes">
<RadioButton id="SurfFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button" selected="true">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Surf" />
</RadioButton>
<RadioButton id="BhopFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Bhop" />
</RadioButton>
<RadioButton id="ClimbFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Climb" />
</RadioButton>
<RadioButton id="RJFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_RJ" />
</RadioButton>
<RadioButton id="SJFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_SJ" />
</RadioButton>
<RadioButton id="TricksurfFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Tricksurf" />
</RadioButton>
<RadioButton id="AhopFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Ahop" />
</RadioButton>
<RadioButton id="ParkourFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Parkour" />
</RadioButton>
<RadioButton id="ConcFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Conc" />
</RadioButton>
<RadioButton id="DefragFilterButton" class="button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Defrag" />
</RadioButton>
</Panel>
<Panel id="MapFilters" class="mapselector-filters">
<Panel class="mapselector-filters__row mapselector-filters__gamemodes">
<RadioButton id="SurfFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button" selected="true">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Surf" />
</RadioButton>
<RadioButton id="BhopFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Bhop" />
</RadioButton>
<RadioButton id="BhopHL1FilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_BhopHL1" />
</RadioButton>
<RadioButton id="KzMomFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_KzMom" />
</RadioButton>
<RadioButton id="KzKztFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button hidden">
<Label class="button__text mapselector-filters__text" text="#Gamemode_KzKzt" />
</RadioButton>
<RadioButton id="Kz16FilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Kz16" />
</RadioButton>
<RadioButton id="RJFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_RJ" />
</RadioButton>
<RadioButton id="SJFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_SJ" />
</RadioButton>
<RadioButton id="AhopFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Ahop" />
</RadioButton>
<RadioButton id="ConcFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_Conc" />
</RadioButton>
</Panel>
<Panel class="mapselector-filters__row mapselector-filters__gamemodes">
<RadioButton id="DefragCPMFilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_DefragCPM" />
</RadioButton>
<RadioButton id="DefragVQ3FilterButton" class="mr-1 button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_DefragVQ3" />
</RadioButton>
<RadioButton id="DefragVTGFilterButton" class="button togglebutton togglebutton--blue mapselector-filters__button">
<Label class="button__text mapselector-filters__text" text="#Gamemode_DefragVTG" />
</RadioButton>
</Panel>

<Panel class="mapselector-filters__row">
<Panel class="mapselector-filters__tiers">
<Label class="text-h5 mr-2 vertical-align-center" text="Tiers" />
Expand Down
249 changes: 125 additions & 124 deletions scripts/pages/map-selector/map-entry.ts
Original file line number Diff line number Diff line change
@@ -1,140 +1,141 @@
class MapEntry {
static {
$.RegisterEventHandler('MapEntry_MapDataUpdate', $.GetContextPanel(), this.onMapDataUpdate.bind(this));
import { PanelHandler } from 'util/module-helpers';
import * as Enum from 'util/enum';
import { Gamemode } from 'common/web';
import { GamemodeInfo } from 'common/gamemode';

@PanelHandler()
class MapEntryHandler {
constructor() {
$.RegisterEventHandler('MapEntry_MapDataUpdate', $.GetContextPanel(), () => this.onMapDataUpdate());
}

static showGameModeOverrideMenu() {
const mapData = $.GetContextPanel().mapData;
showGameModeOverrideMenu() {
const mapData = $.GetContextPanel<MapEntry>().mapData;
if (!mapData) {
return;
}

const mapID = mapData.id;
const items = [];

for (let i = 1; i < GameModeAPI.GetGameModeCount(); i++) {
items.push({
label: $.Localize(GameModeAPI.GetGameModeName(i)),
jsCallback: () => {
$.DispatchEvent('MapSelector_TryPlayMap_GameModeOverride', mapID, i);
}
});
}
const items = Enum.fastValuesNumeric(Gamemode).map((gamemode) => ({
label: $.Localize(GamemodeInfo.get(gamemode)!.i18n),
jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap_GameModeOverride', mapData.id, gamemode)
}));

UiToolkitAPI.ShowSimpleContextMenu('', 'ControlsLibSimpleContextMenu', items);
}

static showContextMenu() {
const { mapData, userMapData, isDownloading } = $.GetContextPanel();
if (!mapData || !userMapData) {
return;
}

const items = [];
const mapID = mapData.id;

if (userMapData.mapFileExists) {
items.push(
{
label: $.Localize('#Action_StartMap'),
icon: 'file://{images}/play.svg',
style: 'icon-color-green',
jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
},
// Gamemode override submenu
{
label: $.Localize('#Action_StartMapOverride'),
icon: 'file://{images}/alternative-mode.svg',
style: 'icon-color-green',
jsCallback: () => this.showGameModeOverrideMenu()
},
{
label: $.Localize('#Action_DeleteMap'),
icon: 'file://{images}/delete.svg',
style: 'icon-color-red',
jsCallback: () => $.DispatchEvent('MapSelector_DeleteMap', mapID)
}
);
} else {
if (isDownloading) {
items.push({
label: $.Localize('#Action_CancelDownload'),
icon: 'file://{images}/cancel.svg',
style: 'icon-color-red',
jsCallback: () => $.DispatchEvent('MapSelector_ShowConfirmCancelDownload', mapID)
});
} else if (MapCacheAPI.MapQueuedForDownload(mapID)) {
items.push({
label: $.Localize('#Action_RemoveFromQueue'),
icon: 'file://{images}/playlist-remove.svg',
style: 'icon-color-red',
jsCallback: () => $.DispatchEvent('MapSelector_RemoveMapFromDownloadQueue', mapID)
});
} else {
items.push({
label: $.Localize('#Action_DownloadMap'),
icon: 'file://{images}/play.svg',
style: 'icon-color-mid-blue',
jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
});
}
}

if (userMapData.isFavorited) {
items.push({
label: $.Localize('#Action_RemoveFromFavorites'),
icon: 'file://{images}/favorite-remove.svg',
style: 'icon-color-yellow',
jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, false)
});
} else {
items.push({
label: $.Localize('#Action_AddToFavorites'),
icon: 'file://{images}/star.svg',
style: 'icon-color-yellow',
jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, true)
});
}

UiToolkitAPI.ShowSimpleContextMenu('', 'ControlsLibSimpleContextMenu', items);
showContextMenu() {
// const { mapData, userMapData, isDownloading } = $.GetContextPanel<MapEntry>();
// if (!mapData || !userMapData) {
// return;
// }
//
// const items = [];
// const mapID = mapData.id;
//
// if (userMapData.mapFileExists) {
// items.push(
// {
// label: $.Localize('#Action_StartMap'),
// icon: 'file://{images}/play.svg',
// style: 'icon-color-green',
// jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
// },
// // Gamemode override submenu
// {
// label: $.Localize('#Action_StartMapOverride'),
// icon: 'file://{images}/alternative-mode.svg',
// style: 'icon-color-green',
// jsCallback: () => this.showGameModeOverrideMenu()
// },
// {
// label: $.Localize('#Action_DeleteMap'),
// icon: 'file://{images}/delete.svg',
// style: 'icon-color-red',
// jsCallback: () => $.DispatchEvent('MapSelector_DeleteMap', mapID)
// }
// );
// } else {
// if (isDownloading) {
// items.push({
// label: $.Localize('#Action_CancelDownload'),
// icon: 'file://{images}/cancel.svg',
// style: 'icon-color-red',
// jsCallback: () => $.DispatchEvent('MapSelector_ShowConfirmCancelDownload', mapID)
// });
// } else if (MapCacheAPI.MapQueuedForDownload(mapID)) {
// items.push({
// label: $.Localize('#Action_RemoveFromQueue'),
// icon: 'file://{images}/playlist-remove.svg',
// style: 'icon-color-red',
// jsCallback: () => $.DispatchEvent('MapSelector_RemoveMapFromDownloadQueue', mapID)
// });
// } else {
// items.push({
// label: $.Localize('#Action_DownloadMap'),
// icon: 'file://{images}/play.svg',
// style: 'icon-color-mid-blue',
// jsCallback: () => $.DispatchEvent('MapSelector_TryPlayMap', mapID)
// });
// }
// }
// TODO: Isn't fetched by C++ yet, complicated to do with new map list system.
// if (userMapData.isFavorited) {
// items.push({
// label: $.Localize('#Action_RemoveFromFavorites'),
// icon: 'file://{images}/favorite-remove.svg',
// style: 'icon-color-yellow',
// jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, false)
// });
// } else {
// items.push({
// label: $.Localize('#Action_AddToFavorites'),
// icon: 'file://{images}/star.svg',
// style: 'icon-color-yellow',
// jsCallback: () => $.DispatchEvent('MapSelector_ToggleMapStatus', mapID, true)
// });
// }
//
// UiToolkitAPI.ShowSimpleContextMenu('', 'ControlsLibSimpleContextMenu', items);
}

static tryPlayMap() {
$.DispatchEvent('MapSelector_TryPlayMap', $.GetContextPanel().mapData.id);
tryPlayMap() {
$.DispatchEvent('MapSelector_TryPlayMap', $.GetContextPanel<MapEntry>().mapData.id);
}

static onMapDataUpdate() {
const mapData = $.GetContextPanel().mapData;
const pbPanel = $.GetContextPanel().FindChildTraverse('MapPB');
const pbIcon = $.GetContextPanel().FindChildTraverse('PBIcon');
const pbLabel = $.GetContextPanel().FindChildTraverse('PBLabel');

if (mapData.isCompleted) {
pbPanel.RemoveClass('hide');

// Do G1-6 here when it's hooked up
const icon = mapData.pr.rank <= 10 ? 'file://{images}/ranks/top10.svg' : 'file://{images}/flag.svg';

pbIcon.SetImage(icon);

let time = mapData.pr.run.time;
if (!time.includes(':')) time = Number.parseInt(time) >= 10 ? '0:' + time : '0:0' + time;

pbLabel.text = time.split('.')[0];

pbPanel.SetPanelEvent('onmouseover', () => {
UiToolkitAPI.ShowTextTooltip(
pbPanel.id,
`<b>${$.Localize('#Common_PersonalBest')}</b>: ${time}\n<b>${$.Localize('#Common_Rank')}</b>: ${
mapData.pr.rank
}`
// `Last Played: ${new Date(mapData.lastPlayed).toDateString()}` +
);
});
} else {
pbPanel.AddClass('hide');
pbPanel.ClearPanelEvent('onmouseover');
pbLabel.text = '';
}
onMapDataUpdate() {
const cp = $.GetContextPanel<MapEntry>();
const mapData = cp.mapData;
const pbPanel = cp.FindChildTraverse('MapPB');
const pbIcon = cp.FindChildTraverse<Image>('PBIcon');
const pbLabel = cp.FindChildTraverse<Label>('PBLabel');

// TODO: Not passing user-specific data in yet. This is hard to do. Fucking hell!
// if (mapData.isCompleted) {
// pbPanel.RemoveClass('hide');
//
// // Do G1-6 here when it's hooked up
// const icon = mapData.pr.rank <= 10 ? 'file://{images}/ranks/top10.svg' : 'file://{images}/flag.svg';
//
// pbIcon.SetImage(icon);
//
// let time = mapData.pr.run.time;
// if (!time.includes(':')) time = Number.parseInt(time) >= 10 ? '0:' + time : '0:0' + time;
//
// pbLabel.text = time.split('.')[0];
//
// pbPanel.SetPanelEvent('onmouseover', () => {
// UiToolkitAPI.ShowTextTooltip(
// pbPanel.id,
// `<b>${$.Localize('#Common_PersonalBest')}</b>: ${time}\n<b>${$.Localize('#Common_Rank')}</b>: ${
// mapData.pr.rank
// }`
// // `Last Played: ${new Date(mapData.lastPlayed).toDateString()}` +
// );
// });
// } else {
// pbPanel.AddClass('hide');
// pbPanel.ClearPanelEvent('onmouseover');
// pbLabel.text = '';
// }
}
}
Loading

0 comments on commit d01849c

Please sign in to comment.