dGoal Weekly Update #2: Match Simulation & The Guide

in Hive Gaming6 months ago (edited)

ℹ️ 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 ThemeDark Theme
screenshot-dgoal.app-2021.03.06-17_59_49.pngscreenshot-dgoal.app-2021.03.06-17_59_10.png

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


Match Summary on mobile device

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

screenshot-dgoal.app-2021.03.06-18_11_06.png

Match Stats displayed as a chart

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.


Detailed Match Statistics allow you to see more stats in a table

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.

screenshot-dgoal.app-2021.03.06-18_41_31.png

Rabona guide visible within the dGoal app at dGoal.app/guide

Navigation enhancements for the mobile

screenshot-dgoal.app-2021.03.06-18_53_45.png

New placement of the navigation toggler at the bottom right allows for easy access

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?

Sort:  

I like it. Good work! (:

Congratulations for this new interface.

I love it and I am waiting to be full developed to only use it to play rabona.

I have a minor improvement in the css to remove the side bar that currently exists

image.png

If you change the css class MuiList-padding to not have the padding-top the side bar dissapears and the rest it is good.

image.png

I hope this help you.

If you want we can talk about some ideas that makes be good to the site.
Reach me on discoord Paiva#6686

Thanks, I noted this as an issue to be fixed. Luckily that's just a visual problem on Windows! :)

You're superb! Keep building dGoal! dGoal will be adopted as official Rabona UI, fingers crossed


Hey @dgoal, here is a little bit of BEER from @udabeu for you. Enjoy it!

Learn how to earn FREE BEER each day by staking your BEER.

Congratulations @dgoal! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :

You received more than 100 HP as payout for your posts and comments.
Your next payout target is 250 HP.
The unit is Hive Power equivalent because your rewards can be split into HP and HBD

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Feedback from the March 1st Hive Power Up Day

Ups, sorry, I have to comment again, because I am a Brave Browser user, with an installed KeyChain extension.
But now #IT tells me I cannot login, because I do not have a KeyChain extension.

EDIT :
Ups, sorry again, I had to reset the cookies manually, and now everything is fine !!!

Thanks for letting me know! Indeed I have found the issue, it should be fixed now and dGoal should properly recognized your installed Hive Keychain extension. Please let me know if there are any more problems!