Add simple css

client/components/Game.js

@@ -2,7 +2,6 @@
 
 const React = require('react');
 const Renderer = require('../game/view');
-const Stats = require('./Stats');
 
 class Game extends React.Component {
     componentDidMount () {
@@ -26,9 +25,6 @@ class Game extends React.Component {
                     height={ this.props.height }
                 >
                 </canvas>
-                <Stats
-                    game={ this.props.gameClient }
-                />
             </div>
         );
     }

client/components/Login.js

@@ -19,23 +19,28 @@ class Login extends React.Component {
 
     render () {
         return (
-            <form
-                onSubmit={ (event) => {
-                    event.preventDefault();
-
-                    this.props.submitHandler(this.state);
-                } }
-            >
-                <input
-                    type="text"
-                    value={ this.state.server }
-                    onChange={ this.handleServerChange.bind(this) }
-                />
-                <input
-                    type="submit"
-                    value="Login"
-                />
-            </form>
+            <div className="center">
+                <form
+                    onSubmit={ (event) => {
+                        event.preventDefault();
+
+                        this.props.submitHandler(this.state);
+                    } }
+                >
+                    <label>
+                        Server url
+                        <input
+                            type="text"
+                            value={ this.state.server }
+                            onChange={ this.handleServerChange.bind(this) }
+                        />
+                    </label>
+                    <input
+                        type="submit"
+                        value="Login"
+                    />
+                </form>
+            </div>
         );
     }
 }

client/components/Settings.js

@@ -38,7 +38,8 @@ class Settings extends React.Component {
     render () {
         return (
             <form>
-                <ul>
+                <h4>Settings</h4>
+                <ul className="horizontal-list square-font">
                     <li>
                         <label>
                             <input
@@ -105,6 +106,8 @@ class Settings extends React.Component {
                             <input
                                 type="input"
                                 name="networkOffset"
+                                size={ 4 }
+                                maxlength={ 4 }
                                 value={ this.state.networkOffset }
                                 onChange={ this.handleValueChange.bind(this) }
                             />
@@ -117,6 +120,8 @@ class Settings extends React.Component {
                             <input
                                 type="input"
                                 name="networkBufferSize"
+                                size={ 4 }
+                                maxlength={ 4 }
                                 value={ this.state.networkBufferSize }
                                 onChange={ this.handleValueChange.bind(this) }
                             />

client/components/Stats.js

@@ -36,7 +36,7 @@ class Stats extends React.Component {
     render () {
         return (
             <div>
-                <ul>
+                <ul className="horizontal-list square-font">
                     <li>Server time: { this.state.serverTime }</li>
                     <li>Client time: { this.state.clientTime }</li>
                     <li>Local time: { this.state.localTime }</li>

client/containers/App.js

@@ -50,10 +50,13 @@ class App extends React.Component {
     render () {
         return (
             <div>
-                <Settings
-                    settingsChangeHandler={ this.onSettingsChange.bind(this) }
-                    defaultSettings={ clientConfig }
-                />
+                { this.state.lobbyError ? (
+                    <div>
+                        { this.state.lobbyError }
+                    </div>
+                    ) : null
+                }
+
                 { this.state.loggedIn && !this.state.lobbyError ? (
                         <Lobby
                             gameSettings={ this.state.gameSettings }
@@ -68,10 +71,11 @@ class App extends React.Component {
                     )
                 }
 
-                { this.state.lobbyError ? (
-                    <div>
-                        { this.state.lobbyError }
-                    </div>
+                { this.state.loggedIn ? (
+                        <Settings
+                            settingsChangeHandler={ this.onSettingsChange.bind(this) }
+                            defaultSettings={ clientConfig }
+                        />
                     ) : null
                 }
             </div>

client/containers/Lobby.js

@@ -5,6 +5,7 @@ const SocketClient = require('socket.io-client');
 const RoomList = require('../components/RoomList');
 const Game = require('../components/Game');
 const GameClient = require('../game/GameClient');
+const Stats = require('../components/Stats');
 
 class Lobby extends React.Component {
     constructor (props) {
@@ -96,26 +97,37 @@ class Lobby extends React.Component {
     render () {
         return (
             <div>
-                <button
-                    onClick={ this.onLogout.bind(this) }
-                >
-                    Logout
-                </button>
-                <RoomList
-                    rooms={ this.state.rooms }
-                    onRoomClick={ this.onJoinRoom.bind(this) }
-                    onRoomCreateClick={ this.onCreateRoom.bind(this) }
-                    onRoomLeaveClick={ this.onLeaveRoom.bind(this) }
-                    currentRoomId={ this.state.currentRoomId }
-                />
-                { this.state.socket && this.state.currentRoomId ? (
-                        <Game
-                            width={ this.props.gameSettings.world.width }
-                            height={ this.props.gameSettings.world.height }
-                            gameClient={ this.state.gameClient }
+                <div className="grid">
+                    <div className="col-2-12">
+                        <button
+                            onClick={ this.onLogout.bind(this) }
+                        >
+                            Logout
+                        </button>
+                        <RoomList
+                            rooms={ this.state.rooms }
+                            onRoomClick={ this.onJoinRoom.bind(this) }
+                            onRoomCreateClick={ this.onCreateRoom.bind(this) }
+                            onRoomLeaveClick={ this.onLeaveRoom.bind(this) }
+                            currentRoomId={ this.state.currentRoomId }
                         />
-                    ) : null
-                }
+                    </div>
+                    <div className="col-10-12">
+                        { this.state.gameClient && this.state.currentRoomId ? (
+                                <div>
+                                    <Game
+                                        width={ this.props.gameSettings.world.width }
+                                        height={ this.props.gameSettings.world.height }
+                                        gameClient={ this.state.gameClient }
+                                    />
+                                    <Stats
+                                        game={ this.state.gameClient }
+                                    />
+                                </div>
+                            ) : null
+                        }
+                    </div>
+                </div>
             </div>
         );
     }

client/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require('style!css!../css/index.css');
+require('style!css!../css/simplegrid.css');
 
 const React = require('react');
 const ReactDOM = require('react-dom');

css/index.css

@@ -1,17 +1,31 @@
-html , body {
-	background: #212121; 
-	color: #fff; 
-	font-family: Helvetica;
-	margin: 0; 
-	padding: 0;
-}
-
 .game {
 	border:solid 1px #333;
-	height : 480px;
+    background-color: #192b3c;
 	margin: auto;
-	left:0; right:0; top:0; bottom:0;
-	position: absolute;
 	width : 720px;
-	z-index:100;
+}
+
+.center {
+    display: table;
+    margin: 0 auto;
+}
+
+ul.horizontal-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0
+}
+
+ul.horizontal-list li {
+    display: inline;
+    padding-right: 1em;
+}
+
+ul.horizontal-list  li:last-child {
+    padding-right: 0;
+}
+
+.square-font {
+    font-family: "courier", monospace;
+    font-size: 80%;
 }