summaryrefslogtreecommitdiff
path: root/draw-component.js
diff options
context:
space:
mode:
Diffstat (limited to 'draw-component.js')
-rw-r--r--draw-component.js229
1 files changed, 229 insertions, 0 deletions
diff --git a/draw-component.js b/draw-component.js
new file mode 100644
index 0000000..9604507
--- /dev/null
+++ b/draw-component.js
@@ -0,0 +1,229 @@
+normalDraw = {
+ draw: function(){
+ color("#aaa" )
+ ctx.fillRect(0, 0, WIDTH, HEIGHT)
+ for(var i = 0; i < HEIGHT; i+=4){
+ color("#ccc" )
+ ctx.fillRect(0, i, WIDTH, 2)
+ }
+ // Where each message bottom is
+ let bottomY = HEIGHT/2;
+ for(var i = 0; i < messages.length; i++){
+ let message = messages[i];
+ let totalHeigt;
+ switch(message.type){
+ case 0:
+ color("#111")
+ totalHeigt = roundedRect(0, bottomY, 3, 10);
+
+ color("#888")
+ roundedRect(1, bottomY-1, 3, 8, true);
+ color("#444")
+ roundedRect(1, bottomY-1, 3, 8);
+
+ color("#111")
+ font(10, "NANO CHAT", 3, bottomY - totalHeigt + 3)
+ break;
+ case 1:
+ color("#111")
+ totalHeigt = roundedRect(0, bottomY, 3, 10);
+
+ color("#000")
+ roundedRect(1, bottomY-1, 3, 8, true);
+ color("#444")
+ roundedRect(1, bottomY-1, 3, 8);
+
+ color("yellow")
+ font(10, "Now entering: ", 3, bottomY - totalHeigt + 3)
+ color("#ccc")
+ font(10, message.text, 85, bottomY - totalHeigt + 3)
+ break;
+ case 2:
+ totalHeigt = drawMessage(0, bottomY, message.from, message.text, message.pixels)
+ break;
+ }
+ bottomY -= totalHeigt;
+
+ // stop drawing if we are beyond the screen
+ if(bottomY < 0) break;
+ }
+ // Draw current message
+ drawMessage(0, HEIGHT * 3 / 4, username, currentMessageText, currentMessagePixels, true)
+
+ // Draw send button
+ color("#444")
+ roundedRect(WIDTH - 50, HEIGHT - 48, 3, 39, true, 55)
+ roundedRect(WIDTH - 50, HEIGHT - 2, 3, 39, true, 53)
+ color("#bbb")
+ roundedRect(WIDTH - 49, HEIGHT - 49, 3, 37, true, 55)
+ roundedRect(WIDTH - 49, HEIGHT - 3, 3, 37, true, 55)
+ color("#444")
+ ctx.beginPath()
+ ctx.moveTo(WIDTH - 30, HEIGHT - 62)
+ ctx.lineTo(WIDTH - 30, HEIGHT - 72)
+ ctx.lineTo(WIDTH - 35, HEIGHT - 72)
+ ctx.lineTo(WIDTH - 26, HEIGHT - 82)
+ ctx.lineTo(WIDTH - 17, HEIGHT - 72)
+ ctx.lineTo(WIDTH - 22, HEIGHT - 72)
+ ctx.lineTo(WIDTH - 22, HEIGHT - 62)
+ ctx.fill()
+ let centerX = WIDTH - 26
+ let centerY = HEIGHT - 30
+ let radius = 10;
+ for(var i = 0; i < 8; i++){
+ var x = centerX + Math.cos(Math.PI / 4 * i) * radius
+ var y = centerY + Math.sin(Math.PI / 4 * i) * radius
+ ctx.beginPath()
+ ctx.moveTo(x-1, y-1)
+ ctx.lineTo(x+1, y-1)
+ ctx.lineTo(x+1, y+1)
+ ctx.lineTo(x-1, y+1)
+ ctx.fill()
+ }
+
+ ctx.fillText("SEND", WIDTH - 39, HEIGHT - 60)
+ ctx.fillText("CLEAR", WIDTH - 41, HEIGHT - 14)
+
+ drawKeyboard()
+ }
+}
+function drawMessage(x, y, from, text, pixels, current=false){
+ var parts = split_into_parts(text)
+ var trueHeight = Math.max(parts.length, 1) * 14 + 7
+ if(current || pixels.length != 0){
+ trueHeight = 91
+ }
+
+ color("white")
+ roundedRect(x, y , 3, trueHeight-6, true);
+ color("blue")
+ roundedRect(x, y , 3, trueHeight-6);
+ color("#b3b3ff")
+ roundedRect(x, y - trueHeight + 18 , 3, 12, true, 88);
+ color("blue")
+ roundedRect(x, y - trueHeight + 18, 3, 12, false, 88);
+ font(12, from, 3, y - trueHeight+6)
+ color("black")
+ font(12, text, 3, y - trueHeight+6, true)
+ color("black")
+ for(var i = 0; i < pixels.length; i++){
+ var pixel = pixels[i]
+ ctx.fillRect(pixel.x, pixel.y + y, 2, 2)
+ }
+ return trueHeight
+}
+var capsOn = false
+var shiftOn = false
+function drawKeyboard(){
+ color("#444")
+ roundedRect(1, HEIGHT - 1, 3, HEIGHT/4 - 10, true, WIDTH-52)
+ color("#bbb")
+ roundedRect(2, HEIGHT - 2, 3, HEIGHT/4 - 12, true, WIDTH-54)
+
+ ctx.font = 12 + "px Mono";
+ var keys = [
+ ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "="],
+ ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
+ ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
+ ["z", "x", "c", "v", "b", "n", "m", ",", ".", "/"]
+ ]
+ var d1 = Math.floor( (WIDTH-54) / 12) - 1
+ var d2 = Math.ceil( (WIDTH-54) / 12) - 1
+ for(var j = 0; j < keys.length; j++){
+ var x = 6 + 8*j
+ var y = HEIGHT / 4 * 3 + 5 + (d1+1)*j
+ for(var i = 0; i < keys[j].length; i++){
+ color("#ddd")
+ ctx.fillRect(x, y, d1, d1)
+ color("#444")
+ var char = keys[j][i]
+ if(capsOn || shiftOn){
+ char = char.toUpperCase()
+ }
+ ctx.fillText(char, x + 4, y + 3)
+ x += d2
+ }
+ }
+ // space
+ color("#ddd")
+ ctx.fillRect(6, HEIGHT - 27, WIDTH-65, 24)
+ color("#444")
+ ctx.fillText("space", 80, HEIGHT-20)
+ ctx.font = 7 + "px Mono";
+ // shift
+ color("#ddd")
+ ctx.fillRect(6, HEIGHT - 27 - d2, d1+8, d1)
+ color("#444")
+ ctx.fillText("shift", 7, HEIGHT - 22 - d2)
+ // caps
+ color("#ddd")
+ ctx.fillRect(6, HEIGHT - 27 - 2 * d2, d1, d1)
+ color("#444")
+ ctx.fillText("cap", 7, HEIGHT - 22 - 2 * d2)
+ // enter
+ color("#ddd")
+ ctx.fillRect(d1*11+1, HEIGHT - 27 - 2 * d2, d1*2+1, d1)
+ color("#444")
+ ctx.fillText("enter", d1*11+5, HEIGHT - 22 - 2 * d2)
+ // backspace
+ color("#ddd")
+ ctx.fillRect(d1*11.5+1.5, HEIGHT - 27 - 3 * d2, d1+8, d1)
+ color("#444")
+ ctx.fillText("del", d1*11.5+5.5, HEIGHT - 22 - 3 * d2)
+}
+function roundedRect(x, y, radius, height, fill = false, width = WIDTH){
+ ctx.beginPath();
+ ctx.arc(x + radius, y - radius - height, radius, 3/2 * Math.PI, Math.PI, true)
+ ctx.arc(x + radius, y - radius, radius, Math.PI, 1/2 * Math.PI, true)
+ ctx.arc(x + width - radius, y-radius, radius, 1/2 * Math.PI, 0, true)
+ ctx.arc(x + width - radius, y-radius - height, radius, 0, 3/2 * Math.PI, true)
+ ctx.lineTo(x + radius, y - (radius * 2 ) - height)
+ if(fill){
+ ctx.fill();
+ } else {
+ ctx.stroke();
+ }
+
+ return radius*2 + height
+}
+function color(c) {
+ ctx.fillStyle = c;
+ ctx.strokeStyle = c;
+}
+function font(size, what, x, y, wrap = false) {
+ ctx.textBaseline = "top"
+ ctx.font = size + "px Mono";
+ if(wrap){
+ var parts = split_into_parts(what, true);
+ parts.forEach((element, i) => {
+ ctx.fillText(element, x, y + i*(size + 2));
+ });
+ } else {
+ ctx.fillText(what, x, y);
+ }
+}
+function split_into_parts(what, drawing=false){
+ var parts = [];
+ var line = "";
+ if(drawing){
+ line = " "
+ }
+ for(var i = 0; i < what.length; i++){
+ if(what.charAt(i) == "\n"){
+ parts.push(line + "\n");
+ line = ""
+ } else if(line.length == 34){
+ parts.push(line);
+ line = what.charAt(i);
+ } else {
+ line += what.charAt(i)
+ }
+ if(parts.length == 6){
+ break;
+ }
+ }
+ if(line.length != 0 && parts.length < 6){
+ parts.push(line)
+ }
+ return parts;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-21 15:04:20 +0000