Lately I’ve been working on a tool which allows me to visualize strategies for Basketball. It’s a HTML5 application which I called WebStrat. Click the link to see what it looks like. There also is an example strategy available.
Why did I do this?
I’m playing Basketball myself, the season just ended. As in every year you get a bunch of new players into the team who are needed to be integrated. Our team has a number of plays we’re using regularly which they need to learn.
In the past our coach often used hand-drawings, Microsoft Word and other static methods to show how our plays work. This was not the best solution so I decided to implement something better.
Aren’t there any other solutions?
Yes, there are. I found several alternatives:
These all have one or more of these disadvantages:
- The price is way too high. At best a tool would be gratis.
- It is hard to share the tactics you created
- They are bound to a specific platform (Smartphone Apps, Windows Clients)
- A certain work has to be done to get them running. Like installing it on your computer
- The design is more 1990 than 2013. This point relates to user interface and handling.
What features does WebStrat support?
With WebStrat it is easy to create and share your teams strategies:
- No installation needed. Just visit the page with a modern webbrowser
- The software does not cost a penny
- Create strategies easily by using Drag&Drop and HTML
- Share your strategies via Email, Facebook, Instant Messaging or other text-based services. Just copy the link and you’re good
- The code is open source. Find it on GitHub
When creating WebStrat I had 2 goals in mind: Get it done in a reasonable time and make it as generic as possible. Both goals are a bit contrary, but I think the result is good to use and to extend.
I tried to make the interface for storing the data abstract. There is a parent class Storage. I create a PasteBin-Storage to be independent of any server structure, but it would be easy to integrate a MongoDB or MySQL storage.
The UI currently is created with jQuery Mobile. The reason was that I’m familiar with how it works. However the mobile support is not very good, I tried to optimize the page for Desktop browsers. As with the other points, it wouldn’t be hard to change that, there just isn’t a need for now.
I tried to keep the tool as simple as possible, which leads to some hardcoded design decisions like using the PastebinStorage for loading and the ConsoleStorage for saving strategies. Of course it would be possible to create a UI where it is possible to choose between different Storages. Another trade-off had to be made with the JEditable integration. Currently it is needed to use HTML if you want some formatting, integrating a WYSIWYG editor would make sense here.