Upgrades

.gitignore

@@ -2,7 +2,6 @@ node_modules
 
 /content/panorama/scripts/custom_game/**/*.js
 /game/scripts/vscripts/**/*.lua
-!/game/scripts/vscripts/lib/timers.lua
 
 # Dota 2 stuff
 *.bin

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "css.lint.unknownProperties": "ignore"
+}

README.md

@@ -1,6 +1,10 @@
 # ModDota template
 
-A template for Dota 2 Custom Games built with modern technologies. It includes
+A template for Dota 2 Custom Games built with modern technologies.
+
+[This tutorial](https://moddota.com/scripting/Typescript/typescript-introduction/) explains how to set up and use the template.
+
+The template includes:
 
 - [TypeScript for Panorama](https://moddota.com/panorama/introduction-to-panorama-ui-with-typescript)
 - [TypeScript for VScripts](https://typescripttolua.github.io/)
@@ -15,6 +19,21 @@ A template for Dota 2 Custom Games built with modern technologies. It includes
 
 After that you can press `Ctrl+Shift+B` in VSCode or run `npm run dev` command in terminal to compile your code and watch for changes.
 
+## Contents:
+
+* **[src/common]:** TypeScript .d.ts type declaration files with types that can be shared between Panorama and VScripts
+* **[src/vscripts]:** TypeScript code for Dota addon (Lua) vscripts. Compiles lua to game/scripts/vscripts.
+* **[src/panorama]:** TypeScript code for panorama UI. Compiles js to content/panorama/scripts/custom_game
+
+--
+
+* **[game/*]:** Dota game directory containing files such as npc kv files and compiled lua scripts.
+* **[content/*]:** Dota content directory containing panorama sources other than scripts (xml, css, compiled js)
+
+--
+
+* **[scripts/*]:** Repository installation scripts
+
 ## Continuous Integration
 
 This template includes a [GitHub Actions](https://github.com/features/actions) [workflow](.github/workflows/ci.yml) that builds your custom game on every commit and fails when there are type errors.

content/panorama/layout/custom_game/hud.xml

@@ -1,15 +1,31 @@
 <root>
     <scripts>
+        <!-- Included JS script files go here -->
         <include src="file://{resources}/scripts/custom_game/hud.js" />
     </scripts>
+
     <styles>
+        <!-- Included css style files go here -->
         <include src="s2r://panorama/styles/dotastyles.css" />
         <include src="file://{resources}/styles/custom_game/hud.css" />
     </styles>
-    <snippets>
 
+    <snippets>
+        <!-- Snippets go here -->
     </snippets>
+
     <Panel hittest="false" class="MainHud">
+        <Panel id="ExamplePanel">
+
+            <Image id="BannerImage" src="file://{resources}/images/custom_game/tstl.png" />
+
+            <Label class="ExampleTitle" text="TypeScript Dota Addon template" />
+
+            <Label class="ExampleParagraph" text="This is an example text box! Close it to apply the 'panic' modifier to your hero. You can remove this panel in content/panorama/layout/custom_game/hud.xml" />
 
+            <Button id="CloseButton" onactivate="OnCloseButtonClicked()">
+                <Label text="Close" />
+            </Button>
+        </Panel>
     </Panel>
 </root>

content/panorama/styles/custom_game/hud.css

@@ -2,3 +2,57 @@
     width: 100%;
     height: 100%;
 }
+
+#ExamplePanel {
+    width: 500px;
+    height: 500px;
+    /* Using a background image already in dota */
+    background-image: url("s2r://panorama/images/compendium/international2020/compendium/dashboard_panel_bg_psd.vtex");
+
+    horizontal-align: center;
+    vertical-align: center;
+}
+
+#ExamplePanel #BannerImage {
+    width: 200px;
+    height: 200px;
+    horizontal-align: center;
+    y: 40px;
+}
+
+#ExamplePanel .ExampleTitle {
+    horizontal-align: center;
+    font-size: 30px;
+    y: 260px;
+}
+
+#ExamplePanel .ExampleParagraph {
+    y: 320px;
+    margin-left: 30px;
+    margin-right: 30px;
+}
+
+#ExamplePanel #CloseButton {
+    width: 100px;
+    height: 50px;
+    background-color: rgb(228, 228, 228);
+    horizontal-align: center;
+    vertical-align: bottom;
+    y: -30px;
+}
+
+#ExamplePanel #CloseButton Label {
+    horizontal-align: center;
+    vertical-align: center;
+    color: black;
+}
+
+#ExamplePanel #CloseButton:hover {
+    background-color: rgb(0, 135, 245);
+}
+
+#ExamplePanel #CloseButton:hover Label {
+    color: white;
+}
+
+