Initial commit

8 files changed, 1326 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
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..3a60280
--- /dev/null
+++ b/index.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+	<title>Nano Chat</title>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<style>
+		@font-face {
+			font-family: 'Gameboy';
+			src: url('Assets/font.ttf');
+		}
+		canvas {
+			transform-origin: top left;
+			transform: scale(2, 2);
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+	</style>
+</head>
+
+<body style="padding:0; margin:0; overflow:hidden;">
+    <canvas id="canvas"></canvas>
+    <script>
+        var FPS = 10;
+        var WIDTH = 256;
+        var HEIGHT = 192 * 2;
+    </script>
+    <script src="update-component.js"></script>
+    <script src="draw-component.js"></script>
+    <script src="keyboard-component.js"></script>
+    <script src="mouse-component.js"></script>
+	<script src="main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/keyboard-component.js b/keyboard-component.js
new file mode 100644
index 0000000..ce590ae
--- /dev/null
+++ b/keyboard-component.js
@@ -0,0 +1,22 @@
+typingMessageComponent = {
+    keyDown: function(e){
+        if(e.keyCode == 48 && e.key == "Delete"){ // Mark delete as backspace
+            e.keyCode = 8
+        }
+    
+        if(e.keyCode >= 32 && e.key.length == 1){ // Printable character (probably)
+            currentMessageText += e.key
+        } else if(e.keyCode == 13){ // Enter
+            currentMessageText += "\n";
+        } else if(e.keyCode == 8) { // delete
+            if(currentMessageText.length >= 1){
+                currentMessageText = currentMessageText.substring(0, currentMessageText.length - 1)
+            } else {
+                currentMessageText = ""
+            }
+        }
+        currentMessageParts = split_into_parts(currentMessageText)
+        currentMessageText = currentMessageParts.join("")
+        mouseIsDown = false
+    }
+}
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..6e387be
--- /dev/null
+++ b/main.js
@@ -0,0 +1,70 @@
+var canvas, ctx;
+var t; // Frame counter
+var gameInterval;
+var components;
+
+var messages, username, currentMessageText, currentMessageParts, currentMessagePixels, mouseIsDown;
+
+window.onload = function () {
+    canvas = document.getElementById("canvas");
+    ctx = canvas.getContext("2d");
+    document.addEventListener("keydown", keyDown);
+
+    document.addEventListener("mousedown", mouseDown)
+    document.addEventListener("mousemove", mouseMove)
+    document.addEventListener("mouseup", mouseUp)
+    window.addEventListener('resize', resizeCanvas, false);
+    window.addEventListener('orientationchange', resizeCanvas, false);    
+
+    init();
+    resizeCanvas();
+}
+function init() {
+    components = {
+        keyboard: typingMessageComponent,
+        mouse: drawMessageComponent,
+        draw: normalDraw,
+        update: normalUpdate
+    }
+    t = 0 
+    
+    username = "Mark"
+    messages = []
+    messages.unshift({
+        type: 0,
+    })
+    messages.unshift({
+        type: 1,
+        text: username
+    })
+    currentMessageText = ""
+    currentMessagePixels = []
+    gameInterval = setInterval(game, 1000 / FPS);
+}
+function resizeCanvas() {
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+}
+function keyDown(e) {
+    components.keyboard.keyDown(e);
+}
+function mouseDown(e){
+    components.mouse.mouseDown(e);
+}
+function mouseUp(e){
+    components.mouse.mouseUp(e);
+}
+function mouseMove(e){
+    components.mouse.mouseMove(e);
+}
+function update() {
+    components.update.update()
+}
+function draw(){
+    components.draw.draw()
+}
+
+function game() {
+    update();
+    draw();
+}
diff --git a/mouse-component.js b/mouse-component.js
new file mode 100644
index 0000000..10684cc
--- /dev/null
+++ b/mouse-component.js
@@ -0,0 +1,94 @@
+drawMessageComponent = {
+    mouseDown: function(e){
+        mouseIsDown = true
+        let x = e.x/2;
+        let y = e.y/2;
+    
+        if(206 < x && x < WIDTH && 292 < y && y < 336){
+            messages.unshift({
+                type: 2,
+                from: username,
+                text: currentMessageText,
+                pixels: currentMessagePixels
+            })
+            currentMessageText = ""
+            currentMessagePixels = []
+        } else if(206 < x && x < WIDTH && 338 < y && y < 382){
+            currentMessageText = ""
+            currentMessagePixels = []
+        } else if(0 < x && x < WIDTH && 198 < y && y < 288){
+            currentMessagePixels.push({x: x, y: y - 288})
+        }
+        checkKeyBoardClick(x, y)
+    },
+    mouseUp: function(e){
+        mouseIsDown = false
+    },
+    mouseMove: function(e){
+        let x = Math.floor(e.x/2);
+        let y = Math.floor(e.y/2);
+        if(mouseIsDown && 0 < x && x < WIDTH && 198 < y && y < 288){
+            currentMessagePixels.push({x: x, y: y - 288})
+        }
+    },
+}
+function inBox(x, y, boxX, boxY, width, height){
+    return boxX < x && x < boxX + width && boxY < y && y < boxY + height
+}
+var normalKeys = [
+    ["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 keys = normalKeys
+function checkKeyBoardClick(mouseX, mouseY){   
+    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++){
+            if(inBox(mouseX, mouseY, x, y, d1, d1)){
+                var char = keys[j][i]
+                if(capsOn || shiftOn){
+                    char = char.toUpperCase()
+                }
+                shiftOn = false
+                keyDown({
+                    keyCode: 32, // any printable char code (yeah probably a bad idea)
+                    key: char // the char
+                })
+            }
+            x += d2
+        }
+    }
+    // space
+    if(inBox(mouseX, mouseY, 6, HEIGHT - 27, WIDTH-65, 24)){
+        keyDown({
+            keyCode: 32,
+            key: " " 
+        })
+    }
+    // shift
+    if(inBox(mouseX, mouseY, 6, HEIGHT - 27 - d2, d1+8, d1)){
+        shiftOn = true && !shiftOn
+    }
+    // caps
+    if(inBox(mouseX, mouseY, 6, HEIGHT - 27 - 2 * d2, d1, d1)){
+        capsOn = !capsOn
+    }
+    // enter
+    if(inBox(mouseX, mouseY, d1*11+1, HEIGHT - 27 - 2 * d2, d1*2+1, d1)){
+        keyDown({
+            keyCode: 13
+        })
+    }
+    // backspace
+    if(inBox(mouseX, mouseY, d1*11.5+1.5, HEIGHT - 27 - 3 * d2, d1+8, d1)){
+        keyDown({
+            keyCode: 8
+        })
+    }
+    
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..82d6582
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,395 @@
+{
+  "name": "nanochat",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "accepts": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
+      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "requires": {
+        "mime-types": "~2.1.24",
+        "negotiator": "0.6.2"
+      }
+    },
+    "array-flatten": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
+    },
+    "body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "requires": {
+        "bytes": "3.1.0",
+        "content-type": "~1.0.4",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "on-finished": "~2.3.0",
+        "qs": "6.7.0",
+        "raw-body": "2.4.0",
+        "type-is": "~1.6.17"
+      }
+    },
+    "bytes": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
+      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg=="
+    },
+    "content-disposition": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
+      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "requires": {
+        "safe-buffer": "5.1.2"
+      }
+    },
+    "content-type": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
+      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+    },
+    "cookie": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
+      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg=="
+    },
+    "cookie-signature": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
+      "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
+    },
+    "debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "requires": {
+        "ms": "2.0.0"
+      }
+    },
+    "depd": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+    },
+    "encodeurl": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+    },
+    "etag": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
+      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc="
+    },
+    "express": {
+      "version": "4.17.1",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
+      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "requires": {
+        "accepts": "~1.3.7",
+        "array-flatten": "1.1.1",
+        "body-parser": "1.19.0",
+        "content-disposition": "0.5.3",
+        "content-type": "~1.0.4",
+        "cookie": "0.4.0",
+        "cookie-signature": "1.0.6",
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "finalhandler": "~1.1.2",
+        "fresh": "0.5.2",
+        "merge-descriptors": "1.0.1",
+        "methods": "~1.1.2",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "path-to-regexp": "0.1.7",
+        "proxy-addr": "~2.0.5",
+        "qs": "6.7.0",
+        "range-parser": "~1.2.1",
+        "safe-buffer": "5.1.2",
+        "send": "0.17.1",
+        "serve-static": "1.14.1",
+        "setprototypeof": "1.1.1",
+        "statuses": "~1.5.0",
+        "type-is": "~1.6.18",
+        "utils-merge": "1.0.1",
+        "vary": "~1.1.2"
+      }
+    },
+    "finalhandler": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
+      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "requires": {
+        "debug": "2.6.9",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "parseurl": "~1.3.3",
+        "statuses": "~1.5.0",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "forwarded": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
+      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ="
+    },
+    "fresh": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
+      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
+    },
+    "http-errors": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
+      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "requires": {
+        "depd": "~1.1.2",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.1.1",
+        "statuses": ">= 1.5.0 < 2",
+        "toidentifier": "1.0.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+    },
+    "ipaddr.js": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
+    },
+    "lodash-compat": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/lodash-compat/-/lodash-compat-3.10.2.tgz",
+      "integrity": "sha1-xpQBKKnTD46QLNLPmf0Muk7PwYM="
+    },
+    "lodash-fp": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/lodash-fp/-/lodash-fp-0.10.4.tgz",
+      "integrity": "sha1-KnjGVLJaDEZ1OiCqeG32Qcf4Lmc=",
+      "requires": {
+        "lodash-compat": "^3.10.2"
+      }
+    },
+    "media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
+    },
+    "merge-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
+      "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
+    },
+    "methods": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
+      "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
+    },
+    "mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
+    },
+    "mime-db": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+      "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg=="
+    },
+    "mime-types": {
+      "version": "2.1.27",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+      "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+      "requires": {
+        "mime-db": "1.44.0"
+      }
+    },
+    "ml-sentiment": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/ml-sentiment/-/ml-sentiment-2.0.7.tgz",
+      "integrity": "sha1-+LWaha0sQQfDMtCvtd6okntBHoE=",
+      "requires": {
+        "lodash-fp": "^0.10.4"
+      }
+    },
+    "ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+    },
+    "negotiator": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
+      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw=="
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
+      "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="
+    },
+    "path-to-regexp": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz",
+      "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w="
+    },
+    "proxy-addr": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "requires": {
+        "forwarded": "~0.1.2",
+        "ipaddr.js": "1.9.1"
+      }
+    },
+    "qs": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
+      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ=="
+    },
+    "range-parser": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "raw-body": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
+      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "requires": {
+        "bytes": "3.1.0",
+        "http-errors": "1.7.2",
+        "iconv-lite": "0.4.24",
+        "unpipe": "1.0.0"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+    },
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
+    },
+    "send": {
+      "version": "0.17.1",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
+      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "requires": {
+        "debug": "2.6.9",
+        "depd": "~1.1.2",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.1",
+        "fresh": "0.5.2",
+        "http-errors": "~1.7.2",
+        "mime": "1.6.0",
+        "ms": "2.1.1",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.1",
+        "statuses": "~1.5.0"
+      },
+      "dependencies": {
+        "ms": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
+          "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+        }
+      }
+    },
+    "serve-static": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
+      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "requires": {
+        "encodeurl": "~1.0.2",
+        "escape-html": "~1.0.3",
+        "parseurl": "~1.3.3",
+        "send": "0.17.1"
+      }
+    },
+    "setprototypeof": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
+      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+    },
+    "statuses": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
+      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow="
+    },
+    "toidentifier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
+      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw=="
+    },
+    "type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "requires": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      }
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
+    },
+    "utils-merge": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
+      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
+    },
+    "vary": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
+      "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..5149d2f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "nanochat",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "express": "^4.17.1",
+    "ml-sentiment": "^2.0.7"
+  }
+}
diff --git a/update-component.js b/update-component.js
new file mode 100644
index 0000000..2fd4819
--- /dev/null
+++ b/update-component.js
@@ -0,0 +1,463 @@
+events = {}
+events[5 * FPS] = function(){
+    messages.unshift({
+        type: 1,
+        text: "l0st"
+    })
+}
+events[8 * FPS] = function(){
+    messages.unshift({
+        type: 2,
+        from: "l0st",
+        text: "hi...",
+        pixels: []
+    })
+}
+normalUpdate = {
+    update: function(){
+        if(t in events){
+            events[t]()
+        }
+        t++
+        if(currentMessagePixels.length >= smile.length){
+            currentMessagePixels = currentMessagePixels.slice(0, smile.length)
+            transform(currentMessagePixels, smile, 100)
+        }
+    }
+}
+function transform(fromPixels, toPixels, period){
+    for(var i = 0 ; i < toPixels.length; i++){
+        var actualDX = toPixels[i].x - fromPixels[i].x;
+        var actualDY = toPixels[i].y - fromPixels[i].y;
+        var dX = Math.sign(actualDX) * Math.min(1, Math.abs(actualDX))
+        var dY = Math.sign(actualDY) * Math.min(1, Math.abs(actualDY))
+        fromPixels[i].x += dX
+        fromPixels[i].y += dY
+    }
+}
+var smile = [
+    {
+      "x": 117,
+      "y": -62.5
+    },
+    {
+      "x": 116,
+      "y": -63
+    },
+    {
+      "x": 116,
+      "y": -62
+    },
+    {
+      "x": 115,
+      "y": -62
+    },
+    {
+      "x": 114,
+      "y": -61
+    },
+    {
+      "x": 114,
+      "y": -61
+    },
+    {
+      "x": 115,
+      "y": -61
+    },
+    {
+      "x": 115,
+      "y": -61
+    },
+    {
+      "x": 115,
+      "y": -61
+    },
+    {
+      "x": 116,
+      "y": -61
+    },
+    {
+      "x": 116,
+      "y": -60
+    },
+    {
+      "x": 116,
+      "y": -60
+    },
+    {
+      "x": 116,
+      "y": -60
+    },
+    {
+      "x": 116,
+      "y": -60
+    },
+    {
+      "x": 116,
+      "y": -60
+    },
+    {
+      "x": 116,
+      "y": -60
+    },
+    {
+      "x": 117,
+      "y": -60
+    },
+    {
+      "x": 117,
+      "y": -60
+    },
+    {
+      "x": 117,
+      "y": -61
+    },
+    {
+      "x": 142.5,
+      "y": -62
+    },
+    {
+      "x": 142,
+      "y": -62
+    },
+    {
+      "x": 142,
+      "y": -62
+    },
+    {
+      "x": 142,
+      "y": -62
+    },
+    {
+      "x": 142,
+      "y": -62
+    },
+    {
+      "x": 142,
+      "y": -61
+    },
+    {
+      "x": 142,
+      "y": -61
+    },
+    {
+      "x": 142,
+      "y": -61
+    },
+    {
+      "x": 142,
+      "y": -61
+    },
+    {
+      "x": 143,
+      "y": -61
+    },
+    {
+      "x": 143,
+      "y": -61
+    },
+    {
+      "x": 143,
+      "y": -61
+    },
+    {
+      "x": 144,
+      "y": -61
+    },
+    {
+      "x": 144,
+      "y": -62
+    },
+    {
+      "x": 144,
+      "y": -62
+    },
+    {
+      "x": 144,
+      "y": -62
+    },
+    {
+      "x": 143,
+      "y": -62
+    },
+    {
+      "x": 143,
+      "y": -62
+    },
+    {
+      "x": 143,
+      "y": -62
+    },
+    {
+      "x": 142,
+      "y": -61
+    },
+    {
+      "x": 142,
+      "y": -60
+    },
+    {
+      "x": 142,
+      "y": -59
+    },
+    {
+      "x": 142,
+      "y": -59
+    },
+    {
+      "x": 142,
+      "y": -59
+    },
+    {
+      "x": 143,
+      "y": -59
+    },
+    {
+      "x": 143,
+      "y": -59
+    },
+    {
+      "x": 144,
+      "y": -59
+    },
+    {
+      "x": 144,
+      "y": -59
+    },
+    {
+      "x": 145,
+      "y": -59
+    },
+    {
+      "x": 145,
+      "y": -59
+    },
+    {
+      "x": 145,
+      "y": -60
+    },
+    {
+      "x": 145,
+      "y": -60
+    },
+    {
+      "x": 145,
+      "y": -60
+    },
+    {
+      "x": 144,
+      "y": -60
+    },
+    {
+      "x": 114,
+      "y": -35.5
+    },
+    {
+      "x": 114,
+      "y": -36
+    },
+    {
+      "x": 114,
+      "y": -36
+    },
+    {
+      "x": 114,
+      "y": -35
+    },
+    {
+      "x": 114,
+      "y": -35
+    },
+    {
+      "x": 114,
+      "y": -34
+    },
+    {
+      "x": 114,
+      "y": -33
+    },
+    {
+      "x": 114,
+      "y": -33
+    },
+    {
+      "x": 114,
+      "y": -32
+    },
+    {
+      "x": 115,
+      "y": -32
+    },
+    {
+      "x": 117,
+      "y": -31
+    },
+    {
+      "x": 119,
+      "y": -30
+    },
+    {
+      "x": 120,
+      "y": -29
+    },
+    {
+      "x": 121,
+      "y": -28
+    },
+    {
+      "x": 122,
+      "y": -27
+    },
+    {
+      "x": 123,
+      "y": -26
+    },
+    {
+      "x": 125,
+      "y": -26
+    },
+    {
+      "x": 126,
+      "y": -25
+    },
+    {
+      "x": 127,
+      "y": -25
+    },
+    {
+      "x": 128,
+      "y": -24
+    },
+    {
+      "x": 129,
+      "y": -24
+    },
+    {
+      "x": 130,
+      "y": -24
+    },
+    {
+      "x": 131,
+      "y": -24
+    },
+    {
+      "x": 131,
+      "y": -24
+    },
+    {
+      "x": 132,
+      "y": -24
+    },
+    {
+      "x": 133,
+      "y": -24
+    },
+    {
+      "x": 134,
+      "y": -24
+    },
+    {
+      "x": 135,
+      "y": -24
+    },
+    {
+      "x": 136,
+      "y": -24
+    },
+    {
+      "x": 138,
+      "y": -25
+    },
+    {
+      "x": 139,
+      "y": -25
+    },
+    {
+      "x": 140,
+      "y": -26
+    },
+    {
+      "x": 141,
+      "y": -27
+    },
+    {
+      "x": 142,
+      "y": -27
+    },
+    {
+      "x": 143,
+      "y": -28
+    },
+    {
+      "x": 143,
+      "y": -29
+    },
+    {
+      "x": 144,
+      "y": -30
+    },
+    {
+      "x": 145,
+      "y": -30
+    },
+    {
+      "x": 145,
+      "y": -31
+    },
+    {
+      "x": 146,
+      "y": -32
+    },
+    {
+      "x": 146,
+      "y": -32
+    },
+    {
+      "x": 147,
+      "y": -33
+    },
+    {
+      "x": 147,
+      "y": -33
+    },
+    {
+      "x": 148,
+      "y": -34
+    },
+    {
+      "x": 148,
+      "y": -35
+    },
+    {
+      "x": 148,
+      "y": -35
+    },
+    {
+      "x": 148,
+      "y": -36
+    },
+    {
+      "x": 149,
+      "y": -36
+    },
+    {
+      "x": 149,
+      "y": -37
+    },
+    {
+      "x": 149,
+      "y": -37
+    },
+    {
+      "x": 149,
+      "y": -38
+    },
+    {
+      "x": 149,
+      "y": -38
+    },
+    {
+      "x": 149,
+      "y": -39
+    }
+  ]
\ No newline at end of file