redesign user frontend

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:
-    path:     /list
-    defaults: { _controller: MineSeekerBundle:Game:list }
+MineSeekerBundle_slack:
+    path:     /slack
+    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-size: cover;
+    background: #d1e8ff;
+    width: 100%;
+    height: 900px;
+    color: #ffffff;
+}
+
+header section {
     position: relative;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: flex-start;
+    justify-content: flex-start;
     flex-direction: column;
+    max-width: 1300px;
     width: 100%;
     height: 100%;
-    color: #ffffff;
-    overflow: hidden;
+    padding: 20px;
+    margin: 0 auto;
 }
 
-header h1 {
-    display: block;
-    font: normal 72px 'Ravi Prakash', cursive;
-    text-align: center;
-    line-height: 20px;
-    color: #ffa800;
+header section div.logo img {
+    width: 350px;
+    margin: 50px 0;
+}
 
+header section > img {
+    position: absolute;
+    width: 1300px;
+    height: 1300px;
+    right: -50%;
+    bottom: -30%;
+
+    z-index: 1;
+}
+
+header section > div {
     z-index: 2;
 }
 
-header h3 {
-    display: block;
-    font: normal 32px 'Open Sans Condensed', sans-serif;
-    text-align: center;
-    color: #ffcd02;
-
-    z-index: 2;
+header section h1 {
+    font: bold 40px 'Rajdhani', sans-serif;
+    color: #434242;
+    margin-bottom: 100px;
 }
 
-header > a {
-    background: #e8e8e8;
+header section h2 {
+    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;
-    padding: 10px 70px;
+    border: 1px solid #658fb8;
+    color: #FFFFFF;
+    padding: 25px 100px;
     margin-top: 20px;
 
-    z-index: 2;
-
-    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
-    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
+    -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;
     -webkit-transition: all 250ms ease-in-out;
@@ -72,36 +93,56 @@ header > a {
     transition: all 250ms ease-in-out;
 }
 
-header > a:hover {
-    background: #ffffff;
+header section div > a:hover {
+    background: #86b5e1;
 
-    -webkit-box-shadow: 0 7px 10px rgba(0, 0, 0, 0.75);
-    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 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 {
-    position: absolute;
-    width: 50%;
-    max-width: 1000px;
-    bottom: -25%;
+@media screen and (max-width: 1100px) {
+    header section {
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+    }
 
-    z-index: 1;
-}
+    header section div > a {
+        margin: 0 auto;
+    }
 
-@media screen and (max-width: 1500px) {
-    header > img {
-        width: 60%;
-        bottom: -40%;
+    header section h1 {
+        margin-bottom: 20px;
+    }
+
+    header section div.logo img {
+        margin-bottom: 0;
+    }
+
+    header section > img {
+        display: none;
     }
 }
 
-@media screen and (max-width: 1500px) {
-    header > img {
-        width: 70%;
-        bottom: -20%;
+@media screen and (max-width: 500px) {
+    header {
+        min-height: 100%;
+        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 */
-    componentDidMount() {
+    connectWithWebsocket() {
         /** 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>
-    <h3>version 0.14.9beta</h3>
-    <a href="{{ path('MineSeekerBundle_gamePlay') }}">Play now</a>
-    <img src="{{ asset('bundles/mineseeker/images/homepage/mineseeker-2.png') }}" alt="" border="0">
+    <section class="header-content">
+        <div class="logo">
+            <img src="{{ asset('bundles/mineseeker/images/mine-logo-txt.png') }}" alt="MineSeeker Logo w/ Txt" 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' %}