-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (143 loc) · 7.41 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Aquarium - Enjoy your petting and typing experience!</title>
<link rel="stylesheet" href="src/css/main.css" />
</head>
<body>
<div id="escape">
<kbd>esc</kbd> Back to top
</div>
<header id="home">
<div class="container container-flex">
<h1>Typing Aquarium gives you double fun!</h1>
<p>Practice your typing skills and have fun at the same time by raising your own fish!</p>
<p>Type "Let's type!" on the input section below to begin.<br />
You can also type "Learn more" to explore more about Typing Aquarium.</br />
Or, you can type "Instruction" for see the game instruction.</p>
<section>
<input type="text" id="cta" placeholder="Type here..."
autofocus />
</section>
</div>
</header>
<main>
<section id="about">
<div class="container container-flex">
<h1>What is Typing Aquarum?</h1>
<p>Typing Aquarium is a petting simulation game by using keyboard. By typing, you can feed the fish and get XP and cash points that you can use for buying more fish and exclusive aquarium backgrounds.</p>
<p>As you can see below.</p>
<img src="src/img/demo/demo-laptop.gif" alt="Typing Aquarium demo" />
<a class="attribution" href='https://www.freepik.com/vectors/wood'>Wood vector created by upklyak - www.freepik.com</a>
</div>
</section>
<section id="instruction">
<div class="container container-flex">
<h1>Common instructions.</h1>
<details open>
<summary><h2>How to play Typing Aquarium?</h2></summary>
<p>
You can simply play Typing Aquarium by simply feed the fish by typing the word appeared (on the fish) on the input space below the aquarium. Remember, fish can died if you don't feed them by 10 seconds since the word appeared.
</p>
</details>
<details open>
<summary><h2>What are XP and cash?</h2></summary>
<p>
XP is the point you can use to level up, meanwhile cash is the point you can use to buy more fish and exclusive backgrounds. You can earn them by keep feed the fish to gain the cash and XP points.
</p>
</details>
<details open>
<summary><h2>How can I buy fish and wallpapers?</h2></summary>
<p>
You can buy the fish by pressing <kbd>1</kbd> or wallpaper by pressing <kbd>2</kbd> on your keyboard. Remember that fish and background have a price so you need to collect cash to buy them.
</p>
</details>
<details open>
<summary><h2>What happened if all my fish are died?</h2></summary>
<p>
Your game is over and your progress will be restarted. You can restart your game by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd>
</p>
</details>
<details open>
<summary><h2>I still don't understand how to play. What should I do?</h2></summary>
<p>
Don't worry. When you are playing, there is some helper on the top right side of the aquarium where tells you how to buy fish, buy background, pause the game, and more.
</p>
</details>
<details open>
<summary><h2>Can I give feedback to this game?</h2></summary>
<p>
Feedbacks are open to improve Typing Aquarium better by <a href="https://forms.gle/U7JF7tA9QbrA5Mjy6" target="_blank">clicking this</a>. You can also typing <kbd>`</kbd> when you are currently playing the game. Don't worry. Your game will be paused automatically when you are filling the feedback form.
</p>
</details>
</div>
</section>
</main>
<footer>
<div>
<p>
Code with<br />
<img class="language-logo" src="src/img/icon/tslogo.svg" title="TypeScript" alt="TypeScript" />
<img class="language-logo" src="src/img/icon/jslogo.svg" title="JavaScript" alt="JavaScript" /><br />and also <img class="just-icon" src="src/img/icon/heart.svg" title="love" alt="love" /> by daimessdn <img class="just-icon" src="src/img/icon/wave.svg" title="(hello world)" alt="(hello world)" />
</p>
<p>
In order to participate in <a href="https://mintbean.io" target="_blank">Mintbean</a> Hackathon. Why don't you also <a href="https://mintbean.io" target="_blank">join</a>?
</p>
</div>
<div>
<p>Reach me on<br />
<ul class="social-media-footer">
<li><a href="https://www.github.com/daimessdn" target="_blank">
<img src="src/img/icon/github.svg" alt="GitHub" title="GitHub" />
</a></li>
<li><a href="https://www.twitter.com/daimessdn" target="_blank">
<img src="src/img/icon/twitter.svg" alt="Twitter" title="Twitter" />
</a></li>
<li><a href="https://www.linkedin.com/in/dimaswehhh" target="_blank">
<img src="src/img/icon/linkedin.svg" alt="Linkedin" title="Linkedin" />
</a></li>
<li><a href="mailto:daimessdn@gmail.com" target="_blank">
<img src="src/img/icon/email.svg" alt="Email" title="Email" />
</a></li>
</ul>
</p>
</div>
</footer>
<script>
const CTA = document.querySelector("#cta");
cta.addEventListener("input", () => {
if (cta.value == "Let's type!") {
window.location.href = "aquarium.html";
cta.value = "";
} else if (cta.value == "Learn more") {
window.location.href = "#about";
cta.value = "";
chromeResolve();
} else if (cta.value == "Instruction") {
window.location.href = "#instruction";
cta.value = "";
chromeResolve();
}
});
document.body.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
window.location.href = "#home";
setTimeout(() => { cta.focus(); }, 1000);
}
});
const chromeResolve = () => {
let isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
let hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
}
</script>
</body>
</html>