ℹ️ dGoal Weekly Update
Welcome to the weekly update of the dGoal interface for Rabona football manager. Get to know of the latest updates, be the first one to hear about what's coming next.
A few days ago I wrote about the new dGoal logo and some minor changes done to the app, and presaged that everything about the project is ready to really take off. And fair enough, I spent another few dozen hours working on new features, which are described below.
Read on to learn more, and I encourage you to leave your reflections in the comments!
Match Simulation View
The ability to prepare for the upcoming match and to view how recent matches went for you are definitely two of the most important features that you can imagine for any football manager. The latter of the two took the most of the time in the last few days, but is now ready in its first version and was already deployed to production.
You can view Match Simulation by going to your dashboard and clicking on any match from the Recent matches tab. Below are screenshots of this view in both.
| Light Theme | Dark Theme |
|---|---|
 |  |
The view somewhat stays faithful to how things looked like in Rabona interface so users feel cozy in here, but there are some new features introduced as well. I used green and red colors to clearly indicate which of the teams have won.
Mobile-ready
Viewing the match on a smartphone is also much easier now, as the view was designed with the mobile-first approach. And while some things are not easy to present on mobile (tabular data is the best example here), I managed to bring some life into few of the components.
The timeline
One great example could be the match timeline. While on desktop, the good old horizontal timeline does well. It shows which events happened at what time of the match, and the details can be seen by hovering over the event icons—a tooltip appears with the details.
On mobile phones this is not the case and I had to come up with something more user-friendly. The answer was to turn the horizontal timeline into a vertical one and show the details right away, as on mobile phone you cannot hover your mouse over the event. This new vertical view also plays well with the overall structure of the data, so that you have events for the home team on the left, and away-team-events are on the right of the timeline.
Match Stats
Another part of the view which received an overhaul is the way that match statistics are presented. Previously, they were displayed in a bare-bones table. While this view worked fine on desktop, on smaller devices tables are generally very problematic and hard to read.
I solved the issue by developing a custom chart component. I call it Tree Chart, as in some cases the visualised data can produce a chart that looks like a top of the tree.
The chart displays the basic match stats in a highly-visual and easy-to-consume way. It shows data such as ball contacts, dribblings or shots (gray bar), and additionaly can show what percentage of these actions were succesful (the blue bar within the gray bar). Each of these statistics are displayed for both teams: the home team on the left, and the away team on the right. This way you can visually see which team did better in which category.
Following the example from the screenshot, you can see that my team (AS Whentown) had way more shots than the other team (12 to 3), but only 50% of them were shots on the goal. Hovering over a particular bar will open a tooltip with more details (the number of actions, the number of succesful actions and the ratio between the two).
The good old table is not gone, though! You can still click the See Detailed Report button to open a modal with more detailed data in a table. There you will find the stats displayed in a manner that Rabona does as well. This table can be helpful if you want to do a deeper analysis of how your team did and where your weak points might be.
The guide
Another addition is the ported Rabona Guide. It has to be said that @oliverschmid and @rondras did great job on writing this guide: it's very straight-forward, easy to understand and very short, taking into consideration how many little details the game has.
Thus it was needless for me to modify the guide in any way. Rabona authors allowed me to use their original work for dGoal as well, so I copied the content and only used the dGoal styles to make it more easy to read and navigate.
Internally, the guide is kept in Markdown format, and in future I will work on allowing the community to propose changes to the guide as well. Users will only need to know Markdown to be able to fix incorrect information or add new chapters.
The guide is also available for users that are not logged in, so now one can read more about the game and how it works before deciding to register. I think this is important, because many potential players might get discouraged from joining, as the Rabona.io website does not provide all that much of information right away. Especially the guide is only accesible after one has bought the starter pack.
Navigation enhancements for the mobile
With Hive Keychain oficially released for iOS and Android, and with the soon coming ability to use it on mobile websites, dGoal is coming to your smartphone! And it will happen sooner than later: Hive Keychain's author @stoodkev hopes to have everything ready in few weeks.
But this means that preparing everything for the mobile use is one of the highest priorities. Preparing for this, I have made some usability enhancements for the mobile when it comes to dGoal navigation (sidebar).
The button which opens and closes the navigation on mobile screen has been moved to the bottom-right corner, so it's now always available just under your thumbnail. This way you can easily access the menu without stretching your hand like crazy.
What's coming next
That's it for this week's changes.
You probably noticed that there's no football pitch visible in the Match Simulation Page. This is because that's the feature that troubles me the most: it's not trivial how to implement it so that's easy to use on both mobile devices and desktops and looks neat. This is especially true for when preparing for a match: then the pitch not only has to show the positions and players, but also need to allow for changing which player plays on which position.
I do already have few ideas in my mind for how this can be solved. And that's the main objective for this coming week: to implement the Footbal Pitch component and then use it to create Prepare For Match view. I hope for both of these things to be ready to share with you in the next dGoal Weekly Update.
As always, I'd be more than happy to hear your thoughts and reflections. Feel free to write a comment with whatever you have on your mind.
Thanks for your support and see you next week!
⚽
dGoal - Interface for Rabona Football Manager
dGoal is an interface for Rabona online football manager,
where you can manage a fictional football club and earn cryptocurrency.
Do you have what it takes to be a top football manager?