Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pano zoning UI #133

Merged
merged 6 commits into from
Aug 15, 2024
Merged

Pano zoning UI #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
10fc7aa
feat: add Zoning UI frame
PeenScreeker Jul 27, 2024
7dd643d
feat: add track properties to Zoning UI
PeenScreeker Jul 27, 2024
651e94e
feat: add segment properties to Zoning UI
PeenScreeker Jul 27, 2024
32da6d9
feat: add zone & region properties to Zoning UI
PeenScreeker Jul 27, 2024
681f4d2
feat: add and delete new zones
PeenScreeker Jul 27, 2024
bcdbd22
feat: move momentum zone types out of types repo
PeenScreeker Jul 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions images/adjust.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/close-box-outline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/list-box-outline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/pencil-off-outline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/pencil-outline.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/ray-start-arrow.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions images/vector-square-close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion layout/hud/tab-menu.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,19 @@
</Panel>

<Panel id="ZoningContainer" class="hud-tab-menu__zoning" hittestchildren="true">
<ZoneMenu id="ZoneMenu" />
<ZoneMenu id="ZoneMenu" hittest="true" hittestchildren="true" />
</Panel>

<Panel class="hud-tab-menu__stats">
</Panel>

<Panel class="hud-tab-menu__enable-cursor">
<Button id="ZoningOpen" class="button horizontal-align-left" onactivate="GameInterfaceAPI.ConsoleCommand('mom_zone_edit 1');$.DispatchEvent('ZoneMenu_Show');" onmouseover="UiToolkitAPI.ShowTextTooltip('ZoningOpen', '#Zoning_ShowMenu_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
<Image class="button__icon" src="file://{images}/pencil-outline.svg" textureheight="24" />
</Button>
<Button id="ZoningClose" class="button horizontal-align-left" onactivate="GameInterfaceAPI.ConsoleCommand('mom_zone_edit 0');$.DispatchEvent('ZoneMenu_Hide');" onmouseover="UiToolkitAPI.ShowTextTooltip('ZoningClose', '#Zoning_HideMenu_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
Comment on lines +62 to +65
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these really need to be console commands? We're likely to remove GameInterfaceAPI.ConsoleCommand in the future.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no, this is kind of tech debt.

  1. My original intent was to allow a player to start zoning by setting mom_zone_edit 1, but if it's Ok to only get into the zoning UI with a button on the tab menu, no sweat.
  2. There are some things handled in c++ by the existing zone editing code that need to be moved over to the new files. These are convars like grid size, and the code that generates the 3D crosshair.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay nbd - what's the long-term plan then? Note that we have $.RegisterConVarChangeListener now!

<Image class="button__icon" src="file://{images}/pencil-off-outline.svg" textureheight="24" />
</Button>
<Label class="hud-tab-menu__enable-cursor-tip" text="#HudTabMenu_EnableCursorTip"/>
</Panel>
</Panel>
Expand Down
28 changes: 28 additions & 0 deletions layout/modals/context-menus/zoning-df-flags.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<root>
<styles>
<include src="file://{resources}/styles/main.scss" />
</styles>

<ContextMenuCustomLayout class="contextmenu" tabindex="auto" selectionpos="auto">
<Panel id="ContextMenuBody" class="contextmenu simplecontextmenu" childfocusonhover="true">
<ToggleButton id="FlagHaste" class="checkbox checkbox--right zoning__checkbox">
<Label text="#Zoning_DFFlags_Haste"/>
</ToggleButton>
<ToggleButton id="FlagSlick" class="checkbox checkbox--right zoning__checkbox">
<Label text="#Zoning_DFFlags_Slick"/>
</ToggleButton>
<ToggleButton id="FlagDamageBoost" class="checkbox checkbox--right zoning__checkbox">
<Label text="#Zoning_DFFlags_DamageBoost"/>
</ToggleButton>
<ToggleButton id="FlagRockets" class="checkbox checkbox--right zoning__checkbox">
<Label text="#Zoning_DFFlags_Rockets"/>
</ToggleButton>
<ToggleButton id="FlagPlasma" class="checkbox checkbox--right zoning__checkbox">
<Label text="#Zoning_DFFlags_Plasma"/>
</ToggleButton>
<ToggleButton id="FlagBFG" class="checkbox checkbox--right zoning__checkbox">
<Label text="#Zoning_DFFlags_BFG"/>
</ToggleButton>
</Panel>
</ContextMenuCustomLayout>
</root>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing newline at end?? Thought Prettier handled this, weird

242 changes: 241 additions & 1 deletion layout/pages/zoning/zoning.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,243 @@
<root>
<Panel class="zoning" acceptsinput="true" acceptsfocus="true" />
<styles>
<include src="file://{resources}/styles/main.scss" />
</styles>

<scripts>
<include src="file://{scripts}/pages/zoning/zoning.js" />
</scripts>

<snippets>
<snippet name="tracklist-track">
<Panel class="zoning__tracklist-track">
<Panel id="Entry" class="zoning__tracklist-course-entry">
<Button id="CollapseButton" class="zoning__collapse-button">
<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green" src="file://{images}/add.svg" />
<Image id="TracklistExpandIcon" class="button__icon zoning__collapse-icon zoning__icon-red hide" src="file://{images}/subtract.svg" />
</Button>
<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
<Label id="Name" class="zoning__tracklist-label" />
</RadioButton>
</Panel>
<Panel id="ChildContainer" class="full-width flow-down">
<Panel id="SegmentContainer" class="zoning__list-container" />
<Panel id="EndZoneContainer" class="zoning__list-container" />
</Panel>
</Panel>
</snippet>
<snippet name="tracklist-segment">
<Panel class="zoning__tracklist-segment">
<Panel id="Entry" class="zoning__tracklist-course-entry">
<Button id="CollapseButton" class="zoning__collapse-button">
<Image id="TracklistCollapseIcon" class="button__icon zoning__collapse-icon zoning__icon-green" src="file://{images}/add.svg" />
<Image id="TracklistExpandIcon" class="button__icon zoning__collapse-icon zoning__icon-red hide" src="file://{images}/subtract.svg" />
</Button>
<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
<Label id="Name" class="zoning__tracklist-label" />
</RadioButton>
</Panel>
<Panel id="ChildContainer" class="full-width flow-down">
<Panel id="CheckpointContainer" class="zoning__list-container" />
<Panel id="CancelContainer" class="zoning__list-container" />
</Panel>
</Panel>
</snippet>
<snippet name="tracklist-checkpoint">
<Panel class="zoning__tracklist-checkpoint">
<Panel id="Entry" class="zoning__tracklist-course-entry">
<RadioButton id="SelectButton" class="zoning__tracklist-button" group="tracklist">
<Label id="Name" class="zoning__tracklist-label" />
</RadioButton>
</Panel>
</Panel>
</snippet>
<snippet name="region-point">
<Panel class="zoning__region-property-container">
<!--label-->
<TextEntry id="PointX" class="textentry zoning__textentry" maxchars="6" textmode="numeric" />
<TextEntry id="PointY" class="textentry zoning__textentry" maxchars="6" textmode="numeric" />
<Button id="DeleteButton" class="zoning__region-point-delete">
<Image class="zoning__region-point-delete__icon" src="file://{images}/close-box-outline.svg" textureheight="24" />
</Button>
</Panel>
</snippet>
</snippets>

<Panel class="zoning" acceptsinput="true" acceptsfocus="true">
<Label id="TrackListLabel" class="zoning__header" text="#Zoning_TrackListLabel" />
<Panel id="TrackListContainer" class="zoning__menu-section">
<Panel id="TrackList" class="zoning__track-list">
<!-- Populated in js -->
</Panel>
</Panel>
<Panel class="zoning__button-box">
<Button id="NewZoneButton" class="button button--blue ml-2 horizontal-align-right" onactivate="ZoneMenu.showAddMenu()">
<Label class="button__text" text="#Zoning_New" />
</Button>
<Button class="button button--red ml-2 horizontal-align-right" onactivate="ZoneMenu.showDeletePopup()">
<Label class="button__text" text="#Zoning_Delete" />
</Button>
</Panel>
<Label id="PropertiesLabel" class="zoning__header" text="#Zoning_PropertiesLabel" />
<Panel id="PropertiesContainer" class="zoning__menu-section">
<Panel id="TrackProperties" class="zoning__property-container">
<Panel class="zoning__menu-separator">
<Panel id="MapMaxVelocity" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_MaxVelocity" />
<TextEntry id="MaxVelocity" class="textentry zoning__textentry" textmode="numeric" text="" ontextentrysubmit="ZoneMenu.setMaxVelocity()" />
</Panel>
<Panel id="StagesEndAtStageStarts" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_StagesEndAtStageStarts" />
<ToggleButton id="CheckBox" class="checkbox checkbox--right zoning__checkbox" onactivate="ZoneMenu.setStageEndAtStageStarts()" />
</Panel>
<Panel id="DefragFlags" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_DefragFlags" />
<Button id="DefragFlagsButton" class="button zoning__property-button" onactivate="ZoneMenu.showDefragFlagMenu()">
<Label class="button__text" text="#Zoning_DefragFlags_Edit" />
</Button>
</Panel>
</Panel>
</Panel>
<Panel id="SegmentProperties" class="zoning__property-container">
<Panel class="zoning__menu-separator">
<Panel id="LimitGroundSpeed" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_LimitGroundSpeed" />
<ToggleButton id="CheckBox" class="checkbox checkbox--right zoning__checkbox" onactivate="ZoneMenu.setLimitGroundSpeed()" />
</Panel>
<Panel id="CheckpointsRequired" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_CheckpointsRequired" />
<ToggleButton id="CheckBox" class="checkbox checkbox--right zoning__checkbox" onactivate="ZoneMenu.setCheckpointsRequired()" />
</Panel>
<Panel id="CheckpointsOrdered" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_CheckpointsOrdered" />
<ToggleButton id="CheckBox" class="checkbox checkbox--right zoning__checkbox" onactivate="ZoneMenu.setCheckpointsOrdered()" />
</Panel>
<Panel id="Name" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_Name" />
<TextEntry id="SegmentName" class="textentry zoning__textentry" maxchars="255" text="" ontextentrysubmit="ZoneMenu.setSegmentName()" />
</Panel>
</Panel>
</Panel>
<Panel id="ZoneProperties" class="zoning__property-container">
<Panel class="zoning__menu-separator">
<Panel id="Filter" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_Filter" />
<DropDown id="FilterSelect" class="dropdown zoning__dropdown" menuclass="dropdown-menu" onuserinputsubmit="ZoneMenu.updateZoneFilter()">
<Label text="#Zoning_Filter_None" value="0" />
<!-- Populated in js -->
</DropDown>
</Panel>
</Panel>
<Panel class="zoning__menu-separator">
<Panel id="Region" class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_Region" />
<Panel class="zoning__region-property-container">
<Button id="AddRegionButton" class="button button--blue zoning__property-button mr-2" onactivate="ZoneMenu.addRegion()" onmouseover="UiToolkitAPI.ShowTextTooltip('AddRegionButton', '#Zoning_CreateRegion_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
<Image class="button__icon" src="file://{images}/add.svg" />
</Button>
<Button id="DeleteRegionButton" class="button button--red zoning__property-button mr-2" onactivate="ZoneMenu.deleteRegion()" onmouseover="UiToolkitAPI.ShowTextTooltip('DeleteRegionButton', '#Zoning_DeleteRegion_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
<Image class="button__icon" src="file://{images}/delete.svg" />
</Button>
<DropDown id="RegionSelect" class="dropdown zoning__dropdown" menuclass="dropdown-menu" onuserinputsubmit="ZoneMenu.populateRegionProperties()">
<!-- Populated in js -->
</DropDown>
</Panel>
</Panel>
<Panel id="GridSlider" class="zoning__property">
<SettingsSlider text="#Zoning_GridSnapSize" class="zoning__slider" min="1" max="64" percentage="false" convar="mom_zone_grid" />
</Panel>
<Panel id="PropertyTabs" class="tabs">
<RadioButton group="ZoningRegion" class="tabs__tab" selected="true" onactivate="ZoneMenu.showRegionMenu('Points')" onmouseover="UiToolkitAPI.ShowTextTooltip('PropertyTabs', '#Zoning_RegionPoints_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
<Image src="file://{images}/vector-square-close.svg" class="tabs__icon" textureheight="48" />
</RadioButton>
<Panel class="tabs__gap" />
<RadioButton group="ZoningRegion" class="tabs__tab" onactivate="ZoneMenu.showRegionMenu('Properties')" onmouseover="UiToolkitAPI.ShowTextTooltip('PropertyTabs', '#Zoning_RegionProperties_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
<Image src="file://{images}/list-box-outline.svg" class="tabs__icon" textureheight="48" />
</RadioButton>
<Panel class="tabs__gap" />
<RadioButton group="ZoningRegion" class="tabs__tab" onactivate="ZoneMenu.showRegionMenu('Teleport')" onmouseover="UiToolkitAPI.ShowTextTooltip('PropertyTabs', '#Zoning_RegionTeleport_Tooltip');" onmouseout="UiToolkitAPI.HideTextTooltip();">
<Image src="file://{images}/ray-start-arrow.svg" class="tabs__icon" textureheight="48" />
</RadioButton>
</Panel>
<Panel id="PointsSection" class="zoning__region-details">
<Panel id="RegionPoints" class="zoning__property">
<Button class="button zoning__property-button" onactivate="ZoneMenu.pickCorners();">
<Label class="button__text" text="#Zoning_EditPoints" />
</Button>
</Panel>
<Panel id="PointsList" class="zoning__region-points-list">
<!-- Populated in JS -->
</Panel>
</Panel>
<Panel id="PropertiesSection" class="zoning__region-details">
<Panel class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_RegionDetails_Bottom" />
<Panel class="zoning__region-property-container">
<Button class="zoning__region-point-pick" onactivate="ZoneMenu.pickBottom()">
<Image class="zoning__region-point-pick__icon" src="file://{images}/adjust.svg" />
</Button>
<TextEntry id="RegionBottom" class="textentry zoning__textentry" maxchars="8" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionBottom()" />
</Panel>
</Panel>
<Panel class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_RegionDetails_Height" />
<Panel class="zoning__region-property-container">
<Button class="zoning__region-point-pick" onactivate="ZoneMenu.pickHeight()">
<Image class="zoning__region-point-pick__icon" src="file://{images}/adjust.svg" />
</Button>
<TextEntry id="RegionHeight" class="textentry zoning__textentry" maxchars="8" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionHeight()" />
</Panel>
</Panel>
<Panel class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_RegionDetails_SafeHeight" />
<Panel class="zoning__region-property-container">
<Button class="zoning__region-point-pick" onactivate="ZoneMenu.pickSafeHeight()">
<Image class="zoning__region-point-pick__icon" src="file://{images}/adjust.svg" />
</Button>
<TextEntry id="RegionSafeHeight" class="textentry zoning__textentry" maxchars="8" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionSafeHeight()" />
</Panel>
</Panel>
</Panel>
<Panel id="TeleportSection" class="zoning__region-details">
<Panel class="zoning__property">
<Label class="zoning__property-label" text="#Zoning_RegionDetails_TPDest" />
<DropDown id="RegionTPDest" class="dropdown zoning__dropdown" menuclass="dropdown-menu" onuserinputsubmit="ZoneMenu.updateRegionTPDest()">
<!-- Populated in js -->
<Label text="#Zoning_TPDest_None" value="0" />
<Label text="#Zoning_TPDest_MakeNew" value="1" />
</DropDown>
</Panel>
<Panel class="zoning__property">
<Label id="Position" class="zoning__property-label" text="#Zoning_TPDest_Position" />
<Panel class="zoning__region-property-container">
<Button id="TelePosPick" class="zoning__region-point-pick" onactivate="ZoneMenu.pickTeleDestPos()">
<Image class="zoning__region-point-pick__icon" src="file://{images}/adjust.svg" />
</Button>
<TextEntry id="TeleX" class="textentry zoning__textentry" maxchars="6" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionTeleDestOrientation()" />
<TextEntry id="TeleY" class="textentry zoning__textentry" maxchars="6" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionTeleDestOrientation()" />
<TextEntry id="TeleZ" class="textentry zoning__textentry" maxchars="6" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionTeleDestOrientation()" />
</Panel>
</Panel>
<Panel class="zoning__property">
<Label id="Yaw" class="zoning__property-label" text="#Zoning_TPDest_Yaw" />
<Panel class="zoning__region-property-container">
<Button id="TeleYawPick" class="zoning__region-point-pick" onactivate="ZoneMenu.pickTeleDestYaw()">
<Image class="zoning__region-point-pick__icon" src="file://{images}/adjust.svg" />
</Button>
<TextEntry id="TeleYaw" class="textentry zoning__textentry" maxchars="6" textmode="numeric" ontextentrysubmit="ZoneMenu.setRegionTeleDestOrientation()" />
</Panel>
</Panel>
</Panel>
</Panel>
</Panel>
</Panel>
<Panel class="zoning__button-box">
<Button class="button button--blue ml-2 horizontal-align-right" onactivate="ZoneMenu.saveZones()">
<Label class="button__text" text="#Zoning_Save" />
</Button>
<Button class="button ml-2 horizontal-align-right" onactivate="ZoneMenu.cancelEdit()">
<Label class="button__text" text="#Zoning_CancelEdit" />
</Button>
</Panel>
</Panel>
</root>
Loading
Loading