Skip to content

Commit 7175a2c

Browse files
author
yolandahp
committed
UI home, create room
1 parent 656096c commit 7175a2c

File tree

11 files changed

+452
-165
lines changed

11 files changed

+452
-165
lines changed

‎.env.example

-44
This file was deleted.

‎app/Http/Controllers/UserController.php

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ public function store(Request $request){
1717
$user->username = $request->username;
1818
$user->save();
1919

20-
$room = Room::all()->where('kode', $request->kode_room);
20+
$room = Room::all()->where('kode', $request->kode_room)->first();
2121
$current_player = unserialize($room->player_id);
2222
array_push($current_player, $user->id);
2323
$room->player_id = serialize($current_player);

‎public/images/bg1.jpg

1.69 MB
Loading

‎public/images/bg2.jpg

1.11 MB
Loading

‎resources/views/home.blade.php

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
@extends('master')
2+
@section('css')
3+
<style>
4+
html, body {
5+
background-color: #fff;
6+
height: 100vh;
7+
font-family: 'Roboto+Condensed', sans-serif;
8+
background: url('/images/bg1.jpg');
9+
background-size: cover;
10+
background-repeat: no-repeat;
11+
background-position: center center;
12+
}
13+
14+
.main {
15+
min-height: 100%;
16+
display: flex;
17+
align-items: center;
18+
}
19+
20+
.ml2 {
21+
font-weight: 400;
22+
font-size: 144px;
23+
font-family: 'Chewy', cursive;
24+
}
25+
26+
.ml2 .letter {
27+
display: inline-block;
28+
line-height: 1em;
29+
}
30+
31+
32+
.button-play-master .button {
33+
position: relative;
34+
-webkit-appearance: none;
35+
-moz-appearance: none;
36+
appearance: none;
37+
background: #FF4818;
38+
padding: 1em 2em;
39+
border: none;
40+
color: white;
41+
font-size: 1.2em;
42+
cursor: pointer;
43+
outline: none;
44+
overflow: hidden;
45+
border-radius: 100px;
46+
}
47+
48+
.button-play-master .button span {
49+
position: relative;
50+
pointer-events: none;
51+
}
52+
53+
.button-play-master .button::before {
54+
--size: 0;
55+
content: '';
56+
position: absolute;
57+
left: var(--x);
58+
top: var(--y);
59+
width: var(--size);
60+
height: var(--size);
61+
background: radial-gradient(circle closest-side, #fab95b, transparent);
62+
-webkit-transform: translate(-50%, -50%);
63+
transform: translate(-50%, -50%);
64+
transition: width .2s ease, height .2s ease;
65+
}
66+
67+
.button-play-master .button:hover::before {
68+
--size: 600px;
69+
}
70+
71+
72+
.button-play-join .button {
73+
position: relative;
74+
-webkit-appearance: none;
75+
-moz-appearance: none;
76+
appearance: none;
77+
background: #FF4818;
78+
padding: 1em 2em;
79+
border: none;
80+
color: white;
81+
font-size: 1.2em;
82+
cursor: pointer;
83+
outline: none;
84+
overflow: hidden;
85+
border-radius: 100px;
86+
}
87+
88+
.button-play-join .button span {
89+
position: relative;
90+
pointer-events: none;
91+
}
92+
93+
.button-play-join .button::before {
94+
--size: 0;
95+
content: '';
96+
position: absolute;
97+
left: var(--x);
98+
top: var(--y);
99+
width: var(--size);
100+
height: var(--size);
101+
background: radial-gradient(circle closest-side, #fab95b, transparent);
102+
-webkit-transform: translate(-50%, -50%);
103+
transform: translate(-50%, -50%);
104+
transition: width .2s ease, height .2s ease;
105+
}
106+
107+
.button-play-join .button:hover::before {
108+
--size: 600px;
109+
}
110+
111+
.button-play-group {
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
}
116+
117+
.button-play-master, .button-play-join {
118+
width: 20%;
119+
margin-right: 40px;
120+
margin-left: 40px;
121+
}
122+
123+
.button-play-master button, .button-play-join button {
124+
width: 100%;
125+
}
126+
127+
</style>
128+
@endsection
129+
130+
@section('body')
131+
<div class="main">
132+
<div class="container text-center">
133+
<h1 class="ml2">KCVintar</h1>
134+
<div class="button-play-group">
135+
<div class="button-play-master">
136+
<button class="button" onclick="location.href='{{url('/room/create')}}';">
137+
<span>Master</span>
138+
</button>
139+
</div>
140+
<div class="button-play-join" onclick="location.href='{{url('/user/create')}}';">
141+
<button class="button">
142+
<span>Join Room</span>
143+
</button>
144+
</div>
145+
</div>
146+
</div>
147+
</div>
148+
@endsection
149+
150+
@section('js')
151+
152+
153+
<script>
154+
// Wrap every letter in a span
155+
$('.ml2').each(function(){
156+
$(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
157+
});
158+
159+
anime.timeline({loop: false})
160+
.add({
161+
targets: '.ml2 .letter',
162+
scale: [4,1],
163+
opacity: [0,1],
164+
translateZ: 0,
165+
easing: "easeOutExpo",
166+
duration: 2000,
167+
delay: function(el, i) {
168+
return 120*i;
169+
}
170+
})
171+
172+
173+
document.querySelector('.button-play-join .button').onmousemove = function (e) {
174+
var x = e.pageX - e.target.offsetLeft;
175+
var y = e.pageY - e.target.offsetTop;
176+
177+
e.target.style.setProperty('--x', x + 'px');
178+
e.target.style.setProperty('--y', y + 'px');
179+
};
180+
181+
182+
</script>
183+
@endsection

‎resources/views/master.blade.php

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<!doctype html>
2+
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
7+
<title>KCVintar</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
10+
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
11+
12+
<link href="https://fonts.googleapis.com/css?family=Chewy|Roboto+Condensed" rel="stylesheet">
13+
14+
<!-- Styles -->
15+
@yield('css')
16+
</head>
17+
<body>
18+
@yield('body')
19+
20+
21+
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
23+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
25+
26+
@yield('js')
27+
</body>
28+
</html>

‎resources/views/room/create.blade.php

+96-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,96 @@
1-
<form method="POST" action="{{ route('room.store')}}">
2-
@csrf
3-
<input type="text" name="kode">
4-
<input type="submit" value="submit"><br>
5-
</form>
1+
@extends('master')
2+
@section('css')
3+
<style>
4+
html, body {
5+
background-color: #fff;
6+
height: 100vh;
7+
font-family: 'Roboto+Condensed', sans-serif;
8+
background: url('/images/bg2.jpg');
9+
background-size: cover;
10+
background-repeat: no-repeat;
11+
background-position: center center;
12+
}
13+
14+
.main {
15+
min-height: 100%;
16+
display: flex;
17+
align-items: center;
18+
}
19+
20+
.main .container {
21+
width: 50%;
22+
}
23+
24+
.button-create .button {
25+
position: relative;
26+
-webkit-appearance: none;
27+
-moz-appearance: none;
28+
appearance: none;
29+
background: #FF4818;
30+
padding: 1em 2em;
31+
border: none;
32+
color: white;
33+
font-size: 1.2em;
34+
cursor: pointer;
35+
outline: none;
36+
overflow: hidden;
37+
border-radius: 100px;
38+
}
39+
40+
.button-create .button span {
41+
position: relative;
42+
pointer-events: none;
43+
}
44+
45+
.button-create .button::before {
46+
--size: 0;
47+
content: '';
48+
position: absolute;
49+
left: var(--x);
50+
top: var(--y);
51+
width: var(--size);
52+
height: var(--size);
53+
background: radial-gradient(circle closest-side, #fab95b, transparent);
54+
-webkit-transform: translate(-50%, -50%);
55+
transform: translate(-50%, -50%);
56+
transition: width .2s ease, height .2s ease;
57+
}
58+
59+
.button-create .button:hover::before {
60+
--size: 600px;
61+
}
62+
63+
.button-create {
64+
margin-top: 10px;
65+
}
66+
67+
.container .form-group label {
68+
text-align: left !important;
69+
}
70+
71+
</style>
72+
@endsection
73+
@section('body')
74+
<div class="main">
75+
<div class="container text-center">
76+
77+
<form method="POST" action="{{ route('room.store')}}">
78+
@csrf
79+
<div class="form-group">
80+
<label for="koderoom"><h3>Kode Room (Opsional):</h3></label>
81+
<input class="form-control form-control-lg" type="text" name="kode">
82+
83+
<div class="button-create">
84+
<button class="button" type="submit" value="submit">
85+
<span>Create Room</span>
86+
</button>
87+
</div>
88+
</div>
89+
</form>
90+
91+
</div>
92+
</div>
93+
@endsection
94+
@section('js')
95+
96+
@endsection

0 commit comments

Comments
 (0)