diff --git a/app/chain_client/events.js b/app/chain_client/events.js new file mode 100644 index 0000000..e676cf7 --- /dev/null +++ b/app/chain_client/events.js @@ -0,0 +1,35 @@ +export default class Events { + constructor() { + this.ws = new WebSocket('wss://draw.status.im/queryws') + + this.ws.onopen = () => { + + // subscribe to events + this.ws.send(JSON.stringify({ + method: 'subevents', + jsonrpc: '2.0', + params: {}, + id: 'events' + })) + + // on new event + this.ws.onmessage = event => this.onMessage(event) + } + } + + onMessage(event) { + const data = JSON.parse(event.data) + const encodedData = data.result.encoded_body + + // there's an useful encoded that + if (encodedData) { + const dAppEvent = JSON.parse(atob(encodedData)) + + // tile map state updated + if (this.onEvent && dAppEvent.Method == 'onTileMapStateUpdate') { + const parsedData = JSON.parse(dAppEvent.Data) + this.onEvent(parsedData) + } + } + } +} diff --git a/app/dapp.js b/app/dapp.js index 3024389..380d616 100644 --- a/app/dapp.js +++ b/app/dapp.js @@ -6,7 +6,8 @@ import SNT from 'Embark/contracts/SNT'; import Web3Render from './components/standard/Web3Render'; import DrawField from './components/draw/DrawField'; //import ContractClient, { createContract } from './contract_client' -import ContractClient from './client_contractgo' +import ContractClient from './client_contractgo'; +import Events from './chain_client/events'; window['SNT'] = SNT; import './dapp.css'; @@ -36,20 +37,20 @@ class App extends React.Component { async createContract() { const { tileStateUpdateHandler } = this; this.contractClient = await new ContractClient(); + this.events = new Events(); await this.contractClient.createContract(); + this.events.onEvent = tileData => this.tileStateUpdateHandler(tileData) this.requestUpdateTilesOnCanvas(); } tileStateUpdateHandler = tileData => { - const { returnValues: { state } } = tileData; console.log('tile state update event received'); - this.setState({ canvasState: state }); + this.setState({ canvasState: tileData }); } async requestUpdateTilesOnCanvas() { const tileMapState = await this.contractClient.getTileMapState() const tileData = tileMapState.getData() - debugger if (tileData) { const canvasState = JSON.parse(tileData); this.setState({ canvasState });