Skip to content

Commit 751ddae

Browse files
PhrancisPhrancis
committed
add TopNavbar to other pages, #147 
1 parent c27b111 commit 751ddae

File tree

3 files changed

+129
-114
lines changed

3 files changed

+129
-114
lines changed

‎src/components/DeckBuilder.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<div>
3+
<TopNavbar></TopNavbar>
34
<div v-if="!doneLoading">
45
<h1 class="deckbuilder-deck-name">Loading Deck Builder...</h1>
56
</div>
@@ -103,6 +104,7 @@
103104
</template>
104105
<script>
105106
import CardshifterServerAPI from "../server_interface";
107+
import TopNavbar from "./TopNavbar";
106108
import CardModel from "./CardModel"
107109
108110
const DECK_STORAGE = "CARDSHIFTER_DECK_STORAGE";
@@ -128,7 +130,8 @@ export default {
128130
}
129131
},
130132
components: {
131-
CardModel
133+
TopNavbar,
134+
CardModel
132135
},
133136
methods: {
134137
playerconfig(cardInformation) {

‎src/components/GameBoard.vue‎

Lines changed: 43 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,50 @@
11
<template>
2-
<div class="game" :class="'game-' + modName">
3-
<!-- Player display -->
4-
<div>
5-
<b-alert :show="eliminationResult !== null">
6-
<span>{{ eliminationResult }}</span>
7-
<button @click="gotoLobby()">Back to Lobby</button>
8-
</b-alert>
9-
10-
<b-alert dismissible variant="danger" @dismissed="errorMessage = null" :show="errorMessage !== null">{{ errorMessage }}</b-alert>
11-
12-
<div v-for="(info, type) in playerInfos" class="player" :key="type"
13-
:class="{'player-user': info == playerInfos.user, 'player-opponent': info != playerInfos.user}">
14-
15-
<!-- Player information boxes -->
16-
<PlayerInfo :info="info" :currentAction="currentAction"
17-
:targets="targets"
18-
:actions="actions" :selectEntity="selectEntity" :startAction="startAction" :cancelAction="cancelAction" :performAction="performAction"
19-
:showActions="info == playerInfos.user">
20-
21-
</PlayerInfo>
22-
23-
<!-- Player cards -->
24-
<div v-for="(zoneInfo, zoneName) in info.zones" class="zone" :class="'zone-' + zoneName" :key="zoneName">
25-
<transition-group v-if="zoneInfo.known" name="list-complete" tag="div">
26-
<!--<h3>{{zoneName}}</h3>-->
27-
<CardModel class="list-complete-item" :card="card" :targets="targets" :doingAction="doingAction"
28-
:selectEntity="selectEntity" :actions="actions" :startAction="startAction"
29-
v-for="(card, id) in zoneInfo.entities" :key="id" v-if="card.properties">
30-
</CardModel>
31-
</transition-group>
32-
33-
<!-- For opponent's cards. Is there a better way? -->
34-
<div v-show="!zoneInfo.known && zoneName==='Hand'">
35-
<!--<h3>{{zoneName}}</h3>-->
2+
<div>
3+
<TopNavbar></TopNavbar>
4+
<div class="game" :class="'game-' + modName">
5+
<!-- Player display -->
6+
<div>
7+
<b-alert :show="eliminationResult !== null">
8+
<span>{{ eliminationResult }}</span>
9+
<button @click="gotoLobby()">Back to Lobby</button>
10+
</b-alert>
11+
12+
<b-alert dismissible variant="danger" @dismissed="errorMessage = null" :show="errorMessage !== null">{{ errorMessage }}</b-alert>
13+
14+
<div v-for="(info, type) in playerInfos" class="player" :key="type"
15+
:class="{'player-user': info == playerInfos.user, 'player-opponent': info != playerInfos.user}">
16+
17+
<!-- Player information boxes -->
18+
<PlayerInfo :info="info" :currentAction="currentAction"
19+
:targets="targets"
20+
:actions="actions" :selectEntity="selectEntity" :startAction="startAction" :cancelAction="cancelAction" :performAction="performAction"
21+
:showActions="info == playerInfos.user">
22+
23+
</PlayerInfo>
24+
25+
<!-- Player cards -->
26+
<div v-for="(zoneInfo, zoneName) in info.zones" class="zone" :class="'zone-' + zoneName" :key="zoneName">
27+
<transition-group v-if="zoneInfo.known" name="list-complete" tag="div">
28+
<!--<h3>{{zoneName}}</h3>-->
29+
<CardModel class="list-complete-item" :card="card" :targets="targets" :doingAction="doingAction"
30+
:selectEntity="selectEntity" :actions="actions" :startAction="startAction"
31+
v-for="(card, id) in zoneInfo.entities" :key="id" v-if="card.properties">
32+
</CardModel>
33+
</transition-group>
34+
35+
<!-- For opponent's cards. Is there a better way? -->
36+
<div v-show="!zoneInfo.known && zoneName==='Hand'">
37+
<!--<h3>{{zoneName}}</h3>-->
38+
</div>
39+
</div>
3640
</div>
3741
</div>
3842
</div>
39-
</div>
40-
</div>
43+
</div>
4144
</template>
4245
<script>
4346
import CardshifterServerAPI from "../server_interface";
47+
import TopNavbar from "./TopNavbar";
4448
import CardModel from "./CardModel"
4549
import PlayerInfo from "./PlayerInfo"
4650
@@ -79,8 +83,9 @@ export default {
7983
}
8084
},
8185
components: {
82-
PlayerInfo,
83-
CardModel
86+
TopNavbar,
87+
PlayerInfo,
88+
CardModel
8489
},
8590
methods: {
8691
startAction(action) {

‎src/components/Lobby.vue‎

Lines changed: 82 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,90 @@
11
<template>
2-
<table id="lobby" class="lobby">
3-
<tr id="lobby-headers" class="lobby-headers">
4-
<td id="lobby-title" class="lobby-title">Lobby</td>
5-
<td id="lobby-deck-builder" class="lobby-deck-builder" width="20%">
6-
<button @click="openDeckBuilder()" class="btn btn-navbar csh-button deck-builder-btn">
7-
Deck Builder
8-
</button>
9-
</td>
10-
</tr>
11-
<tr id="lobby-invite-request"class="lobby-invite-request" v-if="gotInvite">
12-
<td colspan="2">
13-
<div id="lobby-accept-invite" class="lobby-accept-invite">
14-
Game invite from {{invite.name}} to play {{invite.type}}!<br/>
15-
<input @click="acceptInvite(true)" type="button" value="Accept" class="btn btn-success"/>
16-
<input @click="acceptInvite(false)" type="button" value="Decline" class="btn btn-danger"/>
17-
<audio ref="pingAudio">
18-
<source src="../assets/ping_sound.mp3" type="audio/mpeg">
19-
</audio>
20-
</div>
21-
</td>
22-
</tr>
23-
<tr v-if="errorMessage !== null">
24-
<td colspan="2">
25-
<b-alert dismissible variant="danger" @dismissed="errorMessage = null" :show="errorMessage !== null">{{ errorMessage }}</b-alert>
26-
</td>
27-
</tr>
28-
<tr id="lobby-list-headers" class="lobby-list-headers">
29-
<th id="lobby-message-list-header" class="lobby-message-list-header">Messages</th>
30-
<th id="lobby-users-list-header" class="lobby-users-list-header">Users Online</th>
31-
</tr>
32-
<tr id="lobby-lists" class="lobby-lists">
33-
<td id="lobby-message-list" class="lobby-message-list">
34-
<ul id="lobby-chat-messages" class="lobby-chat-messages">
35-
<li v-for="message in chatMessages" :class="{'user-chat-message lobby-chat-message': message.from === currentUser.username}" id="lobby-chat-message">
36-
<!-- Only display from if there is a from. Errors will not have a from -->
37-
[{{message.timestamp}}] {{message.from ? message.from + ":" : ""}} {{message.message}}
38-
</li>
39-
</ul>
40-
</td>
41-
<td id="lobby-users-list" class="lobby-users-list">
42-
<ul id="lobby-users" class="lobby-users">
43-
<li v-for="user in users" id="lobby-user" class="lobby-user">
44-
<label>
45-
<input v-model="selected_opponent" v-if="user.userId != currentUser.id" type="radio"
46-
:value="user.userId" name="user_selection" /> {{user.name}}
47-
</label>
48-
</li>
49-
</ul>
50-
</td>
51-
</tr>
52-
<tr>
53-
<td id="lobby-message" class="lobby-message">
54-
<textarea v-model="user_chat_message" @keyup.enter="sendMessage($event)"
55-
id="lobby-chat-text-area" class="lobby-chat-text-area" rows="1" cols="75" wrap="off"
56-
placeholder="Enter chat message..."></textarea>
57-
<input @click="sendMessage()" :disabled="sending" type="submit" value="Send" class="btn btn-navbar csh-button lobby-chat-send-btn"/>
58-
</td>
59-
<td id="lobby-invite" class="lobby-invite">
60-
<input @click="startGame()" type="button" value="Invite to game!" class="btn btn-success lobby-game-invite-btn"/>
61-
</td>
62-
</tr>
63-
<tr id="lobby-mods" class="lobby-mods">
64-
<td colspan="2" id="lobby-mod-selection" class="lobby-mod-selection">
65-
<form class="form-inline" role="form">
66-
<div class="form-group">
67-
<label for="mod_selection" class="lobby-mod-selector-label">Select game type:</label>
68-
<div v-for="mod in mods" class="form-control lobby-mod-selector">
2+
<div>
3+
<TopNavbar></TopNavbar>
4+
<table id="lobby" class="lobby">
5+
<tr id="lobby-headers" class="lobby-headers">
6+
<td id="lobby-title" class="lobby-title">Lobby</td>
7+
<td id="lobby-deck-builder" class="lobby-deck-builder" width="20%">
8+
<button @click="openDeckBuilder()" class="btn btn-navbar csh-button deck-builder-btn">
9+
Deck Builder
10+
</button>
11+
</td>
12+
</tr>
13+
<tr id="lobby-invite-request"class="lobby-invite-request" v-if="gotInvite">
14+
<td colspan="2">
15+
<div id="lobby-accept-invite" class="lobby-accept-invite">
16+
Game invite from {{invite.name}} to play {{invite.type}}!<br/>
17+
<input @click="acceptInvite(true)" type="button" value="Accept" class="btn btn-success"/>
18+
<input @click="acceptInvite(false)" type="button" value="Decline" class="btn btn-danger"/>
19+
<audio ref="pingAudio">
20+
<source src="../assets/ping_sound.mp3" type="audio/mpeg">
21+
</audio>
22+
</div>
23+
</td>
24+
</tr>
25+
<tr v-if="errorMessage !== null">
26+
<td colspan="2">
27+
<b-alert dismissible variant="danger" @dismissed="errorMessage = null" :show="errorMessage !== null">{{ errorMessage }}</b-alert>
28+
</td>
29+
</tr>
30+
<tr id="lobby-list-headers" class="lobby-list-headers">
31+
<th id="lobby-message-list-header" class="lobby-message-list-header">Messages</th>
32+
<th id="lobby-users-list-header" class="lobby-users-list-header">Users Online</th>
33+
</tr>
34+
<tr id="lobby-lists" class="lobby-lists">
35+
<td id="lobby-message-list" class="lobby-message-list">
36+
<ul id="lobby-chat-messages" class="lobby-chat-messages">
37+
<li v-for="message in chatMessages" :class="{'user-chat-message lobby-chat-message': message.from === currentUser.username}" id="lobby-chat-message">
38+
<!-- Only display from if there is a from. Errors will not have a from -->
39+
[{{message.timestamp}}] {{message.from ? message.from + ":" : ""}} {{message.message}}
40+
</li>
41+
</ul>
42+
</td>
43+
<td id="lobby-users-list" class="lobby-users-list">
44+
<ul id="lobby-users" class="lobby-users">
45+
<li v-for="user in users" id="lobby-user" class="lobby-user">
6946
<label>
70-
<input v-model="selected_mod" type="radio" :value="mod"
71-
name="mod_selection" id="mod_selection"/>
72-
{{mod}}
47+
<input v-model="selected_opponent" v-if="user.userId != currentUser.id" type="radio"
48+
:value="user.userId" name="user_selection" /> {{user.name}}
7349
</label>
50+
</li>
51+
</ul>
52+
</td>
53+
</tr>
54+
<tr>
55+
<td id="lobby-message" class="lobby-message">
56+
<textarea v-model="user_chat_message" @keyup.enter="sendMessage($event)"
57+
id="lobby-chat-text-area" class="lobby-chat-text-area" rows="1" cols="75" wrap="off"
58+
placeholder="Enter chat message..."></textarea>
59+
<input @click="sendMessage()" :disabled="sending" type="submit" value="Send" class="btn btn-navbar csh-button lobby-chat-send-btn"/>
60+
</td>
61+
<td id="lobby-invite" class="lobby-invite">
62+
<input @click="startGame()" type="button" value="Invite to game!" class="btn btn-success lobby-game-invite-btn"/>
63+
</td>
64+
</tr>
65+
<tr id="lobby-mods" class="lobby-mods">
66+
<td colspan="2" id="lobby-mod-selection" class="lobby-mod-selection">
67+
<form class="form-inline" role="form">
68+
<div class="form-group">
69+
<label for="mod_selection" class="lobby-mod-selector-label">Select game type:</label>
70+
<div v-for="mod in mods" class="form-control lobby-mod-selector">
71+
<label>
72+
<input v-model="selected_mod" type="radio" :value="mod"
73+
name="mod_selection" id="mod_selection"/>
74+
{{mod}}
75+
</label>
76+
</div>
7477
</div>
75-
</div>
76-
</form>
77-
</td>
78-
</tr>
79-
</table>
78+
</form>
79+
</td>
80+
</tr>
81+
</table>
82+
</div>
8083
</template>
8184

8285
<script>
8386
import CardshifterServerAPI from "../server_interface";
87+
import TopNavbar from "./TopNavbar";
8488
8589
var CHAT_FEED_LIMIT = 10;
8690
var MESSAGE_DELAY = 3000;
@@ -120,6 +124,9 @@ export default {
120124
gotInvite: false
121125
}
122126
},
127+
components: {
128+
TopNavbar
129+
},
123130
methods: {
124131
/**
125132
* This function is called when the user hits the "Send" button

0 commit comments

Comments
 (0)