{"id":160,"date":"2023-05-12T23:00:12","date_gmt":"2023-05-12T23:00:12","guid":{"rendered":"https:\/\/serginho.dev\/?p=160"},"modified":"2023-05-13T16:24:05","modified_gmt":"2023-05-13T16:24:05","slug":"scoreboard-partidas-lichess","status":"publish","type":"post","link":"https:\/\/serginho.dev\/scoreboard-partidas-lichess\/","title":{"rendered":"Scoreboard de Partidas do Lichess para Streamer de Xadrez"},"content":{"rendered":"<div class=\"wp-block-image is-style-default\">\n<figure class=\"aligncenter size-large\"><img data-dominant-color=\"6e6f76\" data-has-transparency=\"false\" style=\"--dominant-color: #6e6f76;\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/Screenshot_2023-04-05_00-04-51-1024x576.png\" alt=\"Simulando um placar de partida no lichess\" class=\"not-transparent wp-image-174\" srcset=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/Screenshot_2023-04-05_00-04-51-1024x576.png 1024w, https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/Screenshot_2023-04-05_00-04-51-300x169.png 300w, https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/Screenshot_2023-04-05_00-04-51-768x432.png 768w, https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/Screenshot_2023-04-05_00-04-51-1536x864.png 1536w, https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/Screenshot_2023-04-05_00-04-51.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\">Simulando o Scorebord numa live num jogador<\/figcaption><\/figure><\/div>\n\n\n<p>Sempre que vejo lives de xadrez como do <a href=\"https:\/\/www.twitch.tv\/gmkrikor\" data-type=\"URL\" data-id=\"https:\/\/www.twitch.tv\/gmkrikor\" target=\"_blank\" rel=\"noreferrer noopener\">Krikor<\/a> via normalmente um Scoreboard que mostrava como estava os jogos do dia (quantas ganhou, empatou e perdeu). Mas as vezes \u00e9 complicado encontrar um que fa\u00e7a o mesmo sem ser manual.<\/p>\n\n\n\n<p>Ent\u00e3o que fa\u00e7o Lives na <a href=\"https:\/\/www.twitch.tv\/sergioglorias\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.twitch.tv\/sergioglorias\" rel=\"noreferrer noopener\">Twitch<\/a> (e replicando no YouTube) e ultimamente de xadrez, queria ter um Scoreboard para mostrar como est\u00e1 os jogos do dia para pessoal!<\/p>\n\n\n\n<p>J\u00e1 que estou ultimamente jogando no <a href=\"https:\/\/lichess.org\/\" data-type=\"URL\" data-id=\"https:\/\/lichess.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lichess<\/a> comecei por explorar como a API do site ent\u00e3o decidi fazer um c\u00f3digo daqueles que se abre no navegador e aparece alguma coisa. \ud83e\udd2d<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"> Vamos l\u00e1 ao c\u00f3digo!<\/h2>\n\n\n\n<p>O c\u00f3digo \u00e9 simples: uma tabela que mostra as <strong>Vit\u00f3rias<\/strong>, <strong>Empates<\/strong>, <strong>Derrotas<\/strong> e a <strong>Diferen\u00e7a<\/strong> sendo que:<\/p>\n\n\n\n<ul>\n<li>As <strong>Vit\u00f3rias<\/strong> valem 1 ponto cada.<\/li>\n\n\n\n<li>As <strong>Derrotas<\/strong> valem -1 ponto.<\/li>\n\n\n\n<li>Os <strong>Empates<\/strong> valem 0,5 pontos.<\/li>\n\n\n\n<li>A <strong>Diferen\u00e7a<\/strong> \u00e9 a soma desses pontos.<\/li>\n<\/ul>\n\n\n\n<p>A cada 30 segundos ele ir\u00e1 fazer uma requisi\u00e7\u00e3o na API do Lichess para verificar se alguma partida foi completa e atualizar o placar (scoreboard).<\/p>\n\n\n\n<p>Assim que for atualizado a p\u00e1gina o placar ser\u00e1 resetado!<\/p>\n\n\n\n<p>E existem 3 tipos de placar, abas tem a mesma fun\u00e7\u00e3o, contudo os textos s\u00e3o diferentes.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Portugu\u00eas<\/h3>\n\n\n\n<p>Texto do cabe\u00e7alho estar\u00e1 em portugu\u00eas.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img data-dominant-color=\"ededed\" data-has-transparency=\"false\" style=\"--dominant-color: #ededed;\" loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"106\" src=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-2.png\" alt=\"\" class=\"not-transparent wp-image-181\" srcset=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-2.png 350w, https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-2-300x91.png 300w\" sizes=\"(max-width: 350px) 100vw, 350px\" \/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-2 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-dominant-color=\"efefef\" data-has-transparency=\"false\" style=\"--dominant-color: #efefef;\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-1-2.png\" alt=\"\" class=\"not-transparent wp-image-184\" width=\"290\" height=\"111\"\/><\/figure><\/div><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Ingl\u00eas<\/h3>\n\n\n\n<p>Texto do cabe\u00e7alho estar\u00e1 em ingl\u00eas.<\/p>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-layout-3 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Short<\/h3>\n\n\n\n<p>Texto do cabe\u00e7alho estar\u00e1 com as siglas do ingl\u00eas.<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\"><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-dominant-color=\"eeeeee\" data-has-transparency=\"false\" style=\"--dominant-color: #eeeeee;\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-3-1.png\" alt=\"\" class=\"not-transparent wp-image-185\" width=\"207\" height=\"128\"\/><\/figure><\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Ok! Agora como eu a uso?<\/h2>\n\n\n\n<p>Para come\u00e7ar existem 3 maneiras de obter o link para adicionar no seu OBS na fonte de navegador e vou mostrar:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">a) Preencher o formul\u00e1rio \u2014 F\u00e1cil<\/h3>\n\n\n\n<p>Ao preencher ao formul\u00e1rio abaixo ir\u00e1 abrir uma nova aba do navegador com o link gerado.<\/p>\n\n\n\n<div class=\"forminator-guttenberg\"><div class=\"forminator-ui forminator-custom-form forminator-custom-form-171 forminator-design--material  forminator_ajax\" data-forminator-render=\"0\" data-form=\"forminator-module-171\" data-uid=\"65847ab0098d6\"><br\/><\/div><form\n\t\t\t\tid=\"forminator-module-171\"\n\t\t\t\tclass=\"forminator-ui forminator-custom-form forminator-custom-form-171 forminator-design--material  forminator_ajax\"\n\t\t\t\tmethod=\"post\"\n\t\t\t\tdata-forminator-render=\"0\"\n\t\t\t\tdata-form-id=\"171\"\n\t\t\t\t\n\t\t\t\tdata-design=\"material\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tdata-grid=\"open\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t\tstyle=\"display: none;\"\n\t\t\t\t\n\t\t\t\tdata-uid=\"65847ab0098d6\"\n\t\t\t><div role=\"alert\" aria-live=\"polite\" class=\"forminator-response-message forminator-error\" aria-hidden=\"true\"><\/div><div class=\"forminator-row\"><div id=\"text-1\" class=\"forminator-field-text forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-field-text-1_65847ab0098d6\" class=\"forminator-label\" id=\"forminator-field-text-1_65847ab0098d6-label\">Nickname do Lichess <span class=\"forminator-required\">*<\/span><\/label><input type=\"text\" name=\"text-1\" value=\"\" placeholder=\"Nickname\" id=\"forminator-field-text-1_65847ab0098d6\" class=\"forminator-input forminator-name--field\" data-required=\"1\" \/><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"select-1\" class=\"forminator-field-select forminator-col forminator-col-12 \"><div class=\"forminator-field\"><label for=\"forminator-form-171__field--select-1_65847ab0098d6\" id=\"forminator-form-171__field--select-1_65847ab0098d6-label\" class=\"forminator-label\">Tipo do Placar <span class=\"forminator-required\">*<\/span><\/label><select id=\"forminator-form-171__field--select-1_65847ab0098d6\" class=\"forminator-select--field forminator-select2\" data-required=\"1\" name=\"select-1\" data-default-value=\"\/\" data-hidden-behavior=\"zero\" data-placeholder=\"Please select an option\" data-search=\"false\" aria-labelledby=\"forminator-form-171__field--select-1_65847ab0098d6-label\" aria-describedby=\"forminator-form-171__field--select-1_65847ab0098d6-description\"><option value=\"\">Please select an option<\/option><option value=\"\/\" selected=\"selected\" data-calculation=\"0\">Short<\/option><option value=\"\/en\/\"  data-calculation=\"0\">Ingl\u00eas<\/option><option value=\"\/pt\/\"  data-calculation=\"0\">Portugu\u00eas<\/option><\/select><\/div><\/div><\/div><div class=\"forminator-row\"><div id=\"group-1\" class=\"forminator-field-group forminator-col forminator-col-12 \"><label class=\"forminator-label forminator-repeater-label\">Placar come\u00e7a:<\/label><div class=\"forminator-all-group-copies forminator-repeater-field\"><div class=\"forminator-grouped-fields\" data-options=\"{&quot;is_repeater&quot;:false,&quot;min_type&quot;:&quot;custom&quot;,&quot;max_type&quot;:&quot;custom&quot;,&quot;min&quot;:1,&quot;max&quot;:9223372036854775807,&quot;add_text&quot;:&quot;Add item&quot;,&quot;remove_text&quot;:&quot;Remove item&quot;,&quot;action_element_type&quot;:&quot;icon&quot;}\"><div class=\"forminator-row\"><div id=\"number-1\" class=\"forminator-field-number forminator-col forminator-col-4 \"><div class=\"forminator-field\"><label for=\"forminator-field-number-1_65847ab0098d6\" class=\"forminator-label\" id=\"forminator-field-number-1_65847ab0098d6-label\">Vit\u00f3ria<\/label><input name=\"number-1\" value=\"0\" placeholder=\"0\" id=\"forminator-field-number-1_65847ab0098d6\" class=\"forminator-input forminator-number--field\" inputmode=\"decimal\" data-required=\"\" data-decimals=\"0\" aria-required=\"false\" data-inputmask=\"&#039;groupSeparator&#039;: &#039;&#039;, &#039;radixPoint&#039;: &#039;&#039;, &#039;digits&#039;: &#039;0&#039;\" data-hidden-behavior=\"zero\" type=\"number\" step=\"any\" min=\"0\" max=\"1000\" \/><\/div><\/div><div id=\"number-2\" class=\"forminator-field-number forminator-col forminator-col-4 \"><div class=\"forminator-field\"><label for=\"forminator-field-number-2_65847ab0098d6\" class=\"forminator-label\" id=\"forminator-field-number-2_65847ab0098d6-label\">Empate<\/label><input name=\"number-2\" value=\"0\" placeholder=\"0\" id=\"forminator-field-number-2_65847ab0098d6\" class=\"forminator-input forminator-number--field\" inputmode=\"decimal\" data-required=\"\" data-decimals=\"0\" aria-required=\"false\" data-inputmask=\"&#039;groupSeparator&#039;: &#039;&#039;, &#039;radixPoint&#039;: &#039;&#039;, &#039;digits&#039;: &#039;0&#039;\" data-hidden-behavior=\"zero\" type=\"number\" step=\"any\" min=\"0\" max=\"1000\" \/><\/div><\/div><div id=\"number-3\" class=\"forminator-field-number forminator-col forminator-col-4 \"><div class=\"forminator-field\"><label for=\"forminator-field-number-3_65847ab0098d6\" class=\"forminator-label\" id=\"forminator-field-number-3_65847ab0098d6-label\">Derrota<\/label><input name=\"number-3\" value=\"0\" placeholder=\"0\" id=\"forminator-field-number-3_65847ab0098d6\" class=\"forminator-input forminator-number--field\" inputmode=\"decimal\" data-required=\"\" data-decimals=\"0\" aria-required=\"false\" data-inputmask=\"&#039;groupSeparator&#039;: &#039;&#039;, &#039;radixPoint&#039;: &#039;&#039;, &#039;digits&#039;: &#039;0&#039;\" data-hidden-behavior=\"zero\" type=\"number\" step=\"any\" min=\"0\" max=\"1000\" \/><\/div><\/div><\/div><\/div><\/div><\/div><\/div><input type=\"hidden\" name=\"referer_url\" value=\"\" \/><div class=\"forminator-row forminator-row-last\"><div class=\"forminator-col\"><div class=\"forminator-field\"><button class=\"forminator-button forminator-button-submit\"><span>Gerar Link<\/span><span aria-hidden=\"true\"><\/span><\/button><\/div><\/div><\/div><input type=\"hidden\" id=\"forminator_nonce\" name=\"forminator_nonce\" value=\"3f8853c4dc\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/wp-json\/wp\/v2\/posts\/160?simply_static_page=429\" \/><input type=\"hidden\" name=\"form_id\" value=\"171\"><input type=\"hidden\" name=\"page_id\" value=\"160\"><input type=\"hidden\" name=\"form_type\" value=\"default\"><input type=\"hidden\" name=\"current_url\" value=\"https:\/\/serginho.dev\/scoreboard-partidas-lichess\/\"><input type=\"hidden\" name=\"render_id\" value=\"0\"><input type=\"hidden\" name=\"action\" value=\"forminator_submit_form_custom-forms\"><\/form><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">b) Gerar o link voc\u00ea mesmo \u2014 M\u00e9dio<\/h3>\n\n\n\n<p>O link base da ferramenta \u00e9: <\/p>\n\n\n\n<ul>\n<li><strong><code>https:\/\/chess-stream.slaycer.top\/lichess\/score<\/code><\/strong>\u00a0(Short)<\/li>\n\n\n\n<li><strong><code>https:\/\/chess-stream.slaycer.top\/pt\/lichess\/score<\/code><\/strong>\u00a0(Portugu\u00eas)<\/li>\n\n\n\n<li><strong><code>https:\/\/chess-stream.slaycer.top\/en\/lichess\/score<\/code><\/strong>\u00a0(Ingl\u00eas)<\/li>\n<\/ul>\n\n\n\n<p>Para voc\u00ea configurar o seu nickname deve inserir <code>?user=<strong>NICKNAME<\/strong><\/code>&nbsp;(sendo que <code>NICKNAME<\/code>&nbsp;deve ser alterado pelo seu nickname). Deixando, por exemplo, <code>https:\/\/chess-stream.slaycer.top\/lichess\/score?user=NICKNAME<\/code><\/p>\n\n\n\n<p>Caso queira alterar o in\u00edcio do placar (por exemplo) iniciar com 5 vit\u00f3rias, 1 emapte e 2 derrotas, voc\u00ea pode adicionando <code>&amp;w=<strong>5<\/strong>&amp;d=<strong>1<\/strong>&amp;l=<strong>2<\/strong><\/code>&nbsp;(sendo que <code>w<\/code> \u00e9 de vit\u00f3ria, <code>d<\/code> de empate e <code>l<\/code>&nbsp;\u00e9 de derrota) no final do link<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img data-dominant-color=\"ededed\" data-has-transparency=\"false\" style=\"--dominant-color: #ededed;\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-8.png\" alt=\"\" class=\"not-transparent wp-image-192\" width=\"533\" height=\"319\" srcset=\"https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-8.png 763w, https:\/\/serginho.dev\/wp-content\/uploads\/2023\/05\/image-8-300x179.png 300w\" sizes=\"(max-width: 533px) 100vw, 533px\" \/><figcaption class=\"wp-element-caption\">Exemplo do placar iniciado<\/figcaption><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">c) Baixar o c\u00f3digo e executar no seu PC \u2014 Dif\u00edcil<\/h3>\n\n\n\n<p>Baixar o c\u00f3digo-fonte para executar \u00e9 mais complexo para quem n\u00e3o afinidade com c\u00f3digos, mas caso queira:<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-layout-1 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-vivid-purple-background-color has-background wp-element-button\" href=\"https:\/\/github.com\/SergioGlorias\/Chess-Stream-Tools\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a><\/div>\n<\/div>\n\n\n\n<p>Ap\u00f3s pegar o c\u00f3digo no OBS na fonte do navegador a configure para abrir um ficheiro em vez de um link num site e por fim seria as mesmas regras do t\u00f3pico <strong>b)<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Tudo em ordem! Mais alguma coisa?<\/h2>\n\n\n\n<p>N\u00e3o, ap\u00f3s adicionar o URL no OBS e mostrar que est\u00e1 a funcionar! \u00c9 s\u00f3 jogar pelo menos uma partida (pode at\u00e9 ser com um Bot) para verificar se est\u00e1 tudo em ordem. E agora comessem os jogos!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclus\u00e3o<\/h2>\n\n\n\n<p>\u00c9 um c\u00f3digo simples, mas f\u00e1cil para quem queira ter alguma coisa para a suas lives de xadrez!<\/p>\n\n\n\n<p>Caso queira melhorar alguma coisa no c\u00f3digo, voc\u00ea pode entrar no <a href=\"https:\/\/github.com\/SergioGlorias\/Chess-Stream-Tools\" data-type=\"URL\" data-id=\"https:\/\/github.com\/SergioGlorias\/Chess-Stream-Tools\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub<\/a> e dar alguma dica! \ud83d\ude09<\/p>\n\n\n\n<p>Caso alguma coisa, estarei no Fediverse para responder as suas quest\u00f5es.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc\u00ea est\u00e1 a procura por um Scoreboard para mostrar como est\u00e1 o score das partidas em livestream? Aqui tem como ter!<\/p>\n","protected":false},"author":1,"featured_media":174,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,70,77],"tags":[78,74,80,75,76,79],"_links":{"self":[{"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/posts\/160"}],"collection":[{"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/comments?post=160"}],"version-history":[{"count":0,"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/posts\/160\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/media\/174"}],"wp:attachment":[{"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/media?parent=160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/categories?post=160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/serginho.dev\/wp-json\/wp\/v2\/tags?post=160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}