From 847da00c11f831d8c7841793a10a57f374ce0b96 Mon Sep 17 00:00:00 2001 From: DeudlyYT Date: Mon, 14 Aug 2017 14:36:18 +0200 Subject: [PATCH] Resolve #43 -- Code rework Code rework and new design Refs #43 --- Config/.gitignore | 1 - Config/config.json.template | 4 - package.json | 6 +- src/ui/components/loading/loadingComponent.ts | 38 - src/ui/components/loading/loadingView.html | 14 - src/ui/components/lobby/lobbyComponent.ts | 88 +- src/ui/components/lobby/lobbyView.html | 22 +- src/ui/components/lobby/partials/chat.html | 21 +- .../components/lobby/partials/playerList.html | 33 +- .../components/lobby/partials/settings.html | 13 +- .../lobbyList/lobbyListComponent.ts | 33 +- .../components/lobbyList/lobbyListView.html | 46 +- .../lobbySettings/lobbySettingsComponent.ts | 46 + .../lobbySettings/lobbySettingsVue.html | 6 + src/ui/components/login/loginComponent.ts | 74 +- src/ui/components/login/loginView.html | 38 +- .../selectChampion/selectChampionComponent.ts | 54 - .../selectChampion/selectChampionView.html | 28 - .../selectIcon/selectIconComponent.ts | 39 + .../components/selectIcon/selectIconView.html | 12 + .../selectSummonerSpellComponent.ts | 1 - src/ui/components/setting/settingComponent.ts | 16 - src/ui/css/helpers.less | 5 + src/ui/css/lobby-list.less | 28 +- src/ui/css/lobby-settings.less | 99 + src/ui/css/lobby.less | 63 +- src/ui/css/lobby/chat.less | 95 +- src/ui/css/lobby/playerList.less | 102 +- src/ui/css/lobby/settings.less | 295 +- src/ui/css/login.less | 181 +- src/ui/css/main.less | 161 +- src/ui/css/materialize.css | 6370 +++++++++++++++++ src/ui/css/select-champion.less | 242 - src/ui/css/select-icon.less | 43 + src/ui/css/select-summonerspell.less | 124 - src/ui/css/ui.less | 151 +- src/ui/fonts/roboto/Roboto-Bold.eot | Bin 0 -> 20966 bytes src/ui/fonts/roboto/Roboto-Bold.ttf | Bin 0 -> 127744 bytes src/ui/fonts/roboto/Roboto-Bold.woff | Bin 0 -> 62876 bytes src/ui/fonts/roboto/Roboto-Bold.woff2 | Bin 0 -> 49976 bytes src/ui/fonts/roboto/Roboto-Light.eot | Bin 0 -> 20940 bytes src/ui/fonts/roboto/Roboto-Light.ttf | Bin 0 -> 126792 bytes src/ui/fonts/roboto/Roboto-Light.woff | Bin 0 -> 62316 bytes src/ui/fonts/roboto/Roboto-Light.woff2 | Bin 0 -> 49380 bytes src/ui/fonts/roboto/Roboto-Medium.eot | Bin 0 -> 21364 bytes src/ui/fonts/roboto/Roboto-Medium.ttf | Bin 0 -> 127488 bytes src/ui/fonts/roboto/Roboto-Medium.woff | Bin 0 -> 62980 bytes src/ui/fonts/roboto/Roboto-Medium.woff2 | Bin 0 -> 50224 bytes src/ui/fonts/roboto/Roboto-Regular.eot | Bin 0 -> 21320 bytes src/ui/fonts/roboto/Roboto-Regular.ttf | Bin 0 -> 126072 bytes src/ui/fonts/roboto/Roboto-Regular.woff | Bin 0 -> 61736 bytes src/ui/fonts/roboto/Roboto-Regular.woff2 | Bin 0 -> 49236 bytes src/ui/fonts/roboto/Roboto-Thin.eot | Bin 0 -> 21659 bytes src/ui/fonts/roboto/Roboto-Thin.ttf | Bin 0 -> 127584 bytes src/ui/fonts/roboto/Roboto-Thin.woff | Bin 0 -> 61628 bytes src/ui/fonts/roboto/Roboto-Thin.woff2 | Bin 0 -> 48524 bytes src/ui/index.html | 34 +- src/ui/main.ts | 25 +- src/ui/services/networkService.ts | 158 +- src/ui/services/staticService.ts | 2388 ++++-- src/vendor/protocol.d.ts | 22 +- 61 files changed, 9001 insertions(+), 2218 deletions(-) delete mode 100644 Config/.gitignore delete mode 100644 Config/config.json.template delete mode 100644 src/ui/components/loading/loadingComponent.ts delete mode 100644 src/ui/components/loading/loadingView.html create mode 100644 src/ui/components/lobbySettings/lobbySettingsComponent.ts create mode 100644 src/ui/components/lobbySettings/lobbySettingsVue.html delete mode 100644 src/ui/components/selectChampion/selectChampionComponent.ts delete mode 100644 src/ui/components/selectChampion/selectChampionView.html create mode 100644 src/ui/components/selectIcon/selectIconComponent.ts create mode 100644 src/ui/components/selectIcon/selectIconView.html create mode 100644 src/ui/css/lobby-settings.less create mode 100644 src/ui/css/materialize.css delete mode 100644 src/ui/css/select-champion.less create mode 100644 src/ui/css/select-icon.less delete mode 100644 src/ui/css/select-summonerspell.less create mode 100644 src/ui/fonts/roboto/Roboto-Bold.eot create mode 100644 src/ui/fonts/roboto/Roboto-Bold.ttf create mode 100644 src/ui/fonts/roboto/Roboto-Bold.woff create mode 100644 src/ui/fonts/roboto/Roboto-Bold.woff2 create mode 100644 src/ui/fonts/roboto/Roboto-Light.eot create mode 100644 src/ui/fonts/roboto/Roboto-Light.ttf create mode 100644 src/ui/fonts/roboto/Roboto-Light.woff create mode 100644 src/ui/fonts/roboto/Roboto-Light.woff2 create mode 100644 src/ui/fonts/roboto/Roboto-Medium.eot create mode 100644 src/ui/fonts/roboto/Roboto-Medium.ttf create mode 100644 src/ui/fonts/roboto/Roboto-Medium.woff create mode 100644 src/ui/fonts/roboto/Roboto-Medium.woff2 create mode 100644 src/ui/fonts/roboto/Roboto-Regular.eot create mode 100644 src/ui/fonts/roboto/Roboto-Regular.ttf create mode 100644 src/ui/fonts/roboto/Roboto-Regular.woff create mode 100644 src/ui/fonts/roboto/Roboto-Regular.woff2 create mode 100644 src/ui/fonts/roboto/Roboto-Thin.eot create mode 100644 src/ui/fonts/roboto/Roboto-Thin.ttf create mode 100644 src/ui/fonts/roboto/Roboto-Thin.woff create mode 100644 src/ui/fonts/roboto/Roboto-Thin.woff2 diff --git a/Config/.gitignore b/Config/.gitignore deleted file mode 100644 index d344ba6..0000000 --- a/Config/.gitignore +++ /dev/null @@ -1 +0,0 @@ -config.json diff --git a/Config/config.json.template b/Config/config.json.template deleted file mode 100644 index 43d31e9..0000000 --- a/Config/config.json.template +++ /dev/null @@ -1,4 +0,0 @@ -{ - "pathToLolExe": "", - "pathToLolFolder": "" -} diff --git a/package.json b/package.json index 111d84c..0fe201e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "bundle": "./node_modules/.bin/webpack --bail", "clean": "rm -r built src/built", "package:osx": "./node_modules/.bin/electron-packager . LobbyClient --out=built --platform=darwin --arch=x64 --version=0.37.5 --ignore='(node_modules|src/ui/components|src/ui/directives|src/ui/css|src/ui/services)'", - "package:win": "./node_modules/.bin/electron-packager . LobbyClient --out=built --platform=win32 --arch=x64 --version=0.37.5 --ignore='(node_modules|src/ui/components|src/ui/directives|src/ui/css|src/ui/services)'", + "package:win": "./node_modules/.bin/electron-packager . LobbyClient --out=built --platform=win32 --arch=x64 --version=0.37.5 --ignore='node_modules' --ignore='src/ui/components' --ignore='src/ui/directives' --ignore='src/ui/css' --ignore='src/ui/services'", "test": "npm run bundle" }, "keywords": [ @@ -48,8 +48,8 @@ "dependencies": { "babel-polyfill": "^6.7.4", "bluebird": "^3.3.4", - "font-awesome": "^4.5.0", - "socket.io-client": "^1.4.5", + "font-awesome": "^4.7.0", + "socket.io-client": "^2.0.0", "vue": "^1.0.24", "vue-router": "^0.7.13" } diff --git a/src/ui/components/loading/loadingComponent.ts b/src/ui/components/loading/loadingComponent.ts deleted file mode 100644 index da7b792..0000000 --- a/src/ui/components/loading/loadingComponent.ts +++ /dev/null @@ -1,38 +0,0 @@ -/// -'use strict'; - -import Component from "vue-class-component"; -const Vue = require("vue"); - -import "../../css/loading.less"; - -import CDNService from "../../services/cdnService.ts"; -import StaticService from "../../services/staticService.ts"; -import NetworkService from "../../services/networkService.ts"; -import SettingService from "../../services/settingService.ts"; - -@Component({ - template: require("./loadingView.html") -}) -export default class LoadingComponent extends Vue { - private state: string; - - data() { - return { - state: "Loading assets..." - }; - } - - ready() { - CDNService.load().then(() => { - this.state = "Populating data..."; - return StaticService.populate(); - }).then(() => { - this.state = "Connecting to server..."; - return NetworkService.connectToCentral("http://localhost:9090"); - }).then(() => { - this.state = "Done!"; - this.$router.go("/login"); - }); - } -} \ No newline at end of file diff --git a/src/ui/components/loading/loadingView.html b/src/ui/components/loading/loadingView.html deleted file mode 100644 index 40b7dbc..0000000 --- a/src/ui/components/loading/loadingView.html +++ /dev/null @@ -1,14 +0,0 @@ -
- {{ state }} -
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file diff --git a/src/ui/components/lobby/lobbyComponent.ts b/src/ui/components/lobby/lobbyComponent.ts index 633697c..d3651d9 100644 --- a/src/ui/components/lobby/lobbyComponent.ts +++ b/src/ui/components/lobby/lobbyComponent.ts @@ -28,77 +28,101 @@ Vue.partial("lobby-player-list", require("./partials/playerList.html")); export default class LobbyComponent extends Vue { private message: string; private messages: ChatMessages[]; - + private settings: SettingService; private lobby: lobby.Lobby; - - data() { - return { - message: "", - messages: [], - lobby: NetworkServiceStatic.currentLobby, - - // The settings property is not needed, but - // adding it forces Vue to observe it. This - // way we get notified of changes and update. - settings: SettingServiceStatic, - }; - } - - created() { + private isHost: boolean; + + ready() { // Mainly for debugging. Redirects if there's no connection. if (!NetworkServiceStatic.currentConnection) { - this.$router.go("/loading"); + this.$router.go("/login"); } - + + NetworkServiceStatic.on("host", isHost => { + this.isHost = isHost; + }); + + NetworkServiceStatic.on("start-championselect", () => { + this.$router.go("/championSelect"); + }); NetworkServiceStatic.on("chat", (timestamp, sender, message) => { if (this.messages.length && this.messages[this.messages.length - 1].sender === sender) { this.messages[this.messages.length - 1].messages.push(message); } else { this.messages.push({ timestamp, sender, messages: [message] }); } - + // Scroll down on the next tick if we aren't scrolled yet. // We scroll down next tick because by then the contents of the // chat will have been updated with the newly added message. const el = document.getElementById("chat-container"); const isAttached = el.scrollTop + el.clientHeight + 1 >= el.scrollHeight; - + this.$nextTick(() => { // If we were attached before the element got bigger, scroll down. // This effectively reattaches the scroll. if (isAttached) { el.scrollTop = el.scrollHeight; } - }); + }); }); + + NetworkServiceStatic.currentLobbyConnection.emit("host"); + } + data() { + return { + message: "", + messages: [], + lobby: NetworkServiceStatic.currentLobby, + network: NetworkService, + isHost: this.isHost, + + // The settings property is not needed, but + // adding it forces Vue to observe it. This + // way we get notified of changes and update. + settings: SettingServiceStatic, + }; } - + + created() { + } + playersInTeam(team: lobby.Team) { return this.lobby.players.filter(x => x.team === team); } - + getOrNone(url = CDNService.getPath("assets/storeImages/layout/g-background_generic.jpg")) { return url; } - + sendChat() { NetworkServiceStatic.sendMessage(this.message); this.message = ""; } - + joinTeam(team: lobby.Team) { NetworkServiceStatic.joinTeam(team); } - startGame(){ - NetworkServiceStatic.startGame(); + + startChampionSelect() { + NetworkServiceStatic.startChampionSelect(); } - - get playerSettings() { - return this.settings.playerSettings; + + leave() { + NetworkServiceStatic.leaveLobby(); + this.$router.go("/lobbies"); } - + + iconByUser(user: { idServer: number}) { + return StaticService.iconById(NetworkServiceStatic.userById(user.idServer).iconId).iconURL; + } + get hostSettings() { return this.settings.hostSettings; } -} \ No newline at end of file + + openLobbySettings() { + ModalComponent.present("lobby-settings", this.settings); + } +} diff --git a/src/ui/components/lobby/lobbyView.html b/src/ui/components/lobby/lobbyView.html index 5ccd8ee..c077e0f 100644 --- a/src/ui/components/lobby/lobbyView.html +++ b/src/ui/components/lobby/lobbyView.html @@ -1,10 +1,20 @@ -
-
-
-
-
+
+
+ {{ lobby.name }} +
+
+ {{ lobby.gamemodeName }} ♦ Map name ♦ 5v5 ♦ Blind pick +
+
-
+ + +
+ + + + +
\ No newline at end of file diff --git a/src/ui/components/lobby/partials/chat.html b/src/ui/components/lobby/partials/chat.html index e9d3ff4..30b953b 100644 --- a/src/ui/components/lobby/partials/chat.html +++ b/src/ui/components/lobby/partials/chat.html @@ -1,13 +1,14 @@ -
-
- {{ group.timestamp | formatTime }} - {{ group.sender }} -
- {{ message }} -
+
+
+ + {{ group.timestamp | formatTime }} {{ group.sender }}: +
+
{{ message }}
+
+
-
-
- +
+ +
\ No newline at end of file diff --git a/src/ui/components/lobby/partials/playerList.html b/src/ui/components/lobby/partials/playerList.html index ce20b0e..ad7f90f 100644 --- a/src/ui/components/lobby/partials/playerList.html +++ b/src/ui/components/lobby/partials/playerList.html @@ -1,18 +1,19 @@ -
- {{ team.name }} - -
- {{ player.name }} - - +
+
+
+
{{ team.name }}
+ +
+
+ + {{ player.username }} {{ player.id }} {{ player.idServer }} {{ player.isHost }} +
+
+
+ + +
- -
- JOIN -
-
-
- START
diff --git a/src/ui/components/lobby/partials/settings.html b/src/ui/components/lobby/partials/settings.html index a53dd7b..527adcc 100644 --- a/src/ui/components/lobby/partials/settings.html +++ b/src/ui/components/lobby/partials/settings.html @@ -1,15 +1,4 @@ - -
- Lobby - - Configure -
- -
-
- -
- +
diff --git a/src/ui/components/lobbyList/lobbyListComponent.ts b/src/ui/components/lobbyList/lobbyListComponent.ts index a1e13a9..e899613 100644 --- a/src/ui/components/lobbyList/lobbyListComponent.ts +++ b/src/ui/components/lobbyList/lobbyListComponent.ts @@ -6,29 +6,38 @@ const Vue = require("vue"); import "../../css/lobby-list.less"; import NetworkService from "../../services/networkService.ts"; +import StaticService from "../../services/staticService.ts"; @Component({ template: require("./lobbyListView.html") }) export default class LobbyListComponent extends Vue { - private username: string; + private lobbySelected: lobby.LobbyListItem; + private canCreateLobby: boolean; created() { // Mainly for debugging. Redirects if theres no connection. if (!NetworkService.currentConnection) { - this.$router.go("/loading"); + this.$router.go("/login"); } } data() { + this.canCreateLobby = true; return { - username: "Player", - network: NetworkService + network: NetworkService, + staticService: StaticService, + lobbySelected: undefined, + canCreateLobby: this.canCreateLobby }; } + select(lobby: lobby.LobbyListItem) { + this.lobbySelected = lobby; + } + join(lobby: lobby.LobbyListItem) { - NetworkService.joinLobby(lobby, this.username).then(() => { + NetworkService.joinLobby(lobby).then(() => { console.log("Connected to lobby."); this.$router.go("/lobby"); }, err => { @@ -36,4 +45,18 @@ export default class LobbyListComponent extends Vue { console.log(err.stack); }); } + + //TODO: limit lobby creation when clicked + create() { + if (!this.canCreateLobby) return; + + this.canCreateLobby = false; + NetworkService.createLobby().then(() => { + console.log("Created lobby."); + this.$router.go("/lobby"); + }, err => { + console.log("Couldn't create a lobby."); + console.log(err.stack); + }); + } } \ No newline at end of file diff --git a/src/ui/components/lobbyList/lobbyListView.html b/src/ui/components/lobbyList/lobbyListView.html index 883617b..3c7ccdb 100644 --- a/src/ui/components/lobbyList/lobbyListView.html +++ b/src/ui/components/lobbyList/lobbyListView.html @@ -1,9 +1,41 @@ - - -
-
- {{ lobby.name }} - {{ lobby.creator }}
- {{ lobby.playerCount }}/{{ lobby.playerLimit }}
- {{ lobby.address }}:{{ lobby.port }} +
+
+
+ + + + + + + + + + + + +
Lobby nameOwnerGamemodeUsers
+
+
+ + +
+
+
+
+ +
\ No newline at end of file diff --git a/src/ui/components/lobbySettings/lobbySettingsComponent.ts b/src/ui/components/lobbySettings/lobbySettingsComponent.ts new file mode 100644 index 0000000..c054019 --- /dev/null +++ b/src/ui/components/lobbySettings/lobbySettingsComponent.ts @@ -0,0 +1,46 @@ +/// +'use strict'; + +import "../../css/lobby-settings.less"; +import ModalComponent from "../modal/modalComponent.ts"; +import StaticService from "../../services/staticService.ts"; +import SettingServiceStatic, { SettingService } from "../../services/settingService.ts"; + +import Component from "vue-class-component"; +const Vue = require("vue"); + +@Component({ + template: require("./lobbySettingsVue.html") +}) +export default class LobbySettingsComponent extends Vue { + + private listenerFun: (evt: KeyboardEvent) => void; + private selectedIcon: user.Icon; + private settings: SettingService; + + ready() { + // Attach ESC listener. Is removed in finish() call. + this.listenerFun = (evnt: KeyboardEvent) => { + if (evnt.keyCode !== 27) return; + this.finish(ModalComponent.params[0]); + }; + document.addEventListener("keyup", this.listenerFun); + } + + data() { + return { + staticService: StaticService, + selectedIcon: ModalComponent.params[0], + settings: SettingServiceStatic, + }; + } + + get hostSettings() { + return this.settings.hostSettings; + } + + finish(arg) { + ModalComponent.finish(arg); + document.removeEventListener("keyup", this.listenerFun); + } +} \ No newline at end of file diff --git a/src/ui/components/lobbySettings/lobbySettingsVue.html b/src/ui/components/lobbySettings/lobbySettingsVue.html new file mode 100644 index 0000000..ab6258e --- /dev/null +++ b/src/ui/components/lobbySettings/lobbySettingsVue.html @@ -0,0 +1,6 @@ +
Settings
+
+
+ +
+
\ No newline at end of file diff --git a/src/ui/components/login/loginComponent.ts b/src/ui/components/login/loginComponent.ts index 40298df..040e917 100644 --- a/src/ui/components/login/loginComponent.ts +++ b/src/ui/components/login/loginComponent.ts @@ -6,32 +6,84 @@ const Vue = require("vue"); import "../../css/login.less"; +import CDNService from "../../services/cdnService.ts"; +import StaticService from "../../services/staticService.ts"; +import NetworkService from "../../services/networkService.ts"; +import SettingService from "../../services/settingService.ts"; +import ModalComponent from "../modal/modalComponent.ts"; + @Component({ template: require("./loginView.html") }) export default class LoginComponent extends Vue { private isLoading: boolean; private previousInvalid: boolean; - + private username: string; - private password: string; - + private host: string; + private path: string; + private port: string; + private state: string; + private icon: any; + data() { + if (localStorage.getItem("path") != undefined && localStorage.getItem("path") != "") { + this.path = localStorage.getItem("path"); + } else { + this.path = "Path to LoL 4.20"; + } + if (localStorage.getItem("host") != undefined && localStorage.getItem("host") != "") { + this.host = localStorage.getItem("host"); + } + if (localStorage.getItem("port") != undefined && localStorage.getItem("port") != "") { + this.port = localStorage.getItem("port"); + } + if (localStorage.getItem("name") != undefined && localStorage.getItem("name") != "") { + this.username = localStorage.getItem("name"); + } + var iconId = 0; + if (localStorage.getItem("icon") != undefined && localStorage.getItem("icon") != "") { + iconId = parseInt(localStorage.getItem("icon")); + } + CDNService.load().then(() => { + return StaticService.populate(); + }).then(() => { + this.icon = StaticService.icons[iconId]; + }); return { isLoading: false, previousInvalid: false, - username: "", - password: "" + username: this.username, + host: this.host, + path: this.path, + port: this.port, + icon: this.icon }; } - + login() { - if (!this.username || !this.password) return; - + if (!this.username || !this.host || this.isLoading) return; + + localStorage.setItem("host", this.host); + localStorage.setItem("path", this.path); + localStorage.setItem("name", this.username); + localStorage.setItem("port", this.port); + localStorage.setItem("icon", this.indexByiconId(this.icon.id).toString()); + this.isLoading = true; this.previousInvalid = false; - setTimeout(() => { + NetworkService.connectToCentral("http://" + this.host + ":" + this.port, this.username, this.icon.id).then(() => { this.$router.go("/lobbies"); - }, 1000); + }); + } + + openIconPicker() { + ModalComponent.present("select-icon", this.icon).then(c => { + this.icon = c; + }); + } + + indexByiconId(id: number): number { + return StaticService.icons.indexOf(StaticService.icons.filter(x => x.id === id)[0]); } -} \ No newline at end of file +} diff --git a/src/ui/components/login/loginView.html b/src/ui/components/login/loginView.html index 00d0e37..6ade7e7 100644 --- a/src/ui/components/login/loginView.html +++ b/src/ui/components/login/loginView.html @@ -1,27 +1,13 @@ -