diff --git a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css b/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css index 974a855..ba8a483 100644 --- a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css +++ b/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css @@ -294,8 +294,8 @@ main { } #mine-wrapper .game-wrapper .users .user-container .user-caret { - height: 35px; - font-size: 35px; + height: 30px; + font-size: 30px; text-align: center; line-height: 15px; } @@ -309,9 +309,20 @@ main { } #mine-wrapper .game-wrapper .users .user-container .user-desc { - height: 60px; + height: 65px; + font-size: 14px; + text-align: center; } +#mine-wrapper .game-wrapper .users .user-container.user-blue .user-desc { + color: #0b3776; +} + +#mine-wrapper .game-wrapper .users .user-container.user-red .user-desc { + color: #fdf612; +} + + #mine-wrapper .game-wrapper .users .user-container .user-control { background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%); background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.5) 0%, rgba(125, 185, 232, 0) 100%); diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js index c71eb1e..7f8e58c 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js @@ -45,6 +45,8 @@ class MineSeeker extends React.Component { this.refs.gridControl.showLeftMines(); this.refs.gridControl.refs.userControl.setState({activePlayer: false}); + this.refs.gridControl.refs.userControl.refs.red.setState({desc: ""}); + this.refs.gridControl.refs.userControl.refs.blue.setState({desc: ""}); } } @@ -82,6 +84,17 @@ class MineSeeker extends React.Component { this.refs.gridControl.setState({ grid: this.state.gameInherited ? JSON.parse(Base64.decode(gridServer)) : gridClient, channel: this.state.channel, + desc: { + buddy:
+ Your buddy is
+ making a
+ move. +
, + you:
+ It is your turn!
+ Make a move. +
+ }, overlay: true, overlayTitle: "We are waiting for your opponent...", overlaySubTitle: this.state.gameAssoc @@ -146,11 +159,14 @@ class MineSeeker extends React.Component { /** Set up player names w/ server data */ this.refs.gridControl.refs.userControl.refs.red.setState({ - name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon + name: payload.users.red !== '' ? payload.users.red : payload.users.redAnon, }); this.refs.gridControl.refs.userControl.refs.blue.setState({ - name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon + name: payload.users.blue !== '' ? payload.users.blue : payload.users.blueAnon, + desc: this.refs.gridControl.state.webPlayer === 'blue' + ? this.refs.gridControl.state.desc.you + : this.refs.gridControl.state.desc.buddy }); this.refs.gridControl.setState({overlay: false}); diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js index 45e862e..70a01ee 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/grid/grid-control.js @@ -16,6 +16,7 @@ class GridControl extends React.Component { env: props.env, webPlayer: null, grid: null, + desc: null, renderGridFields: false, gridFields: [], updatedFieldCache: [], @@ -178,12 +179,17 @@ class GridControl extends React.Component { activePlayer: userControl.state.activePlayer ? 0 : 1 }); + /** the desc is inversely because the user.active is not changed yet !!! */ userControl.refs[activePlayer].setState({ - active: false + active: false, + desc: "" }); userControl.refs[inactivePlayer].setState({ - active: true + active: true, + desc: activePlayer === this.state.webPlayer + ? this.state.desc.buddy + : this.state.desc.you }); } } diff --git a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js index 385fe9a..20c4f9a 100644 --- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js +++ b/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/user/user.js @@ -6,6 +6,7 @@ class User extends React.Component { this.state = { name: "...", + desc: "", active: props.active, color: props.color === 'blue' ? 1 : 0, mines: 0, @@ -57,7 +58,7 @@ class User extends React.Component {
{this.state.name}
-
+
{this.state.desc}
flag