38 lines
827 B
TypeScript
38 lines
827 B
TypeScript
import SocketIO from 'socket.io-client';
|
|
import { CanvasRecord, Placement } from '../common/types/canvas';
|
|
import { ViewCanvas } from './canvas';
|
|
|
|
const socket = SocketIO();
|
|
const canvas = new ViewCanvas();
|
|
canvas.initialize();
|
|
|
|
socket.on('connect', () => {
|
|
console.log('connected');
|
|
});
|
|
|
|
socket.on('me', (user) => {
|
|
console.log(user);
|
|
canvas.setUser(user);
|
|
});
|
|
|
|
socket.on('plane', (plane) => {
|
|
canvas.fill(plane.size, plane.canvas);
|
|
});
|
|
|
|
socket.on('changes', (changes: CanvasRecord[]) => {
|
|
console.log(changes);
|
|
changes
|
|
.sort((a, b) => a.ts - b.ts)
|
|
.forEach((change) => {
|
|
canvas.setPixel(change.x, change.y, change.color);
|
|
});
|
|
});
|
|
|
|
socket.on('colorack', ({ x, y, c }: Placement) => {
|
|
canvas.setPixel(x, y, c);
|
|
});
|
|
|
|
canvas.registerOnPlace((placement) => {
|
|
socket.emit('color', placement);
|
|
});
|