Skip to content

Commit e077c05

Browse files
daniel4-scratchdaniel4-scratch
committed
Make the base of the clicker game
1 parent 368b28e commit e077c05

File tree

4 files changed

+107
-15
lines changed

4 files changed

+107
-15
lines changed

‎extras/game/assets/logo.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎extras/game/index.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<!DOCTYPE html>
22
<html>
3-
43
<head>
54
<title>Clicker Game</title>
65
<meta charset="utf-8" />
76
<meta name="viewport" content="width=device-width, initial-scale=1" />
87
<link rel="stylesheet" href=".\style.css" />
98
<script src=".\script.js" async></script>
109
</head>
11-
1210
<body id="body">
13-
<h1>Clicker</h1>
11+
<div class="clicker-layer">
12+
<img src=".\assets\logo.svg" id="click">
13+
</div>
14+
<div class="text-layer"><h1>0</h1></div>
1415
</body>
15-
1616
</html>

‎extras/game/script.js‎

Lines changed: 37 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,43 @@
1-
// finally got it to work :\
2-
31
const run = async () => {
2+
try {
3+
let { game: storage } = await chrome.storage.sync.get("game");
4+
var starterStorage = { "version": 1, "clicks": 0 };
45

5-
let { game: storage } = await chrome.storage.sync.get("game");
6-
var starterStorage = {"version":1, "clicks":0}
6+
// check if storage is trustworthy
7+
if (storage && typeof storage === 'object' && typeof storage.clicks === 'number') {
8+
document.querySelector('.text-layer h1').textContent = String(storage.clicks);
9+
console.log(storage.clicks);
10+
document.getElementById("click").draggable = false;
11+
document.getElementById("click").addEventListener("click", async () => {
12+
storage.clicks += 1;
13+
document.querySelector('.text-layer h1').textContent = String(storage.clicks);
14+
await chrome.storage.sync.set({ "game": storage });
15+
});
16+
} else {
17+
await chrome.storage.sync.set({ "game": starterStorage });
18+
location.reload();
19+
}
20+
} catch (error) {
21+
console.error("Error during storage retrieval:", error);
22+
}
23+
}
724

8-
// check if storage is trust worthy
9-
if (storage) {
10-
console.log(storage)
11-
}else{
12-
await chrome.storage.sync.set({"game":JSON.stringify(starterStorage)});
25+
const reset = async () => {
26+
try {
27+
await chrome.storage.sync.remove("game");
28+
location.reload();
29+
} catch (error) {
30+
console.error("Error during storage removal:", error);
1331
}
1432
}
33+
// JavaScript
34+
var clickElement = document.getElementById('click');
35+
36+
clickElement.addEventListener('click', function() {
37+
// Remove the pop class and force a reflow to allow the animation to be restarted mid-animation
38+
this.classList.remove('pop');
39+
void this.offsetWidth;
40+
this.classList.add('pop');
41+
});
1542

16-
run();
43+
run();

‎extras/game/style.css‎

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,62 @@
1-
/*Working on soon*/
1+
@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
2+
3+
body {
4+
background-color: #FF9F00;
5+
display: flex;
6+
height: 100vh;
7+
width: 100%;
8+
overflow: hidden;
9+
margin:0em;
10+
}
11+
12+
.clicker-layer{
13+
position:absolute;
14+
user-select: none;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
height: 100%;
19+
width: 100%;
20+
z-index: 3;
21+
}
22+
.clicker-layer #click{
23+
/*aloow image to go smaller on smaller window*/
24+
height: auto;
25+
width: auto;
26+
max-height: 207px;
27+
max-width: 207px;
28+
cursor: pointer;
29+
height: auto;
30+
width: auto;
31+
}
32+
33+
.text-layer{
34+
margin-top: calc(100vh / 6);
35+
position:relative;
36+
user-select: none;
37+
justify-content: center;
38+
align-items: center;
39+
height: 100vh;
40+
width: 100%;
41+
}
42+
.text-layer h1{
43+
44+
font-size: 5em;
45+
color: #fff;
46+
text-align: center;
47+
margin: 0;
48+
padding: 0;
49+
font-family: 'Readex Pro', sans-serif;
50+
font-weight: 400;
51+
}
52+
53+
/* CSS */
54+
.pop {
55+
animation: pop 0.3s;
56+
}
57+
58+
@keyframes pop {
59+
0% { transform: scale(1); }
60+
50% { transform: scale(1.2); }
61+
100% { transform: scale(1); }
62+
}

0 commit comments

Comments
 (0)