Skip to content

Commit 6a4fc71

Browse files
gonz9682gonz9682
committed
renamed sprites and started dusterChat
1 parent f14eef7 commit 6a4fc71

10 files changed

+168
-3
lines changed

‎dust.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222
top: 80%;
2323
left: 50%;
2424
transform: translate(-50%);
25-
padding: 2vh;
26-
font-size: 5vh;
25+
padding: 2vmin;
26+
font-size: 5vmin;
2727
color: white;
2828
background-color: black;
2929
border: none;
30-
border-radius: 3vh;
30+
border-radius: 3vmin;
3131
cursor: pointer;
3232
z-index: 1000;
3333
}

‎dustChat.html

Whitespace-only changes.

‎duster.html

+165
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Duster</title>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
9+
<style>
10+
body {
11+
margin: 0;
12+
overflow: hidden;
13+
}
14+
15+
canvas {
16+
display: block;
17+
}
18+
19+
#askNice {
20+
display: block;
21+
position: fixed;
22+
top: 84%;
23+
left: 50%;
24+
transform: translate(-50%);
25+
padding: 2vmin;
26+
font-size: 3vmin;
27+
color: white;
28+
background-color: black;
29+
border: none;
30+
border-radius: 3vmin;
31+
cursor: pointer;
32+
z-index: 1000;
33+
}
34+
35+
#askNice:hover {
36+
background-color: pink;
37+
}
38+
39+
#askMean {
40+
display: block;
41+
position: fixed;
42+
top: 92%;
43+
left: 50%;
44+
transform: translate(-50%);
45+
padding: 2vmin;
46+
font-size: 3vmin;
47+
color: white;
48+
background-color: black;
49+
border: none;
50+
border-radius: 3vmin;
51+
cursor: pointer;
52+
z-index: 1000;
53+
}
54+
55+
#askMean:hover {
56+
background-color: pink;
57+
}
58+
</style>
59+
</head>
60+
61+
<body>
62+
<button id="askNice">Would you please help me dust my shelf?</button>
63+
<button id="askMean">Congrats! You get to help me!</button>
64+
65+
<script>
66+
let bedside;
67+
let duster;
68+
let convo = 0;
69+
70+
// Preload all images
71+
function preload() {
72+
bedside = loadImage('sprites/characters/dusterBackground.png');
73+
duster = loadImage('sprites/characters/duster.png');
74+
}
75+
76+
function setup() {
77+
scale = Math.min(windowWidth / bedside.width, windowHeight / bedside.height);
78+
79+
let canvasX = (windowWidth / 2) - (bedside.width / 2) * scale;
80+
let canvasY = (windowHeight / 2) - (bedside.height / 2) * scale;
81+
width = bedside.width * scale;
82+
height = bedside.height * scale;
83+
84+
canvas = createCanvas(width, height);
85+
canvas.position(canvasX, canvasY);
86+
}
87+
88+
function windowResized() {
89+
scale = Math.min(windowWidth / bedside.width, windowHeight / bedside.height);
90+
let canvasX = (windowWidth / 2) - (bedside.width / 2) * scale;
91+
let canvasY = (windowHeight / 2) - (bedside.height / 2) * scale;
92+
width = bedside.width * scale;
93+
height = bedside.height * scale;
94+
95+
resizeCanvas(width, height);
96+
canvas.position(canvasX, canvasY);
97+
}
98+
99+
function styledText(string, x, y) {
100+
sizeOfText = 18 * scale;
101+
textSize(sizeOfText);
102+
textStyle(BOLD);
103+
textAlign(CENTER);
104+
textFont('Papyrus');
105+
fill(0);
106+
text(string, x + 1.5 * scale, y);
107+
text(string, x - 1.5 * scale, y);
108+
fill(255);
109+
text(string, x, y);
110+
}
111+
112+
function draw() {
113+
clear();
114+
background(bedside); // set the background every frame
115+
image(duster, width / 2 - duster.width / 8 * scale, height - duster.height / 3 * scale, duster.width / 4 * scale, duster.height / 4 * scale);
116+
117+
switch (convo) {
118+
case 0:
119+
styledText("Can I help you?", width / 2, height / 1.2);
120+
break;
121+
case 1:
122+
styledText("Sure, why not?", width / 2, height / 1.2);
123+
break;
124+
case 2:
125+
styledText("... No", width / 2, height / 1.2);
126+
break;
127+
default:
128+
}
129+
130+
}
131+
132+
// Update clickable areas or interactions based on scale
133+
function mouseClicked() {
134+
// Check for click on the dust piles
135+
let dustWidth = 220 * scaleFactor;
136+
let dustHeight = 125 * scaleFactor;
137+
let dustStartY = 180 * scaleFactor;
138+
let dustSpacing = 138 * scaleFactor;
139+
140+
for (let i = 0; i < num; i++) {
141+
let pileY = dustStartY + i * dustSpacing;
142+
if (mouseX >= 0 && mouseX <= dustWidth && mouseY >= pileY && mouseY <= pileY + dustHeight) {
143+
window.location.href = 'dust.html';
144+
return;
145+
}
146+
}
147+
}
148+
149+
document.addEventListener("DOMContentLoaded", function () {
150+
var returnButton = document.getElementById('askNice');
151+
returnButton.addEventListener('click', function () {
152+
153+
});
154+
});
155+
document.addEventListener("DOMContentLoaded", function () {
156+
var returnButton = document.getElementById('askMean');
157+
returnButton.addEventListener('click', function () {
158+
159+
});
160+
});
161+
162+
</script>
163+
</body>
164+
165+
</html>

‎sprites/characters/duster.png

361 KB
Loading

‎sprites/characters/dusterBackground.png

108 KB
Loading

‎sprites/characters/duster_rough.png

-725 KB
Binary file not shown.

‎sprites/characters/hamper.png

-47.7 KB
Loading

‎sprites/characters/hamper_rough.png

-785 KB
Binary file not shown.

‎sprites/characters/recycle.png

296 KB
Loading

‎sprites/characters/recycle_rough.png

-639 KB
Binary file not shown.

0 commit comments

Comments
 (0)