omegga 0.1.85 → 1.0.2

package/src/webserver/frontend/components/RoleDropdown.vue

@@ -1,157 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-.role-dropdown {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  font-weight: bold;
-  cursor: pointer;
-  user-select: none;
-  position: relative;
-  width: 100%;
-
-  &:not(:last-child) {
-    margin-bottom: 0;
-  }
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 50%;
-    cursor: default;
-  }
-
-  .options {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    width: 100%;
-    max-height: 200px;
-    overflow-y: auto;
-    z-index: 10;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
-
-    .green {
-      background-color: $br-main-normal;
-
-      &:hover {
-        background: $br-main-hover;
-        outline: none;
-      }
-
-      &:active {
-        background: $br-main-pressed;
-        outline: none;
-      }
-    }
-  }
-  .option, .selected {
-    font-family: 'Glacial Indifference';
-    background: $br-element-normal;
-    color: $br-inverted-fg;
-    height: $br-element-height;
-    padding: 2px 12px;
-    padding-right: 0;
-    box-sizing: border-box;
-    font-weight: bold;
-    font-size: $br-element-font;
-    width: 100%;
-    text-decoration: none;
-
-    &:not(.search):hover {
-      background: $br-element-overlay;
-      outline: none;
-    }
-
-    &:not(.search):active {
-      background: $br-element-pressed;
-      outline: none;
-    }
-  }
-
-  .selected {
-    display: flex;
-    border: none;
-    align-items: center;
-
-    .value {
-      flex: 1;
-    }
-  }
-
-  .icon {
-    margin-right: 8px;
-  }
-}
-
-</style>
-
-<template>
-  <div :class="['role-dropdown', {
-    disabled,
-  }]" ref="self">
-    <div class="options" v-if="open">
-      <div class="option search" style="position: relative;" v-if="loadingSearch">
-        <br-loader active size="small"></br-loader>
-      </div>
-      <div v-for="o in options"
-        :class="['option', {green: value === o}]"
-        :key="o"
-        @click="open = false; $emit('input', o);"
-      >
-        {{o}}
-      </div>
-    </div>
-    <div class="selected" @click="open = !open; getRoles()">
-      <div class="value">{{value}}</div>
-      <CaretDownIcon/>
-    </div>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-import CaretDownIcon from 'vue-tabler-icons/icons/CaretDownIcon';
-
-export default Vue.component('br-role-dropdown', {
-  components: {
-    CaretDownIcon,
-  },
-  beforeDestroy() {
-    // remove click detection
-    document.removeEventListener('click', this.handleClick);
-  },
-  created() {
-    // detect clicks outside of this element
-    document.addEventListener('click', this.handleClick);
-  },
-  methods: {
-    handleClick(e) {
-      // basically anytime there's a click, this component should be closed
-      if (open && !this.$refs.self.contains(e.target)) {
-        this.open = false;
-      }
-    },
-    async getRoles() {
-      this.loadingSearch = true;
-      this.options = [];
-      const roles = await this.$$request('roles.list');
-      this.options = roles.map((role) => role.name);
-      this.loadingSearch = false;
-    },
-  },
-  props: {
-    disabled: Boolean,
-    value: String,
-  },
-  data() {
-    return {
-      listener: undefined,
-      open: false,
-      options: [],
-      loadingSearch: false,
-    };
-  },
-});
-
-</script>

package/src/webserver/frontend/components/Scroll.vue

@@ -1,33 +0,0 @@
-<style>
-
-.scroll-container {
-  flex: 1;
-  position: relative;
-}
-
-.scroll-scroller {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow-y: scroll;
-}
-
-</style>
-
-<template>
-  <div class="scroll-container">
-    <div class="scroll-scroller">
-      <slot />
-    </div>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-
-export default Vue.component('br-scroll', {
-});
-
-</script>

package/src/webserver/frontend/components/Toggle.vue

@@ -1,91 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-.toggle {
-  display: flex;
-  font-weight: bold;
-  cursor: pointer;
-  user-select: none;
-  height: $br-element-height;
-  width: $br-element-height + 8;
-  background: $br-element-normal;
-
-  &:not(:last-child) {
-    margin-bottom: 0;
-  }
-
-  &.icon {
-    border-radius: 0;
-    padding: 0;
-    width: $br-element-height;
-  }
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 50%;
-    cursor: default;
-  }
-
-  .toggle-slider {
-    @include center;
-    width: $br-element-height;
-    height: $br-element-height;
-
-    &:focus {
-      background: $br-element-overlay;
-      outline: none;
-    }
-
-    &:not(.on) {
-      @include br-button($br-error-normal, $br-error-hover, $br-error-pressed);
-
-      .symbol {
-        background-color: transparent;
-        width: 10px;
-        height: 10px;
-        border: 4px solid white;
-        border-radius: 50%;
-      }
-    }
-
-    &.on {
-      margin-left: 8px;
-      @include br-button($br-main-normal, $br-main-hover, $br-main-pressed);
-
-      .symbol {
-        width: 4px;
-        height: 16px;
-        background-color: white;
-        border-radius: 2px;
-      }
-    }
-  }
-}
-
-</style>
-
-<template>
-  <div
-    :class="[
-      'toggle',
-      {disabled: typeof disabled !== 'undefined' && disabled}
-    ]"
-    @click="$emit('input', !value)"
-  >
-    <div :class="['toggle-slider', {on: value}]">
-      <div class="symbol"/>
-    </div>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-
-export default Vue.component('br-toggle', {
-  props: {
-    disabled: Boolean,
-    value: Boolean,
-  },
-});
-
-</script>

package/src/webserver/frontend/components/index.js

@@ -1,33 +0,0 @@
-// generic layout
-import './Header.vue';
-import './Footer.vue';
-import './Background.vue';
-import './MainMenuButton.vue';
-import './PopoutContent.vue';
-import './NavBar.vue';
-
-import './Loader.vue';
-import './Modal.vue';
-import './Dimmer.vue';
-
-import './Scroll.vue';
-import './InfiniteScroll.vue';
-
-// Buttons, inputs, etc
-import './Button.vue';
-import './Input.vue';
-import './ListInput.vue';
-import './Dropdown.vue';
-import './Toggle.vue';
-import './PlayerDropdown.vue';
-import './RoleDropdown.vue';
-
-// chat timestamp
-import './ChatTime.vue';
-import './ChatEntry.vue';
-
-// external components
-import Vue from 'vue';
-import linkify from 'vue-linkify';
-
-Vue.directive('linkified', linkify);

package/src/webserver/frontend/css/font.scss

@@ -1,53 +0,0 @@
-@font-face {
-  font-family: 'Glacial Indifference';
-  src: url('/public/fonts/GlacialIndifferenceBold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Glacial Indifference';
-  src: url('/public/fonts/GlacialIndifferenceItalic.otf') format('opentype');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Glacial Indifference';
-  src: url('/public/fonts/GlacialIndifferenceMedium.otf') format('opentype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Glacial Indifference';
-  src: url('/public/fonts/GlacialIndifferenceRegular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('/public/fonts/RobotoBold.ttf') format('truetype');
-  font-weight: bold;
-  font-style: normal;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('/public/fonts/RobotoItalic.ttf') format('truetype');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Roboto';
-  src: url('/public/fonts/RobotoRegular.ttf') format('truetype');
-  font-weight: normal;
-  font-style: normal;
-}
-
-
-body {
-  font-family: 'Glacial Indifference';
-}

package/src/webserver/frontend/css/mixins.scss

@@ -1,49 +0,0 @@
-@mixin row {
-  display: flex;
-}
-
-@mixin column {
-  display: flex;
-  flex-direction: column;
-}
-
-@mixin column-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  position: relative;
-}
-
-@mixin column-stretch {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
-@mixin center {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-// centered with absolute position
-@mixin absolute-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-
-// alternate a property
-@mixin alternate($prop, $odd, $even) {
-  #{$prop}: $odd;
-  &:nth-child(even) {
-    #{$prop}: $even;
-  }
-}
-
-@mixin br-button($normal, $hover, $active) {
-  background-color: $normal;
-  &:hover { background-color: $hover; }
-  &:active, &.disabled {background-color: $active; }
-}

package/src/webserver/frontend/css/style.scss

@@ -1,166 +0,0 @@
-@import 'font';
-@import 'theme';
-@import 'mixins';
-
-html, body {
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  width: 100%;
-  height: 100%;
-  display: table;
-}
-
-body {
-  width: 100%;
-  display: table-cell;
-  position: relative;
-  overflow: hidden;
-  font-family: 'Glacial Indifference';
-}
-
-@media screen and (max-width: 600px) {
-  body {
-    overflow-y: auto;
-  }
-}
-
-::-webkit-scrollbar {
-  width: 16px;
-}
-
-::-webkit-scrollbar-track {
-  background-color: $br-element-footer-bg;
-}
-
-::-webkit-scrollbar-thumb {
-  background: $br-element-bg;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: #fff;
-}
-
-.generic-container {
-  flex: 1;
-  position: relative;
-  margin-left: 8px;
-}
-
-.stat {
-  color: white;
-  font-weight: bold;
-}
-
-.stats {
-  padding: 8px;
-  font-size: 24px;
-  word-break: break-all;
-  background-color: $br-element-popout-bg;
-}
-
-.stat b {
-  color: $br-boring-button-fg;
-}
-
-.log-entry {
-  & {
-    font-size: 24px;
-    text-shadow:  -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
-    word-break: break-all;
-  }
-
-  .user {
-    font-weight: bold;
-  }
-
-  .join-message, .join-message .user {
-    color: #3477e3 !important;
-  }
-
-  .chat-message {
-    color: #ffffff;
-  }
-
-  .server-message {
-    color: #ff00ff;
-  }
-}
-
-table.br-table {
-  font-weight: bold;
-  border-collapse: collapse;
-  font-size: 24px;
-
-  thead th {
-    color: white;
-    height: 50px;
-    background-color: $br-bg-primary;
-    white-space: nowrap;
-  }
-
-  th, td {
-    padding: 0 10px;
-  }
-
-  tr td:first-child, tr th:first-child {
-    padding-left: 20px;
-  }
-
-  tr td:last-child, tr th:last-child {
-    padding-right: 20px;
-  }
-
-  tbody tr {
-    @include alternate(background-color, $br-bg-secondary, $br-bg-secondary-alt);
-    td {
-      font-size: 20px;
-      color: $br-boring-button-fg;
-      height: 50px;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-}
-
-a, :visited {
-  color: #0ff;
-}
-
-.widgets-container {
-  z-index: 100;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  .widgets-list {
-    background-color: $br-element-footer-bg;
-    margin-right: 8px;
-    min-width: 200px;
-
-    .widget-item {
-      background-color: $br-bg-primary;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      height: 50px;
-      padding: 0 10px;
-
-      &:nth-child(even) {
-        background-color: $br-bg-primary-alt;
-      }
-
-      .name {
-        text-transform: uppercase;
-        display: flex;
-        align-items: center;
-
-        .icon {
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-}

package/src/webserver/frontend/css/theme.scss

@@ -1,64 +0,0 @@
-/* Background & Panel */
-$br-bg-primary: #1b2f4a;
-$br-bg-primary-alt: #182b44;
-$br-bg-secondary: #131d30;
-$br-bg-secondary-alt: #111a2b;
-$br-bg-footer: #091021;
-$br-bg-header: $br-bg-footer;
-$br-fg-footer: #ffffff;
-$br-fg-header: $br-fg-footer;
-
-$br-header-font: 24px;
-$br-header-height: 50px;
-$br-footer-font: 24px;
-$br-footer-height: 50px;
-
-/* Text & Icon */
-$br-boring-button-fg: #a7bbce;
-$br-button-fg: #ffffff;
-$br-inverted-fg: #1a2848;
-
-/* Buttons & Colored Elements */
-
-/* Main */
-$br-main-normal: #5da93d;
-$br-main-hover: #8dc377;
-$br-main-pressed: #41772b;
-$br-main-disabled: $br-main-pressed;
-
-/* Info */
-$br-info-normal: #009bee;
-$br-info-hover: #4cb9f3;
-$br-info-pressed: #007da7;
-$br-info-disabled: $br-info-pressed;
-
-/* Error */
-$br-error-normal: #e02d2d;
-$br-error-hover: #e96c6c;
-$br-error-pressed: #9d2020;
-$br-error-disabled: $br-error-pressed;
-
-/* Warning */
-$br-warn-normal: #ffa10b;
-$br-warn-hover: #ffbd54;
-$br-warn-pressed: #b37108;
-$br-warn-disabled: $br-warn-pressed;
-
-/* Button */
-$br-button-normal: #455a7e;
-$br-button-hover: #5e7190;
-$br-button-pressed: #263f61;
-$br-button-disabled: $br-button-pressed;
-
-/* Element */
-$br-element-normal: #455a7e;
-$br-element-fg: #5e7190;
-$br-element-pressed: #263f61;
-$br-element-overlay: $br-element-fg;
-$br-element-hover: $br-element-fg;
-$br-element-bg: #224c7b;
-$br-element-popout-bg: #263f61;
-$br-element-header-bg: #162841;
-$br-element-footer-bg: $br-element-header-bg;
-$br-element-height: 32px;
-$br-element-font: 24px;

package/src/webserver/frontend/partials/NavHeader.vue

@@ -1,55 +0,0 @@
-<style lang="scss" scoped>
-
-.nav-header {
-  color: white;
-  font-weight: bold;
-  font-size: 50px;
-  text-transform: uppercase;
-}
-
-.main-nav {
-  margin-bottom: 16px;
-}
-
-</style>
-
-<template>
-  <div class="main-nav">
-    <header class="nav-header">{{title}}</header>
-    <br-navbar>
-      <span style="flex: 1; margin-left: 8px">
-        Welcome, {{username || user.username}}
-      </span>
-      <slot />
-      <br-button icon error
-        v-if="showLogout"
-        data-tooltip="Logout of Web UI"
-        @click="logout()"
-      >
-        <LogoutIcon />
-      </br-button>
-    </br-navbar>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-import LogoutIcon from 'vue-tabler-icons/icons/LogoutIcon';
-
-
-export default Vue.component('nav-header', {
-  components: { LogoutIcon },
-  props: ['title'],
-  sockets: {
-    data({ user }) {
-      this.username = user.username;
-    },
-  },
-  data() {
-    return {
-      username: '',
-    };
-  },
-});
-</script>