game ends after x mines

app/config/security.yml

@@ -36,5 +36,5 @@ security:
         - { path: ^/login, roles: IS_AUTHENTICATED_ANONYMOUSLY }
         - { path: ^/register, role: IS_AUTHENTICATED_ANONYMOUSLY }
         - { path: ^/resetting, role: IS_AUTHENTICATED_ANONYMOUSLY }
-        - { path: ^/play, role: ROLE_USER }
+        - { path: ^/play, role: IS_AUTHENTICATED_ANONYMOUSLY }
         - { path: ^/admin, role: ROLE_SUPER_ADMIN }

src/Jotunheimr/UserBundle/Resources/views/layout.html.twig

@@ -35,8 +35,7 @@
 {% endif %}
 
 <main>
-    {% block fos_user_content %}
+    {% block fos_user_content %}{% endblock fos_user_content %}
-    {% endblock fos_user_content %}
     <canvas id="demo-canvas"></canvas>
 </main>
 

src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js

@@ -28,6 +28,22 @@ class MineSeeker extends React.Component {
         return text;
     }
 
+    /** game end control */
+    makeGameEndIfItEnds(bluePoints, redPoints) {
+        var redWins = redPoints > 3,
+            blueWins = bluePoints > 3;
+
+        if (redWins || blueWins) {
+            this.refs.gridControl.setState({
+                overlay: true,
+                overlayTitle: (redWins ? 'Red' : 'Blue') + " wins the game!",
+                overlaySubTitle: "Play again!"
+            });
+
+            this.refs.gridControl.state.sound.won.play();
+        }
+    }
+
     /** after rendering */
     componentDidMount() {
         /** Create Websocket w/ Bahnhof.js */
@@ -95,6 +111,12 @@ class MineSeeker extends React.Component {
 
                                         this.refs.gridControl.refs.userControl.state.bombSelected = payload.data.bomb;
                                         this.refs.gridControl.stepEvent(payload.data.coords);
+                                        
+                                        /** End-game control */
+                                        this.makeGameEndIfItEnds(
+                                            this.refs.gridControl.refs.userControl.refs.blue.state.mines,
+                                            this.refs.gridControl.refs.userControl.refs.red.state.mines
+                                        );
                                     }
                                 } else {
 
@@ -158,6 +180,9 @@ class MineSeeker extends React.Component {
                             : 0
                     );
 
+            /** End-game control */
+            this.makeGameEndIfItEnds(bluePoints, redPoints);
+
             this.state.session
                 .publish(this.state.channel, {
                     'coords': coords,