circles/src/client/services/state/state.client-service.ts

import { RPCSocket } from "../../../../node_modules/rpclibrary/js/Index";
import { CanvasState, Point, Stroke } from "../../model/canvas-state";
import { StrokeStreamElement } from "../../model/rpc-callbacks";
import { ClientDrawService } from "../draw/draw.client-service";


export class ClientStateService {

    private remoteService: any

    private canvasState: CanvasState = { strokes: [] }

    async connect(drawService: ClientDrawService) {
        const sock = await new RPCSocket(8080, '95.216.156.135').connect();
        this.remoteService = sock['StateService']
        this.canvasState = await this.getState()
        await this.remoteService.onStroke((s: StrokeStreamElement) => {
            if(!this.canvasState.strokes[s.strokeId]){
                this.canvasState.strokes[s.strokeId] = s.stroke
            }else{
                this.canvasState.strokes[s.strokeId].points = [...this.canvasState.strokes[s.strokeId].points, ...s.stroke.points]
            }
            drawService.draw()
        })
        drawService.draw()
    }

    getState = async () => {
        return await this.remoteService.getState()
    }

    beginStroke = async (stroke: Stroke) => {
        return await this.remoteService.beginStroke(stroke)
    }

    addPoint = async (strokeId: number, point: Point) => {
        return this.remoteService.addPoint(strokeId, point)
    }

    getStrokes() {
        return this.canvasState?.strokes ?? []
    }


}