Islanders/islanders-client-vue/src/components/Overview.vue at 7023143b7038783213af6cf21b692e47aadc8e48 · Islanders-Game/Islanders · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<template>
  <v-container
    id="Overview"
    fluid
  >
    <v-tabs
      dark
      fluid
      center-active
      show-arrows
      fixed-tabs
      class="fill-height"
    >
      <v-tabs-slider />

      <v-tab
        dark
        href="#tab-1"
      >
        Players
      </v-tab>

      <v-tab
        dark
        href="#tab-2"
      >
        Chat
      </v-tab>

      <v-tab
        dark
        href="#tab-3"
      >
        Logs
      </v-tab>

      <v-tab-item
        :key="1"
        :value="'tab-1'"
      >
        <Players />
      </v-tab-item>

      <v-tab-item
        :key="2"
        :value="'tab-2'"
      >
        <Chat />
      </v-tab-item>

      <v-tab-item
        :key="3"
        :value="'tab-3'"
      >
        <Log />
      </v-tab-item>
    </v-tabs>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Chat from './Chat.vue'
import Log from './Log.vue'
import Players from './Players.vue'

@Component({
  components: {
    Players,
    Chat,
    Log,
  },
})
export default class Overview extends Vue {
  get currentDie (): number | undefined {
    const roll = this.$store.getters['game/getCurrentDie']
    return roll === 'None' ? undefined : roll
  }
}
</script>

<style scoped lang="scss">
#Overview {
  padding: 0px;
  scrollbar-width: thin;
  overflow-x: hidden;
  overflow-y: hidden visible;
}
</style>