omegga 0.1.85 → 1.0.2

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

@@ -1,105 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-transform: uppercase;
-  height: $br-element-height;
-  font-size: $br-element-font;
-  border-radius: 16px;
-  box-sizing: border-box;
-  color: $br-button-fg;
-  font-weight: bold;
-  padding: 0 16px;
-  cursor: pointer;
-  user-select: none;
-
-  &.boxy {
-    border-radius: 0;
-    padding: 0 8px;
-  }
-
-  &:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  &:not(.icon) .icon {
-    margin-right: 8px;
-  }
-
-  &.icon {
-    border-radius: 0;
-    padding: 0;
-    width: $br-element-height;
-    min-width: $br-element-height;
-  }
-
-  &.disabled {
-    opacity: 50%;
-    cursor: default;
-    pointer-events: none;
-  }
-
-  .button-content {
-    display: flex;
-    text-align: center;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &:not(.disabled):active .button-content {
-    padding-top: 4px;
-  }
-
-  &.warn {
-    @include br-button($br-warn-normal, $br-warn-hover, $br-warn-pressed);
-  }
-
-  &.main {
-    @include br-button($br-main-normal, $br-main-hover, $br-main-pressed);
-  }
-
-  &.info {
-    @include br-button($br-info-normal, $br-info-hover, $br-info-pressed);
-  }
-
-  &.error {
-    @include br-button($br-error-normal, $br-error-hover, $br-error-pressed);
-  }
-
-  &.normal {
-    @include br-button($br-element-normal, $br-element-hover, $br-element-pressed);
-    color: $br-boring-button-fg;
-  }
-}
-
-
-</style>
-
-<template>
-  <div :class="['button', {
-    warn: (typeof warn !== 'undefined'),
-    main: (typeof main !== 'undefined'),
-    error: (typeof error !== 'undefined') ,
-    info: (typeof info !== 'undefined'),
-    normal: (typeof normal !== 'undefined'),
-    disabled: (typeof disabled !== 'undefined') && disabled,
-    boxy: (typeof boxy !== 'undefined'),
-    icon: (typeof icon !== 'undefined'),
-  }]" @click="$emit('click', $event)">
-    <div class="button-content">
-      <slot/>
-    </div>
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-
-export default Vue.component('br-button', {
-  props: ['warn', 'main', 'icon', 'error', 'info', 'normal', 'disabled', 'boxy'],
-});
-
-</script>

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

@@ -1,107 +0,0 @@
-<style lang="scss" scoped>
-@import '../css/style';
-
-.log-entry {
-  text-decoration: none;
-  font-family: 'Roboto';
-
-  .log-row {
-    display: flex;
-    align-items: center;
-
-    .user,
-    .time-link {
-      text-decoration: none;
-    }
-
-    .time-link {
-      display: flex;
-      align-items: center;
-
-      .icon {
-        opacity: 0;
-        color: white;
-      }
-    }
-
-    .message {
-      flex: 1;
-    }
-  }
-
-  &:hover .log-row {
-    background: rgba(255, 255, 255, 0.2);
-
-    .icon {
-      opacity: 1;
-    }
-  }
-
-  &.focused .log-row {
-    background: $br-main-normal;
-  }
-}
-</style>
-
-<template>
-  <div :class="['log-entry', { focused: $route.params.time == log.created }]">
-    <div class="log-row">
-      <router-link
-        :to="
-          '/history/' + ($route.params.time == log.created ? '' : log.created)
-        "
-        class="time-link"
-      >
-        <LinkIcon />
-        <chat-time :time="log.created" />
-      </router-link>
-      <div v-if="log.action === 'msg'" class="chat-message message" v-once>
-        {{ log.user.web ? '[' : ''
-        }}<span
-          v-if="log.user.web"
-          class="user"
-          :style="{ color: '#' + log.user.color }"
-          >{{ log.user.name }}</span
-        ><router-link
-          v-else
-          :to="'/players/' + log.user.id"
-          class="user"
-          :style="{ color: '#' + log.user.color }"
-          >{{ log.user.name }}</router-link
-        >{{ log.user.web ? ']' : '' }}:
-        <span v-html="xss(log.message)" v-linkified />
-      </div>
-      <div v-if="log.action === 'leave'" class="message join-message" v-once>
-        <router-link class="user" :to="'/players/' + log.user.id">
-          {{ log.user.name }}
-        </router-link>
-        left the game.
-      </div>
-      <div v-if="log.action === 'join'" class="message join-message" v-once>
-        <router-link class="user" :to="'/players/' + log.user.id">
-          {{ log.user.name }}
-        </router-link>
-        joined the game{{ log.user.isFirst ? ' for the first time' : '' }}.
-      </div>
-      <div v-if="log.action === 'server'" class="message server-message">
-        {{ log.message }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-import LinkIcon from 'vue-tabler-icons/icons/LinkIcon';
-
-export default Vue.component('br-chat-entry', {
-  components: { LinkIcon },
-  props: {
-    log: { type: Object },
-  },
-  data() {
-    return {};
-  },
-});
-</script>

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

@@ -1,40 +0,0 @@
-<style scoped>
-.chat-timestamp {
-  align-self: center;
-  font-size: 16px;
-  margin-right: 8px;
-  font-weight: bold;
-  text-align: right;
-  display: inline-block;
-  width: 75px;
-  min-width: 75px;
-  color: #ccc;
-}
-
-</style>
-
-<template>
-  <div class="chat-timestamp">
-    {{hours}}:{{minutes}} {{pm}}
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-
-export default Vue.component('chat-time', {
-  props: ['time'],
-  created() {
-    const date = new Date(this.time);
-    this.hours = date.getHours();
-    this.pm = this.hours >= 12 ? 'PM' : 'AM';
-    if (this.hours > 12) {
-      this.hours -= 12;
-    } else if (this.hours === 0) {
-      this.hours = 12;
-    }
-    this.minutes = (date.getMinutes() + '').padStart(2, '0');
-  },
-});
-
-</script>

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

@@ -1,43 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style.scss';
-
-.dimmer {
-  background-color: $br-bg-primary;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: none;
-  align-items: stretch;
-  z-index: 200;
-
-  &.visible {
-    display: flex;
-  }
-
-  .dimmer-content {
-    position: relative;
-    flex: 1;
-  }
-}
-</style>
-
-<template>
-  <div :class="['dimmer', { visible }]">
-    <div class="dimmer-content">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-
-export default Vue.component('br-dimmer', {
-  props: {
-    visible: Boolean,
-  },
-});
-</script>

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

@@ -1,145 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-.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;
-
-    &:hover {
-      background: $br-element-overlay;
-      outline: none;
-    }
-
-    &: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="['dropdown', {
-    disabled,
-  }]" ref="self">
-    <div class="options" v-if="open">
-      <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">
-      <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-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;
-      }
-    }
-  },
-  props: {
-    disabled: Boolean,
-    options: Array,
-    value: [String, Number],
-  },
-  data() {
-    return {
-      listener: undefined,
-      open: false,
-    };
-  },
-});
-
-</script>

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

@@ -1,29 +0,0 @@
-<style scoped>
-@import '../css/theme';
-
-.footer {
-  background-color: $br-bg-footer;
-  color: $br-fg-footer;
-  display: flex;
-  font-size: $br-footer-font;
-  font-weight: bold;
-  height: $br-footer-height - 20px;
-  padding: 10px;
-  text-transform: uppercase;
-}
-
-</style>
-
-<template>
-  <div class="footer">
-    <slot />
-  </div>
-</template>
-<script>
-
-import Vue from 'vue';
-
-export default Vue.component('br-footer', {
-});
-
-</script>

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

@@ -1,27 +0,0 @@
-<style scoped lang="scss">
-@import '../css/theme';
-
-.header {
-  align-items: center;
-  background-color: $br-bg-header;
-  color: $br-fg-header;
-  display: flex;
-  font-size: $br-header-font;
-  font-weight: bold;
-  height: $br-header-height;
-  padding-left: 20px;
-  padding-right: 10px;
-  text-transform: uppercase;
-}
-</style>
-
-<template>
-  <div class="header">
-    <slot />
-  </div>
-</template>
-<script>
-import Vue from 'vue';
-
-export default Vue.component('br-header', {});
-</script>

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

@@ -1,51 +0,0 @@
-<template>
-  <div @scroll="handleElementScroll">
-    <slot/>
-  </div>
-</template>
-
-<script>
-import Vue from 'vue';
-export default Vue.component('v-infinite-scroll', {
-  props: {
-    loading: {type: Boolean},
-    offset: {type: Number, default: 0},
-    onTopScrollsToBottom: {type: Boolean, default: true}
-  },
-  data () {
-    return {
-      target: null,
-      scrollPosition: 0,
-      lastDirection: ''
-    }
-  },
-  methods: {
-    handleElementScroll: function(e) {
-      if (!this.target) this.target = e.target
-      let currentScrollPosition = e.target.scrollTop
-      if (currentScrollPosition > this.scrollPosition && currentScrollPosition + e.target.offsetHeight >= e.target.scrollHeight - this.offset) {
-        this.emitEvents('bottom');
-      } else if (currentScrollPosition < this.scrollPosition && currentScrollPosition <= this.offset) {
-        this.emitEvents('top');
-      }
-      this.scrollPosition = currentScrollPosition;
-    },
-    emitEvents (name) {
-      if (!this.loading) {
-        this.lastDirection = name;
-        this.$emit(name);
-      }
-    }
-  },
-  watch: {
-    loading () {
-      if (this.onTopScrollsToBottom && !this.loading && this.lastDirection == 'top') {
-        this.target.scroll({
-          top: this.target.scrollHeight - this.target.offsetHeight - this.offset - 2,
-          behavior: 'instant',
-        });
-      }
-    }
-  }
-});
-</script>

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

@@ -1,93 +0,0 @@
-<style scoped lang="scss">
-@import '../css/style';
-
-.input {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  font-weight: bold;
-  cursor: pointer;
-  user-select: none;
-
-  &:not(:last-child) {
-    margin-bottom: 0;
-  }
-
-  &.icon {
-    border-radius: 0;
-    padding: 0;
-    width: $br-element-height;
-  }
-
-  &.disabled {
-    pointer-events: none;
-    opacity: 50%;
-    cursor: default;
-  }
-
-  input {
-    height: $br-element-height;
-    font-family: 'Glacial Indifference';
-    padding: 2px 12px;
-    box-sizing: border-box;
-    font-weight: bold;
-    font-size: $br-element-font;
-    background: $br-element-normal;
-    color: $br-inverted-fg;
-    border: none;
-
-    &::placeholder {
-      color: $br-element-bg;
-    }
-
-    &:focus {
-      background: $br-element-overlay;
-      outline: none;
-    }
-  }
-
-  .icon {
-    margin-right: 8px;
-  }
-}
-
-.header > .input input {
-  height: 32px !important;
-}
-</style>
-
-<template>
-  <div
-    :class="[
-      'input',
-      {
-        disabled
-      }
-    ]"
-  >
-    <input
-      spellcheck="false"
-      :value="value"
-      @input="
-        $emit(
-          'input',
-          type === 'number' ? Number($event.target.value) : $event.target.value
-        )
-      "
-      :placeholder="placeholder ? placeholder.toString() : ''"
-      :type="type"
-    />
-  </div>
-</template>
-<script>
-import Vue from 'vue';
-
-export default Vue.component('br-input', {
-  props: {
-    placeholder: String,
-    disabled: Boolean,
-    type: String,
-    value: [String, Number]
-  }
-});
-</script>