Dual Attack is a web and mobile application built with Ionic Capactior that can be used to manage the death clock, turn counter and control point tracking during a Warmachine or Hordes game.
Platform | Build Status |
---|---|
Android | |
iOS | |
Web |
- On Android
- On the Web
- On iOS (coming soon)
We (Brutal Damage) wanted a way to display live updates of clock, turn, and CP info for our Warmachine & Hordes Youtube streams. We had trouble finding something that did what we wanted, so we decided to build what we couldn't find.
The first version was a frankenstein hack of a few projects found around github. We used that to figure out what we needed and how we wanted things to work. If your curious about the first prototype, go check it out (over here).
Our meta has a few developers in it, but we all of slightly different skill sets when it comes to tech-stacks of choice. We chose Ionic Capacitor because it gives us the best of both worlds -- friendly web tech, and native mobile applications. This also gives us the ability to easily make a desktop app in the future if we want.
The UI is pretty simple, its a single UI with some configurable options (mostly just time on the clock). It includes some presets for default times for the standard tournament game sizes.
If you run the android or iOS app, when it starts, the app will create an interal web server. This web server can be accessed from any device on the same network as the phone/tabelt running the app. Clicking the "internet" button in the top right nav bar will display the IP address the server can be accessed from.
If you launch that url in a web browser you'll get a web page that displays the information hit the root of that url. That web page will display the game stats from the mobile app in realtime. How cool is that!?! This allows the game stats to easily be displayed on an external device, such as a TV. For us, we open the url in OBS and put some custom CSS over the top of it so it can be displayed on our streams and recordings.
We weren't originally going to publish this as a web application, but capacitor makes it really easy. So, we made some adjustments to disable all the web server code and made the main part of the app available as a static site. Check it out at https://dual-attack.app.
-
clone the repository
-
follow the capacitor docs to get dependencies installed for iOS & Android https://capacitor.ionicframework.com/docs/getting-started/dependencies/
-
install ionic
npm install -g ionic
-
restore npm in the project directory
npm install
this should pull in capacitor (its a npm dependency of the project).
-
build & sync the latest web files to the android/ios/web projects
npx run build
-
run app in a web browser
npm run start
-
open the native app project, either android or iOS if needed
npx cap open android
npx cap open iOS
-
run or debug to a device or emulator from android studio
-
write some code
-
create a pull request
Coming soon.
Coming soon.
The UI of this app is based on the work of Misha Bosin's Web chess clock. It was ported to work with Ionic 3.
- Drew Frisk: keannan5390
- Lance Aeby: lanceaeby
- Icon designed by Freepik from Flaticon.