Port to TypeScript + 0.10.0 Gamemode Changes

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 npx lint-staged

eslint.config.mjs

@@ -0,0 +1,117 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import unicorn from 'eslint-plugin-unicorn';
+import prettiereslint from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+
+export default [
+	{
+		ignores: [
+			'eslint.config.mjs',
+			'**/node_modules',
+			'**/__types_momentum.js',
+			'**/tools',
+			'**/script_dist',
+			'scripts/types'
+		]
+	},
+	eslint.configs.recommended,
+	...tseslint.configs.recommended,
+	unicorn.configs['flat/recommended'],
+	prettiereslint,
+	{
+		languageOptions: {
+			ecmaVersion: 5,
+			sourceType: 'module',
+			globals: globals.builtin,
+			parserOptions: {
+				project: 'tsconfig.json'
+			}
+		},
+		rules: {
+			'prettier/prettier': ['warn'],
+			quotes: ['error', 'single', { avoidEscape: true }],
+			'prefer-const': ['error'],
+			'no-empty': ['error', { allowEmptyCatch: true }],
+			camelcase: ['off'], // Annoying for some types and keys used in various data structures. Just yell at people!
+			eqeqeq: ['error', 'smart'],
+			'no-var': ['error'],
+			'no-useless-constructor': ['error'],
+			'no-unused-expressions': ['error', { allowTernary: true }],
+			'prefer-arrow-callback': ['error'],
+			'no-unused-vars': ['off'],
+			'@typescript-eslint/no-unused-vars': ['off'],
+			'@typescript-eslint/no-empty-function': ['error', { allow: ['arrowFunctions'] }],
+			// Used by ambient TS files
+			'@typescript-eslint/triple-slash-reference': ['off'],
+			// Yells at us for panel interfaces that are important
+			'@typescript-eslint/no-empty-object-type': ['off'],
+			'@typescript-eslint/naming-convention': [
+				'error',
+				{
+					selector: 'variable',
+					types: ['boolean', 'string', 'number'],
+					modifiers: ['global'],
+					format: ['UPPER_CASE']
+				},
+				{
+					selector: 'variable',
+					types: ['boolean', 'string', 'number'],
+					modifiers: ['exported'],
+					format: ['strictCamelCase', 'UPPER_CASE']
+				},
+				{
+					selector: 'class',
+					format: ['PascalCase']
+				},
+				{
+					selector: 'enumMember',
+					format: ['UPPER_CASE']
+				},
+				{
+					selector: 'typeParameter',
+					format: ['PascalCase']
+				},
+				{
+					selector: 'interface',
+					format: ['PascalCase'],
+					custom: { regex: '^I[A-Z]', match: false }
+				}
+			],
+			// We don't need to be that petty about using types well in a repo like this.
+			'@typescript-eslint/explicit-function-return-type': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
+			'@typescript-eslint/no-inferrable-types': ['warn', { ignoreParameters: true }],
+			// I'd love to use this but too annoying a refactor, some C++ APIs look like they use `null`.
+			'unicorn/no-null': ['off'],
+			// Way too sensitive. Most cases it catches are silly, and bad naming is easy to flag in review.
+			'unicorn/prevent-abbreviations': ['off'],
+			// Not going to make devs use obscure JS syntax for something so minor.
+			'unicorn/numeric-separators-style': ['warn', { onlyIfContainsSeparator: true }],
+			// Our JS modules implementation doesn't support top level await.
+			'unicorn/prefer-top-level-await': ['off'],
+			// Even though unicorn has a rule for no nested ternaries, it's insisting I make them due to this rule.
+			'unicorn/prefer-ternary': ['error', 'only-single-line'],
+			// Better parity with other languages, we use `1 << 0` frequently next to other shifts when defining bitflags.
+			'unicorn/prefer-math-trunc': ['off'],
+			// Why???
+			'unicorn/switch-case-braces': ['off'],
+			// Fuck you I wanna
+			'unicorn/no-abusive-eslint-disable': ['off'],
+			// Terrible rule, it's often practically useful to explicitly state what's happening in cases
+			'unicorn/no-useless-switch-case': ['off'],
+			// In certain cases this matters, but often completely redundant as V8 optimises it fine.
+			// Worth flagging potential cases in code review, but annoying as a linting rule
+			'unicorn/consistent-function-scoping': ['off'],
+			// This is an annoying rule. Often you want to handle negated a condition first as some edge-case.
+			'unicorn/no-negated-condition': ['off'],
+			// Often clearer using .forEach. Also it's not usually a perf benefit, V8 optimises somehow.
+			'unicorn/no-array-for-each': ['off'],
+			// False positives (we don't use node!)
+			'unicorn/prefer-node-protocol': 'off',
+			// Math.hypot is slower than Math.sqrt in V8
+			// https://stackoverflow.com/questions/71898044/why-is-math-hypot-so-slow
+			'unicorn/prefer-modern-math-apis': 'off'
+		}
+	}
+];

layout/components/chat.xml

@@ -19,7 +19,7 @@
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
 	<scripts>
-		<include src="file://{scripts}/components/chat.js" />
+		<include type="module" src="file://{scripts}/components/chat.js" />
 	</scripts>
 
 	<snippets>
@@ -50,7 +50,7 @@
 			<Label id="ChatMemberTypingLabel" class="chat__member-typing" text=" " />
 		</ConVarEnabler>
 		<Panel class="chat__input-container">
-			<TextEntry id="ChatInput" class="chat__elem chat__input" oninputsubmit="Chat.submitText()" maxchars="127" clearaftersubmit="true" />
+			<TextEntry id="ChatInput" class="chat__elem chat__input" oninputsubmit="ChatHandler.submitText()" maxchars="127" clearaftersubmit="true" />
 			<Button class="chat__elem chat__send" onactivate="$('#ChatInput').Submit()">
 				<Label class="button__text chat__send-text" text="#Chat_Send" />
 			</Button>

layout/components/color-display.xml

@@ -2,12 +2,14 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
+
 	<scripts>
-		<include src="file://{scripts}/components/color-display.js" />
+		<include type="module" src="file://{scripts}/components/color-display.js" />
 	</scripts>
-	<Panel class="colordisplay" onload="ColorDisplay.updateDisplayOpacity();">
+
+	<Panel class="colordisplay" onload="ColorDisplayHandler.onLoad()">
 		<Label id="Title" class="colordisplay__title" />
-		<Panel id="Display" class="colordisplay__display" onactivate="ColorDisplay.showPopup()" acceptsinput="true" />
+		<Panel id="Display" class="colordisplay__display" onactivate="ColorDisplayHandler.showPopup()" acceptsinput="true" />
 		<TextEntry id="Hex" class="textentry colordisplay__hexentry" textmode="hex" maxchars="8" />
 	</Panel>
 </root>

layout/components/color-picker.xml

@@ -2,9 +2,11 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
+
 	<scripts>
-		<include src="file://{scripts}/components/color-picker.js" />
+		<include type="module" src="file://{scripts}/components/color-picker.js" />
 	</scripts>
+
 	<snippets>
 		<snippet name="color-plane-indicator">
 			<Panel class="color-plane-indicator" />
@@ -13,11 +15,10 @@
 			<Panel class="color-axis-indicator" />
 		</snippet>
 	</snippets>
+
 	<Panel class="colorpicker">
 		<ColorPickerPlane id="ColorPlane" class="colorpicker__plane" />
-
 		<ColorPickerAxis id="ColorAxis" class="colorpicker__axis" />
-
 		<ColorPickerAlphaAxis id="AlphaAxis" class="colorpicker__axis" />
 
 		<Panel class="colorpicker__right">
@@ -50,18 +51,18 @@
 				<NumberEntry id="AlphaChannel" class="colorpicker__numberentry" max="255" />
 			</Panel>
 			<Panel class="colorpicker__entry colorpicker__right-item">
-				<Label id="ColorPickerLabel" class="colorpicker__label" onload="$('#ColorPickerLabel').SetProceduralTextThatIPromiseIsLocalizedAndEscaped('#', false)" />
+				<Label id="ColorPickerLabel" class="colorpicker__label" />
 				<TextEntry id="HexColor" textmode="hex" maxchars="8" class="textentry colorpicker__textentry" />
 			</Panel>
 			<Panel class="colorpicker__entry colorpicker__right-item">
 				<Panel id="CurrentColorTarget" class="colorpicker__color-target mr-1" />
 				<Panel id="LastColorTarget" class="colorpicker__color-target ml-1" acceptsinput="true" acceptsfocus="true" />
 			</Panel>
 			<Panel class="flow-right colorpicker__right-item">
-				<Button class="button button--green colorpicker__action-button mr-1" onactivate="ColorPicker.onSave()">
+				<Button class="button button--green colorpicker__action-button mr-1" onactivate="ColorPickerHandler.onSave()">
 					<Label class="button__text" text="#Common_Save" />
 				</Button>
-				<Button class="button button--red colorpicker__action-button ml-1" onactivate="ColorPicker.onCancel()">
+				<Button class="button button--red colorpicker__action-button ml-1" onactivate="ColorPickerHandler.onCancel()">
 					<Label class="button__text" text="#Common_Cancel" />
 				</Button>
 			</Panel>

layout/components/graphs/line-graph.xml

@@ -4,7 +4,7 @@
 	</styles>
 
 	<scripts>
-		<include src="file://{scripts}/components/graphs/line-graph.js" />
+		<include type="module" src="file://{scripts}/components/graphs/line-graph.js" />
 	</scripts>
 
 	<snippets>

layout/components/level-indicator.xml

@@ -2,11 +2,12 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
+
 	<scripts>
-		<include src="file://{scripts}/components/level-indicator.js" />
+		<include type="module" src="file://{scripts}/components/level-indicator.js" />
 	</scripts>
 
-	<Panel class="levelindicator" onload="LevelIndicator.onLoad()">
+	<Panel class="levelindicator">
 		<Panel id="Container" class="levelindicator__container">
 			<Image id="PrestigeIcon" class="levelindicator__icon" src="" textureheight="32" />
 			<Label class="levelindicator__text" text="{d:level}" />

layout/components/player-card.xml

@@ -2,11 +2,12 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
+
 	<scripts>
-		<include src="file://{scripts}/components/player-card.js" />
+		<include type="module" src="file://{scripts}/components/player-card.js" />
 	</scripts>
 
-	<Panel class="playercard" onload="PlayerCard.onLoad()">
+	<Panel class="playercard">
 		<Image class="playercard__background-image" src="file://{images}/playercards/card_bg.png" scaling="stretch-to-cover-preserve-aspect" />
 		<!-- <Panel class="playercard__black-overlay" /> 50% opacity black overlay to make the white text readable -->
 		<Panel class="playercard__main">

layout/components/range-color-display.xml

@@ -2,13 +2,15 @@
 	<styles>
 		<include src="file://{resources}/styles/main.scss" />
 	</styles>
+
 	<scripts>
-		<include src="file://{scripts}/components/range-color-display.js" />
+		<include type="module" src="file://{scripts}/components/range-color-display.js" />
 	</scripts>
+
 	<Panel class="rangecolordisplay">
 		<TextEntry id="MinEntry" textmode="numeric" maxchars="8" class="textentry rangecolordisplay__minentry" />
 		<Image class="rangecolordisplay__arrowicon" src="file://{images}/arrow-thick-right.svg" orientation="180" textureheight="32" />
 		<TextEntry id="MaxEntry" textmode="numeric" maxchars="8" class="textentry rangecolordisplay__maxentry" />
-		<ColorDisplay id="ColorDisplay" class="rangecolordisplay__display" oncolorchange="RangeColorDisplay.onColorChange();" />
+		<ColorDisplay id="ColorDisplay" class="rangecolordisplay__display" oncolorchange="RangeColorDisplayHandler.onColorChange();" />
 	</Panel>
 </root>

layout/components/split.xml

@@ -4,10 +4,10 @@
 	</styles>
 
 	<scripts>
-		<include src="file://{scripts}/components/split.js" />
+		<include type="module" src="file://{scripts}/components/split.js" />
 	</scripts>
 
-	<Panel class="split" onload="Split.onLoad()">
+	<Panel class="split">
 		<Panel class="split__left">
 			<Label id="Name" class="split__name" text="{s:name}" />
 			<Panel class="split__diff-container">