Show HN: FIFA Interactive Bracket (World Cup)

[fvilers]

Very nice, but it would be nicer to use [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...) to format dates as we are not all used to the American way of formatting.

[llagerlof]

ISO-8601 and we have a deal :-)

[colewilson]

Done! Thank you for the suggestion.

[ginja]

On a similar note, temperatures in ºC would also be useful. Great website though!

[alzaeem]

Love it. But one suggestion, which I’ve been looking for, is to fill the knockouts bracket based on the current group standings. That’s a great way to build up the excitement

[colewilson]

Good idea! I'll look into it tommorrow.

[auggierose]

Actually, I think it would be nicer to compute some sort of prediction based on the results so far, the strength of the teams, and the remaining games to be played.

[YourParmenides]

I went directly to the comment section to say the same thing

[boomboomsubban]

A solid replacement for my standard sports site, Wikipedia.

And wow! A real page view counter, with under 2000 hits so far! I feel like a kid again.

edit it might be nice to clarify the time zone used in the games.

[abcanthur]

for the World Cup and most other leagues, the platonic ideal of speed/freshness, information density, and legibility, is https://plaintextsports.com . It has a great World Cup presentation which can display by group or by date https://plaintextsports.com/world-cup/2022/schedule . The page sizes are something like 3 magnitudes smaller than ESPN.com, especially great for when you're actually at the game and the network is bogged down in the arena.

[typon]

Wikipedia beats megacorp giants like Espn at displaying sports related information in so many metrics and it's not even close. Really a great example of perverted incentives. Espn is trying to show ads, while Wikipedia is trying to show information.

[weaksauce]

looks to be in the time zone of the current browser's locale. it says the correct time for me and i don't live anywhere near the middle east(or perhaps the person that made the site is also in my timezone so double check)

[mtlmtlmtlmtl]

This is perfect! I've boycotting any official broadcasts. I want this WC to be a disaster(it has been the whole time, but I want the Qatari state and FIFA to feel it), but I still vaguely care about the results.

[iforgotpassword]

I'm relaying a German live ticker to a private chat group (family/friends) created for that reason. While at it, I started replacing common terminology with silly words because I'm still a child on the inside I guess. Makes for some hilarious phrases.

[zkid18]

Have I missed something? What’s wrong with this WC?

[snapdaddy]

Hey Cole,

I think the site looks great and is very useful. The one suggestion I have would be to add a bit of space to everything to give it some breathing room.

These are the changes I made: try them out and see what you think.

body { padding: 10px; background: #f0f0f0; }

#groups { grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); }

.group { padding: 10px; margin: 4px; }

.group > span { margin: 0 20px 20px 0; }

.gmatch { padding: 6px 0; }

[heywire]

I’ll go for the opposing view, the compact spacing is great and looks great on iPhone :)

[reesericci]

It would be nice if the bracket updated every minute, along with the game. So if the game concludes, it updates the bracket.

[ernestipark]

This is great. One huge nitpick with sports stats and standing sites these days (even Google’s which are pretty clean) is the lack of info density. I just want tables with little padding showing me all the info I want without page refreshes. This is exactly that.

[colewilson]

Thanks, that's what I was going for!

[farindk]

Nice. But please check your data source, it might have a bug. For example: Group E, Germany <-> Japan. End result 1:2, but the game details list 2 goals for each side.

[colewilson]

After further review, I think the extra goal was disallowed. Unfortunately, I don't think there is a way to filter these out.

[colewilson]

I will take a look, sorry!

[siquick]

I’ve been a football fan for nearly 40 years and have never heard the term Bracket related to the game - what does it mean?

[bombcar]

https://en.m.wikipedia.org/wiki/Bracket_(tournament)

[jerojero]

This is great!

Just a few thoughts: It could be good to add a `X` a kind of close button to the pop up when you click on a match. It's not entirely intuitive where to click to close it if you're on mobile.

On that line, when you double click on a match (or double tap to enter full screen) it looks very bad on mobile.

This is a very useful website! Thanks.

[colewilson]

I'll ad an X button first thing tomorrow, thanks!

[colewilson]

Done!

[harry8]

I'll totally use this unless it gets trampled to death. "Did you see that ludicrous display last night?"

Event list for match #8 is not in chronological order according to the timestamps. Did you mean it to be? (Entry 4 shuffle up to should come first, then 3 second and the rest seem ok)

[colewilson]

Thanks! I believe that this is a mix-up in my data source, as they mark the raw timestamps in the wrong order.

[Hbruz0]

Hey, just a heads up : In the group D, the Tunisia-France score was 1-0 and not 1-1. The last goal by Griezmann was cancelled.

[colewilson]

Thanks! I'm working on adding a manual override, but the upstream data source has not been fixed yet: https://github.com/estiens/world_cup_json/issues/226.

EDIT: I have applied a basic fix for it on my end, but there may be instances where it still shows 1-1.

[tacker2000]

Nice!

But would be also good to show the actual tables and not just the points, maybe even updating live during the matches, since in most cases the points are not the single thing that decide the outcome, but also goals scored, goal difference etc.

[dieze]

Thank you for this great summary!

A minor suggestion: groups are so tight this year that global goal average could be useful, maybe in parentheses after the points ?

[colewilson]

Good idea! I just added detailed ranking information like goal differentials and goals for/against. Is that what you were looking for? You can get to it by clicked/tapping on the group points and flags.

[skc]

Iran and Wales are playing right now, Iran had a goal disallowed but the match summary records it as a goal (even though it correctly shows that the game is still 0-0)

So minor bug.

[colewilson]

I'm not really sure how to address this, as the data source does not mark whether a goal has been disallowed or not.

[quacked]

SO much more pleasant to look at than the floating tile-based Figma JS nonsense every web developer is pumping out these days. Great job, bookmarked.

[colewilson]

Thank you!

[glxxyz]

Where is Match 55 (F winner vs E runner up)?

[colewilson]

I've fixed it, still unsure about the cause of the problem but it should be there now.

[bentinata]

Have never followed soccer/football, I find it weird that it doesn't have something like Liquipedia.

[neighbour]

Huge fan of projects like this. It is a very straight-forward way of presenting the entire competition.

Nice job.

[fersarr]

same thoughts from me! really like it.

[colewilson]

Thanks!

[awb]

Great project! Would be interesting to see tie breaker information too. For example, Uruguay and South Korea tied 0-0 but Uruguay is listed 2nd in Group H ahead of South Korea. Maybe because Uruguay had 1 yellow card and South Korea had 2?

[vidyesh]

Yes for now based on yellow cards.

The tiebreaker goes this way

- Goal difference

- Total number of goals scored.

- Number of points between teams concerned.

- GD between the teams concerned.

- Team conduct score

  - Yellow Card: -1 point

  - Indirect Red card (2 Yellows): -3 points

  - Direct Red: -4 points

  - Yellow and Direct Red: -5 points

[colewilson]

I will look into this, thanks!