# Work In progress pages

on top of that we need to create 2 new files a gameroom.ts file and state.ts files

the state file will handle all the data

the gameroom file will handle all the callbacks

\
\
\
\
\
\
\
The state will be received by all players so you do not want to have all the info on the state\
\
All you want to keep in the state that is allowed to be shared globally

![](https://2106246176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAal11zmTbHWEnDONeJej%2Fuploads%2FYxANEV31Jb0CbZaUvcox%2FScreenshot%202022-04-28%20at%2014.48.21.png?alt=media\&token=9bc47c0b-d111-4e4e-94ee-f2fce3107016)

Example battleship game:

* Shots fired by all players should be in the state
* Position of the ships should not be in the state otherwise is accessible to all players

Schema is a build in Colyseus and allows to send data back and forward between Client and Server

Schema comes with some parameters {Schema, type, MapSchema, ArraySchema }

Schema -> Colyseus framework

type -> is the language which is typescrypt 

MapSchema -> Basically is an object

ArraySchema -> is to use array

We start by creating a RoomState first and we need to know which players are in the room

in the case for single players used in OP Games 

you need additional annotation for schema to work

class PlayerState extends Schema {

 sessionID: string;

![](https://2106246176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAal11zmTbHWEnDONeJej%2Fuploads%2FfkvVhEqNdUd5fUH2gtq2%2FScreenshot%202022-04-28%20at%2015.00.18.png?alt=media\&token=86458637-36df-4cfd-984e-82d1ddc89269)

}

export class RoomState extends Schema {

@type({map: PlayerState})

&#x20;players: MapSchema\<PlayerState>

}\
\
Lets go to our GameRoom File

import { Client, Room } from "colyseus"

import {RoomState, PlayerState} from "./state"

export class GameRoom extends Room\<RoomState> {

}