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

2016-11-15 17:53:12 +01:00
parent a4574fe933
commit 1e9bdbac3f
13 changed files with 327 additions and 167 deletions
--- a/app/Resources/views/base.html.twig
+++ b/app/Resources/views/base.html.twig
@@ -4,25 +4,20 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Welcome!{% endblock %}</title>
-    {% block stylesheets %}
-        {#{% stylesheets filter='cssrewrite'
-        '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css'
-        '@TollTereloBundle/Resources/public/css/style.css' %}
-        <link rel="stylesheet" media="screen" href="{{ asset_url }}" type="text/css"/>
-        {% endstylesheets %}#}
-    {% endblock %}
+    {% block stylesheets %}{% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}"/>
 </head>
 <body>
+<header>
+    {% block header %}{% endblock %}
+</header>
+<main>
    {% block body %}{% endblock %}
-{% block javascripts %}
-    {#{% javascripts
-    '@JotunheimrAdminBundle/Resources/public/js/vendor/plugins/jQuery/jquery-3.0.0.min.js'
-    '@JotunheimrAdminBundle/Resources/public/js/vendor/plugins/jQuery/jquery-migrate-3.0.0.min.js'
-    '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/js/bootstrap.min.js'
-    '@TollTereloBundle/Resources/public/js/script.js' %}
-    <script type="text/javascript" src="{{ asset_url }}"></script>
-    {% endjavascripts %}#}
-{% endblock %}
+</main>
+<footer>
+    {% block footer %}{% endblock %}
+</footer>
+
+{% block javascripts %}{% endblock %}
 </body>
 </html>
--- a/src/Jotunheimr/UserBundle/Resources/public/css/layout.css
+++ b/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;
--- a/src/Jotunheimr/UserBundle/Resources/public/css/login.css
+++ b/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 {
--- a/src/Jotunheimr/UserBundle/Resources/public/css/register.css
+++ b/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;
 }
--- a/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
@@ -9,12 +9,12 @@

    <div class="login">
        <div class="login-container">
-            {#{% include('@JotunheimrUser/Social/facebook.html.twig') %}#}
-
            <h1>
                Sign in
            </h1>

+            <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 }}"/>
@@ -22,7 +22,8 @@
                            <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">
+                                <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>
@@ -35,8 +36,10 @@
                            <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 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">
@@ -57,6 +60,14 @@
                            </div>
                        </form>
                    </div>
+
+                </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>
 {% endblock fos_user_content %}
--- a/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
+++ b/src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
@@ -1,4 +1,3 @@
-<div class="facebook">
 <script>
    window.fbAsyncInit = function () {
        FB.init({
@@ -35,4 +34,3 @@
 </script>

 <a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i> Enter w/ Facebook</a>
-</div>
--- a/src/Jotunheimr/UserBundle/Security/Core/User/MyFOSUBUserProvider.php
+++ b/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;
+    }
 }
--- a/src/Mine/SeekerBundle/Entity/Grid.php
+++ b/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;
+    }
 }
--- a/src/Mine/SeekerBundle/Entity/Grid.php~
+++ b/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;
-    }
 }
--- a/src/Mine/SeekerBundle/Resources/public/css/style.homepage.css
+++ b/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;
+}
--- a/src/Mine/SeekerBundle/Resources/public/css/style.mineseeker.css
+++ b/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;
--- a/src/Mine/SeekerBundle/Resources/public/js/mine-seeker/app.js
+++ b/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"
--- a/src/Mine/SeekerBundle/Resources/views/Game/index.html.twig
+++ b/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 %}