split vue files into several files (to detect tsc errors)

.eslintrc.js

@@ -1,16 +1,21 @@
 module.exports = {
   root: true,
+
   env: {
     node: true
   },
+
   extends: [
     'plugin:vue/essential',
     '@vue/standard',
     '@vue/typescript/recommended'
   ],
+
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion : 2020,
+    parser      : '@typescript-eslint/parser',
   },
+
   rules: {
     'indent'          : [ 'error', 2 ],
     'linebreak-style' : [ 'error', 'unix' ],
@@ -20,7 +25,15 @@ module.exports = {
     'no-var'          : [ 'error' ],
     'no-multi-spaces' : [ 'error', { exceptions: { Property: true, TSPropertySignature: true } } ],
     'key-spacing'     : [ 'error', { align: { beforeColon: true, afterColon: true, mode: 'minimum', on: 'colon' } } ],
-    'no-console'      : process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger'     : process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
+    'vue/multi-word-component-names' : 'off',
+    'no-console'      : process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+    'no-debugger'     : process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+  },
+
+  extends: [
+    'plugin:vue/essential',
+    '@vue/standard',
+    '@vue/typescript/recommended',
+    '@vue/typescript',
+  ],
 }

babel.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
+    '@vue/cli-plugin-babel/preset',
+  ],
 }

package.json

@@ -1,34 +1,13 @@
 {
   "name": "smoo.it",
   "version": "0.1.0",
-  "main": "src/main.ts",
+  "author": "Robin C. Ladiges",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Istador/smoo.it.git"
-  },
-  "keywords": [
-    "html",
-    "js",
-    "css",
-    "vuejs"
-  ],
-  "author": "Robin C. Ladiges",
-  "license": "MPL-2.0",
-  "licenses": [
-    {
-      "type": "MPL-2.0",
-      "url": "https://github.com/Istador/smoo.it/raw/public/LICENSE.md"
-    }
-  ],
-  "bugs": {
-    "url": "https://github.com/Istador/smoo.it/issues"
-  },
-  "homepage": "https://www.smoo.it/",
+  "main": "src/main.ts",
   "dependencies": {
     "@babel/polyfill": "^7.11.5",
     "bootstrap": "^4.5.2",
@@ -63,5 +42,26 @@
     "typescript": "~4.5.5",
     "vue-cli-plugin-bootstrap-vue": "~0.8.2",
     "vue-template-compiler": "^2.6.14"
+  },
+  "bugs": {
+    "url": "https://github.com/Istador/smoo.it/issues"
+  },
+  "homepage": "https://www.smoo.it/",
+  "keywords": [
+    "html",
+    "js",
+    "css",
+    "vuejs"
+  ],
+  "license": "MPL-2.0",
+  "licenses": [
+    {
+      "type": "MPL-2.0",
+      "url": "https://github.com/Istador/smoo.it/raw/public/LICENSE.md"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Istador/smoo.it.git"
   }
 }

src/App.ts

@@ -0,0 +1,12 @@
+import { Vue, Component } from 'vue-property-decorator'
+import SmooHeader from './components/SmooHeader.vue'
+import SmooFooter from './components/SmooFooter.vue'
+
+@Component({
+  components: {
+    SmooHeader,
+    SmooFooter,
+  },
+})
+export default class State extends Vue {
+}

src/App.vue

@@ -7,18 +7,4 @@
 </template>
 
 <style lang="scss" src="./App.scss" />
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-import SmooHeader from './components/SmooHeader.vue'
-import SmooFooter from './components/SmooFooter.vue'
-
-@Component({
-  components: {
-    SmooHeader,
-    SmooFooter,
-  },
-})
-export default class State extends Vue {
-}
-</script>
+<script lang="ts" src="./App.ts"/>

src/components/SmooBtn.scss

@@ -0,0 +1,29 @@
+.smoo-btn {
+  .ZL, .L, .ZR, .R, .A, .B {
+    display: inline-block;
+    text-align: center;
+    border: 1px solid black;
+    border-radius: 0.25em;
+    width: 2.5em;
+    font-size: 0.65em;
+    letter-spacing: 0.2em;
+    line-hieght: 1em;
+    vertical-align: middle;
+    padding-top: 0.2em;
+    padding-left: 0.2em;
+    background-color: #eee;
+  }
+
+  .ZL, .L { border-top-left-radius: 1.2em; }
+  .ZR, .R { border-top-right-radius: 1.2em; }
+
+  .A, .B {
+    border-radius:
+    1em; width: 2em;
+  }
+
+  svg {
+    background-color: #eee;
+    border-radius: 1em;
+  }
+}

src/components/SmooBtn.ts

@@ -0,0 +1,67 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+const customBtns = ['ZL', 'L', 'ZR', 'R', 'A', 'B']
+type TBtn = 'ZL' | 'L' | 'ZR' | 'R' | 'A' | 'B' | 'DUp' | 'DDown' | 'DLeft' | 'DRight'
+
+@Component({})
+export default class Servers extends Vue {
+  private get btn () : TBtn|null {
+    if (this.ZL) { return 'ZL' }
+    if (this.L) { return 'L' }
+    if (this.ZR) { return 'ZR' }
+    if (this.R) { return 'R' }
+    if (this.A) { return 'A' }
+    if (this.B) { return 'B' }
+    if (this.DUp) { return 'DUp' }
+    if (this.DDown) { return 'DDown' }
+    if (this.DLeft) { return 'DLeft' }
+    if (this.DRight) { return 'DRight' }
+    return null
+  }
+
+  private get custom () { return customBtns.includes(this.btn || '') }
+
+  private get icon () : string {
+    if (this.DUp) { return 'arrow-up-circle' }
+    if (this.DDown) { return 'arrow-down-circle' }
+    if (this.DLeft) { return 'arrow-left-circle' }
+    if (this.DRight) { return 'arrow-right-circle' }
+    return ''
+  }
+
+  private get title () : string {
+    if (this.custom && this.btn) { return this.btn }
+    if (!this.btn) { return '' }
+    return 'D-Pad ' + this.btn.substr(1)
+  }
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private ZL! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private L! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private ZR! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private R! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private A! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private B! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private DUp! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private DDown! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private DLeft! : boolean
+
+  @Prop({ required: false, type: Boolean, default: false })
+  private DRight! : boolean
+}

src/components/SmooBtn.vue

@@ -5,103 +5,5 @@
   </b>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
-
-const customBtns = ['ZL', 'L', 'ZR', 'R', 'A', 'B']
-type TBtn = 'ZL' | 'L' | 'ZR' | 'R' | 'A' | 'B' | 'DUp' | 'DDown' | 'DLeft' | 'DRight'
-
-@Component({})
-export default class Servers extends Vue {
-  private get btn () : TBtn|null {
-    if (this.ZL) { return 'ZL' }
-    if (this.L) { return 'L' }
-    if (this.ZR) { return 'ZR' }
-    if (this.R) { return 'R' }
-    if (this.A) { return 'A' }
-    if (this.B) { return 'B' }
-    if (this.DUp) { return 'DUp' }
-    if (this.DDown) { return 'DDown' }
-    if (this.DLeft) { return 'DLeft' }
-    if (this.DRight) { return 'DRight' }
-    return null
-  }
-
-  private get custom () { return customBtns.includes(this.btn) }
-
-  private get icon () : string {
-    if (this.DUp) { return 'arrow-up-circle' }
-    if (this.DDown) { return 'arrow-down-circle' }
-    if (this.DLeft) { return 'arrow-left-circle' }
-    if (this.DRight) { return 'arrow-right-circle' }
-    return ''
-  }
-
-  private get title () : string {
-    if (this.custom) { return this.btn }
-    return 'D-Pad ' + this.btn.substr(1)
-  }
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private ZL! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private L! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private ZR! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private R! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private A! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private B! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private DUp! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private DDown! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private DLeft! : boolean
-
-  @Prop({ required: false, type: Boolean, default: false })
-  private DRight! : boolean
-}
-</script>
-
-<style lang="scss">
-  .smoo-btn {
-    .ZL, .L, .ZR, .R, .A, .B {
-      display: inline-block;
-      text-align: center;
-      border: 1px solid black;
-      border-radius: 0.25em;
-      width: 2.5em;
-      font-size: 0.65em;
-      letter-spacing: 0.2em;
-      line-hieght: 1em;
-      vertical-align: middle;
-      padding-top: 0.2em;
-      padding-left: 0.2em;
-      background-color: #eee;
-    }
-
-    .ZL, .L { border-top-left-radius: 1.2em; }
-    .ZR, .R { border-top-right-radius: 1.2em; }
-
-    .A, .B {
-      border-radius:
-      1em; width: 2em;
-    }
-
-    svg {
-      background-color: #eee;
-      border-radius: 1em;
-    }
-  }
-</style>
+<script lang="ts" src="./SmooBtn.ts"/>
+<style lang="scss" src="./SmooBtn.scss"/>

src/components/SmooServerState.ts

@@ -0,0 +1,33 @@
+import { Vue, Component, Prop } from 'vue-property-decorator'
+
+import { TServer, TState } from '@/types'
+
+@Component({})
+export default class SmooServerState extends Vue {
+  private state : TState = 'loading'
+
+  @Prop({ required: true })
+  private server! : TServer
+
+  private get icon () : string {
+    switch (this.state) {
+    case 'loading': return 'arrow-clockwise'
+    case 'unknown': return 'circle'
+    default: return 'circle-fill'
+    }
+  }
+
+  private get animation () : string {
+    return (this.state === 'loading' ? 'spin' : '')
+  }
+
+  mounted () {
+    this.state = 'unknown'
+
+    // TODO: check servers / get data from a backend
+    // const states = ['unknown', 'online', 'offline']
+    // window.setTimeout(function () {
+    //   this.state = states[Math.floor(Math.random() * states.length)]
+    // }.bind(this), 1000 + Math.floor(Math.random() * 2000))
+  }
+}

src/components/SmooServerState.vue

@@ -16,38 +16,4 @@
 }
 </style>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-property-decorator'
-
-import { TServer, TState } from '@/types'
-
-@Component({})
-export default class SmooServerState extends Vue {
-  private state : TState = 'loading'
-
-  @Prop({ required: 'true' })
-  private server! : TServer
-
-  private get icon () : string {
-    switch (this.state) {
-    case 'loading': return 'arrow-clockwise'
-    case 'unknown': return 'circle'
-    default: return 'circle-fill'
-    }
-  }
-
-  private get animation () : string {
-    return (this.state === 'loading' ? 'spin' : '')
-  }
-
-  mounted () {
-    this.state = 'unknown'
-
-    // TODO: check servers / get data from a backend
-    // const states = ['unknown', 'online', 'offline']
-    // window.setTimeout(function () {
-    //   this.state = states[Math.floor(Math.random() * states.length)]
-    // }.bind(this), 1000 + Math.floor(Math.random() * 2000))
-  }
-}
-</script>
+<script lang="ts" src="./SmooServerState.ts"/>

src/views/FAQ.ts

@@ -0,0 +1,158 @@
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({})
+export default class FAQ extends Vue {
+  questions = [
+    {
+      question : 'How do I control the mod?',
+      answer   : `
+        <p>
+          Main menu:
+          <ul>
+            <li><smoo-btn ZL/> + <smoo-btn A/> - Mod configuration</li>
+          </ul>
+        </p>
+        <p>
+          Pause menu:
+          <ul>
+            <li><smoo-btn ZL/> + <smoo-btn A/> or <smoo-btn ZL/> + <smoo-btn B/> - Mod configuration</li>
+          </ul>
+        </p>
+        <p>
+          In-game:
+          <ul>
+            <li><smoo-btn L/> + <smoo-btn DLeft/> - Enable/disable Hide &amp; Seek [H&amp;S]</li>
+            <li>[H&amp;S] <smoo-btn DUp/> - Switch between hider and seeker</li>
+            <li>[H&amp;S] [Hider] <smoo-btn DLeft/> - Decrease hiding time</li>
+            <li>[H&amp;S] [Hider] <smoo-btn DRight/> - Increase hiding time</li>
+            <li>[H&amp;S] [Hider] <smoo-btn L/> + <smoo-btn DDown/> - Reset hiding time</li>
+            <li>[H&amp;S] [Gravity] <smoo-btn L/> + <smoo-btn DRight/> - Toggle gravity camera</li>
+            <li style="margin-top: 0.75em;"><smoo-btn ZR/> + <smoo-btn DUp/> - Open/close [Debug] menu</li>
+            <li>[Debug] <smoo-btn ZR/> + <smoo-btn DLeft/> - Previous page</li>
+            <li>[Debug] <smoo-btn ZR/> + <smoo-btn DRight/> - Next page</li>
+            <li>[Debug] <smoo-btn ZL/> + <smoo-btn DLeft/> - Previous player</li>
+            <li>[Debug] <smoo-btn ZL/> + <smoo-btn DRight/> - Next player</li>
+          </ul>
+        </p>
+      `,
+    },
+    {
+      question : 'How do I change the server I\'m connected to?',
+      answer   : `
+        By one of these methods:
+        <ul>
+          <li>
+            In the main or pause menu hold <smoo-btn ZL/> and press <smoo-btn A/> to enter the hidden options menu
+            where you can <code>Change Server IP</code>.
+          </li>
+          <li>Hold/press <smoo-btn ZL/> while starting the game, will prompt you for the IP.</li>
+          <li>Delete the <code>common.bin</code> file in the save directory.</li>
+        </ul>
+      `,
+    },
+    {
+      question : 'How do I hack my Switch?',
+      answer   : `
+        <p>
+          You need an <a href="https://ismyswitchpatched.com/" class="extern" target="_blank">unpatched</a>
+          older revision of the Nintendo Switch, a microSDXC card, a USB-C connection cable,
+          and a computer (PC/Laptop/Smartphone) or a specific paylod injecting device.
+          To make the RCM exploit safer and easier, it's advised to use a RCM jig.
+        </p>
+        <p>
+          Follow this <a href="https://nh-server.github.io/switch-guide/" class="extern" target="_blank">guide</a>
+          or alternatively/additionally <a href="https://switch.homebrew.guide/" class="extern" target="_blank">this one</a>.
+        </p>
+      `,
+    },
+    {
+      question : 'How do I obtain a SMO ROM for emulators?',
+      answer   : `
+        <p>The only <i>legal</i> way to obtain a ROM is by dumping it from your hacked Switch onto the SD card.</p>
+      `,
+    },
+    {
+      question : 'Am I on SMO version <code>1.0.0</code>?',
+      answer   : `
+        <p>
+          When the game is downgraded on the Switch, the system and the main menu will still show <code>1.3.0</code>, which is correct.
+        </p>
+        <p>
+          A good indicator if the game is on version <code>1.3.0</code> or lower is the <code>Play in VR</code> button in the main menu.
+          When the button is visible that means the downgrade didn't work and the game is still on version <code>1.3.0</code>.
+        </p>
+        <p>
+          For emulators a real <code>1.0.0</code> ROM is needed, which can be dumped from the Switch.
+        </p>
+      `,
+    },
+    {
+      question : 'Will the mod work for SMO version <code>1.3.0</code> in the future?',
+      answer   : 'No, it\'s too much effort to develop, test, build, release and support different versions of the mod.',
+    },
+    {
+      question : 'What is a public/private IPv4 address?',
+      answer   : `
+        <p>
+          A public IPv4 address is the address under which a computer is accessible on the internet by other computers.
+          Usually your router receives a public IPv4 address from your ISP.
+          But be aware that there are internet subscriptions that don't give you a public IPv4 address but only a IPv6 address (e.g. LTE, DS Lite).
+        </p>
+        <p>
+          Private IPv4 addresses are usually only used inside your home network or for VPN networks and aren't publicly reachable from the internet.
+          You can easily detect them by their leading numbers:
+          <code>10.x.x.x</code>, <code>172.[16-31].x.x</code>, and <code>192.168.x.x</code> are all private addresses.
+        </p>
+        <p>
+          Additionally <code>127.x.x.x</code> is reserved for the local computer.
+          You can input <code>127.0.0.1</code> as the server IP in the <router-link :to="{ name: 'play' }">mod</router-link>,
+          if you're playing with an emulator on the same computer that runs the <router-link :to="{ name: 'host' }">server</router-link>.
+        </p>
+        <p>
+          <code>0.0.0.0</code> usually stands for an invalid IPv4 address.
+          It is only valid in context of hosting a <router-link :to="{ name: 'host' }">server</router-link>
+          inside the <code>settings.json</code> file to denote listining to connections from all networks.
+          (On some systems it's a workable alias for <code>127.0.0.1</code>, but you should avoid using it.)
+        </p>
+      `,
+    },
+    {
+      question : 'Does this mod work with IPv6?',
+      answer   : `
+        <p>
+          No.
+          The Nintendo Switch doesn't support IPv6 natively.
+          As long as Nintendo doesn't change this, or there's a homebrew network stack that support it, this'll likely never change.
+        </p>
+      `,
+    },
+    {
+      question : 'How do I port forward?',
+      answer   : `
+        <p>This depends on your specific router model.</p>
+        <p>
+          Usually you open the web interface of your router, login there, and search for an option that let you configure port forwarding.
+          Common router addresses are:
+          <ul>
+            <li><a href="http://192.168.0.1/" class="extern" target="_blank">192.168.0.1</a></li>
+            <li><a href="http://192.168.1.1/" class="extern" target="_blank">192.168.1.1</a></li>
+          </ul>
+          If you can't figure it out, check the outside of your router (usually there's a sticker on it),
+          consult its manual, or check the default gateway of your network adapter.
+        </p>
+        <p>
+          Once you found the settings, you want to configure:
+          <ul>
+            <li>Port: <code>1027</code> (internal &amp; external)</li>
+            <li>Protocol: <code>TCP</code></li>
+          </ul>
+          Additionally you also need to say to which computer inside your network the port shall be forwarded to.
+          You want to forward the port to the computer that runs the <router-link :to="{ name: 'host' }">server</router-link>.
+          Most routers will give you the option to select one of the currently connected devices.
+          (Or you have already selected it to reach the port forwarding settings.)
+          But sometimes you need to provide its private IP address manually.
+        </p>
+      `,
+    },
+  ]
+}

src/views/FAQ.vue

@@ -43,163 +43,4 @@
   }
 </style>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-
-@Component({})
-export default class FAQ extends Vue {
-  questions = [
-    {
-      question : 'How do I control the mod?',
-      answer   : `
-        <p>
-          Main menu:
-          <ul>
-            <li><smoo-btn ZL/> + <smoo-btn A/> - Mod configuration</li>
-          </ul>
-        </p>
-        <p>
-          Pause menu:
-          <ul>
-            <li><smoo-btn ZL/> + <smoo-btn A/> or <smoo-btn ZL/> + <smoo-btn B/> - Mod configuration</li>
-          </ul>
-        </p>
-        <p>
-          In-game:
-          <ul>
-            <li><smoo-btn L/> + <smoo-btn DLeft/> - Enable/disable Hide &amp; Seek [H&amp;S]</li>
-            <li>[H&amp;S] <smoo-btn DUp/> - Switch between hider and seeker</li>
-            <li>[H&amp;S] [Hider] <smoo-btn DLeft/> - Decrease hiding time</li>
-            <li>[H&amp;S] [Hider] <smoo-btn DRight/> - Increase hiding time</li>
-            <li>[H&amp;S] [Hider] <smoo-btn L/> + <smoo-btn DDown/> - Reset hiding time</li>
-            <li>[H&amp;S] [Gravity] <smoo-btn L/> + <smoo-btn DRight/> - Toggle gravity camera</li>
-            <li style="margin-top: 0.75em;"><smoo-btn ZR/> + <smoo-btn DUp/> - Open/close [Debug] menu</li>
-            <li>[Debug] <smoo-btn ZR/> + <smoo-btn DLeft/> - Previous page</li>
-            <li>[Debug] <smoo-btn ZR/> + <smoo-btn DRight/> - Next page</li>
-            <li>[Debug] <smoo-btn ZL/> + <smoo-btn DLeft/> - Previous player</li>
-            <li>[Debug] <smoo-btn ZL/> + <smoo-btn DRight/> - Next player</li>
-          </ul>
-        </p>
-      `,
-    },
-    {
-      question : 'How do I change the server I\'m connected to?',
-      answer   : `
-        By one of these methods:
-        <ul>
-          <li>
-            In the main or pause menu hold <smoo-btn ZL/> and press <smoo-btn A/> to enter the hidden options menu
-            where you can <code>Change Server IP</code>.
-          </li>
-          <li>Hold/press <smoo-btn ZL/> while starting the game, will prompt you for the IP.</li>
-          <li>Delete the <code>common.bin</code> file in the save directory.</li>
-        </ul>
-      `,
-    },
-    {
-      question : 'How do I hack my Switch?',
-      answer   : `
-        <p>
-          You need an <a href="https://ismyswitchpatched.com/" class="extern" target="_blank">unpatched</a>
-          older revision of the Nintendo Switch, a microSDXC card, a USB-C connection cable,
-          and a computer (PC/Laptop/Smartphone) or a specific paylod injecting device.
-          To make the RCM exploit safer and easier, it's advised to use a RCM jig.
-        </p>
-        <p>
-          Follow this <a href="https://nh-server.github.io/switch-guide/" class="extern" target="_blank">guide</a>
-          or alternatively/additionally <a href="https://switch.homebrew.guide/" class="extern" target="_blank">this one</a>.
-        </p>
-      `,
-    },
-    {
-      question : 'How do I obtain a SMO ROM for emulators?',
-      answer   : `
-        <p>The only <i>legal</i> way to obtain a ROM is by dumping it from your hacked Switch onto the SD card.</p>
-      `,
-    },
-    {
-      question : 'Am I on SMO version <code>1.0.0</code>?',
-      answer   : `
-        <p>
-          When the game is downgraded on the Switch, the system and the main menu will still show <code>1.3.0</code>, which is correct.
-        </p>
-        <p>
-          A good indicator if the game is on version <code>1.3.0</code> or lower is the <code>Play in VR</code> button in the main menu.
-          When the button is visible that means the downgrade didn't work and the game is still on version <code>1.3.0</code>.
-        </p>
-        <p>
-          For emulators a real <code>1.0.0</code> ROM is needed, which can be dumped from the Switch.
-        </p>
-      `,
-    },
-    {
-      question : 'Will the mod work for SMO version <code>1.3.0</code> in the future?',
-      answer   : 'No, it\'s too much effort to develop, test, build, release and support different versions of the mod.',
-    },
-    {
-      question : 'What is a public/private IPv4 address?',
-      answer   : `
-        <p>
-          A public IPv4 address is the address under which a computer is accessible on the internet by other computers.
-          Usually your router receives a public IPv4 address from your ISP.
-          But be aware that there are internet subscriptions that don't give you a public IPv4 address but only a IPv6 address (e.g. LTE, DS Lite).
-        </p>
-        <p>
-          Private IPv4 addresses are usually only used inside your home network or for VPN networks and aren't publicly reachable from the internet.
-          You can easily detect them by their leading numbers:
-          <code>10.x.x.x</code>, <code>172.[16-31].x.x</code>, and <code>192.168.x.x</code> are all private addresses.
-        </p>
-        <p>
-          Additionally <code>127.x.x.x</code> is reserved for the local computer.
-          You can input <code>127.0.0.1</code> as the server IP in the <router-link :to="{ name: 'play' }">mod</router-link>,
-          if you're playing with an emulator on the same computer that runs the <router-link :to="{ name: 'host' }">server</router-link>.
-        </p>
-        <p>
-          <code>0.0.0.0</code> usually stands for an invalid IPv4 address.
-          It is only valid in context of hosting a <router-link :to="{ name: 'host' }">server</router-link>
-          inside the <code>settings.json</code> file to denote listining to connections from all networks.
-          (On some systems it's a workable alias for <code>127.0.0.1</code>, but you should avoid using it.)
-        </p>
-      `,
-    },
-    {
-      question : 'Does this mod work with IPv6?',
-      answer   : `
-        <p>
-          No.
-          The Nintendo Switch doesn't support IPv6 natively.
-          As long as Nintendo doesn't change this, or there's a homebrew network stack that support it, this'll likely never change.
-        </p>
-      `,
-    },
-    {
-      question : 'How do I port forward?',
-      answer   : `
-        <p>This depends on your specific router model.</p>
-        <p>
-          Usually you open the web interface of your router, login there, and search for an option that let you configure port forwarding.
-          Common router addresses are:
-          <ul>
-            <li><a href="http://192.168.0.1/" class="extern" target="_blank">192.168.0.1</a></li>
-            <li><a href="http://192.168.1.1/" class="extern" target="_blank">192.168.1.1</a></li>
-          </ul>
-          If you can't figure it out, check the outside of your router (usually there's a sticker on it),
-          consult its manual, or check the default gateway of your network adapter.
-        </p>
-        <p>
-          Once you found the settings, you want to configure:
-          <ul>
-            <li>Port: <code>1027</code> (internal &amp; external)</li>
-            <li>Protocol: <code>TCP</code></li>
-          </ul>
-          Additionally you also need to say to which computer inside your network the port shall be forwarded to.
-          You want to forward the port to the computer that runs the <router-link :to="{ name: 'host' }">server</router-link>.
-          Most routers will give you the option to select one of the currently connected devices.
-          (Or you have already selected it to reach the port forwarding settings.)
-          But sometimes you need to provide its private IP address manually.
-        </p>
-      `,
-    },
-  ]
-}
-</script>
+<script lang="ts" src="./FAQ.ts"/>

src/views/Home.scss

@@ -0,0 +1,30 @@
+.home-view {
+  -moz-column-count: 1 !important;
+  column-count: 1 !important;
+  -moz-row-gap: 1.25rem;
+  row-gap: 1.25rem;
+  @media (min-width: 800px) {
+    -moz-column-count: 2 !important;
+    column-count: 2 !important;
+  }
+
+  .yt-embed {
+    margin-bottom: 15px;
+    iframe {
+      width: 100%;
+      aspect-ratio: 16 / 9;
+    }
+    @supports not (aspect-ratio: 1) {
+      position: relative;
+      padding-bottom: 56.25%;
+
+      iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

src/views/Home.ts

@@ -0,0 +1,4 @@
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({})
+export default class Home extends Vue {}

src/views/Home.vue

@@ -39,42 +39,6 @@
   </b-card-group>
 </template>
 
-<style lang="scss">
-.home-view {
-  -moz-column-count: 1 !important;
-  column-count: 1 !important;
-  -moz-row-gap: 1.25rem;
-  row-gap: 1.25rem;
-  @media (min-width: 800px) {
-    -moz-column-count: 2 !important;
-    column-count: 2 !important;
-  }
+<style lang="scss" src="./Home.scss"/>
 
-  .yt-embed {
-    margin-bottom: 15px;
-    iframe {
-      width: 100%;
-      aspect-ratio: 16 / 9;
-    }
-    @supports not (aspect-ratio: 1) {
-      position: relative;
-      padding-bottom: 56.25%;
-
-      iframe {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-      }
-    }
-  }
-}
-</style>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-
-@Component({})
-export default class Home extends Vue {}
-</script>
+<script lang="ts" src="./Home.ts"/>

src/views/Host.ts

@@ -0,0 +1,4 @@
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({})
+export default class Host extends Vue {}

src/views/Host.vue

@@ -25,9 +25,4 @@
   </b-card-group>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-
-@Component({})
-export default class Host extends Vue {}
-</script>
+<script lang="ts" src="./Host.ts"/>

src/views/Play.ts

@@ -0,0 +1,4 @@
+import { Vue, Component } from 'vue-property-decorator'
+
+@Component({})
+export default class Play extends Vue {}

src/views/Play.vue

@@ -33,9 +33,4 @@
   </b-card-group>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-
-@Component({})
-export default class Play extends Vue {}
-</script>
+<script lang="ts" src="./Play.ts"/>

src/views/Servers.scss

@@ -0,0 +1,59 @@
+.servers-view {
+  table {
+    width: auto;
+    display: inline-block;
+    thead {
+      th {
+        position: sticky !important;
+        top: 0;
+        background-color: white;
+        z-index: 999;
+      }
+    }
+    tbody {
+      td { vertical-align: middle; }
+
+      .td-server {
+        .host, .ip { font-family: monospace; }
+        @media (min-width: 800px) {
+          .host::before { content: 'Host: '; font-family: $smoo-default-font; font-weight: bold; }
+          .ip::before { content: 'IPv4: '; font-family: $smoo-default-font; font-weight: bold; }
+        }
+        .host + br + .ip { opacity: 0.5; }
+      }
+
+      .td-port {
+        font-family: monospace;
+        &.default { opacity: 0.5; }
+      }
+
+      .td-location {
+        > div {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          > .flag-icon { margin-right: 0.5em; margin-top: -0.2em; }
+        }
+      }
+    }
+
+    @media (max-width: 800px) {
+      td.td-location span.name { display: none; }
+    }
+
+    @media (max-width: 700px) {
+      th.th-name { display: none; }
+      td.td-name { display: none; }
+    }
+
+    @media (max-width: 550px) {
+      th.th-version { display: none; }
+      td.td-version { display: none; }
+    }
+
+    @media (max-width: 450px) {
+      th.th-state { display: none; }
+      td.td-state { display: none; }
+    }
+  }
+}

src/views/Servers.ts

@@ -0,0 +1,114 @@
+import { Vue, Component } from 'vue-property-decorator'
+
+import CountryFlag from 'vue-country-flag'
+
+import { IServer } from '@/types'
+import SmooServerState from '@/components/SmooServerState.vue'
+
+const linkTree = (branch: string, label?: string): string => '<a href="https://github.com/Sanae6/SmoOnlineServer/commits/' + branch + '" class="extern" target="_blank">' + (label || branch) + '</a>'
+const packetFixes = linkTree('packet-fixes')
+const latest = linkTree('master', 'latest')
+
+@Component({
+  components: {
+    CountryFlag,
+    SmooServerState,
+  },
+})
+export default class Servers extends Vue {
+  private defaultPort = 1027
+
+  private fields = [
+    {
+      key     : 'state',
+      tdClass : 'td-state',
+      thClass : 'th-state',
+    },
+    {
+      key           : 'name',
+      tdClass       : 'td-name',
+      thClass       : 'th-name',
+      sortable      : true,
+      sortDirection : 'asc',
+    },
+    {
+      key     : 'server',
+      tdClass : 'td-server',
+      thClass : 'th-server',
+    },
+    {
+      key             : 'port',
+      tdClass         : (_v: null, _k: string, i: IServer) => 'td-port' + ((i.server.port || this.defaultPort) === this.defaultPort ? ' default' : ''),
+      thClass         : 'th-port',
+      sortable        : true,
+      sortByFormatted : true,
+      sortDirection   : 'asc',
+      formatter       : (_v: null, _k: string, i: IServer) => i.server.port || this.defaultPort,
+    },
+    {
+      key           : 'location',
+      tdClass       : 'td-location',
+      thClass       : 'th-location',
+      sortable      : true,
+      sortDirection : 'asc',
+    },
+    {
+      key           : 'version',
+      tdClass       : 'td-version',
+      thClass       : 'th-version',
+      sortable      : true,
+      sortDirection : 'desc',
+    },
+  ]
+
+  private servers : IServer[] = [
+    {
+      name     : 'Piplup',
+      server   : { host: 'piplup.smoo.it', ip: '51.178.136.142' },
+      location : { flag: 'fr', name: 'France' },
+    },
+    {
+      name     : 'Piplup (Temp)',
+      server   : { host: 'piplup.smoo.it', ip: '51.178.136.142', port: 1806 },
+      location : { flag: 'fr', name: 'France' },
+      version  : packetFixes,
+    },
+    {
+      name     : 'Sanae',
+      server   : { host: 'sanae.smoo.it', ip: '64.201.219.20' },
+      location : { flag: 'ca', name: 'Canada' },
+    },
+    {
+      name     : 'Parknich',
+      server   : { host: 'parknich.smoo.it', ip: '51.81.86.202' },
+      location : { flag: 'us', name: 'US-East' },
+    },
+    {
+      name     : 'fruityloops',
+      server   : { host: 'fruityloops.smoo.it', ip: '62.226.142.89' },
+      location : { flag: 'de', name: 'Germany' },
+    },
+    {
+      name     : 'f0c0s',
+      server   : { host: 'f0c0s.smoo.it', ip: '94.130.25.137' },
+      location : { flag: 'de', name: 'Germany' },
+    },
+    {
+      name     : 'beni',
+      server   : { host: 'beni.smoo.it', ip: '51.68.173.172' },
+      location : { flag: 'de', name: 'Germany' },
+    },
+    {
+      name     : 'RCL',
+      server   : { host: 'rcl.smoo.it' },
+      location : { flag: 'de', name: 'Germany' },
+      version  : latest,
+    },
+    {
+      name     : 'RCL',
+      server   : { host: 'rcl.smoo.it', port: 1028 },
+      location : { flag: 'de', name: 'Germany' },
+      version  : packetFixes,
+    },
+  ]
+}

src/views/Servers.vue

@@ -42,190 +42,6 @@
   </div>
 </template>
 
-<style lang="scss">
-.servers-view {
-  table {
-    width: auto;
-    display: inline-block;
-    thead {
-      th {
-        position: sticky !important;
-        top: 0;
-        background-color: white;
-        z-index: 999;
-      }
-    }
-    tbody {
-      td { vertical-align: middle; }
+<style lang="scss" src="./Servers.scss"/>
 
-      .td-server {
-        .host, .ip { font-family: monospace; }
-        @media (min-width: 800px) {
-          .host::before { content: 'Host: '; font-family: $smoo-default-font; font-weight: bold; }
-          .ip::before { content: 'IPv4: '; font-family: $smoo-default-font; font-weight: bold; }
-        }
-        .host + br + .ip { opacity: 0.5; }
-      }
-
-      .td-port {
-        font-family: monospace;
-        &.default { opacity: 0.5; }
-      }
-
-      .td-location {
-        > div {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          > .flag-icon { margin-right: 0.5em; margin-top: -0.2em; }
-        }
-      }
-    }
-
-    @media (max-width: 800px) {
-      td.td-location span.name { display: none; }
-    }
-
-    @media (max-width: 700px) {
-      th.th-name { display: none; }
-      td.td-name { display: none; }
-    }
-
-    @media (max-width: 550px) {
-      th.th-version { display: none; }
-      td.td-version { display: none; }
-    }
-
-    @media (max-width: 450px) {
-      th.th-state { display: none; }
-      td.td-state { display: none; }
-    }
-  }
-}
-</style>
-
-<script lang="ts">
-import { Vue, Component } from 'vue-property-decorator'
-
-import CountryFlag from 'vue-country-flag'
-
-import { IServer } from '@/types'
-import SmooServerState from '@/components/SmooServerState.vue'
-
-const linkTree = (branch, label) => '<a href="https://github.com/Sanae6/SmoOnlineServer/commits/' + branch + '" class="extern" target="_blank">' + (label || branch) + '</a>'
-const packetFixes = linkTree('packet-fixes')
-const latest = linkTree('master', 'latest')
-
-@Component({
-  components: {
-    CountryFlag,
-    SmooServerState,
-  },
-})
-export default class Servers extends Vue {
-  private defaultPort = 1027
-
-  private fields = [
-    {
-      key     : 'state',
-      tdClass : 'td-state',
-      thClass : 'th-state',
-    },
-    {
-      key           : 'name',
-      tdClass       : 'td-name',
-      thClass       : 'th-name',
-      sortable      : true,
-      sortDirection : 'asc',
-    },
-    {
-      key     : 'server',
-      tdClass : 'td-server',
-      thClass : 'th-server',
-    },
-    {
-      key             : 'port',
-      tdClass         : (v, k, i) => 'td-port' + ((i.server.port || this.defaultPort) === this.defaultPort ? ' default' : ''),
-      thClass         : 'th-port',
-      sortable        : true,
-      sortByFormatted : true,
-      sortDirection   : 'asc',
-      formatter       : (v, k, i) => i.server.port || this.defaultPort,
-    },
-    {
-      key           : 'location',
-      tdClass       : 'td-location',
-      thClass       : 'th-location',
-      sortable      : true,
-      sortDirection : 'asc',
-    },
-    {
-      key           : 'version',
-      tdClass       : 'td-version',
-      thClass       : 'th-version',
-      sortable      : true,
-      sortDirection : 'desc',
-    },
-  ]
-
-  private servers : IServer[] = [
-    {
-      name     : 'Piplup',
-      server   : { host: 'piplup.smoo.it', ip: '51.178.136.142' },
-      location : { flag: 'fr', name: 'France' },
-      state    : 'loading',
-    },
-    {
-      name     : 'Piplup (Temp)',
-      server   : { host: 'piplup.smoo.it', ip: '51.178.136.142', port: 1806 },
-      location : { flag: 'fr', name: 'France' },
-      version  : packetFixes,
-      state    : 'loading',
-    },
-    {
-      name     : 'Sanae',
-      server   : { host: 'sanae.smoo.it', ip: '64.201.219.20' },
-      location : { flag: 'ca', name: 'Canada' },
-      state    : 'loading',
-    },
-    {
-      name     : 'Parknich',
-      server   : { host: 'parknich.smoo.it', ip: '51.81.86.202' },
-      location : { flag: 'us', name: 'US-East' },
-      state    : 'offline',
-    },
-    {
-      name     : 'fruityloops',
-      server   : { host: 'fruityloops.smoo.it', ip: '62.226.142.89' },
-      location : { flag: 'de', name: 'Germany' },
-      state    : 'loading',
-    },
-    {
-      name     : 'f0c0s',
-      server   : { host: 'f0c0s.smoo.it', ip: '94.130.25.137' },
-      location : { flag: 'de', name: 'Germany' },
-      state    : 'loading',
-    },
-    {
-      name     : 'beni',
-      server   : { host: 'beni.smoo.it', ip: '51.68.173.172' },
-      location : { flag: 'de', name: 'Germany' },
-      state    : 'unknown',
-    },
-    {
-      name     : 'RCL',
-      server   : { host: 'rcl.smoo.it' },
-      location : { flag: 'de', name: 'Germany' },
-      version  : latest,
-      state    : 'online',
-    },
-    {
-      name     : 'RCL',
-      server   : { host: 'rcl.smoo.it', port: 1028 },
-      location : { flag: 'de', name: 'Germany' },
-      version  : packetFixes,
-      state    : 'online',
-    },
-  ]
-}
-</script>
+<script lang="ts" src="./Servers.ts"/>

tsconfig.json

@@ -6,12 +6,17 @@
     "jsx": "preserve",
     "moduleResolution": "node",
     "experimentalDecorators": true,
-    "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,
     "useDefineForClassFields": true,
     "sourceMap": true,
+    "allowUnreachableCode": false,
+    "allowUnusedLabels": false,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noImplicitReturns": true,
+    "noUnusedParameters": true,
     "baseUrl": ".",
     "types": [
       "webpack-env"