Scripts to automate tgui building on Windows and refactoring of 'src'…

… folder

	- Batch files for installing the required dependencies and building the assets.
	- When building assets create a 'generated' folder and put all files for each project in that folder.
	- Add 'generated' to gitignore.
	- Modifications to gulp script to use generated folder.

.gitignore

@@ -9,4 +9,5 @@
 *.lk
 *.int
 *.backup
-*.int
+*.int
+/tgui/generated

tgui/build_assets.bat

@@ -0,0 +1,9 @@
+@echo off
+REM This assumes you have NPM installed
+if not exist generated mkdir generated
+del /S /Q generated\*.*
+for /D %%i in (src\*.*) do xcopy /S /Y "%%i\*.*" "generated\*.*"
+if not exist generated\images mkdir generated\images
+for /D %%i in (images\*.*) do xcopy /S /Y "%%i\*.*" "generated\images\*.*"
+cmd /c gulp --min
+pause

tgui/gulp/tasks/css.js

@@ -1,7 +1,7 @@
 import * as f from '../flags'
 import { gulp as g, postcss as s } from '../plugins'
 
-const dir = 'src'
+const dir = 'generated'
 const entry = 'tgui.styl'
 const out = 'assets'
 

tgui/gulp/tasks/js.js

@@ -1,7 +1,7 @@
 import * as f from '../flags'
 import { browserify as b, gulp as g } from '../plugins'
 
-const dir = 'src'
+const dir = 'generated'
 const entry = 'tgui.js'
 const out = 'assets'
 

tgui/install_dependencies.bat

@@ -0,0 +1,14 @@
+@echo off
+echo This assumes you have NodeJS with NPM installed.
+echo If this script fails due to permission or other I/O errors, try running it again first.
+echo If you don't have the right tools installed you can close this window. If you want to continue, press the any key.
+echo Note that this script may warn about an unsupported dependency. You can safely ignore this warning.
+REM Install GULP globally
+cmd /c npm install gulp-cli -g
+REM Install local dependencies
+cmd /c npm install
+REM Remove old dependencies
+cmd /c npm prune
+REM Flatten the tree
+cmd /c npm dedupe
+pause

tgui/src/components/bar.ract → tgui/src/_tgstation/components/bar.ract

@@ -1,16 +1,16 @@
-<script>
-component.exports = {
-  oninit: function () {
-    this.observe('value', (newkey, oldkey, keypath) => {
-      const { min, max } = this.get()
-      const value = Math.clamp(min, max, newkey)
-      this.animate('percentage', Math.round((value - min) / (max - min) * 100))
-    })
-  }
-}
-</script>
-
-<div class='bar'>
-  <div class='barFill {{state}}' style='width: {{percentage}}%'></div>
-  <span class='barText'>{{yield}}</span>
-</div>
+<script>
+component.exports = {
+  oninit: function () {
+    this.observe('value', (newkey, oldkey, keypath) => {
+      const { min, max } = this.get()
+      const value = Math.clamp(min, max, newkey)
+      this.animate('percentage', Math.round((value - min) / (max - min) * 100))
+    })
+  }
+}
+</script>
+
+<div class='bar'>
+  <div class='barFill {{state}}' style='width: {{percentage}}%'></div>
+  <span class='barText'>{{yield}}</span>
+</div>

tgui/src/components/button.ract → tgui/src/_tgstation/components/button.ract

@@ -1,50 +1,50 @@
-<script>
-import { UI_INTERACTIVE } from 'util/constants'
-import { act } from 'util/byond'
-
-component.exports = {
-  computed: {
-    clickable: function () {
-      if (this.get('enabled') && !this.get('state')) {
-        return true
-      }
-      return false
-    },
-    enabled: function () {
-      if (this.get('config.status') === UI_INTERACTIVE) {
-        return true
-      }
-      return false
-    },
-    styles: function () {
-      const state = this.get('state'), style = this.get('style')
-      if (this.get('enabled')) {
-        if (!state) {
-          return `active normal ${[style]}`
-        } else {
-          return `inactive ${state}`
-        }
-      } else {
-        return 'inactive disabled'
-      }
-    }
-  },
-  oninit: function () {
-    this.on('press', (event) => {
-      const { action, params } = this.get()
-      act(this.get('config.ref'), action, params)
-      event.node.blur()
-    })
-  }
-}
-</script>
-
-<span class='button {{styles}} {{#grid}}gridable{{/}}'
-  unselectable='on'
-  {{#clickable}}tabindex='0'{{/}}
-  on-click-enter='{{#clickable}}press{{/}}'>
-  {{#if icon}}
-    <i class='fa fa-{{icon}}'></i>
-  {{/if}}
-  {{yield}}
-</span>
+<script>
+import { UI_INTERACTIVE } from 'util/constants'
+import { act } from 'util/byond'
+
+component.exports = {
+  computed: {
+    clickable: function () {
+      if (this.get('enabled') && !this.get('state')) {
+        return true
+      }
+      return false
+    },
+    enabled: function () {
+      if (this.get('config.status') === UI_INTERACTIVE) {
+        return true
+      }
+      return false
+    },
+    styles: function () {
+      const state = this.get('state'), style = this.get('style')
+      if (this.get('enabled')) {
+        if (!state) {
+          return `active normal ${[style]}`
+        } else {
+          return `inactive ${state}`
+        }
+      } else {
+        return 'inactive disabled'
+      }
+    }
+  },
+  oninit: function () {
+    this.on('press', (event) => {
+      const { action, params } = this.get()
+      act(this.get('config.ref'), action, params)
+      event.node.blur()
+    })
+  }
+}
+</script>
+
+<span class='button {{styles}} {{#grid}}gridable{{/}}'
+  unselectable='on'
+  {{#clickable}}tabindex='0'{{/}}
+  on-click-enter='{{#clickable}}press{{/}}'>
+  {{#if icon}}
+    <i class='fa fa-{{icon}}'></i>
+  {{/if}}
+  {{yield}}
+</span>

tgui/src/components/display.ract → tgui/src/_tgstation/components/display.ract

@@ -1,13 +1,13 @@
-<div class='display'>
-  {{#if title}}
-    <header>
-      <h3>{{title}}</h3>
-      {{#if button}}
-        <div class='buttonRight'>{{yield button}}</div>
-      {{/if}}
-    </header>
-  {{/if}}
-  <article>
-    {{yield}}
-  </article>
-</div>
+<div class='display'>
+  {{#if title}}
+    <header>
+      <h3>{{title}}</h3>
+      {{#if button}}
+        <div class='buttonRight'>{{yield button}}</div>
+      {{/if}}
+    </header>
+  {{/if}}
+  <article>
+    {{yield}}
+  </article>
+</div>

tgui/src/components/display.styl → tgui/src/_tgstation/components/display.styl

@@ -1,28 +1,28 @@
-div.display
-  width: 100%
-  padding: 4px
-  margin: 6px 0
-
-  background-color: display-color-background // Transparent background.
-  box-shadow: inset 0 0 5px display-color-shadow
-
-  header
-    display: block
-    position: relative
-    width: 100%
-    padding: 0 4px
-    margin-bottom: 6px
-
-    color: display-color-title
-
-    border-bottom: rule-size solid rule-color-normal
-
-    .buttonRight
-      position: absolute
-      bottom: 6px
-      right: 4px
-
-  article
-    display: table
-    width: 100%
-    border-spacing: 4px 6px
+div.display
+  width: 100%
+  padding: 4px
+  margin: 6px 0
+
+  background-color: display-color-background // Transparent background.
+  box-shadow: inset 0 0 5px display-color-shadow
+
+  header
+    display: block
+    position: relative
+    width: 100%
+    padding: 0 4px
+    margin-bottom: 6px
+
+    color: display-color-title
+
+    border-bottom: rule-size solid rule-color-normal
+
+    .buttonRight
+      position: absolute
+      bottom: 6px
+      right: 4px
+
+  article
+    display: table
+    width: 100%
+    border-spacing: 4px 6px

tgui/src/components/notice.ract → tgui/src/_tgstation/components/notice.ract

@@ -1,3 +1,3 @@
-<div class='notice'>
-  {{yield}}
-</div>
+<div class='notice'>
+  {{yield}}
+</div>

tgui/src/components/resize.ract → tgui/src/_tgstation/components/resize.ract

@@ -1,15 +1,15 @@
-<script>
-import { winset } from 'util/byond'
-
-component.exports = {
-  oninit: function () {
-    this.observe('config.fancy', (newkey, oldkey, keypath) => {
-      winset(this.get('config.window'), 'can-resize', !!!newkey)
-    })
-  }
-}
-</script>
-
-{{#if config.fancy}}
-  <div class='resize' on-mousedown='resize'></div>
-{{/if}}
+<script>
+import { winset } from 'util/byond'
+
+component.exports = {
+  oninit: function () {
+    this.observe('config.fancy', (newkey, oldkey, keypath) => {
+      winset(this.get('config.window'), 'can-resize', !!!newkey)
+    })
+  }
+}
+</script>
+
+{{#if config.fancy}}
+  <div class='resize' on-mousedown='resize'></div>
+{{/if}}

tgui/src/components/resize.styl → tgui/src/_tgstation/components/resize.styl

@@ -1,12 +1,12 @@
-div.resize
-  position: fixed
-  bottom: 0
-  right: 0
-  width: 0
-  height: 0
-
-  border-style: solid;
-  border-width: 0 0 45px 45px;
-  border-color: transparent transparent resize-color transparent
-
-  transform: rotate(360deg)
+div.resize
+  position: fixed
+  bottom: 0
+  right: 0
+  width: 0
+  height: 0
+
+  border-style: solid;
+  border-width: 0 0 45px 45px;
+  border-color: transparent transparent resize-color transparent
+
+  transform: rotate(360deg)

tgui/src/components/section.ract → tgui/src/_tgstation/components/section.ract

@@ -1,14 +1,14 @@
-<section>
-  {{#if label}}
-    <span class='label'>{{label}}:</span>
-    {{#if nowrap}}
-      {{yield}}
-    {{else}}
-      <div class='content'>
-        {{yield}}
-      </div>
-    {{/if}}
-  {{else}}
-    {{yield}}
-  {{/if}}
-</section>
+<section>
+  {{#if label}}
+    <span class='label'>{{label}}:</span>
+    {{#if nowrap}}
+      {{yield}}
+    {{else}}
+      <div class='content'>
+        {{yield}}
+      </div>
+    {{/if}}
+  {{else}}
+    {{yield}}
+  {{/if}}
+</section>