diff --git a/webclient/README.md b/webclient/README.md index 2009aa3..6f2bda9 100644 --- a/webclient/README.md +++ b/webclient/README.md @@ -1,29 +1,7 @@ # webclient -## Project setup -``` -yarn install -``` +Web-client for browsing, creating and joining rooms on Cardgage servers -### Compiles and hot-reloads for development -``` -yarn run serve -``` +### Shoutouts -### Compiles and minifies for production -``` -yarn run build -``` - -### Run your tests -``` -yarn run test -``` - -### Lints and fixes files -``` -yarn run lint -``` - -### Customize configuration -See [Configuration Reference](https://cli.vuejs.org/config/). +- Dark theme by [bulmaswatch/Jenil Gogari](https://github.com/jenil/bulmaswatch) diff --git a/webclient/package.json b/webclient/package.json index e63bab7..6137e83 100644 --- a/webclient/package.json +++ b/webclient/package.json @@ -13,7 +13,8 @@ "vue": "^2.6.10", "vue-class-component": "^7.0.2", "vue-property-decorator": "^8.1.0", - "vuex": "^3.0.1" + "vuex": "^3.0.1", + "vuex-class": "^0.3.2" }, "devDependencies": { "@vue/cli-plugin-babel": "^4.0.0-alpha.1", diff --git a/webclient/public/index.html b/webclient/public/index.html index ac7ee19..f97f2b1 100644 --- a/webclient/public/index.html +++ b/webclient/public/index.html @@ -1,18 +1,24 @@ - - - - - - - webclient - - - -
- - + + + + + + + Cardgage Web Client + + + +
+ + diff --git a/webclient/src/App.vue b/webclient/src/App.vue index 0c47277..be3088f 100644 --- a/webclient/src/App.vue +++ b/webclient/src/App.vue @@ -1,12 +1,47 @@ - - diff --git a/webclient/src/assets/scss/_overrides.scss b/webclient/src/assets/scss/_overrides.scss new file mode 100644 index 0000000..e69de29 diff --git a/webclient/src/assets/scss/app.scss b/webclient/src/assets/scss/app.scss index 2d7e539..db2be4f 100644 --- a/webclient/src/assets/scss/app.scss +++ b/webclient/src/assets/scss/app.scss @@ -1,37 +1,10 @@ @import "~bulma/sass/utilities/initial-variables"; @import "~bulma/sass/utilities/functions"; -// 1. Set your own initial variables and derived -// variables in _variables.scss @import "variables"; -// 2. Setup your Custom Colors -$linkedin: #0077b5; -$linkedin-invert: findColorInvert($linkedin); -$twitter: #55acee; -$twitter-invert: findColorInvert($twitter); -$github: #333; -$github-invert: findColorInvert($github); - @import "~bulma/sass/utilities/derived-variables"; -// 3. Add new color variables to the color map. -$addColors: ( - "twitter": ( - $twitter, - $twitter-invert - ), - "linkedin": ( - $linkedin, - $linkedin-invert - ), - "github": ( - $github, - $github-invert - ) -); -$colors: map-merge($colors, $addColors); - @import "~bulma"; @import "~buefy/src/scss/buefy"; -// 4. Provide custom buefy overrides and site styles here +@import "overrides"; diff --git a/webclient/src/components/ConnectForm.vue b/webclient/src/components/ConnectForm.vue new file mode 100644 index 0000000..364310b --- /dev/null +++ b/webclient/src/components/ConnectForm.vue @@ -0,0 +1,48 @@ + + + diff --git a/webclient/src/components/RoomList.vue b/webclient/src/components/RoomList.vue new file mode 100644 index 0000000..fa779ef --- /dev/null +++ b/webclient/src/components/RoomList.vue @@ -0,0 +1,12 @@ + + + diff --git a/webclient/src/main.ts b/webclient/src/main.ts index 75658b3..06921e6 100644 --- a/webclient/src/main.ts +++ b/webclient/src/main.ts @@ -1,6 +1,6 @@ import Vue from "vue"; import App from "./App.vue"; -import store from "./store"; +import store from "./store/index"; import Buefy from "buefy"; import "./assets/scss/app.scss"; diff --git a/webclient/src/store.ts b/webclient/src/store/index.ts similarity index 73% rename from webclient/src/store.ts rename to webclient/src/store/index.ts index a605d37..2a21087 100644 --- a/webclient/src/store.ts +++ b/webclient/src/store/index.ts @@ -1,23 +1,26 @@ import Vue from "vue"; import Vuex, { StoreOptions } from "vuex"; +import { server } from "./server"; +import { room } from "./room"; Vue.use(Vuex); export interface AppState { - in_room: boolean; - room: string; + // Client info playerName: string; } const store: StoreOptions = { state: { - in_room: false, - room: "", playerName: "webclient-" + Math.random() .toString(32) .slice(2) + }, + modules: { + server, + room } }; diff --git a/webclient/src/store/room.ts b/webclient/src/store/room.ts new file mode 100644 index 0000000..47fd81c --- /dev/null +++ b/webclient/src/store/room.ts @@ -0,0 +1,19 @@ +import { Module } from "vuex"; +import { AppState } from "@/store/index"; + +const namespaced: boolean = true; + +export interface RoomState { + in_room: boolean; + room: string; +} + +const state: RoomState = { + in_room: false, + room: "" +}; + +export const room: Module = { + namespaced, + state +}; diff --git a/webclient/src/store/server.ts b/webclient/src/store/server.ts new file mode 100644 index 0000000..03ca9fa --- /dev/null +++ b/webclient/src/store/server.ts @@ -0,0 +1,63 @@ +import { Module, ActionTree, MutationTree, GetterTree } from "vuex"; +import { AppState } from "@/store/index"; + +const namespaced: boolean = true; + +export interface ServerState { + server: string; + connecting: boolean; + connected: boolean; + rooms: Object | null; + connectionError: string; +} + +const state: ServerState = { + connecting: false, + connected: false, + server: "", + rooms: null, + connectionError: "" +}; + +const mutations: MutationTree = { + beginConnection(state: ServerState) { + state.connected = false; + state.connectionError = ""; + state.connecting = true; + }, + + connectionDone( + state: ServerState, + payload: { addr: string; rooms: Object } + ) { + state.connected = true; + state.server = payload.addr; + state.rooms = payload.rooms; + }, + + connectionFailed(state: ServerState, err: Error) { + state.connecting = false; + state.connectionError = err.message; + } +}; + +const actions: ActionTree = { + connect: async ({ commit }, addr: string) => { + commit("beginConnection"); + // Get room list + try { + let req = await fetch(`${addr}/api/lobby/room/list`); + let data = await req.json(); + commit("connectionDone", { addr, rooms: data }); + } catch (err) { + commit("connectionFailed", err); + } + } +}; + +export const server: Module = { + namespaced, + state, + actions, + mutations +}; diff --git a/webclient/yarn.lock b/webclient/yarn.lock index 3508eb3..7a86235 100644 --- a/webclient/yarn.lock +++ b/webclient/yarn.lock @@ -8191,6 +8191,11 @@ vue@^2.6.10: resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637" integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ== +vuex-class@^0.3.2: + version "0.3.2" + resolved "https://registry.yarnpkg.com/vuex-class/-/vuex-class-0.3.2.tgz#c7e96a076c1682137d4d23a8dcfdc63f220e17a8" + integrity sha512-m0w7/FMsNcwJgunJeM+wcNaHzK2KX1K1rw2WUQf7Q16ndXHo7pflRyOV/E8795JO/7fstyjH3EgqBI4h4n4qXQ== + vuex@^3.0.1: version "3.1.1" resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.1.tgz#0c264bfe30cdbccf96ab9db3177d211828a5910e"