2d:null 2e:["$","title",null,{"children":"Custom Match Picture Generator | Nicolas Mermoud-Ghraichy | Observable"}] 33:T800,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} `; } }34:T17e3,function getSvg(match){ var pictures = "https://www.mermoud.me/worldcup"; var flagHeight = 130; var largeurDrapeauPays1 = getFlagWidth(flag1Svg, flagHeight); var largeurDrapeauPays2 = getFlagWidth(flag2Svg, 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` `}35:[] 31:{"id":"7f5fd1065e94b49b","slug":"custom-match-picture-generator","title":"Custom Match Picture Generator","thumbnail":"0ae47ab92700e0771bcfe89fe827ca70f7e8ced5119281c5ae09d1d572df22f5","access_level":"public","create_time":"$D2018-06-10T03:48:33.045Z","update_time":"$D2023-02-11T22:46:12.732Z","view_time":null,"first_public_time":"$D2018-06-14T13:04:53.397Z","has_unpublished_edits":null,"fork":{"id":"89c23b84467ec49e","slug":"world-cup-picture-generator","title":"World Cup Picture Generator","owner":{"id":"5407a466bc5449bd","login":"nmerm","name":"Nicolas Mermoud-Ghraichy"}},"stars":1,"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":2247,"publish_version":null,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"edececdc5248e6de","slug":"match-picture-generators","title":"Match Picture Generators","owner":{"id":"5407a466bc5449bd","login":"nmerm","name":"Nicolas Mermoud-Ghraichy"}},"type":"notebook","body":{"title":"Custom Match Picture Generator","cells":[{"id":0,"value":"md`# Custom Match Picture Generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1334,"value":"md`## Match personnalisé`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"viewof customMatchCountry1 = getCountryDropdownList(competitors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"viewof customMatchCountry1Score = getScoreInput()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1716,"value":"viewof customMatchCountry2 = getCountryDropdownList(competitors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"viewof customMatchCountry2Score = getScoreInput()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1728,"value":"viewof encart = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1709,"value":"customMatchSvgPicture = getSvg(customMatch)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2212,"value":"DOM.download(await rasterize(customMatchSvgPicture), customMatch.contestInfo.phases[1].name + \"_\" + customMatch.competitor1.country + \"-\" + customMatch.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":2109,"value":"DOM.download(await serialize(customMatchSvgPicture), customMatch.contestInfo.phases[1].name + \"_\" + customMatch.competitor1.country + \"-\" + customMatch.competitor2.country + \".svg\", \"Télécharger l'image vectorielle (SVG)\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1498,"value":"md`### Sources\n**FIFA countries** : [List of FIFA country codes](https://en.wikipedia.org/wiki/List_of_FIFA_country_codes), [Liste des codes pays de la FIFA](https://fr.wikipedia.org/wiki/Liste_des_codes_pays_de_la_FIFA)
\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":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, 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":1543,"value":"competitors = d3.csv(\"https://gist.githubusercontent.com/nmerm/2ffbbb6ddaf0448bbe6852e19d4901f0/raw/112372dd5902000cfd9cb5b0485b3511cd2fe511/fifacountries.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"flag1 = getBase64Flag(getFlagUrl(customMatch.competitor1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2051,"value":"flag1Svg = getFlagSvg(getFlagUrl(customMatch.competitor1))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1578,"value":"flag2 = getBase64Flag(getFlagUrl(customMatch.competitor2))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2053,"value":"flag2Svg = getFlagSvg(getFlagUrl(customMatch.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":1604,"value":"function getFlagUrl(competitor){\n return competitor.FlagURL;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2069,"value":"function getFlagFromSource(url){\n var myFlag = fetch(url)\n .then(function(response) {\n return response.text();\n }); \n return myFlag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1936,"value":"function getFlagSvg(url){\n var div = html`

`;\n var myFlag = getFlagFromSource(url)\n .then(function(response){\n div.insertAdjacentHTML('afterbegin', response);\n return div;\n });\n return myFlag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"function getBase64Flag(url){\n var myFlag = getFlagFromSource(url)\n .then(function(mySvg) {\n console.log(mySvg);\n return window.btoa(unescape(encodeURIComponent(mySvg)))\n }); \n return myFlag;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2022,"value":"function getFlagRatio(svgFlag){\n var svg = svgFlag.children[0];\n var bBox = svg.getBBox();\n var ratio = bBox.width / bBox.height;\n console.log(ratio);\n return ratio;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"function getFlagWidth(flagSvg, height){\n var flagRatio = getFlagRatio(flagSvg);\n console.log(\"Flag ratio : \" + flagRatio)\n var flagWidth = Math.round(flagRatio*height*100000)/100000;\n console.log(\"Flag width : \" + flagWidth)\n \n if(flagRatio>2){\n flagWidth = 260;\n };\n return flagWidth;\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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1596,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1646,"value":"function getCountry(countryCode){\n return competitors.find(country => country.Code === countryCode);\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1607,"value":"function defineCustomMatch(competitor1CountryCode, competitor2CountryCode, score, encart){\n var competitor1 = getCountry(competitor1CountryCode);\n var competitor2 = getCountry(competitor2CountryCode);\n var match = {\n \"competitor1\" : competitor1,\n \"competitor2\" : competitor2 \n };\n match.competitor1.name = match.competitor1.NomDePays;\n match.competitor2.name = match.competitor2.NomDePays;\n match.competitor1.country = match.competitor1.Code;\n match.competitor2.country = match.competitor2.Code;\n match.competitor1.results = { \"main\" : score[0] };\n match.competitor2.results = { \"main\" : score[1] };\n match.contestInfo = {\n \"phases\" : [\n {},\n {\"name\" : encart}\n ]};\n return match;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"function getCountryDropdownList(competitors){\n var i = 0;\n return html`\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1664,"value":"function getScoreInput(){\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"customMatch = defineCustomMatch(\n customMatchCountry1,\n customMatchCountry2,\n [customMatchCountry1Score, customMatchCountry2Score],\n encart\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1795,"value":"function getTexteEncart(match){\n return html``}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"texteEncartCustomMatch = getTexteEncart(customMatch)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1799,"value":"largeurTexteEncart = texteEncartCustomMatch.getElementsByTagName(\"text\")[0].getBBox().width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2244,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"