initial commit - cross reference with 5th port - obviously has compile errors

tgui/src/util/byond.js

@@ -0,0 +1,16 @@
+const encode = encodeURIComponent
+
+// Helper to generate a BYOND href given 'params' as an object (with an optional 'url' for eg winset).
+export function href (params = {}, url = '') {
+  return `byond://${url}?` + Object.keys(params).map(key => `${encode(key)}=${encode(params[key])}`).join('&')
+}
+
+// Helper to make a BYOND ui_act() call on the UI 'src' given an 'action' and optional 'params'.
+export function act (src, action, params = {}) {
+  window.location.href = href(Object.assign({ src, action }, params))
+}
+
+// Helper to make a BYOND winset() call on 'window', setting 'key' to 'value'
+export function winset (win, key, value) {
+  window.location.href = href({[`${win}.${key}`]: value}, 'winset')
+}

tgui/src/util/colors.styl

@@ -0,0 +1,10 @@
+.normal
+  color: color-normal
+.good
+  color: color-good
+.average
+  color: color-average
+.bad
+  color: color-bad
+.highlight
+  color: color-highlight

tgui/src/util/constants.js

@@ -0,0 +1,5 @@
+// Constants used in tgui; these are mirrored from the BYOND code.
+export const UI_INTERACTIVE = 2
+export const UI_UPDATE = 1
+export const UI_DISABLED = 0
+export const UI_CLOSE = -1

tgui/src/util/dragresize.js

@@ -0,0 +1,51 @@
+import {winset} from './byond'
+
+export function lock (x, y) {
+  if (x < 0) { // Left
+    x = 0
+  } else if (x + window.innerWidth > window.screen.availWidth) { // Right
+    x = window.screen.availWidth - window.innerWidth
+  }
+
+  if (y < 0) { // Top
+    y = 0
+  } else if (y + window.innerHeight > window.screen.availHeight) { // Bottom
+    y = window.screen.availHeight - window.innerHeight
+  }
+
+  return {x, y}
+}
+
+export function drag (event) {
+  event.preventDefault()
+
+  if (!this.get('drag')) return
+
+  if (this.get('x')) {
+    let x = (event.screenX - this.get('x')) + window.screenLeft
+    let y = (event.screenY - this.get('y')) + window.screenTop
+    if (this.get('config.locked')) ({x, y} = lock(x, y)) // Lock to primary monitor.
+    winset(this.get('config.window'), 'pos', `${x},${y}`)
+  }
+  this.set({ x: event.screenX, y: event.screenY })
+}
+
+export function sane (x, y) {
+  x = Math.clamp(100, window.screen.width, x)
+  y = Math.clamp(100, window.screen.height, y)
+  return {x, y}
+}
+
+export function resize (event) {
+  event.preventDefault()
+
+  if (!this.get('resize')) return
+
+  if (this.get('x')) {
+    let x = (event.screenX - this.get('x')) + window.innerWidth
+    let y = (event.screenY - this.get('y')) + window.innerHeight
+    ;({x, y} = sane(x, y))
+    winset(this.get('config.window'), 'size', `${x},${y}`)
+  }
+  this.set({ x: event.screenX, y: event.screenY })
+}

tgui/src/util/filter.js

@@ -0,0 +1,22 @@
+export function filterMulti (displays, string) {
+  for (let display of displays) { // First check if the display includes the search term in the first place.
+    if (display.textContent.toLowerCase().includes(string)) {
+      display.style.display = ''
+      filter(display, string)
+    } else {
+      display.style.display = 'none'
+    }
+  }
+}
+
+export function filter (display, string) {
+  const items = display.queryAll('section')
+  const titleMatch = display.query('header').textContent.toLowerCase().includes(string)
+  for (let item of items) { // Check if the item or its displays title contains the search term.
+    if (titleMatch || item.textContent.toLowerCase().includes(string)) {
+      item.style.display = ''
+    } else {
+      item.style.display = 'none'
+    }
+  }
+}

tgui/src/util/math.js

@@ -0,0 +1,9 @@
+// Helper to limit a number to be inside 'min' and 'max'.
+export function clamp (min, max, number) {
+  return Math.max(min, Math.min(number, max))
+}
+
+// Helper to round a number to 'decimals' decimals.
+export function fixed (number, decimals = 1) {
+  return Number(Math.round(number + 'e' + decimals) + 'e-' + decimals)
+}

tgui/src/util/misc.styl

@@ -0,0 +1,12 @@
+main
+  display: block
+  margin-top: 32px
+  padding: 2px 6px 0
+
+hr
+  height: rule-size
+  background-color: rule-color-normal
+  border: none
+
+.hidden
+  display: none

tgui/src/util/text.js

@@ -0,0 +1,14 @@
+export function upperCaseFirst (str) {
+  return str[0].toUpperCase() + str.slice(1).toLowerCase()
+}
+
+export function titleCase (str) {
+  return str.replace(/\w\S*/g, upperCaseFirst)
+}
+
+export function zeroPad (str, pad_size) {
+  str = str.toString()
+  while(str.length < pad_size)
+  	str = '0' + str
+  return str
+}

tgui/src/util/text.styl

@@ -0,0 +1,17 @@
+// Helper to reset font options to default.
+$fontReset
+  color: text-color-normal
+  font-size: 12px
+  font-weight: normal
+  font-style: normal
+  text-decoration: none
+
+// Utility classes to set font styles.
+.bold
+  font-weight: bold
+.italic
+  font-style: italic
+
+// Make 'unselectable' text unselectable on all browsers.
+[unselectable=on]
+  user-select: none

tgui/src/util/tooltip.styl

@@ -0,0 +1,53 @@
+div[data-tooltip], span[data-tooltip]
+  position: relative
+
+  &::after
+    position: absolute
+    display: block
+    z-index: 2
+    width: 250px
+    padding: 10px
+    transform: translateX(-50%)
+
+    visibility: hidden
+    opacity: 0
+
+    white-space: normal
+    text-align: left
+    content: attr(data-tooltip)
+
+    transition: all .5s
+    border: 1px solid tooltip-color-border
+    background-color: tooltip-color-background
+
+  &:hover::after
+    visibility: visible
+    opacity: 1
+
+  &.tooltip-top::after
+    bottom: 100%
+    left: 50%
+    transform: translateX(-50%) translateY(8px)
+  &.tooltip-top:hover::after
+    transform: translateX(-50%) translateY(-8px)
+
+  &.tooltip-bottom::after
+    top: 100%
+    left: 50%
+    transform: translateX(-50%) translateY(-8px)
+  &.tooltip-bottom:hover::after
+    transform: translateX(-50%) translateY(8px)
+
+  &.tooltip-left::after
+    top: 50%
+    right: 100%
+    transform: translateX(8px) translateY(-50%)
+  &.tooltip-left:hover::after
+    transform: translateX(-8px) translateY(-50%)
+
+  &.tooltip-right::after
+    top: 50%
+    left: 100%
+    transform: translateX(-8px) translateY(-50%)
+  &.tooltip-right:hover::after
+    transform: translateX(8px) translateY(-50%)