Split HTML structure into Vue components

src/components/AppSelector.vue

@@ -0,0 +1,49 @@
+<template>
+  <ul class="apps">
+    <AppSelectorButton></AppSelectorButton>
+<!--    Replace all of these with that component too-->
+    <li id="terminal-app" class="selector"
+        ng-click="aic.switchApp('terminal')"
+        ng-class="[aic.selectedApp == 'terminal' ? 'selected' : null, aic.ready.terminal ? null : 'disabled', aic.vars.terminalEmphasis ? 'emphasis' : null]"
+        ng-disabled="">
+      <a><i class="material-icons">dvr</i></a>
+      <div class="notification" ng-show="aic.notifications.terminal > 0"><p>
+        {{ aic.notifications.terminal }}</p></div>
+    </li>
+    <li id="messages-app" class="selector"
+        ng-click="aic.switchApp('messages')"
+        ng-class="[aic.selectedApp == 'messages' ? 'selected' : null, aic.ready.messages ? null : 'disabled', aic.vars.messagesEmphasis ? 'emphasis' : null]"
+        ng-disabled="">
+      <a><i class="material-icons">record_voice_over</i></a>
+      <div class="notification"
+           ng-show="(aic.notifications.breach + aic.notifications.alexandra) > 0">
+        <p>{{ aic.notifications.breach + aic.notifications.alexandra }}</p>
+      </div>
+    </li>
+    <li id="database-app" class="selector"
+        ng-click="aic.switchApp('database')"
+        ng-class="[aic.selectedApp == 'database' ? 'selected' : null, aic.ready.database ? null : 'disabled', aic.vars.databaseEmphasis ? 'emphasis' : null]"
+        ng-disabled="">
+      <a><i class="material-icons">library_books</i></a>
+      <div class="notification" ng-show="aic.notifications.database > 0"><p>
+        {{ aic.notifications.database }}</p></div>
+    </li>
+    <li id="run-app" class="selector" ng-click="aic.switchApp('run')"
+        ng-class="[aic.selectedApp == 'run' ? 'selected' : null, aic.ready.run ? null : 'disabled']"
+        ng-disabled="">
+      <a><i class="material-icons">directions_run</i></a>
+      <div class="notification" ng-show="aic.notifications.run > 0"><p>
+        {{ aic.notifications.run }}</p></div>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import AppSelectorButton from "./AppSelectorButton.vue"
+
+export default defineComponent({
+  name: "AppSelector",
+  components: { AppSelectorButton }
+})
+</script>

src/components/AppSelectorButton.vue

@@ -0,0 +1,21 @@
+<template>
+  <li id="ending-app" class="selector" ng-click="aic.switchApp('ending')"
+      ng-class="[aic.selectedApp == 'ending' ? 'selected' : null, aic.ready.ending ? null : 'disabled']"
+      ng-disabled="">
+    <a><i class="material-icons">clear</i></a>
+    <div class="notification" ng-show="aic.notifications.ending > 0"><p>
+      {{ aic.notifications.ending }}</p></div>
+  </li>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "AppSelectorButton"
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/Interface.vue

@@ -1,17 +1,26 @@
 <template>
-  <div>
-    <MainTitle></MainTitle>
-    <AppSelector></AppSelector>
+  <div id="interface"
+       ng-class="[aic.preload ? 'preload' : null, aic.ready.ending ? 'ended' : null]"
+       ng-cloak>
+    <div id="app-selector">
+      <MainTitle></MainTitle>
+      <AppSelector></AppSelector>
+    </div>
+    <TerminalApp></TerminalApp>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue"
 
 import AppSelector from "./AppSelector.vue"
+import TerminalApp from "./apps/TerminalApp.vue"
 
 export default defineComponent({
   name: "Interface",
-  components: { AppSelector }
+  components: {
+    TerminalApp,
+    AppSelector
+  }
 })
 </script>

src/components/MainTitle.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="title">
+    <div class="title-image"
+         ng-style="{'background-image': 'url(' + aic.lang.images.preloadTitle + ')'}"></div>
+    <div class="title-info">
+      <p>{{ ::aic.lang.version }}</p>
+      <p ng-hide="true">This text should not be visible (unless you have
+        javascript disabled) - if you can see this text, please contact the
+        author.</p>
+      <p ng-show="aic.onMobile">{{ ::aic.lang.mobileWarning }}</p>
+      <button id="boot-up" class="option speech" ng-click="aic.bootUp()">
+        {{ ::aic.lang.bootUp }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "MainTitle"
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/App.vue

@@ -0,0 +1,32 @@
+<template>
+  <div id="app-body">
+    <div class="container"
+         ng-class="aic.selectedApp == '{{name}}' ? 'selected' : null">
+      <AppSectionTop></AppSectionTop>
+      <div class="app-main">
+        <slot></slot>
+        <AppSectionBottom></AppSectionBottom>
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import AppSectionBottom from "./AppSectionBottom.vue"
+import AppSectionTop from "./AppSectionTop.vue"
+
+export default defineComponent({
+  name: "App",
+  props: ['name'],
+  components: {
+    AppSectionTop,
+    AppSectionBottom
+  }
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/AppSectionBottom.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="bottom-bar">
+    <div class="top"></div>
+    <div class="middle"></div>
+    <div class="bottom"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "AppSectionBottom"
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/AppSectionDivider.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="top-bar">
+    <div class="top"></div>
+    <div class="middle"></div>
+    <div class="bottom"></div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "AppSectionDivider"
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/AppSectionTop.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="app-title">
+    <p>{{::aic.lang.terminalAppName}}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "AppSectionTop"
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/EndingApp.vue

@@ -0,0 +1,26 @@
+<template>
+  <App name="ending">
+    <div class="ending-container">
+      <div class="ending-title">
+        <p class="ending-title glitch" data-text="CONNECTION&nbsp;LOST">
+          CONNECTION&nbsp;LOST</p>
+      </div>
+      <p class="ending-desc"
+         ng-repeat="line in aic.lang.endings[aic.currentEnding]">{{ line }}</p>
+      <button class="option action" id="restart">RESTART</button>
+      <p class="ending-number">{{ aic.vars.endingFractionText }}</p>
+    </div>
+  </App>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "EndingApp"
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/RunApp.vue

@@ -0,0 +1,30 @@
+<template>
+<App name="run">
+  <DatabaseBackButton></DatabaseBackButton>
+  <div class="section menu-section" ng-class="aic.selectedOperation === 'menu' ? 'selected' : null" ng-attr-new-section="{{aic.selectedOperation}}">
+    <div class="menu-title">Isolated Site-12<br>Operations Control</div>
+    <div class="operations">
+      <ul>
+        <li class="selector" ng-click="aic.switchOperation('d')"><a>D-Class Requisition</a></li>
+        <li class="selector" ng-click="aic.switchOperation('drone')"><a>Drone Control</a></li>
+        <li class="selector" ng-click="aic.switchOperation('map')"><a>Site Map & Individual Room Functions</a></li>
+        <li class="selector" ng-click="aic.switchOperation('hack')"><a>Main Server Access</a></li>
+      </ul>
+    </div>
+  </div>
+</App>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import DatabaseBackButton from "./database/DatabaseBackButton.vue"
+
+export default defineComponent({
+  name: "RunApp",
+  components: { DatabaseBackButton }
+})
+</script>
+
+<style lang="scss">
+
+</style>

src/components/apps/TerminalApp.vue

@@ -0,0 +1,53 @@
+<template>
+  <App name="terminal">
+    <div class="terminal-body"
+         ng-style="{'background-image': 'url(' + aic.lang.images.greyStripe + ')'}">
+      <div ng-show="aic.isSpeaking.terminal" class="working">
+        <img ng-src="{{::aic.lang.images.loadingGif}}">
+      </div>
+      <div class="terminal-log">
+        <p ng-repeat="line in aic.chatLog.terminal.log"
+           ng-class="[line.speaker, line.cssClass]">
+          <span ng-bind-html="line.text"></span>
+        </p>
+        <p class="title"><img ng-src="{{::aic.lang.images.terminalHeader}}">
+        </p>
+      </div>
+    </div>
+    <AppSectionDivider></AppSectionDivider>
+    <div class="input-section"
+         ng-class="aic.terminalInput.length > 0 ? 'loaded' : null"
+         ng-style="{'background-image':'url(' + aic.lang.images.aiadFadedIcon + '), linear-gradient(to bottom, #f4f4f4, white)'}">
+      <div class="hint-arrow left"
+           ng-style="{'background-image': 'url(' + aic.lang.images.highlightArrow + ')'}"></div>
+      <div class="hint-arrow right"
+           ng-style="{'background-image': 'url(' + aic.lang.images.highlightArrow + ')'}"></div>
+      <form ng-submit="aic.processTerminalInput()" class="middle-bar">
+        <input id="terminal-input" ng-model="aic.terminalInput"
+               ng-keydown="aic.previousCommand($event)"
+               placeholder="{{::aic.lang.commandInput}}">
+        <button id="terminal-send" class="option action" type="submit">
+          {{ ::aic.lang.terminalSend }}
+        </button>
+      </form>
+    </div>
+  </App>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+import App from "./App.vue"
+import AppSectionDivider from "./AppSectionDivider.vue"
+
+export default defineComponent({
+  name: "TerminalApp",
+  components: {
+    App,
+    AppSectionDivider
+  }
+})
+</script>
+
+<style lang="scss">
+
+</style>