Skip to content

Commit c3b9ede

Browse files
lemonspriteslemonsprites
committed
test reflek statis
1 parent 4c3d96d commit c3b9ede

File tree

8 files changed

+611
-95
lines changed

8 files changed

+611
-95
lines changed

‎package-lock.json‎

Lines changed: 466 additions & 27 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"boxicons": "^2.1.2",
1112
"core-js": "^3.8.3",
1213
"vue": "^3.2.13"
1314
},

‎public/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
8+
<title>Test Reaksi</title>
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
<strong color="#000">Sorry, Brodi! Test Reaksi gak bisa jalan kalo javascript lu dimatiin atau device lu gak support javascript. Nyalain javascript biar bisa jalan.</strong>
1313
</noscript>
1414
<div id="app"></div>
1515
<!-- built files will be auto injected -->

‎src/App.vue‎

Lines changed: 55 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,45 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
3-
<HelloWorld msg="Welcome to Your Vue.js App"/>
2+
<h1>Seberapa Cepet Reflek Lu!</h1>
3+
4+
<button @click="start" :disabled="mulai">
5+
<box-icon name="play" color="#fff" />
6+
<p>Mulai</p>
7+
</button>
8+
<Main v-if="mulai" :delay="delay" @selesai="gameSelesai" />
9+
<Hasil v-if="tampilkanHasil" :score="hasilScore" />
410
</template>
511

612
<script>
7-
import HelloWorld from './components/HelloWorld.vue'
13+
import Main from "./components/Main.vue";
14+
import Hasil from "./components/Hasil.vue";
815
916
export default {
10-
name: 'App',
17+
name: "App",
1118
components: {
12-
HelloWorld
13-
}
14-
}
19+
Main,
20+
Hasil,
21+
},
22+
data() {
23+
return {
24+
mulai: false,
25+
delay: null,
26+
hasilScore: null,
27+
tampilkanHasil: false,
28+
};
29+
},
30+
methods: {
31+
start() {
32+
this.delay = 2000 + Math.random() * 8000;
33+
this.mulai = true;
34+
this.tampilkanHasil = false;
35+
},
36+
gameSelesai(e) {
37+
this.hasilScore = e;
38+
this.mulai = false;
39+
this.tampilkanHasil = true;
40+
},
41+
},
42+
};
1543
</script>
1644

1745
<style>
@@ -20,7 +48,26 @@ export default {
2048
-webkit-font-smoothing: antialiased;
2149
-moz-osx-font-smoothing: grayscale;
2250
text-align: center;
23-
color: #2c3e50;
51+
color: #444;
2452
margin-top: 60px;
2553
}
54+
button {
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
58+
margin: auto;
59+
background: #0faf87;
60+
border-radius: 5px;
61+
padding: 0.2rem 0.8rem;
62+
color: white;
63+
border: none;
64+
outline: none;
65+
cursor: pointer;
66+
}
67+
button[disabled] {
68+
opacity: 0.2;
69+
}
70+
button p {
71+
margin-left: 0.2rem;
72+
}
2673
</style>

‎src/components/Hasil.vue‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<template>
2+
<p>Reaksi kamu : {{ score }} ms</p>
3+
<p class="rank">{{ rank }}</p>
4+
</template>
5+
6+
<script>
7+
export default {
8+
name: "HasilComp",
9+
props: ["score"],
10+
data() {
11+
return {
12+
rank: null,
13+
};
14+
},
15+
mounted() {
16+
if (this.score < 50) {
17+
this.rank = "Buset serius bukan Robot!!?";
18+
} else if (this.score < 100) {
19+
this.rank = "Mantap, Nice Flick";
20+
} else if (this.score < 200) {
21+
this.rank = "Oke standar lah..";
22+
} else if (this.score < 300) {
23+
this.rank = "Oalah, Konsen lah!";
24+
} else if (this.score >= 300 && this.rank <= 500) {
25+
this.rank = "Serius!!? Mending main pou dah.. ";
26+
} else if (this.rank > 500) {
27+
this.rank = "Lag kali otakmu dek!";
28+
}
29+
},
30+
};
31+
</script>
32+
33+
<style>
34+
.rank {
35+
font-size: 1.4em;
36+
color: #0faf87;
37+
font-weight: bold;
38+
}
39+
</style>

‎src/components/HelloWorld.vue‎

Lines changed: 0 additions & 58 deletions
This file was deleted.

‎src/components/Main.vue‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template>
2+
<div class="main" v-if="tampilkan" @click="stopTimer">Klik Disini!</div>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: "MainComp",
8+
props: ["delay"],
9+
data() {
10+
return {
11+
tampilkan: false,
12+
timer: null,
13+
waktuReflek: 0,
14+
tampilkanHasil: false,
15+
};
16+
},
17+
mounted() {
18+
setTimeout(() => {
19+
this.tampilkan = true;
20+
this.mulaiTimer();
21+
}, this.delay);
22+
},
23+
methods: {
24+
mulaiTimer() {
25+
this.timer = setInterval(() => {
26+
this.waktuReflek += 1;
27+
}, 1);
28+
},
29+
stopTimer() {
30+
clearInterval(this.timer);
31+
this.$emit("selesai", this.waktuReflek);
32+
},
33+
},
34+
};
35+
</script>
36+
37+
<style>
38+
.main {
39+
width: 400px;
40+
border-radius: 20px;
41+
background: #0cc798;
42+
color: white;
43+
text-align: center;
44+
padding: 100px 0;
45+
margin: 40px auto;
46+
}
47+
</style>

‎src/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
3+
import 'boxicons'
34

45
createApp(App).mount('#app')

0 commit comments

Comments
 (0)