-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconvo-generator.html
69 lines (69 loc) · 2.81 KB
/
convo-generator.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
<!DOCTYPE html>
<html>
<head>
<title>Comment Thread Generator</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<style>
body {background-color: #222; position: relative; left: 10px; width: 90vw; height: 90vh;}
a, h1, p, span {color: #fff; font-family: verdana;}
.page {margin: 4px 0px; display: block;}
#conversation {resize: none; width: 450px; height: 744px; font-size: 100%}
#myCanvas {position: relative; left: 20px;}
</style>
</head>
<body>
<h1>Comment Thread Generator</h1>
<p>Generate a Facebook-like social media conversation using the HTML canvas.</p>
<textarea id="conversation">12 comments maximum
0 1111 26
64 characters maximum ##########################################
1 1116 12
0-5 for user colours
2 1124 6
0000-2359 for post time
3 1428 5
Any number for likes
4 1435 1000
ENJOY!
5 1440 2</textarea>
<canvas id="myCanvas" width="600" height="750"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
setInterval(function() {
ctx.clearRect(0, 0, c.width, c.height);
let convo = conversation.value.split("\n");
ctx.fillStyle = "#eee";
ctx.fillRect(0, 0, c.width, c.height);
function createComment(comment) {
let user = convo[1 + comment * 2].charAt(0);
user = user.replace(6, "-");
user = user.replace(7, "-");
user = user.replace(8, "-");
user = user.replace(9, "-");
ctx.fillStyle = "hsl(" + user * 60 + ", 100%, 25%)";
ctx.beginPath();
ctx.arc(40, 40 + comment * 60, 25, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "hsl(" + user * 60 + ", 100%, 75%)";
ctx.beginPath();
ctx.arc(40, 32 + comment * 60, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.beginPath();
ctx.arc(40, 60 + comment * 60, 16, Math.PI, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = "#000";
ctx.font = "15px Consolas";
ctx.fillText(convo[0 + comment * 2].slice(0, 64), 75, 35 + comment * 60);
let hr = convo[1 + comment * 2].slice(2, 4);
let min = convo[1 + comment * 2].slice(4, 6);
let likes = convo[1 + comment * 2].slice(7, convo[1 + comment * 2].length);
ctx.fillText("posted " + hr + ":" + min + " - likes: " + likes, 75, 55 + comment * 60);
}
for (i = 0; i < 12; i++) {
createComment(i);
}
});
</script>
</body>
</html>