2d:null 2e:["$","title",null,{"children":"World Cup Picture Generator | Nicolas Mermoud-Ghraichy | Observable"}] 33:T4b2,function buildMatchRow(match){ var phase = match.contestInfo.phases[1].name; var date = match.dateTimeInfo.date; var competitor1 = {"name":match.competitor1.name, "country":match.competitor1.country, "flag":`

`, "score":match.scores.main.competitor1 === undefined ? "-" : match.scores.main.competitor1}; var competitor2 = {"name":match.competitor2.name, "country":match.competitor2.country, "flag":`

`, "score":match.scores.main.competitor2 === undefined ? "-" : match.scores.main.competitor2}; // var downloadButton = DOM.download(await rasterizeMatchPicture(match), match.contestInfo.phases[1].name + "_" + competitor1.country + "-" + competitor2.country + ".png", "Télécharger l'image du match"); return `${date} | ${phase} | ${competitor1.name} | ${competitor1.flag} | ${competitor1.score} | ${competitor2.score} | ${competitor2.flag} | ${competitor2.name}` }34:T81c,function placeCountriesName(match, competitorNumber, flagWidth){ /* |<-- 20 px -->|<-- 660 px -->|<-- 20 px -->| |<-- 20 px -->|<-- A = 530 px -->|<-- 130 px -->|<-- 20 px -->| |<-- 20 px -->|<-- B -->|<-- A-B -->|<-- 130 px -->|<-- 20 px -->| |<-- marge -->|<-- largeurDrapeau -->|<-- nomDuPays -->|<-- nombreDeButs -->|<-- marge -->| */ var x = (20+flagWidth+(530-flagWidth)/2)-17/2; switch(competitorNumber) { case 1: var country = match.competitor1.country, name = match.competitor1.name, y1l = 152.709, y2l1 = 128, y2l2 = 176.793, id1 = "NomPays1_1_", id2 = "NomPays1_2_"; break; case 2: var country = match.competitor2.country, name = match.competitor2.name, y1l = 312.598, y2l1 = 289, y2l2 = 336.779, id1 = "NomPays2_1_", id2 = "NomPays2_2_"; break; default: return; } if(country === "KSA"){ return ` Arabie saoudite ` } else if(country === "KOR"){ return ` Corée du Sud ` } else if(country === "EGY"){ return ` Égypte ` } else { return ` ${name} ` }; }35:T17d2,function getSvg(match){ var pictures = "https://www.mermoud.me/worldcup"; var flagHeight = 130; var largeurDrapeauPays1 = getFlagWidth(match.competitor1.country, flagHeight); var largeurDrapeauPays2 = getFlagWidth(match.competitor2.country, flagHeight); var nomDePays1 = placeCountriesName(match, 1, largeurDrapeauPays1); var nomDePays2 = placeCountriesName(match, 2, largeurDrapeauPays2); let nombreDeButsPays1 = match.competitor1.results.main === undefined ? "‒" : match.competitor1.results.main; let nombreDeButsPays2 = match.competitor2.results.main === undefined ? "‒" : match.competitor2.results.main; return html` `}36:[] 31:{"id":"89c23b84467ec49e","slug":"world-cup-picture-generator","title":"World Cup Picture Generator","thumbnail":"7e92041950256c0c98c2956f111fc8c13f9f84314d56730fe69f48cdf32f01fe","access_level":"public","create_time":"$D2018-06-02T19:28:42.999Z","update_time":"$D2018-06-15T11:39:18.873Z","view_time":null,"first_public_time":"$D2018-06-06T22:14:19.666Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5407a466bc5449bd","login":"nmerm","name":"Nicolas Mermoud-Ghraichy","avatar_url":"https://avatars-next.observableusercontent.com/50c135901ac6267b3a0db2d16accc2dabb23e8573268b7b7231000edae5b1e30","tier":"starter_2024"},"version":1711,"publish_version":1711,"role":null,"authored":false,"authors":[{"type":"individual","id":"8ccc1c0b9b0832bc","login":"nmerm","name":"Nicolas Mermoud-Ghraichy","avatar_url":"https://avatars-next.observableusercontent.com/50c135901ac6267b3a0db2d16accc2dabb23e8573268b7b7231000edae5b1e30","tier":null}],"members":[{"type":"individual","id":"8ccc1c0b9b0832bc","login":"nmerm","name":"Nicolas Mermoud-Ghraichy","avatar_url":"https://avatars-next.observableusercontent.com/50c135901ac6267b3a0db2d16accc2dabb23e8573268b7b7231000edae5b1e30","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"edececdc5248e6de","slug":"match-picture-generators","title":"Match Picture Generators","owner":{"id":"5407a466bc5449bd","login":"nmerm","name":"Nicolas Mermoud-Ghraichy"}},"type":"notebook","body":{"title":"World Cup Picture Generator","cells":[{"id":0,"value":"md`# World Cup Picture Generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"md`## Phase de groupes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"viewof selectedMatch = buildMatchDropdownList(groupStageMatchs)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1453,"value":"DOM.download(await rasterize(selectedMatchSvgPicture), groupStageMatchs[selectedMatch].contestInfo.phases[1].name + \"_\" + groupStageMatchs[selectedMatch].competitor1.country + \"-\" + groupStageMatchs[selectedMatch].competitor2.country + \".png\", \"Télécharger l'image pour le web (PNG)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"selectedMatchSvgPicture = getSvg(groupStageMatchs[selectedMatch])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"md`### Tableau des matchs\n\n${buildMatchTable(groupStageMatchs)}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"md`### Sources\n- **Real time competition data**: [SRG sport result centre API (swisstxt.ch)](https://www.swisstxt.ch/en/cases/srg-sport-results-centre/)\n- **Flags**: [Wikimedia Commons](https://commons.wikimedia.org/) ([Gallery of sovereign state flags](https://en.wikipedia.org/wiki/Gallery_of_sovereign_state_flags)).
\nSee also: [List of aspect ratios of national flags](https://en.wikipedia.org/wiki/List_of_aspect_ratios_of_national_flags).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1449,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1536,"value":"md`### Imports & Requirements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"md`For picture saving:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"import {serialize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"groupStageMatchs = d3.json(\"https://sport.api.swisstxt.ch/v1/eventItems?phaseIds=2606-351,2606-352,2606-353,2606-354,2606-410,2606-411,2606-439,2606-440&actuals=true&lang=fr\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1543,"value":"competitors = d3.csv(\"https://www.mermoud.me/worldcup/competitors.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"flag1 = getBase64Flag(getFlagUrl(groupStageMatchs[selectedMatch].competitor1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"flag2 = getBase64Flag(getFlagUrl(groupStageMatchs[selectedMatch].competitor2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1580,"value":"logo = getBase64Logo(\"https://gist.githubusercontent.com/nmerm/71b7ce29f7b389a26124918cb37003e5/raw/ae33eb121f1144f1538bc65bc23537fe43222346/logo.base64\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1566,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":541,"value":"function buildMatchTable(matchs){\n var i = 0;\n return md`\n N° | Date | Groupe | Nom du pays 1 | Drapeau pays 1 | Score pays 1 | Score pays 2 | Drapeau pays 2 | Nom du pays 2\n ---|---|---|---|---|---|---|---|---\n ${matchs.map(match => `${++i} | ${buildMatchRow(match)}`)\n .join(\"\\n\")\n }`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1291,"value":"function buildMatchDropdownList(matchs){\n var i = 0;\n return html`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"function getFlagWidth(countryCode, height){\n var theCountry = competitors.find(country => country.Code === countryCode);\n return Math.round(theCountry.Ratio*height*100000)/100000;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1604,"value":"function getFlagUrl(competitor){\n return \"https://www.mermoud.me/worldcup/flags/\" + competitor.country + \".svg\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"function getBase64Flag(url){\n var myFlag = fetch(url)\n .then(function(response) {\n return response.text();\n })\n .then(function(mySvg) {\n console.log(mySvg);\n return window.btoa(mySvg);\n }); \n return myFlag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1373,"value":"function getBase64Logo(url){\n var logo = fetch(url)\n .then(function(response) {\n return response.text();\n })\n .then(function(mypng) {\n console.log(mypng);\n return mypng;\n }); \n return logo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"