Pano zoning UI #133

PeenScreeker · 2024-07-25T02:23:51Z

This PR implements an in-game zoning tool to replace the previous VGUI implementation. The new UI is based on the zone definition refactor to be released with version 0.10 of Momentum Mod.

Depends on red change before merging.

Checks

I have thoroughly tested all of the code I have modified/added/removed to ensure something else did not break
I have followed semantic commit messages e.g. feat: Add foo, chore: Update bar, etc...
My branch has a clear history of changes that can be easy to follow when being reviewed commit-by-commit
My branch is functionally complete; the only changes to be done will be those potentially requested in code review
All changes requested in review have been fixuped into my original commits.
Fully tokenized all my strings (no hardcoded English strings!!) and supplied bulk JSON strings below

POEditor JSON Strings (if needed)

[
    {
        "term": "#Zoning_ShowMenu_Tooltip",
        "definition": "Show zoning menu"
    },
    {
        "term": "#Zoning_HideMenu_Tooltip",
        "definition": "Hide zoning menu"
    },
    {
        "term": "#Zoning_DFFlags_Haste",
        "definition": "Haste"
    },
    {
        "term": "#Zoning_DFFlags_Slick",
        "definition": "Slick"
    },
    {
        "term": "#Zoning_DFFlags_DamageBoost",
        "definition": "Damage Boost"
    },
    {
        "term": "#Zoning_DFFlags_Rockets",
        "definition": "Rockets"
    },
    {
        "term": "#Zoning_DFFlags_Plasma",
        "definition": "Plasma"
    },
    {
        "term": "#Zoning_DFFlags_BFG",
        "definition": "BFG"
    },
    {
        "term": "#Zoning_TrackListLabel",
        "definition": "Track List"
    },
    {
        "term": "#Zoning_New",
        "definition": "New"
    },
    {
        "term": "#Zoning_Delete",
        "definition": "Delete"
    },
    {
        "term": "#Zoning_PropertiesLabel",
        "definition": "Properties"
    },
    {
        "term": "#Zoning_MaxVelocity",
        "definition": "Max Velocity (Map-wide)"
    },
    {
        "term": "#Zoning_StagesEndAtStageStarts",
        "definition": "End segments at next segment start"
    },
    {
        "term": "#Zoning_DefragFlags",
        "definition": "Defrag bonus settings"
    },
    {
        "term": "#Zoning_DefragFlags_Edit",
        "definition": "Edit flags"
    },
    {
        "term": "#Zoning_LimitGroundSpeed",
        "definition": "Limit ground speed"
    },
    {
        "term": "#Zoning_CheckpointsRequired",
        "definition": "Checkpoints required"
    },
    {
        "term": "#Zoning_CheckpointsOrdered",
        "definition": "Checkpoints ordered"
    },
    {
        "term": "#Zoning_Name",
        "definition": "Segment name"
    },
    {
        "term": "#Zoning_Filter",
        "definition": "Zone filter"
    },
    {
        "term": "#Zoning_Filter_None",
        "definition": "No filter"
    },
    {
        "term": "#Zoning_Region",
        "definition": "Region"
    },
    {
        "term": "#Zoning_CreateRegion_Tooltip",
        "definition": "Add new region to this zone"
    },
    {
        "term": "#Zoning_DeleteRegion_Tooltip",
        "definition": "Delete the selected region"
    },
    {
        "term": "#Zoning_GridSnapSize",
        "definition": "Grid snap (default 8)"
    },
    {
        "term": "#Zoning_RegionPoints_Tooltip",
        "definition": "Edit region corners"
    },
    {
        "term": "#Zoning_RegionProperties_Tooltip",
        "definition": "Edit region properties"
    },
    {
        "term": "#Zoning_RegionTeleport_Tooltip",
        "definition": "Edit region teleport destination"
    },
    {
        "term": "#Zoning_EditPoints",
        "definition": "Pick points"
    },
    {
        "term": "#Zoning_RegionDetails_Bottom",
        "definition": "Bottom"
    },
    {
        "term": "#Zoning_RegionDetails_Height",
        "definition": "Height"
    },
    {
        "term": "#Zoning_RegionDetails_SafeHeight",
        "definition": "Safe height"
    },
    {
        "term": "#Zoning_RegionDetails_TPDest",
        "definition": "Teleport destination"
    },
    {
        "term": "#Zoning_TPDest_None",
        "definition": "No target"
    },
    {
        "term": "#Zoning_TPDest_MakeNew",
        "definition": "Specify new"
    },
    {
        "term": "#Zoning_TPDest_Position",
        "definition": "Position"
    },
    {
        "term": "#Zoning_TPDest_Yaw",
        "definition": "Yaw"
    },
    {
        "term": "#Zoning_Save",
        "definition": "Save zones"
    },
    {
        "term": "#Zoning_CancelEdit",
        "definition": "Cancel edit"
    },
    {
        "term": "#Zoning_Bonus",
        "definition": "Bonus"
    },
    {
        "term": "#Zoning_Segment",
        "definition": "Segment"
    },
    {
        "term": "#Zoning_EndZone",
        "definition": "End zone"
    },
    {
        "term": "#Zoning_CancelZone",
        "definition": "Cancel"
    },
    {
        "term": "#Zoning_Start_Track",
        "definition": "Start zone"
    },
    {
        "term": "#Zoning_Start_Stage",
        "definition": "Stage start"
    },
    {
        "term": "#Zoning_Delete_Message",
        "definition": "Delete selection"
    },
    {
        "term": "#Zoning_Cancel",
        "definition": "Cancel"
    }
]

scripts/pages/zoning/zoning.ts

tsa96

Lot of nits and small TypeScript things, sorry to be annoying. Generally, you shouldn't need to cast at all as much as you're doing. We should probably turn off strict mode in the future anyway, but to assert that something is non-null to make TS happy, use ! instead of casting T | null to T.

Haven't read everything in detail yet, wanted to do a first pass tonight . I'll try stuff out in-game and give some UI/UX comments tomorrow.

Great work getting this in!

tsa96 · 2024-08-01T02:05:18Z

layout/hud/tab-menu.xml

+				<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();">


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

no, this is kind of tech debt.

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.

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.

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

layout/pages/zoning/zoning.xml

scripts/pages/zoning/zoning.ts

tsa96 · 2024-08-01T03:17:14Z

scripts/pages/zoning/zoning.ts

+			//@ts-expect-error property must be optional
+			delete region.teleDestPos;


scripts/pages/zoning/zoning.ts

tsa96 · 2024-08-01T03:29:10Z

Don't think we should be merging this into master btw, 0.10 branch is fine.

PeenScreeker

took a first pass at these comments. Still got a few to address

PeenScreeker · 2024-08-02T02:55:15Z

layout/hud/tab-menu.xml

+				<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();">


no, this is kind of tech debt.

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.

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.

layout/pages/zoning/zoning.xml

PeenScreeker · 2024-08-02T03:22:55Z

scripts/pages/zoning/zoning.ts

+		}
+
+		const selectButton = newTracklistPanel.FindChildTraverse('SelectButton') as Panel;
+		if (selectButton && object) {


nope, it's always defined. fixed

scripts/pages/zoning/zoning.ts

PeenScreeker · 2024-08-02T03:37:05Z

scripts/pages/zoning/zoning.ts

+			const expandIcon = newTracklistPanel.FindChildTraverse('TracklistExpandIcon') as Panel;
+			const collapseIcon = newTracklistPanel.FindChildTraverse('TracklistCollapseIcon') as Panel;


scripts/pages/zoning/zoning.ts

layout/pages/zoning/zoning.xml

scripts/pages/zoning/zoning.ts

PeenScreeker · 2024-08-02T04:44:02Z

scripts/pages/zoning/zoning.ts

+		if (teleDestIndex === 0) {
+			// no teleport destination for this region
+			region.teleDestTargetname = '';
+			//@ts-expect-error property must be optional


I don't understand this comment, let's chat about it

scripts/pages/zoning/zoning.ts

PeenScreeker · 2024-08-14T06:12:20Z

finally pushed the changes I made while flying over the weekend. This includes the margin and alignment changes we discussed

tsa96 · 2024-08-08T15:17:00Z

layout/hud/tab-menu.xml

+				<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();">


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

tsa96 · 2024-08-08T15:17:30Z

layout/modals/context-menus/zoning-df-flags.xml

+            </ToggleButton>
+		</Panel>
+	</ContextMenuCustomLayout>
+</root>


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

tsa96 · 2024-08-08T15:19:12Z

scripts/pages/zoning/zoning.ts

+		expandIcon.SetHasClass('hide', !shouldExpand);
+		collapseIcon.SetHasClass('hide', shouldExpand);
+		const parent = container.GetParent();
+		if (parent && parent.HasClass('zoning__tracklist-segment')) {


parent?.HasClass

tsa96 reviewed Jul 25, 2024

View reviewed changes

scripts/pages/zoning/zoning.ts Outdated Show resolved Hide resolved

PeenScreeker force-pushed the feat/zone-menu branch 4 times, most recently from 10b1ecf to 368b5f7 Compare July 27, 2024 20:10

PeenScreeker marked this pull request as ready for review July 27, 2024 20:12

PeenScreeker changed the title ~~DRAFT: Pano zoning UI~~ Pano zoning UI Jul 27, 2024

PeenScreeker force-pushed the feat/zone-menu branch 5 times, most recently from 553c9d0 to f456304 Compare August 1, 2024 01:11

tsa96 requested changes Aug 1, 2024

View reviewed changes

PeenScreeker changed the base branch from master to feat/mom-0.10 August 2, 2024 02:47

PeenScreeker force-pushed the feat/zone-menu branch 2 times, most recently from e2835f6 to 4514331 Compare August 2, 2024 05:23

PeenScreeker commented Aug 2, 2024

View reviewed changes

PeenScreeker force-pushed the feat/zone-menu branch 8 times, most recently from 523e959 to 48b839b Compare August 9, 2024 03:05

PeenScreeker added 3 commits August 9, 2024 18:34

feat: add Zoning UI frame

10fc7aa

feat: add track properties to Zoning UI

7dd643d

feat: add segment properties to Zoning UI

651e94e

PeenScreeker force-pushed the feat/zone-menu branch from 48b839b to c71f52d Compare August 14, 2024 06:10

PeenScreeker added 3 commits August 15, 2024 00:01

feat: add zone & region properties to Zoning UI

32da6d9

feat: add and delete new zones

681f4d2

feat: move momentum zone types out of types repo

bcdbd22

PeenScreeker force-pushed the feat/zone-menu branch from c71f52d to bcdbd22 Compare August 15, 2024 04:06

tsa96 approved these changes Aug 15, 2024

View reviewed changes

tsa96 merged commit 5f01add into feat/mom-0.10 Aug 15, 2024
1 check passed

tsa96 deleted the feat/zone-menu branch August 15, 2024 21:09

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pano zoning UI #133

Pano zoning UI #133

PeenScreeker commented Jul 25, 2024 •

edited

Loading

tsa96 left a comment

tsa96 Aug 1, 2024

PeenScreeker Aug 2, 2024

tsa96 Aug 8, 2024

tsa96 Aug 1, 2024

tsa96 commented Aug 1, 2024

PeenScreeker left a comment

PeenScreeker Aug 2, 2024

PeenScreeker Aug 2, 2024

PeenScreeker Aug 2, 2024

PeenScreeker Aug 2, 2024

PeenScreeker commented Aug 14, 2024

tsa96 Aug 8, 2024

tsa96 Aug 8, 2024

tsa96 Aug 8, 2024

		//@ts-expect-error property must be optional
		delete region.teleDestPos;

		const expandIcon = newTracklistPanel.FindChildTraverse('TracklistExpandIcon') as Panel;
		const collapseIcon = newTracklistPanel.FindChildTraverse('TracklistCollapseIcon') as Panel;

Pano zoning UI #133

Pano zoning UI #133

Conversation

PeenScreeker commented Jul 25, 2024 • edited Loading

Checks

POEditor JSON Strings (if needed)

tsa96 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tsa96 commented Aug 1, 2024

PeenScreeker left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PeenScreeker commented Aug 14, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

PeenScreeker commented Jul 25, 2024 •

edited

Loading