mirror of
https://github.com/exane/not-gwent-online
synced 2024-10-31 10:36:53 +00:00
rewrite structure
This commit is contained in:
parent
5972c72b67
commit
3bc8290ab8
@ -15,8 +15,8 @@ var app = new Vue({
|
|||||||
},
|
},
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
lobby: require('./components/lobby'),
|
inner: require('./components/inner'),
|
||||||
chat: require('./components/chat')
|
landing: require('./components/landing')
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
19
site/client/app/components/inner.js
Normal file
19
site/client/app/components/inner.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
module.exports = {
|
||||||
|
|
||||||
|
template: require('../views/inner.html'),
|
||||||
|
|
||||||
|
data: function() {
|
||||||
|
return {
|
||||||
|
modal: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
searchmatch: require('./modals/searchMatch'),
|
||||||
|
navigation: require('./navigation'),
|
||||||
|
chat: require('./chat'),
|
||||||
|
|
||||||
|
lobby: require('./lobby')
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
26
site/client/app/components/landing.js
Normal file
26
site/client/app/components/landing.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
var router = require('./../routes');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
|
||||||
|
template: require('../views/landing.html'),
|
||||||
|
|
||||||
|
inherit: true,
|
||||||
|
|
||||||
|
ready: function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
$('.container-form-landing').addClass('active')
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
asGuest: function() {
|
||||||
|
// set localstorage for guest
|
||||||
|
$('.icon-guest-load').show();
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
window.location.href = './lobby';
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
};
|
@ -2,15 +2,4 @@ module.exports = {
|
|||||||
|
|
||||||
template: require('../views/lobby.html'),
|
template: require('../views/lobby.html'),
|
||||||
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
modal: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
components: {
|
|
||||||
searchmatch: require('./modals/searchMatch'),
|
|
||||||
navigation: require('./navigation')
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
};
|
@ -1,5 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
|
|
||||||
template: require('../../views/modals/login.html')
|
|
||||||
|
|
||||||
};
|
|
15
site/client/app/views/inner.html
Normal file
15
site/client/app/views/inner.html
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<searchmatch></searchmatch>
|
||||||
|
|
||||||
|
<a href="./lobby"><img src="assets/img/logo-medium.png" width="120" height="38" alt="Gwent" class="logo-medium"></a>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<navigation></navigation>
|
||||||
|
|
||||||
|
<section class="container-content">
|
||||||
|
<component is="lobby"></component>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<component is="chat"></component>
|
29
site/client/app/views/landing.html
Normal file
29
site/client/app/views/landing.html
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
<section class="container-landing">
|
||||||
|
<div class="wrap-landing">
|
||||||
|
<img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
|
||||||
|
|
||||||
|
<p class="teaser-landing">
|
||||||
|
Play The Witcher Gwent Card-Game online!<br>
|
||||||
|
Play with randomly generated teams, or build your own!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="container-form-landing">
|
||||||
|
|
||||||
|
<form class="form-session">
|
||||||
|
<input type="text" placeholder="Username" class="field-session" autofocus>
|
||||||
|
<input type="password" placeholder="Password" class="field-session">
|
||||||
|
|
||||||
|
<div class="wrap-btn-action btn-register-action">
|
||||||
|
<input type="submit" value="Register" class="btn-action">
|
||||||
|
<i class="icon-action-load"></i>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<span class="choose">or</span>
|
||||||
|
|
||||||
|
<a class="btn-second btn-guest" v-on="click: asGuest">Play as guest <i class="icon-guest-load"></i></a>
|
||||||
|
<a href="#" class="btn-none btn-login">Login</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
@ -1,11 +1 @@
|
|||||||
<a href="./lobby"><img src="assets/img/logo-medium.png" width="120" height="38" alt="Gwent" class="logo-medium"></a>
|
lobby
|
||||||
|
|
||||||
<main>
|
|
||||||
|
|
||||||
<navigation></navigation>
|
|
||||||
|
|
||||||
<section class="container-content">
|
|
||||||
<searchmatch></searchmatch>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
</main>
|
|
@ -1,17 +0,0 @@
|
|||||||
<div class="modal" v-class="active: modal">
|
|
||||||
<div class="modal-banner">
|
|
||||||
<div class="wrap-modal">
|
|
||||||
|
|
||||||
<form class="form-session form-login">
|
|
||||||
<input type="text" placeholder="Username" class="field-session">
|
|
||||||
<input type="password" placeholder="Password" class="field-session">
|
|
||||||
|
|
||||||
<div class="wrap-btn-action btn-login-action">
|
|
||||||
<input type="submit" value="Login" class="btn-action">
|
|
||||||
<i class="icon-load"></i>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
@ -1,17 +1,13 @@
|
|||||||
body.inner {
|
body.inner {
|
||||||
background: url(../img/inner-bg.jpg) #162232 center top no-repeat;
|
background: url(../img/inner-bg.jpg) #162232 center top no-repeat;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
padding: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-medium {
|
.logo-medium {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container-inner {
|
|
||||||
width: 100%;
|
|
||||||
padding: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
float: left;
|
float: left;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
@ -14,27 +14,14 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="{{ $section }}">
|
<body class="{{ $section }}">
|
||||||
|
|
||||||
@yield('content')
|
@if(Auth::check() || Request::path() != '/')
|
||||||
|
<component is="inner"></component>
|
||||||
|
@else
|
||||||
|
<component is="landing"></component>
|
||||||
|
@endif
|
||||||
|
|
||||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||||
<script src="{{ url('assets/js/bundle.js') }}"></script>
|
<script src="{{ url('assets/js/bundle.js') }}"></script>
|
||||||
|
|
||||||
<script>
|
|
||||||
// todo: extract to vue
|
|
||||||
setTimeout(function() {
|
|
||||||
$('.container-form-landing').addClass('active')
|
|
||||||
}, 300);
|
|
||||||
|
|
||||||
// todo: extract to vue
|
|
||||||
$('.btn-guest').on('click', function() {
|
|
||||||
// set localstorage for guest
|
|
||||||
$('.icon-guest-load').show();
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
window.location.href = './lobby';
|
|
||||||
}, 500);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
@ -1,17 +0,0 @@
|
|||||||
@extends('app')
|
|
||||||
|
|
||||||
@section('content')
|
|
||||||
|
|
||||||
<section class="container-inner">
|
|
||||||
|
|
||||||
@if($type == 'server')
|
|
||||||
<component is="lobby" v-transition transition-mode="out-in"></component>
|
|
||||||
@else
|
|
||||||
<component is="@{{ view }}" v-transition transition-mode="out-in"></component>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
<component is="chat"></component>
|
|
||||||
|
|
||||||
</section>
|
|
||||||
|
|
||||||
@stop
|
|
@ -1,37 +0,0 @@
|
|||||||
@extends('app')
|
|
||||||
|
|
||||||
@section('content')
|
|
||||||
|
|
||||||
<login></login>
|
|
||||||
|
|
||||||
<section class="container-landing">
|
|
||||||
<div class="wrap-landing">
|
|
||||||
<img src="assets/img/logo-big.png" width="243" height="85" alt="Gwent" class="logo-big">
|
|
||||||
|
|
||||||
<p class="teaser-landing">
|
|
||||||
Play The Witcher Gwent Card-Game online!<br>
|
|
||||||
Play with randomly generated teams, or build your own!
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="container-form-landing">
|
|
||||||
|
|
||||||
<form class="form-session">
|
|
||||||
<input type="text" placeholder="Username" class="field-session" autofocus>
|
|
||||||
<input type="password" placeholder="Password" class="field-session">
|
|
||||||
|
|
||||||
<div class="wrap-btn-action btn-register-action">
|
|
||||||
<input type="submit" value="Register" class="btn-action">
|
|
||||||
<i class="icon-action-load"></i>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<span class="choose">or</span>
|
|
||||||
|
|
||||||
<a class="btn-second btn-guest">Play as guest <i class="icon-guest-load"></i></a>
|
|
||||||
<a href="#" class="btn-none btn-login" v-on="click: modal = true">Login</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
@stop
|
|
@ -1,16 +1,11 @@
|
|||||||
<?php
|
<?php
|
||||||
|
|
||||||
get('/lobby', function() {
|
get('/lobby', function() {
|
||||||
return view('inner')
|
return view('app')
|
||||||
->withSection('inner')
|
->withSection('inner');
|
||||||
->withType('server');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
get('/', function() {
|
get('/', function() {
|
||||||
if(Auth::check()) {
|
return view('app')
|
||||||
return redirect('/lobby');
|
|
||||||
}
|
|
||||||
|
|
||||||
return view('landing')
|
|
||||||
->withSection('landing');
|
->withSection('landing');
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user