Skip to content

Latest commit

 

History

History
131 lines (76 loc) · 6.6 KB

README.md

File metadata and controls

131 lines (76 loc) · 6.6 KB
Raw

Dual Attack

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
Mobile (android only) Build status
Web Netlify Status

Important Notes

Right now we're having issues with the iOS build. Something related to provisioning profiles and capacitor. As a result, we've stopped releasing updates for iOS until we can figure out why signing isn't working.

Everybody loves Apple provisioning profiles right!?!?

Start Playing

What Is It?

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.

How Does It Work?

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.

Android & iOS App

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 device 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 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 or monitor. 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. See the customizing section below for info on modifying the default output.

Web App

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.drewfrisk.dev.

Customizing

We use dual attack with OBS by overlaying the web page served from the web server on the camera feed. But, since OBS is really flexible, you can adjust as necessary. The web server has 2 endpoints available, one to return the game state via a JSON response, and one to return the simple web pages. Those urls are as follows:

  • http://{IPAddress}:8080

The root URL will serve up the web page that contains a basic output of the current game state. It will refresh every second to display any changes to game state.

  • http://{IPAddress}:8080/data

The data endpoint will expose a JSON object that includes the current game state. If you continusoully refresh this endpoint, it will stay current with the current data of the game. If you want to customize the data overlay beyond the webpage, the web server exposes the game state as a JSON object. Hit http://{IPAddress}:8080/data in a web browser or with your scripting language of choice to get a JSON object containing all the game data.

Using CSS

We use the following CSS in our OBS setup if you want to use it as a starting point:

body { overflow: hidden; color: #FFFFFF; }

.flex-container>div { background: none; font-size: 45px; margin: 10px 40px;  }

Using Python

OBS supports loading text files. I believe other camera overlay software has the same functionality. If you'd rather use a text file over manipulating CSS on a web page, reddit user /u/Bose_Motile created this python script to do a file import with Dual Attack and OBS: https://pastebin.com/yh4FqWbA.

Contributing?

Please review the contributing guide before making changes and issuing PRs to Dual Attack.

getting started

  • 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

web app

  • run app in a web browser

    npm run start

native app

  • 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

do some stuff

  • write some code

  • create a pull request, see the contributing guide for

publishing the app

mobile

Coming soon.

web

Coming soon.

Credits

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.

Contributors

3rd Party

  • Icon designed by Freepik from Flaticon.