1
0
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:
devfake 2015-06-22 11:57:22 +02:00
parent 5972c72b67
commit 3bc8290ab8
15 changed files with 103 additions and 133 deletions

View File

@ -15,8 +15,8 @@ var app = new Vue({
},
components: {
lobby: require('./components/lobby'),
chat: require('./components/chat')
inner: require('./components/inner'),
landing: require('./components/landing')
}
});

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

View 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);
}
}
};

View File

@ -2,15 +2,4 @@ module.exports = {
template: require('../views/lobby.html'),
data: function() {
return {
modal: false
}
},
components: {
searchmatch: require('./modals/searchMatch'),
navigation: require('./navigation')
}
};

View File

@ -1,5 +0,0 @@
module.exports = {
template: require('../../views/modals/login.html')
};

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

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

View File

@ -1,11 +1 @@
<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">
<searchmatch></searchmatch>
</section>
</main>
lobby

View File

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

View File

@ -1,17 +1,13 @@
body.inner {
background: url(../img/inner-bg.jpg) #162232 center top no-repeat;
background-size: cover;
padding: 40px;
}
.logo-medium {
float: left;
}
.container-inner {
width: 100%;
padding: 40px;
}
main {
float: left;
clear: both;

View File

@ -14,27 +14,14 @@
</head>
<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="{{ 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>
</html>

View File

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

View File

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

View File

@ -1,16 +1,11 @@
<?php
get('/lobby', function() {
return view('inner')
->withSection('inner')
->withType('server');
return view('app')
->withSection('inner');
});
get('/', function() {
if(Auth::check()) {
return redirect('/lobby');
}
return view('landing')
return view('app')
->withSection('landing');
});