Show HN: FIFA Interactive Bracket (World Cup)

https://worldcup.cole.ws/

by colewilson • 4 years ago

191 126 4 years ago

worldcup.cole.ws

siquick2• 4 years ago

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?

JBiserkov• 4 years ago

Tournament schema: final, semi-finals, quarter-finals, etc.

colewilson36• 4 years ago

It mainly refers to the tree-like graph of teams in a tournament, I usually hear it in reference to a basketball or American football game though.

bombcar• 4 years ago

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

capableweb• 4 years ago

It's sometimes called "elimination tournament" or just "draw" too.

Just as a curiosity, where you from? Is English your mother-language?

siquick2• 4 years ago

UK but live in Australia (it’s not used here either as far as I know).

I think the UK equivalent is probably Draw as in “this is the draw for the World Cup”.

Bracket in the UK is something used to hold up shelving.

matt_daemon• 4 years ago

Really nice. Every football scores site or app I've tried is either so buggy or stuffed full of ads it's virtually unusable.

neighbour• 4 years ago

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

Nice job.

colewilson36• 4 years ago

Thanks!

fersarr• 4 years ago

same thoughts from me! really like it.

boomboomsubban• 4 years ago

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.

weaksauce• 4 years ago

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)

2143• 4 years ago

It says the correct time for me too.

I'm not that close to Qatar, and I suspect not that close to you either.

typon• 4 years ago

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.

Godel_unicode• 4 years ago

Hardly the case for live games. Look at the EPSN drive graphics for the NFL for instance, where it shows the gain/loss for every play and the tooltip has tons of information about what happened. The shot heatmap for basketball is another great example of ESPN adding real value even if you’ve been watching the game.

abcanthur• 4 years ago

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.

tra32• 4 years ago

As a terminal lover this is amazing.

kome• 4 years ago

wonderful design.

colewilson36• 4 years ago

thank you!

ernestipark• 4 years ago

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.

colewilson36• 4 years ago

Thanks, that's what I was going for!

snapdaddy• 4 years ago

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• 4 years ago

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

colewilson36• 4 years ago

I also rather like the compact spacing, but I appreciate your feedback!

alzaeem• 4 years ago

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

YourParmenides• 4 years ago

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

colewilson36• 4 years ago

Good idea! I'll look into it tommorrow.

auggierose• 4 years ago

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.

farmerbob• 4 years ago

Just use the current betting line.

lavventura2• 4 years ago

It would be nice if the date of the upcoming matches also shown.

glxxyz2• 4 years ago

It is shown: "Match 49 12/3", 3rd of December.

kingofpandora• 4 years ago

It would be nice if it used an international date format and not the American one.

jerojero• 4 years ago

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.

colewilson36• 4 years ago

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

colewilson36• 4 years ago

Done!

harry8• 4 years ago

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)

colewilson36• 4 years ago

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

dislikedtom22• 4 years ago

I like it. However all the dates and times are in american format that I don't use.

colewilson36• 4 years ago

I'll see if I can localize it. Can you give me an example format?

dislikedtom22• 4 years ago

I personally use "en-GB", which results something like dd.MM. HH:mm. JS date object has bunch of methods for locale formatting. edit: actually it seems my browser does not expose correct locales...

ebilgenius• 4 years ago

Can you also look at adding the time/date's timezone on the end? Thanks, I love the site's layout/design

awb• 4 years ago

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?

colewilson36• 4 years ago

I will look into this, thanks!

vidyesh• 4 years ago

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

phonescreen_man• 4 years ago

Love this, just shared it with 7 close friends who will all appreciate it.

colewilson36• 4 years ago

Thanks! I appreciate the shares

bentinata• 4 years ago

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

petesergeant• 4 years ago

The wailing and gnashing of teeth if KSA continue to top their group will be intense

culopatin• 4 years ago

Did it die? I only see a gray screen on iPhone

colewilson36• 4 years ago

It's taking up to 2 seconds to load, but it works on my iphone rn.

ncann• 4 years ago

There seem to be some errors in the console:

- After page load: [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'id')"

- When hovering over a match: [Vue warn]: Failed to resolve directive: if-else

colewilson36• 4 years ago

Yes, mainly debugging stuff I didn’t bother fixing.

fvilers• 4 years ago

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• 4 years ago

ISO-8601 and we have a deal :-)

eddieroger2• 4 years ago

The one true time format.

ginja• 4 years ago

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

colewilson36• 4 years ago

Done, thanks!

colewilson36• 4 years ago

Done! Thank you for the suggestion.

zarzavat• 4 years ago

Suggestion: if a match is less than 24 hours in the future but it happens to be after midnight, show that as e.g. “1am” or “1am +1” because from the perspective of the user those are the same “day”.

colewilson36• 4 years ago

Good idea!

EDIT: added!

mtlmtlmtlmtl5• 4 years ago

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.

iforgotpassword4• 4 years ago

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• 4 years ago

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

mtlmtlmtlmtl5• 4 years ago

The stadiums are built by what is essentially slave labour. The choice of Qatar was obviously a result of corruption in the first place as it's not even a suitable location. That's why it's in November instead of the summer, which has completely disrupted the club season by compressing it, causing a fuckton of injuries in the busiest leagues.

It's a complete shitshow any way you look at it.

Aaronmacaron• 4 years ago

- The WC is primarily a football tournament. Qatar is a country where it's too hot to play football even in the winter. They had to add ACs to the Stadiums so it's somewhat tolerable (not a joke).

- Because it's so hot in Qatar the WC was moved to the winter. This breaks the long standing tradition of doing the WC in the summer.

- In many countries where people actually care about the WC it's cold and rainy in winter. Traditions such watching the WC outside with family and friends obviously cannot exist this time around.

- There is zero football history or tradition in Qatar. Nobody there actually cares about football. Why do the WC there?

- It is very obvious that the only reason why we have a WC in Qatar is corruption. Corrupt people in the FIFA and in western goverments and willingness to bribe and do everything imaginable to get the WC from the Qatari government.

- Qatar now has 8 large and very modern football stadiums in the radius of 50km but the entire country only has less than 3 million people. For camparison London has three times the population but not as many comparable stadiums eventhough London can be considered the world capital of football. Those stadiums will most likely not be really used after the WC.

- It is a known fact that thousands of migrant workers had to die in order for those stadiums to be built.

- Fans are not allowed to wear pride flag colors. Players are not allowed to armbands with pride flag colors because the Qatari government doesn't like it.

Edit: formatting

taikahessu• 4 years ago

- Thousands of workers have died in the building process. I mean really FIFA?

- The cost of the carnival is over 200 billion usd (compare it for 0.5 billion in US 1994)

- Sexual minorities are persecuted in Qatar and FIFA completely downplays this, making the whole organization look ridiculously corrupt.

That should give you a headstart.

Of the actual app/site: Thanks, bookmarked! I also want to see the scores, but dont want anything else to do with this sh*tshow.

devracca2• 4 years ago

This is great! I have been trying to find a way to scrape information about tv channel schedule in different countries e.g UK, US. Would it be possible and helpful to add something like that?

colewilson36• 4 years ago

Thanks, I'm not sure I understand though, can you give me an example?

devracca2• 4 years ago

Something like this https://m.livesoccertv.com/match/4350447/wales-vs-iran/ where it has information about the coverage information.

tacker2000• 4 years ago

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.

Broliant2• 4 years ago

Brilliant tool here, thanks Cole.

Suggestion: Hovering over the detail for a game, is it possible when listing substitutions to see the name of the player replaced as well as the name of the player introduced?

colewilson36• 4 years ago

I will try! The data source only has this information for certain games, and I'm not sure if there's any pattern why.

Broliant2• 4 years ago

Brilliant work! Just checked the tables to catch up on the last day's games and see you've already worked this in. Thank you so much! :)

blitzar• 4 years ago

When the group stages are all over, please flip the brackets to the top, and tables to the bottom for less scrolling!

colewilson36• 4 years ago

Already thought of! The group stage section will collapse.

farindk• 4 years ago

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.

colewilson36• 4 years ago

I will take a look, sorry!

colewilson36• 4 years ago

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

hit8run• 4 years ago

Can you also do a FIFA interactive corruption tracker?

Like an animated visualization of their corruption and money flows that is easily to extend in the future because there’s a lot more to come.

fakedang• 4 years ago

I hope that once the group games are done with, the bottom games chart is switched with the top groups chart.

colewilson36• 4 years ago

It will!

skc• 4 years ago

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.

colewilson36• 4 years ago

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• 4 years ago

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.

colewilson36• 4 years ago

Thank you!

laweijfmvo• 4 years ago

This is super useful. Do you have a donate link? I’d love to kick you a few bucks for your time. Thanks!

lavventura2• 4 years ago

The site is golden. Minor suggestion, count down during the halftime break might be helpful.

colewilson36• 4 years ago

Good idea, thanks!

dieze• 4 years ago

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 ?

colewilson36• 4 years ago

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.

pepsilike• 4 years ago

Where is H group winner?

colewilson36• 4 years ago

Match 56?

zouhair• 4 years ago

There is a bug where like now 2 matches at the same time only one shows twice up in the group column.

colewilson36• 4 years ago

Working on fixing this!

Hbruz0• 4 years ago

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.

colewilson36• 4 years ago

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.

idlesoul• 4 years ago

a bracket is missing in your tournament bracket. F Winner, E runner up. It was there before the scores were finalized and Morocco won the group, gone now.

colewilson36• 4 years ago

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

glxxyz2• 4 years ago

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

colewilson36• 4 years ago

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

reesericci• 4 years ago

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

Show HN: FIFA Interactive Bracket (World Cup)

Related Stories