SplendidBear-Websites/MineSeeker
Private
Public Access
1
0
Fork 0
Code Pull Requests 1 Releases Activity

redesign user frontend

Browse Source
This commit is contained in:
Root
2016-12-08 14:35:28 +01:00
parent aed5eaf3ab
commit 6dc59549ef
17 changed files with 358 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -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

7
src/.htaccess
View File

@@ -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>

213
src/Jotunheimr/UserBundle/Resources/public/css/layout.css
View File

@@ -28,109 +28,166 @@
box-sizing: border-box;
}
main {
background: url('/bundles/mineseeker/images/homepage/header.jpg') no-repeat center center;
background-size: cover;
position: fixed;
.ac-custom {
width: 100%;
height: 100%;
}
main .wrapper {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
main .wrapper .form-container {
background: #ffffff;
header section .form-check {
display: table;
padding: 15px;
}
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;
position: relative;
margin: 20px 0;
}
main .wrapper .form-container .form-input {
background: #cbcbc8;
min-width: 300px;
border: 0;
padding: 15px;
header section h1 {
margin: 10px 0;
}
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 {
background: #e2e2de;
-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 {
header section .input-submit button {
background: #83aed9;
display: table;
position: relative;
margin: 20px auto 0 auto;
}
main .wrapper .form-container .input-submit {
font: bold 32px 'Rajdhani', sans-serif;
text-transform: uppercase;
text-decoration: none;
width: 500px;
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,
main .wrapper .form-container .fb-login {
header section .input-submit button:hover {
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: 100%;
border: 0;
text-align: center;
padding: 20px;
width: 500px;
font: bold 22px 'Rajdhani', sans-serif;
border: 1px solid #dddddd;
color: #000000;
padding: 15px;
margin-bottom: 10px;
-webkit-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
-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);
}
main .wrapper .form-container .fb-login {
background: #3b5998;
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);
}
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;
header section h3.or {
font: bold 16px 'Rajdhani', sans-serif;
text-transform: uppercase;
color: #a1a1a1;
margin: 20px 0;
}
main .wrapper .form-container button i,
main .wrapper .form-container .fb-login i {
font-size: 32px;
font-weight: bolder;
color: #ffffff;
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%;
}
header section a.fb-login {
margin: 0 auto;
}
}
@media screen and (max-width: 550px) {
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;
}
}

79
src/Jotunheimr/UserBundle/Resources/views/Registration/register.html.twig
View File

@@ -3,45 +3,48 @@
{% trans_default_domain 'FOSUserBundle' %}
{% block fos_user_content %}
<div class="wrapper">
<div class="form-container">
<h1> Sign up </h1>
<div class="db">
<form action="{{ path('fos_user_registration_register') }}"
method="post">
<div>
{{ form_widget(form.email, {'attr': {'placeholder': 'Email', 'class': 'form-input form-username'}}) }}
{{ form_errors(form.email) }}
</div>
<div>
{{ form_widget(form.username, {'attr': {'placeholder': 'Username ', 'class': 'form-input form-username'}}) }}
{{ form_errors(form.username) }}
</div>
<div>
{{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password', 'class': 'form-input form-username'}}) }}
{{ form_errors(form.plainPassword.first) }}
</div>
<div>
{{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Repeat password', 'class': 'form-input'}}) }}
{{ form_errors(form.plainPassword.second) }}
</div>
<div class="input-submit">
<button type="submit" id="_submit" name="_submit">
<i class="fa fa-check"></i>
</button>
</div>
</form>
</div>
<h2><u><b>or</b></u> enter w/ your Facebook's e-mail</h2>
<div class="fb">
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
</div>
<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>
<h1> Sign up </h1>
<div class="db">
<form action="{{ path('fos_user_registration_register') }}"
method="post">
<div>
{{ form_widget(form.email, {'attr': {'placeholder': 'Email', 'class': 'form-input form-username'}}) }}
{{ form_errors(form.email) }}
</div>
<div>
{{ form_widget(form.username, {'attr': {'placeholder': 'Username ', 'class': 'form-input form-username'}}) }}
{{ form_errors(form.username) }}
</div>
<div>
{{ form_widget(form.plainPassword.first, {'attr': {'placeholder': 'Password', 'class': 'form-input form-username'}}) }}
{{ form_errors(form.plainPassword.first) }}
</div>
<div>
{{ form_widget(form.plainPassword.second, {'attr': {'placeholder': 'Repeat password', 'class': 'form-input'}}) }}
{{ form_errors(form.plainPassword.second) }}
</div>
<div class="input-submit">
<button type="submit" id="_submit" name="_submit">
<i class="fa fa-check"></i>
</button>
</div>
</form>
</div>
<h3 class="or">vagy regisztrálj <u>egy</u> kattintással</h3>
<div class="fb">
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
</div>
<img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
</section>
{% endblock fos_user_content %}
{% block javascripts %}

71
src/Jotunheimr/UserBundle/Resources/views/Security/login.html.twig
View File

@@ -7,44 +7,41 @@
{{ error.messageKey|trans(error.messageData, 'security') }}
{% endif %}
<div class="wrapper">
<div class="form-container">
<h1>Sign in</h1>
<div class="db">
<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"/>
<label for="remember-me">{{ 'security.login.remember_me'|trans }}</label>
</div>
<div class="input-submit">
<button type="submit" id="_submit" name="_submit">
<i class="fa fa-check"></i>
</button>
</div>
</form>
</div>
<h2><u><b>or</b></u> enter w/ your Facebook's e-mail</h2>
<div class="fb">
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
</div>
<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>
<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 }}"/>
<input type="text" id="username" name="_username" value="{{ last_username }}"
class="form-input form-username"
placeholder="Username or Email"/>
<input type="password" id="password" name="_password"
class="form-input"
placeholder="Password"/>
<div class="form-check">
<input type="checkbox" id="remember-me" name="_remember_me" value="on"/>
<label for="remember-me">{{ 'security.login.remember_me'|trans }}</label>
</div>
<div class="input-submit">
<button type="submit" id="_submit" name="_submit">
<i class="fa fa-check"></i>
</button>
</div>
</form>
<h3 class="or">vagy jelentkezz be <u>egy</u> kattintással</h3>
<div class="fb">
{% include('@JotunheimrUser/Social/facebook.html.twig') %}
</div>
<img src="{{ asset('bundles/mineseeker/images/mine-logo-logo.png') }}" alt="MineSeeker Logo" border="0"/>
</section>
{% endblock fos_user_content %}
{% block javascripts %}

2
src/Jotunheimr/UserBundle/Resources/views/Social/facebook.html.twig
View File

@@ -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>

24
src/Jotunheimr/UserBundle/Resources/views/layout.html.twig
View File

@@ -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">
<!-- 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]-->
<link href="https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700&amp;subset=latin-ext" rel="stylesheet">
</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>

9
src/Mine/SeekerBundle/Controller/GameController.php
View File

@@ -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');
// }
}

10
src/Mine/SeekerBundle/Resources/config/routing.yml
View File

@@ -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 }

151
src/Mine/SeekerBundle/Resources/public/css/style.homepage.css
View File

@@ -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;
}
}

BIN
src/Mine/SeekerBundle/Resources/public/images/bg-mineseeker-outbg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 456 KiB

After

Width:  |  Height:  |  Size: 1.8 MiB

BIN
src/Mine/SeekerBundle/Resources/public/images/bg-mineseeker-outbg.jpg-bak Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 KiB

BIN
src/Mine/SeekerBundle/Resources/public/images/mine-logo-logo.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 167 KiB

BIN
src/Mine/SeekerBundle/Resources/public/images/mine-logo-txt.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
src/Mine/SeekerBundle/Resources/public/images/msn-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

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

@@ -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
*

18
src/Mine/SeekerBundle/Resources/views/Game/index.html.twig
View File

@@ -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' %}