redesign user frontend

README.md

@@ -29,3 +29,7 @@ This is a Symfony 3 project w/ React JS in standalone mode and w/ WebSocket.
 
 			-d -->	Debugger; If you write this line somewhere: debugger;
 				The browser will stop the code here!!!
+
+	3.) Connect to Prod
+
+		ssh xxsvci@laszlolang.com -i ~/.ssh/id_rsa_laszlolang

src/.htaccess

@@ -1,7 +0,0 @@
-<IfModule mod_authz_core.c>
-    Require all denied
-</IfModule>
-<IfModule !mod_authz_core.c>
-    Order deny,allow
-    Deny from all
-</IfModule>

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

@@ -28,109 +28,166 @@
     box-sizing: border-box;
 }
 
-main {
+.ac-custom {
-    background: url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat center center;
-    background-size: cover;
-    position: fixed;
     width: 100%;
-    height: 100%;
 }
 
-main .wrapper {
+header section .form-check {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-}
-
-main .wrapper .form-container {
-    background: #ffffff;
     display: table;
-    padding: 15px;
+    position: relative;
-}
-
-main .wrapper .form-container h1 {
-    font: normal 32px Arial, Helvetica, sans-serif;
-    text-align: center;
-    padding: 0;
-    margin: 0 0 15px 0;
-}
-
-main .wrapper .form-container h1.sub-title {
-    margin-top: 15px;
-}
-
-main .wrapper .form-container h2 {
-    font: normal 18px Arial, Helvetica, sans-serif;
-    text-align: center;
     margin: 20px 0;
 }
 
-main .wrapper .form-container .form-input {
+header section h1 {
-    background: #cbcbc8;
+    margin: 10px 0;
-    min-width: 300px;
+}
-    border: 0;
-    padding: 15px;
 
+header section .input-submit button,
+header section .input-submit button:hover,
+header section .form-input,
+header section .form-input:focus,
+header section .form-input:hover {
     -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;
 }
 
-main .wrapper .form-container .form-input:focus {
+header section .input-submit button {
-    background: #e2e2de;
+    background: #83aed9;
-
-    -webkit-transition: all 250ms ease-in-out;
-    transition: all 250ms ease-in-out;
-}
-
-main .wrapper .form-container .form-input.form-username {
-    margin-bottom: 5px;
-}
-
-main .wrapper .form-container .form-check {
     display: table;
-    position: relative;
+    font: bold 32px 'Rajdhani', sans-serif;
-    margin: 20px auto 0 auto;
+    text-transform: uppercase;
-}
+    text-decoration: none;
-
+    width: 500px;
-main .wrapper .form-container .input-submit {
+    border: 1px solid #658fb8;
+    color: #FFFFFF;
+    padding: 25px 100px;
     margin-top: 20px;
+
+    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
 }
 
-main .wrapper .form-container button,
+header section .input-submit button:hover {
-main .wrapper .form-container .fb-login {
+    background: #86b5e1;
+
+    -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
+    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
+}
+
+header section .form-input {
     display: block;
-    background: #7dadcf;
+    width: 500px;
+    font: bold 22px 'Rajdhani', sans-serif;
+    border: 1px solid #dddddd;
+    color: #000000;
+    padding: 15px;
+    margin-bottom: 10px;
+
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+}
+
+header section .form-input:focus,
+header section .form-input:hover {
+    -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
+}
+
+header section h3.or {
+    font: bold 16px 'Rajdhani', sans-serif;
+    text-transform: uppercase;
+    color: #a1a1a1;
+    margin: 20px 0;
+}
+
+header section .fb,
+header section form {
+    z-index: 2;
+}
+
+header section a.fb-login {
+    background: #5975b1;
+    position: relative;
+    display: block;
+    width: 500px;
+    height: 93px;
+    border: 1px solid #50649f;
+    margin: 0;
+
+    overflow: hidden;
+
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
+}
+
+header section a.fb-login:hover {
+    background: #42598c;
+    color: #FFFFFF;
+    text-decoration: none;
+
+    -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.1);
+}
+
+header section a.fb-login i {
+    position: absolute;
+    font-size: 130px;
+    top: 0;
+    left: 15px;
+}
+
+@media screen and (max-width: 1100px) {
+    header section .form-input,
+    header section .form-check {
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    header section .input-submit button {
+        margin: 0 auto;
+    }
+
+    header section > div {
         width: 100%;
-    border: 0;
+    }
-    text-align: center;
-    padding: 20px;
 
-    -webkit-transition: all 250ms ease-in-out;
+    header section a.fb-login {
-    transition: all 250ms ease-in-out;
+        margin: 0 auto;
+    }
 }
 
-main .wrapper .form-container .fb-login {
+@media screen and (max-width: 550px) {
-    background: #3b5998;
+    header section {
+        padding: 10px;
+    }
+
+    header section .form-input {
+        width: 100%;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    header section .form-check {
+        margin: 20px auto;
+    }
+
+    header section .input-submit button {
+        width: 100%;
+    }
+
+    header section a.fb-login {
+        width: 100%;
+    }
+
+    header section a.fb-login span {
+        display: none;
+    }
 }
-
-main .wrapper .form-container button:focus,
-main .wrapper .form-container button:hover,
-main .wrapper .form-container .fb-login:focus,
-main .wrapper .form-container .fb-login:hover {
-    background: #6fa0c3;
-
-    -webkit-transition: all 250ms ease-in-out;
-    transition: all 250ms ease-in-out;
-}
-
-main .wrapper .form-container button i,
-main .wrapper .form-container .fb-login i {
-    font-size: 32px;
-    font-weight: bolder;
-    color: #ffffff;
-}
-
-
-

src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig

@@ -3,8 +3,11 @@
 {% trans_default_domain 'FOSUserBundle' %}
 
 {% block fos_user_content %}
-    <div class="wrapper">
+    <section class="header-content">
-        <div class="form-container">
+        <div class="logo">
+            <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt"
+                 border="0"/>
+        </div>
         <h1> Sign up </h1>
         <div class="db">
             <form action="{{ path('fos_user_registration_register') }}"
@@ -36,12 +39,12 @@
                 </div>
             </form>
         </div>
-            <h2><u><b>or</b></u> enter w/ your Facebook's e-mail</h2>
+        <h3 class="or">vagy regisztrálj <u>egy</u> kattintással</h3>
         <div class="fb">
             {% include('@JotunheimrUser/Social/facebook.html.twig') %}
         </div>
-        </div>
+        <img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
-    </div>
+    </section>
 {% endblock fos_user_content %}
 
 {% block javascripts %}

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

@@ -7,25 +7,23 @@
         {{ error.messageKey|trans(error.messageData, 'security') }}
     {% endif %}
 
-    <div class="wrapper">
+    <section class="header-content">
-        <div class="form-container">
+        <div class="logo">
-            <h1>Sign in</h1>
+            <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt"
-            <div class="db">
+                 border="0"/>
+        </div>
+        <h1>Bejelentkezés</h1>
         <form action="{{ path("fos_user_security_check") }}" method="post"
               class="ac-custom ac-checkbox ac-boxfill">
             <input type="hidden" name="_csrf_token" value="{{ csrf_token }}"/>
 
-                    <div>
             <input type="text" id="username" name="_username" value="{{ last_username }}"
                    class="form-input form-username"
                    placeholder="Username or Email"/>
-                    </div>
 
-                    <div>
             <input type="password" id="password" name="_password"
                    class="form-input"
                    placeholder="Password"/>
-                    </div>
 
             <div class="form-check">
                 <input type="checkbox" id="remember-me" name="_remember_me" value="on"/>
@@ -38,13 +36,12 @@
                 </button>
             </div>
         </form>
-            </div>
+        <h3 class="or">vagy jelentkezz be <u>egy</u> kattintással</h3>
-            <h2><u><b>or</b></u> enter w/ your Facebook's e-mail</h2>
         <div class="fb">
             {% include('@JotunheimrUser/Social/facebook.html.twig') %}
         </div>
-        </div>
+        <img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
-    </div>
+    </section>
 {% endblock fos_user_content %}
 
 {% block javascripts %}

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

@@ -33,4 +33,4 @@
     }
 </script>
 
-<a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i></a>
+<a class="fb-login" href="#" onclick="fbLogin();"><i class="fa fa-facebook"></i><span>w/ Facebook</span></a>

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

@@ -7,23 +7,17 @@
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     {% block stylesheets %}
         {% stylesheets filter='cssrewrite'
-        '@JotunheimrUserBundle/Resources/public/css/layout.css'
+        '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css'
-        '@JotunheimrAdminBundle/Resources/public/js/vendor/bootstrap/css/bootstrap.min.css' %}
+        '@MineSeekerBundle/Resources/public/css/style.homepage.css'
+        '@JotunheimrUserBundle/Resources/public/css/layout.css' %}
         <link rel="stylesheet" media="screen" href="{{ asset_url }}"/>
         {% endstylesheets %}
     {% endblock %}
     <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}"/>
-    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&amp;subset=latin-ext" rel="stylesheet">
-    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
-    <!--[if lt IE 9]>
-    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
-    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
 </head>
 
 <body>
-
 {% if app.request.hasPreviousSession %}
     {% for type, messages in app.session.flashbag.all() %}
         {% for message in messages %}
@@ -34,10 +28,15 @@
     {% endfor %}
 {% endif %}
 
-<main>
+<header>
     {% block fos_user_content %}{% endblock fos_user_content %}
-    <canvas id="demo-canvas"></canvas>
+</header>
+<main>
+    {% block main %}{% endblock %}
 </main>
+<footer>
+    {% block footer %}{% endblock %}
+</footer>
 
 {% block javascripts %}
     {% javascripts
@@ -48,6 +47,5 @@
     <script type="text/javascript" src="{{ asset_url }}"></script>
     {% endjavascripts %}
 {% endblock %}
-
 </body>
 </html>

src/Mine/SeekerBundle/Controller/GameController.php

@@ -20,8 +20,13 @@ class GameController extends Controller
         ));
     }
 
-    public function listAction()
+    public function slack(Request $request)
     {
-        return $this->render('MineSeekerBundle:Game:list.html.twig');
+
     }
+
+//    public function listAction()
+//    {
+//        return $this->render('MineSeekerBundle:Game:list.html.twig');
+//    }
 }

src/Mine/SeekerBundle/Resources/config/routing.yml

@@ -10,7 +10,11 @@ MineSeekerBundle_gamePlayWId:
     path:     /play/{gameAssoc}
     defaults: { _controller: MineSeekerBundle:Game:play }
 
-MineSeekerBundle_gameList:
+MineSeekerBundle_slack:
-    path:     /list
+    path:     /slack
-    defaults: { _controller: MineSeekerBundle:Game:list }
+    defaults: { _controller: MineSeekerBundle:Game:slack }
+
+#MineSeekerBundle_gameList:
+#    path:     /list
+#    defaults: { _controller: MineSeekerBundle:Game:list }
 

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

@@ -1,9 +1,3 @@
-/*@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;
@@ -11,59 +5,86 @@ font-family: 'Open Sans Condensed', sans-serif;
 }
 
 html, body {
-    background: #2C3E50;
+    background: #ffffff;
     display: block;
     width: 100%;
     height: 100%;
 }
 
 header {
-    background: rgba(255, 255, 255, 0.7) url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat;
+    background: #d1e8ff;
-    background-size: cover;
+    width: 100%;
+    height: 900px;
+    color: #ffffff;
+}
+
+header section {
     position: relative;
     display: flex;
-    align-items: center;
+    align-items: flex-start;
-    justify-content: center;
+    justify-content: flex-start;
     flex-direction: column;
+    max-width: 1300px;
     width: 100%;
     height: 100%;
-    color: #ffffff;
+    padding: 20px;
-    overflow: hidden;
+    margin: 0 auto;
 }
 
-header h1 {
+header section div.logo img {
-    display: block;
+    width: 350px;
-    font: normal 72px 'Ravi Prakash', cursive;
+    margin: 50px 0;
-    text-align: center;
+}
-    line-height: 20px;
-    color: #ffa800;
 
+header section > img {
+    position: absolute;
+    width: 1300px;
+    height: 1300px;
+    right: -50%;
+    bottom: -30%;
+
+    z-index: 1;
+}
+
+header section > div {
     z-index: 2;
 }
 
-header h3 {
+header section h1 {
-    display: block;
+    font: bold 40px 'Rajdhani', sans-serif;
-    font: normal 32px 'Open Sans Condensed', sans-serif;
+    color: #434242;
-    text-align: center;
+    margin-bottom: 100px;
-    color: #ffcd02;
-
-    z-index: 2;
 }
 
-header > a {
+header section h2 {
-    background: #e8e8e8;
+    font: normal 32px 'Rajdhani', sans-serif;
+    color: #434242;
+}
+
+header section h3 {
     display: block;
-    font: bold 22px 'Open Sans Condensed', sans-serif;
+    font: bold 16px 'Rajdhani', sans-serif;
+    color: #434242;
+    margin-top: 10px;
+}
+
+header section h3 img {
+    width: 16px;
+}
+
+header section div > a {
+    background: #83aed9;
+    display: table;
+    font: bold 32px 'Rajdhani', sans-serif;
     text-transform: uppercase;
     text-decoration: none;
-    color: #2C3E50;
+    border: 1px solid #658fb8;
-    padding: 10px 70px;
+    color: #FFFFFF;
+    padding: 25px 100px;
     margin-top: 20px;
 
-    z-index: 2;
+    -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
-
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
-    -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;
@@ -72,36 +93,56 @@ header > a {
     transition: all 250ms ease-in-out;
 }
 
-header > a:hover {
+header section div > a:hover {
-    background: #ffffff;
+    background: #86b5e1;
 
-    -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
+    -webkit-box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
-    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
+    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.2);
     -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 {
+@media screen and (max-width: 1100px) {
-    position: absolute;
+    header section {
-    width: 50%;
+        align-items: center;
-    max-width: 1000px;
+        justify-content: center;
-    bottom: -25%;
+        text-align: center;
+    }
 
-    z-index: 1;
+    header section div > a {
-}
+        margin: 0 auto;
+    }
 
-@media screen and (max-width: 1500px) {
+    header section h1 {
-    header > img {
+        margin-bottom: 20px;
-        width: 60%;
+    }
-        bottom: -40%;
+
+    header section div.logo img {
+        margin-bottom: 0;
+    }
+
+    header section > img {
+        display: none;
     }
 }
 
-@media screen and (max-width: 1500px) {
+@media screen and (max-width: 500px) {
-    header > img {
+    header {
-        width: 70%;
+        min-height: 100%;
-        bottom: -20%;
+        height: auto;
+    }
+
+    header section {
+        width: auto;
+    }
+
+    header section div.logo img {
+        width: 100%;
+    }
+
+    header section div > a {
+        display: block;
     }
 }

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

@@ -289,13 +289,14 @@ class MineSeeker extends React.Component {
             });
     }
 
-    /** After rendering */
+    connectWithWebsocket() {
-    componentDidMount() {
         /** Create Websocket w/ Bahnhof.js */
         let websocket = WS.connect(
             this.state.env === 'dev'
+                // ? "ws://mine.dev:6450"
+                // : "ws://www.mineseeker.ninja:6450"
                 ? "ws://mine.dev:6450"
-                : (this.state.ssl === 'true' ? "wss" : "ws") + "://www.mineseeker.ninja:6450"
+                : (this.state.ssl === 'true' ? "wss" : "ws") + "://system7.ddns.net:443/"
         );
 
         /**
@@ -346,6 +347,11 @@ class MineSeeker extends React.Component {
         });
     }
 
+    /** After rendering */
+    componentDidMount() {
+
+    }
+
     /**
      * Cache the steps unless reconnection
      *

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

@@ -1,14 +1,22 @@
 {% extends "::base.html.twig" %}
 
 {% block header %}
-    <h1>MineSeeker</h1>
+    <section class="header-content">
-    <h3>version 0.14.9beta</h3>
+        <div class="logo">
-    <a href="{{ path('MineSeekerBundle_gamePlay') }}">Play now</a>
+            <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt" border="0"/>
-    <img src="{{ asset('bundles/mineseeker/images/homepage/mineseeker-2.png') }}" alt="" border="0">
+        </div>
+        <div>
+            <h2>Egy aknakereső játék</h2>
+            <h1>Újragondolva...</h1>
+            <a href="{{ path('MineSeekerBundle_gamePlay') }}">Játszok!</a>
+            <h3>version 0.16.11 (beta2) &middot; MineSeeker&copy; &middot; <a href="http://www.laszlolang.com">www.laszlolang.com</a></h3>
+        </div>
+        <img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
+    </section>
 {% endblock %}
 
 {% block stylesheets %}
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Ravi+Prakash" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&amp;subset=latin-ext" rel="stylesheet">
 
     {% stylesheets filter='?uglifycss'
     '@MineSeekerBundle/Resources/public/css/style.homepage.css' %}