-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (91 loc) · 3.51 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
<!-- With credit to superstonk and https://github.com/halfdane/rplace -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Knut r/place</title>
<style>
.container {
position: relative;
}
.container > canvas {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id = "container" class = "container">
<canvas id = "canvas_background" width = "800" height = "500"></canvas>
<canvas id = "canvas_foreground" width = "800" height = "500"></canvas>
</div>
<script>
const X_PIXELS=15
const Y_PIXELS=15
const X_OFFSET=380
const Y_OFFSET=50
const X_IN_PLACE=1876
const Y_IN_PLACE=1562
function getMousePos(canvas, evt) {
const rect = canvas.getBoundingClientRect();
return {
x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
};
}
function drawGrid(x_0, y_0, x_max, y_max, ctx) {
for (let x = x_0; x <= x_max; x += X_PIXELS) {
ctx.moveTo(x, 0);
ctx.lineTo(x, y_max);
for (let y = y_0; y <= y_max; y += Y_PIXELS) {
ctx.moveTo(0, y);
ctx.lineTo(x_max, y);
}
}
ctx.strokeStyle = '#bbbbbb';
ctx.stroke();
}
const background = document.getElementById("canvas_background");
const bg = background.getContext("2d");
const foreground = document.getElementById("canvas_foreground");
const fg = foreground.getContext("2d");
const img = new Image();
img.onload = function(){
w = img.width
h = img.height
bg.canvas.width = w + X_OFFSET;
bg.canvas.height = h + Y_OFFSET;
fg.canvas.width = bg.canvas.width;
fg.canvas.height = bg.canvas.height;
bg.drawImage(img, 0, 0, img.width, img.height, 0, Y_OFFSET, w, h)
drawGrid(0, Y_OFFSET, bg.canvas.width, bg.canvas.height, bg)
};
img.src = "https://cdn.discordapp.com/attachments/960238804780851200/960246724138512464/knuts_place.png";
foreground.addEventListener('mousemove', event =>
{
let p = getMousePos(foreground, event);
let x = Math.floor((p.x)/X_PIXELS) + X_IN_PLACE;
let y = Math.floor((p.y-Y_OFFSET)/Y_PIXELS) + Y_IN_PLACE;
fg.clearRect(0, 0, fg.canvas.width, fg.canvas.height);
if (x>0 && y>0){
let text = x+' / ' + y;
fg.font = '50px Sans-serif';
fg.strokeStyle = 'black';
fg.lineWidth = 8;
fg.strokeText(text, p.x+10, p.y + 20);
fg.fillStyle = 'white';
fg.fillText(text, p.x+10, p.y + 20);
}
});
foreground.addEventListener('click', event =>
{
let p = getMousePos(foreground, event);
let x = Math.floor((p.x)/X_PIXELS) + X_IN_PLACE;
let y = Math.floor((p.y-Y_OFFSET)/Y_PIXELS) + Y_IN_PLACE;
let url ="https://new.reddit.com/r/place/?cx="+x+"&cy="+y+"&px=10"
window.open(url, '_blank').focus();
});
</script>
</body>
</html>