Add room creation

webclient/src/components/RoomList.vue

@@ -1,5 +1,8 @@
 <template>
 	<div class="container">
+		<b-button @click="create" icon-left="library-plus" type="is-primary"
+			>Create</b-button
+		>
 		<b-table
 			striped
 			hoverable
@@ -65,6 +68,7 @@ interface RoomRow {
 export default class RoomList extends Vue {
 	@State("server") private server!: ServerState;
 	@Action("joinRoom", { namespace: "server" }) private join: any;
+	@Action("createRoom", { namespace: "server" }) private create: any;
 
 	private data() {
 		return {

webclient/src/components/RoomLog.vue

@@ -2,12 +2,24 @@
 <template>
 	<div class="container">
 		<b-table striped hoverable :data="rows" :columns="columns"></b-table>
+		<br />
+		<b-field grouped>
+			<b-select v-model="target" placeholder="Target">
+				<option value="@channel">
+					Channel
+				</option>
+			</b-select>
+			<b-input v-model="text" placeholder="Message" expanded></b-input>
+			<p class="control">
+				<button @click="sendTxt" class="button is-primary">Send</button>
+			</p>
+		</b-field>
 	</div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
-import { State } from "vuex-class";
+import { State, Getter } from "vuex-class";
 import { RoomState } from "@/store/room";
 
 const columns = [
@@ -37,9 +49,14 @@ interface LogRow {
 export default class RoomLog extends Vue {
 	@State("room") private room!: RoomState;
 
+	private target!: "@channel" | string;
+	private text!: string;
+
 	private data() {
 		return {
-			columns
+			columns,
+			target: "@channel",
+			text: ""
 		};
 	}
 
@@ -66,5 +83,7 @@ export default class RoomLog extends Vue {
 			};
 		});
 	}
+
+	private sendTxt() {}
 }
 </script>

webclient/src/store/room.ts

@@ -1,4 +1,4 @@
-import { Module, MutationTree, ActionTree } from "vuex";
+import { Module, MutationTree, ActionTree, GetterTree } from "vuex";
 import { AppState } from "@/store/index";
 import RoomClient from "@/roomclient";
 
@@ -75,9 +75,19 @@ const actions: ActionTree<RoomState, AppState> = {
 	}
 };
 
+const getters: GetterTree<RoomState, AppState> = {
+	users(state: RoomState): string[] {
+		if (!state.room) {
+			return [];
+		}
+		return [...state.room.players, ...state.room.spectators];
+	}
+};
+
 export const room: Module<RoomState, AppState> = {
 	namespaced,
 	state,
 	mutations,
-	actions
+	actions,
+	getters
 };

webclient/src/store/server.ts

@@ -96,6 +96,36 @@ const actions: ActionTree<ServerState, AppState> = {
 		} catch (err) {
 			commit("joinFailed", err);
 		}
+	},
+
+	async createRoom({ state, commit, dispatch, rootState }) {
+		commit("beginJoin");
+		// Try creating room
+		try {
+			// Ask lobby server for permission
+			let req = await fetch(`${state.server}/api/lobby/room/create`, {
+				method: "POST",
+				headers: {
+					Accept: "application/json",
+					"Content-Type": "application/json"
+				},
+				body: JSON.stringify({
+					game_id: "webclient",
+					player_name: rootState.playerName,
+					name: `${rootState.playerName}'s room`,
+					allow_spectators: true,
+					max_players: 32,
+					max_spectators: 32,
+					tags: ["test"]
+				})
+			});
+			let data = await req.json();
+			// We haz permission, let's contact the room server
+			let ws = await RoomClient.connect(data);
+			dispatch("room/setClient", ws, { root: true });
+		} catch (err) {
+			commit("joinFailed", err);
+		}
 	}
 };