Update painter example

jnordberg · May 1, 2017 · 4c8759f · 4c8759f
1 parent f2a9a24
commit 4c8759f
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/examples/painter/canvas.png b/examples/painter/canvas.png
diff --git a/examples/painter/client/contents/paint.ts b/examples/painter/client/contents/paint.ts
@@ -36,7 +36,7 @@ if (window.performance) {
     now = () => Date.now()
 }
 
-const client = new Client('ws://192.168.1.33:4242', Painter, {
+const client = new Client('ws://localhost:4242', Painter, {
     sendTimeout: 5000,
     eventTypes: {
         paint: PaintEvent,
@@ -156,14 +156,16 @@ window.addEventListener('DOMContentLoaded', async () => {
             const dt = event.pos.timestamp - event.lastPos.timestamp
             velocity = Math.sqrt(dx*dx + dy*dy) / dt
         }
-        client.service.paint({
+        const msg = {
             x: event.pos.x,
             y: event.pos.y,
             color: event.color,
-            size: 20 + velocity * 20,
-        }).catch((error: Error) => {
+            size: 20 + velocity * 20
+        }
+        client.service.paint(msg).catch((error: Error) => {
             console.warn('error drawing', error.message)
         })
+        shared.paint(msg, ctx)
     }
 
     let mouseDraw: DrawEvent|undefined
@@ -246,5 +248,4 @@ window.addEventListener('DOMContentLoaded', async () => {
 })
 
 console.log(' ;-) ')
-window['colors'] = colors
 window['client'] = client
diff --git a/examples/painter/server/server.ts b/examples/painter/server/server.ts
@@ -44,9 +44,15 @@ const server = new wsrpc.Server({
     service: proto.lookupService('Painter')
 })
 
-server.implement('paint', async (event) => {
+server.implement('paint', async (event, sender) => {
     shared.paint(event, ctx)
-    server.broadcast('paint', PaintEvent.encode(event).finish())
+    const broadcast = PaintEvent.encode(event).finish()
+    for (const connection of server.connections) {
+        if (connection === sender) {
+            continue
+        }
+        connection.send('paint', broadcast)
+    }
 })
 
 server.implement('getCanvas', async (request: CanvasRequest) => {

diff --git a/examples/painter/shared/paint.ts b/examples/painter/shared/paint.ts
@@ -1,4 +1,4 @@
-import {PaintEvent} from './../protocol/service'
+import {IPaintEvent} from './../protocol/service'
 const Canvas = require('canvas')
 
 const brushSize = 124
@@ -51,7 +51,7 @@ function getBrush(color: number) {
     return brush
 }
 
-export function paint(p: PaintEvent, ctx: CanvasRenderingContext2D) {
+export function paint(p: IPaintEvent, ctx: CanvasRenderingContext2D) {
     ctx.globalAlpha = 0.4
     // ctx.globalCompositeOperation = 'overlay'
     ctx.fillStyle = '#' + p.color.toString(16)