guardian / guardian/dotcom-rendering

What if a team scores more than 10?

Open
#1,515 1 comment 0 reactions 0 assignees View on GitHub
Team Candidate: WebX
Dominant language
TypeScript
Stars
274
Forks
34
Avg merge
2d 22h
Merged PRs (30d)
121

Description

In the [MatchNav component](https://www.theguardian.com/football/2020/mar/11/liverpool-atlletico-madrid-champions-league-last-16-second-leg-match-report), we [use svgs to display the score](https://github.com/guardian/dotcom-rendering/pull/1513) using fancy looking numbers. But we only have svgs for numbers up to ten so if a team scores above that, we will still just show 10.

![Screenshot 2020-05-21 at 17 29 01](https://user-images.githubusercontent.com/1336821/82605407-cd0c3c00-9bad-11ea-85e5-631ffa1d37da.jpg)

![Screenshot 2020-05-21 at 15 57 53](https://user-images.githubusercontent.com/1336821/82605433-d72e3a80-9bad-11ea-99f9-c0126fff7cbd.jpg)

Whilst it's true that [no team in the premiership has ever scored more than 10 goals](https://en.wikipedia.org/wiki/List_of_Premier_League_highest_scoring_games), there [was a case](https://en.wikipedia.org/wiki/Australia_31%E2%80%930_American_Samoa) where a team scored 31 goals in a world cup qualifier so it's not impossible that a match report would be written for a game where one of the teams did really, really well.

### Ways we could be better
1. If we used the existing range of svg numbers from 0-9 but made them smaller and positioned them alongside each other, we could compose all the possibilites up to 99 goals. They would need some styling so they still fit inside the circle.

2. Another option is to just create lots more svgs. It's true this clutters the codebase with files but it's very simple.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.