bugfix entities gridrow, grid && improve graph design on homepage

src/Jotunheimr/UserBundle/Resources/public/css/layout.css

@@ -16,16 +16,12 @@ main .checkbox {
     color: #FFFFFF;
 }
 
-.facebook {
-    border-bottom: 1px solid #3498db;
-    padding: 40px;
-    margin: 20px;
-}
-
 .fb-login {
-    background: #3498db;
+    display: block;
+    background: #1a6190;
     font: bold 22px 'Gloria Hallelujah', cursive;
-    color: #FFFFFF;
+    text-align: center;
+    color: #2c3e50;
     padding: 15px 20px;
     margin: 20px;
 
@@ -164,7 +160,7 @@ main .checkbox {
 }
 
 .graphic--kozakura {
-    fill: #3498db;
+    fill: #2c3e50;
     pointer-events: none;
     top: 1em;
     bottom: 0;

src/Jotunheimr/UserBundle/Resources/public/css/login.css

@@ -1,5 +1,5 @@
 main {
-    background: url("/bundles/jotunheimruser/images/landscape-2.jpeg");
+    background: url('/bundles/mineseeker/images/homepage/header.jpg');
     background-size: cover;
     background-position: center center;
 }
@@ -15,19 +15,43 @@ main .login {
 }
 
 main .login .login-container {
-    background: #FFFFFF;
-    display: table;
+    background: #2980b9;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
     padding: 1em;
 
-    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
+    -webkit-box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.3);
+}
+
+main .login .login-container .login-form {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+    width: 50%;
+}
+
+main .login .login-container .login-item {
+    width: 50%;
+}
+
+main .login .login-container .login-item h2 {
+    text-align: center;
+}
+
+main .login .login-container .login-item:first-child {
+    border-right: 1px solid #3498db;
 }
 
 main .login h1 {
     display: block;
-    font: normal 40px 'Gloria Hallelujah', cursive;
+    font: normal 72px 'Gloria Hallelujah', cursive;
     text-align: center;
-    color: #3498db;
+    color: #2c3e50;
     margin-top: 0;
 }
 
@@ -37,20 +61,26 @@ main .login .form .input {
 }
 
 main .login .form .checkbox {
-    color: #3498db;
+    color: #2c3e50;
+}
+
+main .checkbox label, main .radio label {
+    font: bolder 18px "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 main .login .form .submit {
-    background: none;
+    background: #1a6190;
     display: block;
-    font: bold 22px 'Gloria Hallelujah', cursive;
-    color: #FFFFFF;
-    border: 2px solid #3498db;
-    padding: 10px 20px;
-    margin: 20px auto 0 auto;
+    font: bolder 22px "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #2c3e50;
+    border: 0;
+    padding: 10px 70px;
+    margin: 20px auto 40px auto;
 
     -webkit-transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
     transition: all 250ms cubic-bezier(0, 0.25, 0.5, 1);
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
 }
 
 main .login .form .submit:hover {

src/Jotunheimr/UserBundle/Resources/public/css/register.css

@@ -1,5 +1,5 @@
 main {
-    background: url("/bundles/jotunheimruser/images/landscape-3.jpeg");
+    background: url('/bundles/mineseeker/images/homepage/header.jpg');
     background-size: cover;
     background-position: center center;
 }

src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig

@@ -9,53 +9,64 @@
 
     <div class="login">
         <div class="login-container">
-            {#{% include('@JotunheimrUser/Social/facebook.html.twig') %}#}
-
             <h1>
                 Sign in
             </h1>
 
-            <div class="form">
-                <form action="{{ path("fos_user_security_check") }}" method="post">
-                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
+            <div class="login-form">
+                <div class="login-item">
+                    <div class="form">
+                        <form action="{{ path("fos_user_security_check") }}" method="post">
+                            <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
 
-                    <div class="input input--kozakura">
-                        <input type="text" id="username" name="_username" value="{{ last_username }}"
-                               class="input__field input__field--kozakura"/>
-                        <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
+                            <div class="input input--kozakura">
+                                <input type="text" id="username" name="_username" value="{{ last_username }}"
+                                       class="input__field input__field--kozakura"/>
+                                <label class="input__label input__label--kozakura"
+                                       for="fos_user_registration_form_email">
                         <span class="input__label-content input__label-content--kozakura"
                               data-content="Username or Email">Username or Email</span>
-                        </label>
-                        <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                             preserveAspectRatio="none">
-                            <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                        </svg>
+                                </label>
+                                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                                     preserveAspectRatio="none">
+                                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                                </svg>
+                            </div>
+
+                            <div class="input input--kozakura">
+                                <input type="password" id="password" name="_password"
+                                       class="input__field input__field--kozakura"/>
+                                <label class="input__label input__label--kozakura"
+                                       for="fos_user_registration_form_email">
+                                    <span class="input__label-content input__label-content--kozakura"
+                                          data-content="Password">Password</span>
+                                </label>
+                                <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
+                                     preserveAspectRatio="none">
+                                    <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
+                                </svg>
+                            </div>
+
+                            <div class="checkbox text-center">
+                                <label for="remember_me">
+                                    <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
+                                    {{ 'security.login.remember_me'|trans }}
+                                </label>
+                            </div>
+
+                            <div class="input-submit">
+                                <input class="submit" type="submit" id="_submit" name="_submit"
+                                       value="{{ 'security.login.submit'|trans }}"/>
+                            </div>
+                        </form>
                     </div>
 
-                    <div class="input input--kozakura">
-                        <input type="password" id="password" name="_password"
-                               class="input__field input__field--kozakura"/>
-                        <label class="input__label input__label--kozakura" for="fos_user_registration_form_email">
-                            <span class="input__label-content input__label-content--kozakura" data-content="Password">Password</span>
-                        </label>
-                        <svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60"
-                             preserveAspectRatio="none">
-                            <path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
-                        </svg>
-                    </div>
-
-                    <div class="checkbox text-center">
-                        <label for="remember_me">
-                            <input type="checkbox" id="remember_me" name="_remember_me" value="on"/>
-                            {{ 'security.login.remember_me'|trans }}
-                        </label>
-                    </div>
-
-                    <div class="input-submit">
-                        <input class="submit" type="submit" id="_submit" name="_submit"
-                               value="{{ 'security.login.submit'|trans }}"/>
-                    </div>
-                </form>
+                </div>
+                <div class="login-item">
+                    <a class="fb-login" href="{{ path('fos_user_registration_register') }}">Register a new account</a>
+                    <h2>or</h2>
+                    {% include('@JotunheimrUser/Social/facebook.html.twig') %}
+                </div>
             </div>
         </div>
     </div>

src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig

@@ -1,38 +1,36 @@
-<div class="facebook">
-    <script>
-        window.fbAsyncInit = function () {
-            FB.init({
-                appId: '320599508311862',
-                xfbml: true,
-                version: 'v2.8'
-            });
-        };
+<script>
+    window.fbAsyncInit = function () {
+        FB.init({
+            appId: '320599508311862',
+            xfbml: true,
+            version: 'v2.8'
+        });
+    };
 
-        (function (d, s, id) {
-            var js, fjs = d.getElementsByTagName(s)[0];
-            if (d.getElementById(id)) {
-                return;
-            }
-            js = d.createElement(s);
-            js.id = id;
-            js.src = "//connect.facebook.net/en_US/sdk.js";
-            fjs.parentNode.insertBefore(js, fjs);
-        }(document, 'script', 'facebook-jssdk'));
-
-        function fbLogin() {
-            FB.getLoginStatus(function (response) {
-                if (response.status === 'connected') {
-                    document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
-                } else {
-                    FB.login(function (response) {
-                        if (response.authResponse) {
-                            document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
-                        }
-                    }, {scope: 'email'});
-                }
-            });
+    (function (d, s, id) {
+        var js, fjs = d.getElementsByTagName(s)[0];
+        if (d.getElementById(id)) {
+            return;
         }
-    </script>
+        js = d.createElement(s);
+        js.id = id;
+        js.src = "//connect.facebook.net/en_US/sdk.js";
+        fjs.parentNode.insertBefore(js, fjs);
+    }(document, 'script', 'facebook-jssdk'));
 
-    <a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>
-</div>
+    function fbLogin() {
+        FB.getLoginStatus(function (response) {
+            if (response.status === 'connected') {
+                document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
+            } else {
+                FB.login(function (response) {
+                    if (response.authResponse) {
+                        document.location = "{{ url("hwi_oauth_service_redirect", {service: "facebook"}) }}";
+                    }
+                }, {scope: 'email'});
+            }
+        });
+    }
+</script>
+
+<a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>

src/Jotunheimr/UserBundle/Security/Core/User/MyFOSUBUserProvider.php

@@ -74,7 +74,8 @@ class MyFOSUBUserProvider extends BaseFOSUBProvider
         $user->setFacebookId($response->getUsername());
         $user->setEmail($response->getEmail());
         $user->setEmailCanonical($response->getEmail());
-        $user->setUsername($response->getUsername());
+        $user->setUsername($this->slugify($response->getRealName()));
+        $user->setUsernameCanonical($this->slugify($response->getRealName()));
         $user->setRealName($response->getRealName());
         $user->setNickName($response->getNickname());
         if ($empty) {
@@ -85,4 +86,27 @@ class MyFOSUBUserProvider extends BaseFOSUBProvider
         $this->em->persist($user);
         $this->em->flush();
     }
+
+    /**
+     * @param $text
+     * @return mixed|string
+     */
+    private function slugify($text)
+    {
+        $text = preg_replace('#[^\\pL\d]+#u', '-', $text);
+        $text = trim($text, '-');
+
+        if (function_exists('iconv')) {
+            $text = iconv('utf-8', 'us-ascii//TRANSLIT', $text);
+        }
+
+        $text = strtolower($text);
+        $text = preg_replace('#[^-\w]+#', '', $text);
+
+        if (empty($text)) {
+            return 'n-a';
+        }
+
+        return $text;
+    }
 }

src/Mine/SeekerBundle/Entity/Grid.php

@@ -3,6 +3,7 @@
 namespace Mine\SeekerBundle\Entity;
 
 use Doctrine\Common\Collections\ArrayCollection;
+use Doctrine\Common\Collections\Collection;
 use Doctrine\ORM\Mapping as ORM;
 
 /**
@@ -78,4 +79,38 @@ class Grid
     {
         return $this->playedGame;
     }
+
+    /**
+     * Add gridRow
+     *
+     * @param GridRow $gridRow
+     *
+     * @return Grid
+     */
+    public function addGridRow(GridRow $gridRow)
+    {
+        $this->gridRow[] = $gridRow;
+
+        return $this;
+    }
+
+    /**
+     * Remove gridRow
+     *
+     * @param GridRow $gridRow
+     */
+    public function removeGridRow(GridRow $gridRow)
+    {
+        $this->gridRow->removeElement($gridRow);
+    }
+
+    /**
+     * Get gridRow
+     *
+     * @return Collection
+     */
+    public function getGridRow()
+    {
+        return $this->gridRow;
+    }
 }

src/Mine/SeekerBundle/Entity/Grid.php~

@@ -30,7 +30,7 @@ class Grid
     private $playedGame;
 
     /**
-     * @var GridCol
+     * @var GridRow
      *
      * @ORM\OneToMany(targetEntity="Mine\SeekerBundle\Entity\GridRow", mappedBy="grid", cascade={"persist"})
      * @ORM\JoinColumn(name="grid_row", referencedColumnName="id", onDelete="CASCADE")
@@ -78,38 +78,4 @@ class Grid
     {
         return $this->playedGame;
     }
-
-    /**
-     * Add gridRow
-     *
-     * @param GridCol $gridRow
-     *
-     * @return Grid
-     */
-    public function addGridRow(GridCol $gridRow)
-    {
-        $this->gridRow[] = $gridRow;
-
-        return $this;
-    }
-
-    /**
-     * Remove gridRow
-     *
-     * @param GridCol $gridRow
-     */
-    public function removeGridRow(GridCol $gridRow)
-    {
-        $this->gridRow->removeElement($gridRow);
-    }
-
-    /**
-     * Get gridRow
-     *
-     * @return \Doctrine\Common\Collections\Collection
-     */
-    public function getGridRow()
-    {
-        return $this->gridRow;
-    }
 }

src/Mine/SeekerBundle/Resources/public/css/style.homepage.css

@@ -0,0 +1,91 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Ravi+Prakash&subset=latin-ext');
+/*
+font-family: 'Ravi Prakash', cursive;
+font-family: 'Open Sans Condensed', sans-serif;
+*/
+
+* {
+    outline: none;
+    padding: 0;
+    margin: 0;
+}
+
+html, body {
+    background: #2C3E50;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+header {
+    background: rgba(255, 255, 255, 0.7) url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat;
+    background-size: cover;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+    height: 560px;
+    color: #ffffff;
+    overflow: hidden;
+}
+
+header h1 {
+    display: block;
+    font: normal 72px 'Ravi Prakash', cursive;
+    text-align: center;
+    line-height: 20px;
+    color: #ffa800;
+}
+
+header h3 {
+    display: block;
+    font: normal 32px 'Open Sans Condensed', sans-serif;
+    text-align: center;
+    color: #ffcd02;
+}
+
+header > a {
+    background: #e8e8e8;
+    display: block;
+    font: bold 22px 'Open Sans Condensed', sans-serif;
+    text-transform: uppercase;
+    text-decoration: none;
+    color: #2C3E50;
+    padding: 10px 70px;
+    margin-top: 20px;
+
+    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-transition: all 250ms ease-in-out;
+    -moz-transition: all 250ms ease-in-out;
+    -o-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+header > a:hover {
+    background: #ffffff;
+
+    -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
+    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
+    -webkit-transition: all 250ms ease-in-out;
+    -moz-transition: all 250ms ease-in-out;
+    -o-transition: all 250ms ease-in-out;
+    transition: all 250ms ease-in-out;
+}
+
+header > img {
+    position: absolute;
+    width: 350px;
+    bottom: -250px;
+}
+
+main {
+    font: normal 32px 'Open Sans Condensed', sans-serif;
+    text-align: center;
+    color: #ffffff;
+    padding-top: 50px;
+}

src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css

@@ -14,6 +14,11 @@ body {
     margin: 0;
 }
 
+main {
+    width: 100%;
+    height: 100%;
+}
+
 .mine-container {
     background: url("/bundles/mineseeker/images/bg-mineseeker-outbg.jpg") no-repeat;
     background-size: cover;

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

@@ -65,7 +65,10 @@ class MineSeeker extends React.Component {
                             session: this.state.session,
                             channel: this.state.channel,
                             overlay: true,
-                            overlayTitle: "We are waiting for your opponent..."
+                            overlayTitle: "We are waiting for your opponent bazmeg...",
+                            overlaySubTitle: this.state.gameAssoc
+                                ? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
+                                : ''
                         });
 
                         /** setup the web player */
@@ -127,7 +130,7 @@ class MineSeeker extends React.Component {
                             }
                         );
                     },
-                    (error, desc) => console.log(["RPC Error", error, desc])
+                    (error, desc) => console.error(["RPC Error", error, desc])
                 );
         });
 
@@ -135,7 +138,7 @@ class MineSeeker extends React.Component {
          * DisConnect
          * Error provides us with some insight into the disconnection: error.reason and error.code
          */
-        websocket.on("socket/disconnect", (error) => console.log("Disconnected for " + error.reason + " with code " + error.code));
+        websocket.on("socket/disconnect", (error) => console.error("Disconnected for " + error.reason + " with code " + error.code));
     }
 
     onClick(coords) {
@@ -168,18 +171,6 @@ class MineSeeker extends React.Component {
         }
     }
 
-    /** FOR DEVELOPMENT */
-    createLink() {
-        /*
-         <div>
-         {this.createLink()}
-         </div>
-         */
-        return this.state.gameAssoc
-            ? <a href={"/play/" + this.state.gameAssoc} target="_blank">Play w/ me!</a>
-            : '';
-    }
-
     render() {
         return (
             <GridControl ref="gridControl"

src/Mine/SeekerBundle/Resources/views/Game/index.html.twig

@@ -1,5 +1,23 @@
 {% extends "::base.html.twig" %}
 
-{% block body %}
-    Bazmeg index.
+{% block header %}
+    <h1>MineSeeker</h1>
+    <h3>version 1.0a</h3>
+    <a href="{{ path('MineSeekerBundle_gamePlay') }}">Play now</a>
+    <img src="{{ asset('bundles/mineseeker/images/homepage/mineseeker.png') }}" alt="" border="0">
+{% endblock %}
+
+{% block body %}
+    The site is under construction
+{% endblock %}
+
+{% block footer %}
+
+{% endblock %}
+
+{% block stylesheets %}
+    {% stylesheets filter='cssrewrite'
+    '@MineSeekerBundle/Resources/public/css/style.homepage.css' %}
+    <link rel="stylesheet" media="screen" href="{{ asset_url }}" type="text/css"/>
+    {% endstylesheets %}
 {% endblock %}