Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| </head> | |
| <body style="height: 512px;"> | |
| <div style="width: 100%; display: flex; flex-direction: col"> | |
| <button style="z-index: 1; width: 15%; color: green; background-color: darkslategray; text-shadow: 4px 4px 30px | |
| black" id="yomama">Send</button> <input style="z-index: 1; width: 100%; background-color: #121212; color: #afafaf;" id="message_input" placeholder="Type messages here..." /> | |
| </div> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <br /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js" integrity="sha512-WJXVjqeINVpi5XXJ2jn0BSCfp0y80IKrYh731gLRnkAS9TKc5KNt/OfLtu+fCueqdWniouJ1ubM+VI/hbo7POQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script> | |
| function setup() { | |
| createCanvas(window.innerWidth, window.innerHeight); | |
| background(153); | |
| textSize(32) | |
| textAlign(CENTER); | |
| text("Loading...", width / 2, height / 2) | |
| } | |
| let txt; | |
| class SMessage { | |
| constructor(send, content) { | |
| this.send = send; | |
| this.content = content; | |
| this.alive = true; | |
| this.x = 0; | |
| this.y = 32; | |
| this.alpha = 255; | |
| } | |
| draw() { | |
| fill(color(0, 0, 0, this.alpha)); | |
| textSize(18); | |
| text(`<${this.send}>: ${this.content}`, this.x, this.y); | |
| } | |
| update() { | |
| this.x += 1; | |
| if (this.x > 920) { | |
| this.x = 0; | |
| this.y += 32; | |
| } | |
| } | |
| } | |
| var _messages = [new SMessage("CLIENT", "Connected!")]; | |
| const minp = document.querySelector("#message_input"); | |
| minp.addEventListener("submit", (evt) => { | |
| _messages.push(new SMessage("Me", msg)); | |
| }); | |
| const minp3 = document.querySelector("#yomama"); | |
| minp3.addEventListener("click", (evt) => { | |
| const _minp = document.querySelector("#message_input"); | |
| const val = _minp.value; | |
| _minp.value = ""; | |
| _messages.push(new SMessage("Me", msg)); | |
| }); | |
| socket.on("messag", function(mstr, msg) { | |
| _messages.push(new SMessage(mstr, msg)); | |
| console.log(msg) | |
| }); | |
| function draw() { | |
| background(153); | |
| textSize(50) | |
| //text(txt, width / 2, height / 2) | |
| _messages.forEach((itm) => { | |
| if (itm) { | |
| itm.draw(); | |
| itm.update(); | |
| } | |
| }); | |
| } | |
| socket.on("update", function(number) { | |
| txt = number | |
| }) | |
| </script> | |
| </body> | |
| </html> |