---
# System prepended metadata

title: CatCaster

---

# CatCaster

## Long term planning

### Past weeks
#### Milestone 0: Minimal goal -> 08/03

- [x] One controller with sensors
- [x] One screen
- [x] One planet: flat, static line
- [x] One cat
- [x] Integrate the different modules (Scherm opzetten: URL/screen --> ENTER --> html pagina geopend --> bericht naar de server via WebSocket met newscreen --> Server bedenkt id van screen (nodig voor uitbreiding) --> server stuurt id terug (deze 2 laatste stappen hoeven enkel bij uitbreiding))

#### Milestone 1 -> 16/03:
- [x] Controller with buttons 
- [x] Rotation of the flat planet
- [x] Cat animation improvement
- [x] Cat respawn
- [x] Multiple controllers and multiple cats

### Following weeks

#### Milestone 2 -> 22/03
- [x] Multiple planets
- [x] Add portals 
- [x] Add travel functionality 
- [x] Shake sensors
- [x] Triangulation
- [x] delete cat after disconnect
- [ ] Two states of screen (free/game) -> Maarten
- [x] Improve the UI (nice html pages) -> Rob
- [x] fix UI bugs: -> Eli + Alex
    - [x] after die, stuck 3 sec
    - [x] is Turn 
    - [x] cat keeps jumping
    - [x] colouring


#### First report -> 31/03

#### Milestone 3: -> 19/04 
- [ ] Multiple screens (browsers) on one laptop -> Valentine, Matthias
- [x] 3D planet instead of a flat line -> Eli + Alex
- [ ] Add a game strategy -> Collect candy -> Hendrik + Sterre
- [x] add physics in 3D -> Maarten
- [ ] Add **little** fixes from the specification:
    - [x] Reorganise message lay-out: CS9 -> Maarten
    - [ ] Close connection if unknown id: CS10 -> Rob
Kijken naar configurationREST line 42, als id niet in ClientsBag, dan reject. MAAR niet mogelijk om van REST naar clientBag te gaan. -> wachten op samenvoegen websocket en server
    - [x] Purge if client gone for +10min: CS13 -> Rob
    - [x] Reorganise REST points: S2
- [ ] add delay/load screen between selection color and give permission (if too fast, Dom exception)
#### Milestone 4: -> 3/05
- [ ] Multiple screens (multiple laptops)
- [x] Detecting multiple QR's and their relative positions

#### Milestone 5: -> 10/05
- [ ] Clean app
- [ ] Type checking

#### Final report -> 11/05
#### Final demo -> 17/05



---




## Taakverdeling
onderdelen:
- [ ] Client-server
- [ ] Screen-controller-server
- [ ] Controller: sensors
- [ ] CatCaster
    - [ ] Cats
    - [ ] Ovals (formulas)
    - [ ] Portals
    - [ ] weblayout
- [ ] Detecting the multi-screen setup


Verdelen:
- Server: Maarten en Alexander
    - dit houdt de database, verbindingen met client en scherm in

- Spel zelf: Eli, Sterre, Valentine en die die klaar zijn
    - modules: Cats, Planets, Portals
    - weblayout:
- QR : Sterre
- WebRTC van media naar dataChannel aanpassen: Rob
- Controller (sensors): Hendrik en Matthias
    - toestemming vragen om sensoren te gebruiken
    - orientatie van controller bepalen
    - detecteren of controller geschud wordt
    - daarna data doorsturen (overlapt met client-server)


## Milestones (old version)
### Milestone 0: Minimal goal

- [x] One controller
- [x] One screen
- [x] One planet: lijn die niet eens hoeft te bewegen
- [x] One cat
- [x] Scherm opzetten: URL/screen --> ENTER --> html pagina geopend --> bericht naar de server via WebSocket met newscreen --> Server bedenkt id van screen (nodig voor uitbreiding) --> server stuurt id terug (deze 2 laatste stappen hoeven enkel bij uitbreiding)
- [x] QR code bevat webadres --> halen van de server --> webRTC connectie via websocket

### Milestone 1:
- [x] Sensoren implementeren dus kat kan sterven
- [x] Lijn bewegen -> Eli
- [x] cat animatie (links rechts) -> Alexander
- [x] cat respawns weergeven

### Milestone 2:
- [ ] Meerdere planeten -> Matthias 
- [x] Triangulatie -> Rob 


### Milestone 3: 
- [x] Vierkant wordt kat 
- [ ] Portals toevoegen -> Valentine 
- [ ] cat functie travel nakijken 
- [ ] dmv shaking-sensors

### Milestone 4:
- [x] Meerdere controllers -> Maarten 
- [x] Meerdere katten -> Maarten 

### Milestone 5:
- [ ] Meerdere browsers 
- [ ] Schijf ipv lijn

### Milestone 6:
- [ ] Meerdere schermen
- [ ] Foto van meerdere QR's + positie -> Hendrik en Sterre


## Planning

Target Tuesday 15 March 2022: the subtasks are ready to be integrated.

Target Thursday 31 March 2022: A simple version of the CatCaster game. This includes:
* One single screen
* Multiple controllers
* The CatCaster game itself (also debug mode)

Target  Wednesday 11 May 2022: Expanding the simple version to multiple screens.


## Notes
react.js  : voor UI
kaboom.js : library voor spel implementatie

replit    : online IDE

unity -> graphics
three.js

# Proposition tasks

- [ ] CatCaster
    - [ ] Cat
    - Input: sensor data of movement of controllers (=cats), positions of screen
    - Output: Position cat
        - [ ] implement overall class
        - [ ] Make image of portal (first study how to display!)
        - [ ] **Implement complex methods**
            - [ ] respawn
            - [ ] travel
    - [ ] Planet
    - Input: Signaling of cat when changed position
        - [ ] implement overall class
        - [ ] Make image of planet (first study how to display!)
    - [ ] Portal
    - Input: Shake of controller
    - Output: Cat on new planet
        - [ ] implement overall class
        - [ ] Make image of portal (first study how to display!)
- [ ] Client:
    - [ ] Client
        - [x] implement overall class
        - [ ] retry connecting if WSS disconnects x times and then error message 
            - [x] Retry
            - [ ] Show message
        - [ ] Handle messages sent by server
            - [x] WebRTC dataChannel
            - [ ] **id -> reload page (REST API)**
            - [ ] ***changeMode -> initialise screen (random number of disks, calculate portals (nearest disks), ...)***
            - [ ] ***newCat -> start WebRTC connection***
    - [ ] Controller
    - Output of sensor data
        - [ ] implement overall class
    - [ ] Screen
    - Sensor data analysis (ipv op server)
    - Receive data via webRTC
        - [ ] implement overall class
        - [ ] **complex methods:**
            - [ ] respawning of cats
            - [ ] travelling of cats
        - [ ] calculations
            - [ ] disk rotation
            - [ ] cat speed
            - [ ] cat position
            - [ ] portal position
            - [ ] nearest disk
        - [ ] ***Study how to display images on the screen (toScreen)***
        - [ ] Generate QR data
    - [ ] Debug Cat (in screen.ts)
        - [ ] *Study how to receive inputKey*
    - [ ] WebRTC
        - [ ] Create peer class
        - [ ] Functionality for the overhead communication via WSS
- [ ] Server
    - [ ] Handle messages sent by clients (handleMessageServer.ts)
        - [ ] WebRTC
        - [ ] ***singleScreen***
        - [ ] ***newController***
        - [ ] id -> eerst study how to open a page automatically
    - [ ] cliensBag.ts
        - [ ] calculateID (+ getShortID() -> in áll classes)
        - [ ] ***changeScreenMode***
- [ ] Sensors
    - [ ] ***Send data***
    - [ ] ***Interpret data (screen.ts)***
- [ ] QR
    - [ ] display QR 
    - [ ] Scan QR
    - [ ] Interpret QR 
    - [ ] **Study how to automatically load a page** (for 2 things: after scanning QR and after receiving id from server)
- [ ] Settings
    - [ ] **about.ts: list all external libraries + own copyricht license**
    - [ ] configuration.ts: file for tuning parameters

- [ ] WEB
    - [ ] Implement REST points
        - [ ] GET /screen/
        - [ ] GET /controller/ (maybe not necessary!)
        - [ ] ***GET /:id/***
        - [ ] ***GET /screen/:id/***
    - [ ] Create HTML pages (no game elements)
        - [ ] controller.html
            - [ ] Scan QR code
            - [ ] technical information (see class controller)
        - [ ] screen.html
            - [ ] display large QR code
            - [ ] technical information (see class screen)
            - [ ] display small QR code + window where the game elements will be placed
    - [ ] Create HTML logic (final step)
        - [ ] controllerIndex.ts
            - [ ] initialise controller object with correct id
            - [ ] scan QR code + go to link (-> first study how to automatically load a page)
            - [ ] ***send sensor data to peer***

        - [ ] screenIndex.ts
            - [ ] ***display different html elements according to game state (free/game)***
            - [ ] **onInputKey(x) (debug mode)**


- [x] ***Calculate CC12***