Islanders/islanders-client-vue/src/components/Game.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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
  <v-main>
    <v-container
      id="Game"
      fluid
    >
      <v-row
        no-gutters
        class="top-ui"
      >
        <v-col
          sm="9"
          class="fill-height"
        >
          <Error />

          <v-chip id="gameInfo" x-small dark absolute label outlined>
            <span id="idLabel">ID:</span>{{ gameID }}
          </v-chip>

          <v-dialog v-model="playerHasWon" width="40%">
            <v-card>
              <v-card-title>
                {{ winner }} has won the game!
              </v-card-title>
            </v-card>
          </v-dialog>

          <Map class="fill-height" />
        </v-col>
        <v-col
          sm="3"
          class="fill-height"
        >
          <Overview class="fill-height" />
        </v-col>
      </v-row>
      <v-row
        no-gutters
        class="bottom-ui"
      >
        <CustomizeGame v-if="!started" />
        <Player v-else />
      </v-row>
    </v-container>
  </v-main>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Overview from './Overview.vue'
import Map from './Map.vue'
import Player from './Player.vue'
import CustomizeGame from './CustomizeGame.vue'
import Error from './Error.vue'

@Component({
  components: {
    Overview,
    Map,
    Player,
    CustomizeGame,
    Error,
  },
})
export default class Game extends Vue {
  get started (): boolean {
    return this.$store.getters['game/getIsGameStarted']
  }

  get gameID(): string {
    return this.$store.state.game.gameId
  }

  get playerHasWon(): boolean {
    return this.$store.state.game.winner !== undefined;
  }

  get winner(): string {
    return this.$store.state.game?.winner;
  }
}
</script>

<style lang="scss" scoped>
.top-ui {
  height: 75%;
  padding: 0;
  margin: 0;
}

.bottom-ui {
  padding: 0;
  margin-top: 0px !important;
  height: 25%;
  background: #1e1e1e
}

#Game {
  height: 100vh;
  padding: 0px;
}

#gameInfo {
  position: absolute;
  bottom: 25.5%;
  left: 6px;
  opacity: 0.35;

  &:hover {
    opacity: 1;
  }
}

#idLabel {
  padding-right: 5px;
  color: lightgray;
  pointer-events: none;
}
</style>