Resolve #43 -- Code rework

Code rework and new design

Refs #43

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"
   }

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;
     }
-}
+
+    openLobbySettings() {
+        ModalComponent.present("lobby-settings", this.settings);
+    }
+}

src/ui/components/lobby/lobbyView.html

@@ -1,10 +1,20 @@
-<div class="background"></div>
-
 <div class="lobby">
-    <div class="left">
-        <div class="settings"><partial name="lobby-settings"></partial></div>
-        <div class="chat"><partial name="lobby-chat"></partial></div>
+    <div class="lobby-header">
+        <div class="lobby-name">
+            {{ lobby.name }}
+        </div>
+        <div class="lobby-gamemode">
+            {{ lobby.gamemodeName }} <i class="diamond">&diams;</i> Map name <i class="diamond">&diams;</i> 5v5 <i class="diamond">&diams;</i> Blind pick
+        </div>
+        <div class="divider"></div>
     </div>
 
-    <div class="right"><partial name="lobby-player-list"></partial></div>
+    <partial name="lobby-player-list"></partial>
+
+    <div class="lobby-footer">
+        <partial name="lobby-chat"></partial>
+        <button class="btn" @click="startChampionSelect()">Start</button>
+        <button class="btn" @click="leave()">Leave</button>
+        <button v-if="isHost" class="btn" @click="openLobbySettings()">Settings</button>
+    </div>
 </div>

src/ui/components/lobby/partials/chat.html

@@ -1,13 +1,14 @@
-<div class="messages" id="chat-container">
-    <div class="message-group" v-for="group in messages">
-        <span class="timestamp">{{ group.timestamp | formatTime }}</span>
-        <span class="sender">{{ group.sender }}</span>
-        <div class="messages">
-            <span v-for="message in group.messages" track-by="$index">{{ message }}</span>
-        </div>
+<div class="lobby-chat">
+    <div class="chat-box" id="chat-container">
+        <span class="message-group" v-for="group in messages">
+            <span class="message-info">{{ group.timestamp | formatTime }} {{ group.sender }}:</span>
+            <div class="messages">
+                <div v-for="message in group.messages" track-by="$index">{{ message }}</div>
+            </div>
+        </span>
     </div>
-</div>
 
-<div class="input">
-    <input v-model="message" class="send-message" placeholder="Your message..." @keyup.enter="sendChat">
+    <div class="input">
+        <input v-model="message" class="send-message" placeholder="Your message..." @keyup.enter="sendChat">
+    </div>
 </div>

src/ui/components/lobby/partials/playerList.html

@@ -1,18 +1,19 @@
-<div class="team" v-for="team in lobby.teams">
-    <span class="team-name">{{ team.name }}</span>
-
-    <div v-for="player in playersInTeam(team)"
-        v-background-src="getOrNone(player.champion ? player.champion.skins[player.skinIndex].splashCutoutURL : undefined)"
-        overlay-color="to left; transparent; black">
-        <span>{{ player.name }}</span>
-        <img :src="player.spellOne.icon">
-        <img :src="player.spellTwo.icon">
+<div class="lobby-playerList">
+    <div class="row">
+        <div class="team col s6" v-for="team in lobby.teams">
+            <div class="team-name">{{ team.name }}</div>
+
+            <div v-for="player in playersInTeam(team)" class="lobby-player-item">
+                <div class="valign-wrapper">
+                    <img :src="iconByUser(player)" class="icon">
+                    <span class="valign lobby-player">{{ player.username }} {{ player.id }} {{ player.idServer }} {{ player.isHost }}</span>
+                </div>
+                <div class="divider"></div>
+            </div>
+
+            <button class="btn" @click="joinTeam(team)">
+                Join
+            </button>
+        </div>
     </div>
-
-    <div class="join-button" @click="joinTeam(team)">
-        <span>JOIN</span>
-    </div>
-</div>
-<div class="start-button" @click="startGame()">
-    <span>START</span>
 </div>

src/ui/components/lobby/partials/settings.html

@@ -1,15 +1,4 @@
-<!-- Header with navigation and stuff. -->
-<div class="header">
-    <span class="title">Lobby</span>
-    <span class="divider"></span>
-    <span class="title">Configure</span>
-</div>
-
-<div class="columns">
-    <div class="column champion-settings">
-        <setting v-for="setting in playerSettings" :setting="setting"></setting>
-    </div>
-
+<div class="settings">    
     <div class="column custom-settings">
         <setting v-for="setting in hostSettings" :setting="setting"></setting>
     </div>

src/ui/components/lobbyList/lobbyListComponent.ts

@@ -6,34 +6,57 @@ const Vue = <vuejs.VueStatic>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 => {
             console.log("Couldn't connect to lobby.");
             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);
+        });
+    }
 }