Modern ui (#44)

* Update GUI

* Store visits

* React UI + stored visits

* Reversal of Next and Hold

* Change button color on first page

common/structs.go

@@ -20,11 +20,12 @@ func (s Sector) IsValid() bool {
 
 // PlayerState the player data (name, score, rank, ...)
 type PlayerState struct {
-	Name  string
-	Score int
-	Rank  int
-	Histo map[string]int
-	Board string
+	Name   string
+	Score  int
+	Rank   int
+	Histo  map[string]int
+	Board  string
+	Visits []Sector
 }
 
 // ByRank implements sort.Interface

game/countup.go

@@ -48,6 +48,8 @@ func (game *CountUp) HandleDart(sector common.Sector) (result *common.GameState,
 
 	state.Players[state.CurrentPlayer].Score += point
 
+	state.Players[state.CurrentPlayer].Visits = append(state.Players[state.CurrentPlayer].Visits, sector)
+
 	if state.Players[state.CurrentPlayer].Score >= game.target {
 		game.winner()
 		if game.state.Ongoing == common.PLAYING {

game/cricket.go

@@ -81,6 +81,8 @@ func (game *Cricket) HandleDart(sector common.Sector) (result *common.GameState,
 	state.LastSector = sector
 	sVal := strconv.Itoa(sector.Val)
 
+	state.Players[state.CurrentPlayer].Visits = append(state.Players[state.CurrentPlayer].Visits, sector)
+
 	log.WithFields(log.Fields{"player": state.CurrentPlayer, "sector": sector}).Info("Hit")
 
 	if sector.Val >= 15 {

game/game.go

@@ -80,7 +80,9 @@ func commonAddPlayer(game Game, board string, name string) (error error) {
 		}
 
 		log.WithFields(log.Fields{"player": name, "board": board}).Infof("Player added to the game")
-		game.State().Players = append(game.State().Players, common.PlayerState{Name: name, Board: board})
+
+		game.State().Players = append(game.State().Players, common.PlayerState{Name: name, Board: board, Visits: make([]common.Sector, 0, 3)})
+
 		// now that we have at least one player, we are in a ready state, waiting for other players or the first dart
 		game.State().Ongoing = common.READY
 	} else {
@@ -114,6 +116,10 @@ func commonHoldOrNextPlayer(game Game) {
 
 func commonNextPlayer(game Game) {
 	state := game.State()
+
+	// reset visits
+	state.Players[state.CurrentPlayer].Visits = make([]common.Sector, 0, 3)
+
 	state.CurrentDart = 0
 	state.CurrentPlayer = state.CurrentPlayer + 1
 	if state.CurrentPlayer >= len(state.Players) {

game/highest.go

@@ -48,6 +48,8 @@ func (game *Highest) HandleDart(sector common.Sector) (result *common.GameState,
 
 	state.Players[state.CurrentPlayer].Score += point
 
+	state.Players[state.CurrentPlayer].Visits = append(state.Players[state.CurrentPlayer].Visits, sector)
+
 	log.WithFields(log.Fields{"state.Round": state.Round, "game.rounds": game.rounds}).Info("Rounds")
 	if state.Round == game.rounds && state.CurrentDart == 2 {
 		game.winner()

game/x01.go

@@ -74,6 +74,9 @@ func (game *Gamex01) HandleDart(sector common.Sector) (result *common.GameState,
 
 	state.Players[state.CurrentPlayer].Score -= point
 
+	log.Info("Current dart ", game.state.CurrentDart)
+	state.Players[state.CurrentPlayer].Visits = append(state.Players[state.CurrentPlayer].Visits, sector)
+
 	if state.Players[state.CurrentPlayer].Score > 0 {
 		if game.doubleOut && state.Players[state.CurrentPlayer].Score == 1 {
 			state.LastMsg = "You should end with a double"
@@ -129,8 +132,13 @@ func (game *Gamex01) AddPlayer(board string, name string) error {
 }
 
 func (game *Gamex01) nextPlayer() {
+
 	game.accu = 0
-	state := game.state
+	state := game.State()
+
+	// reset visits
+	state.Players[state.CurrentPlayer].Visits = make([]common.Sector, 0, 3)
+
 	state.CurrentDart = 0
 	state.CurrentPlayer = (state.CurrentPlayer + 1) % len(state.Players)
 	for state.Players[state.CurrentPlayer].Score == 0 {

webapp/package.json

@@ -10,7 +10,8 @@
   "dependencies": {
     "react": "^15.2.1",
     "react-dom": "^15.2.1",
-    "react-router": "^2.6.1"
+    "react-router": "^2.6.1",
+    "react-materialize": "^0.15.1"
   },
   "scripts": {
     "start": "react-scripts start",

webapp/src/App.css

@@ -4,7 +4,48 @@
 
 .icon-block {
   padding: 0 15px;
+  margin: 10px 0; 
+}
+
+.header-block {
+  margin: 35px 0 ;
+}
+.score-circle-wrapper {
+  overflow: auto;
+  position: relative;
+  width: 80px;
+  float: left;
+}
+.score-circle {
+  width: 60px;
+  height: 60px;
+  /*text-align: center;
+  vertical-align: middle;
+  display: inline-block;*/
+  float: left;
+  margin: 10px;
+}
+.score-circle-content {
+  width: 100%;
+
+    font-size: 2em;
+    font-weight: normal;
+    color: white;
+}
+.bubble {
+  background-color: yellow;
+  position: absolute;
+  bottom:0;
+  right:0;
+  padding:4px;
+}
+.player-score-card {
+  width: 120px;
+  padding: 1em;
+}
+.player-score-card h3, .player-score-card-small span {
+  font-size: 1.6em;
+}
+.collection .collection-item.avatar {
+  min-height: 62px;
 }
-.icon-block .material-icons {
-	font-size: inherit;
-}

webapp/src/App.js

@@ -14,34 +14,36 @@ class App extends Component {
     return (
       <div>
         <div className="row">
-          <h2><img src={logo} className="App-logo" alt="logo" />Welcome to go-dart</h2>
-        </div>
-        <div className="row">
-          <div className="col s12 m4">
+
+          <div className="center">          
+            <img  src={logo} className="App-logo" alt="logo" />
+          </div>
+          <h4 className="center header-block">Welcome to godart</h4>
+
+          <div className="col s12 m4" >
             <div className="icon-block">
-              <h2 className="center light-blue-text"><i className="material-icons">add_circle</i></h2>
               <div className="center">
-                <Link to="/newGame" className="btn-large waves-effect waves-light orange">Get started</Link>
+                <Link to="/newGame" className="btn-large waves-effect waves-light btn light-blue"><i className="material-icons left large ">add</i>New Game</Link>
+                <p className="light hide-on-small-only">Create a new game and invite other players to join</p>
               </div>
-              <p className="light">Create a new game and invite other players to join</p>
-            </div>
+            </div>            
           </div>
+
           <div className="col s12 m4">
             <div className="icon-block">
-              <h2 className="center light-blue-text"><i className="material-icons">call_merge</i></h2>
               <div className="center">
-                <Link to="/newGame" className="btn-large waves-effect waves-light orange">Join existing</Link>
+                <Link to="/newGame" className="btn-large waves-effect waves-light btn light-blue"><i className="material-icons left large">call_merge</i>Join existing</Link>
+                <p className="light hide-on-small-only">Invite yourself in existing games</p>
               </div>
-              <p className="light">Invite yourself in existing games</p>
             </div>
           </div>
+
           <div className="col s12 m4">
             <div className="icon-block">
-              <h2 className="center light-blue-text"><i className="material-icons">trending_up</i></h2>
               <div className="center">
-                <Link to="/newGame" className="btn-large waves-effect waves-light orange">View statistics</Link>
+                <Link to="/newGame" className="btn-large waves-effect waves-light btn light-blue"><i className="material-icons left large">subscriptions</i>View statistics</Link>
+                <p className="hide-on-small-only light">Explore and analyze statistics of the players</p>
               </div>
-              <p className="light">Explore and analyze statistics of the players</p>
             </div>
           </div>
         </div>

webapp/src/Congratulation.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+const Congratulation = ({game, player}) => {
+    if (game.Ongoing == 4) {
+        return (   
+            <div className="card horizontal">
+                <div className="card-stacked">
+                    <div className="card-content">
+                        Congratulations {player.Name}
+                    </div>
+                </div>
+            </div>
+            )
+    }
+
+}
+
+export default Congratulation;

webapp/src/ListGames.js

@@ -24,8 +24,8 @@ class ListGames extends Component {
    return (
       <div className="App">
         <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Join a game</h2>
+          <img style={{'vertical-align': 'middle'}} src={logo} className="App-logo" alt="logo" />
+          <h2 style={{'vertical-align': 'middle'}} >Join a game</h2>
         </div>
         <ul>
         {

webapp/src/NewGame.js

@@ -17,16 +17,22 @@ class NewGame extends Component {
       .then((response) => response.json())
       .then((json) => this.setState({ flavors: json.styles }))
       .catch((error) => console.log(error))
+
+    $(this._collapsible).collapsible({
+      accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
+    });
+
   }
 
   render() {
     return (
       <div>
         <div className="row">
-          <h2><img src={logo} className="App-logo" alt="logo" />Select flavor</h2>
+          <h2><img src={logo} style={{'vertical-align': 'middle'}} className="App-logo" alt="logo" /><span style={{'vertical-align': 'middle'}} >Select flavor</span></h2>
         </div>
+
         <div className="row">
-          <ul className="collection">
+          <ul className="collapsible popout" data-collapsible="accordion" ref={(ref) => this._collapsible = ref}>
             { this.state.flavors.map((flavor) => <NewGameButton key={flavor.Code} flavor={flavor}/>) }
           </ul>
         </div>

webapp/src/NewGameButton.js

@@ -14,17 +14,21 @@ class NewGameButton extends Component {
         style: flavor
       })
     })
-    .then((response) => response.json())
-    .then((json) => browserHistory.push("/games/" + json.id))
-    .catch((error) => console.log(error))    
+      .then((response) => response.json())
+      .then((json) => browserHistory.push("/games/" + json.id))
+      .catch((error) => console.log(error))
   }
 
   render() {
-   return (
-     <li className="collection-item">
-     <span>{this.props.flavor.Code}</span>
-     <a onClick={() => this.newGame(this.props.flavor.Code)} className="secondary-content"><i className="material-icons light-blue-text">keyboard_arrow_right</i></a>
-     </li>)
+    return (
+      <li>
+        <div className="collapsible-header">
+          <span>{this.props.flavor.Code}</span>
+          <a onClick={() => this.newGame(this.props.flavor.Code) } className="secondary-content"><i className="material-icons light-blue-text">keyboard_arrow_right</i></a>
+        </div>
+        <div className="collapsible-body"><p>Voluptate ea aliquip esse consequat eu reprehenderit laborum sunt sit. Esse labore duis amet sint in veniam aute esse enim. Adipisicing culpa quis aliqua est excepteur magna. Nostrud amet incididunt irure duis ea exercitation qui. Est pariatur est pariatur non pariatur anim dolore velit reprehenderit commodo id consequat proident.</p></div>
+      </li>
+    )
   }
 }
 

webapp/src/NewPlayerButton.js

@@ -1,8 +1,23 @@
 import React, { Component } from 'react';
 import { browserHistory } from 'react-router';
+import {Input} from 'react-materialize'
+
+
 
 class NewPlayerButton extends Component {
 
+  constructor(props) {
+    super(props)
+    this.state = {
+      boards: []
+    }
+  }
+
+  componentDidMount() {
+    //TODO use a react library for materialyzecss
+    this.listBoards()
+  }
+
   addPlayer() {
     fetch('/api/games/' + this.props.gameId + "/players", {
       method: 'POST',
@@ -11,26 +26,41 @@ class NewPlayerButton extends Component {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        name: this.refs.name.value,
-        board: "Rennes"
+        name: this._nameinput.value,
+        board: this._boardinput.selectInput.value
       })
     })
       .then((response) => response.json())
       .then((json) => console.log(json))
       .catch((error) => console.log(error))
   }
 
+  listBoards() {
+    fetch('/api/boards')
+      .then(response => response.json())
+      .then((json) => this.setState({ boards: json }))
+      .catch((error) => console.log(error))
+  }
+
+
+
   render() {
     return (
-      <div className="row">
-        <div className="input-field col s6">
-          <input  ref="name" id="playerName" type="text" className="validate"/>
+      <div className="col s12">
+        <div className="input-field col s12 l5">
+          <input  ref={(c) => this._nameinput = c} id="playerName" type="text" className="validate"/>
           <label htmlFor="playerName">Player name</label>
         </div>
-        <div className="input-field col s6">
+        <div className=" col s8 l4">
+          <Input type='select' label="Board" ref={(c) => this._boardinput = c}>
+            { this.state.boards.map((board) => <option value={board}>{ board }</option>) }
+          </Input>
+        </div>
+        <div className="input-field col s4 l3">
           <a className="waves-effect waves-light btn light-blue" onClick={() => this.addPlayer() }>Add</a>
         </div>
-      </div>)
+      </div>
+      )
   }
 }
 

webapp/src/NextPlayerButton.js

@@ -17,9 +17,10 @@ class NextPlayerButton extends Component {
     }
 
     render() {
+        const label = ( this.props.game.Ongoing == 3 ? "Next" : "Hold" )
         return (
             <div>
-                <a className="waves-effect waves-light btn light-blue" onClick={() => this.nextPlayer() }>Next</a>
+                <a className="waves-effect waves-light btn light-blue" onClick={() => this.nextPlayer() }>{label}</a>
             </div>
         )
     }