Digital Icebreakers is a platform for presenters and audiences to collaborate, play, and experiment together.
How it works
A presenter creates a Lobby and audience members join by pointing their phone cameras at the presenter's screen and scanning the QR code. The presenter can then guide the audience through games and experiences by clicking New Activity. Try it out on digitalicebreakers.com.
- Clone this repo
- Install .NET Core 3.1 SDK
ASPNETCORE_URLS=http://0.0.0.0:5000 ASPNETCORE_ENVIRONMENT=Development dotnet run --project DigitalIcebreakers
Lobby is created and owned by the
Presenter. Participants may join as
Presenter controls which
Game is currently running, and can close the
Lobby at any time, ejecting all off the
Client's experience is guided by the
Creating your own Game
Game consists of two parts:
- C# code that controls the
Game's messaging between the
- TypeScript-based React components that control the view and actions of the
I will create a game called Splat to illustrate what is required for a (rather trivial) end-to-end game. The
Game should be entirely implemented within the
DigitalIcebreakers folder and project. Splat will have one button on
Client views. On press, the
Presenter view will choose a random point and color, and begin expanding a filled circle centered on the point. On release, the circle will disappear.
Implement the Backend
DigitalIcebreakers/Games. I've just copied
Buzzer.csbecause the messaging is the same - I've just changed the class name and set the
- Add the
Implement the Frontend
- Add a folder called
DigitalIcebreakers/ClientApp/src/games/Splat, and inside it implement:
SplatClient.tsx. I've just copied
BuzzerClientand updated the name, because the UI for the
Clientis identical. This component uses pixi.js to render a button and forwards the press and release events to the SignalR hub.
SplatPresenter.tsx. Again I copied
BuzzerPresenter, switched it to extend
render()as we don't need it for
PixiViewand implemented the response to up/down button presses.
- Add a record to
Splat, setting it's name and importing the
Running & Testing
In Visual Studio Code, you can hit F5 and this will compile both the
Frontend and launch a browser. Once the site loads, click Host > Create, and move the window to half of your screen. Right-click the URL at the top of the page and select Open Link in Incognito Window - this new window will connect as a
Client. On the first window click New Activity > Splat. You should see the
Client window update with button - clicking the button will update the
- Jump in and build your own games & experiences immediately!
- Suggest new features and/or games
- Post feedback on your experience while using Digital Icebreakers with your group/talk/presentation
- If you want to make architectural improvements (of which many are needed), start a conversation first to improve the likelihood your PR is merged.