December 21, 2016
{% capture squareColor %} #var1
{% endcapture %}
Resolvi postar algo que sempre esqueço: a tabela de cores padrão. Essas cores são usadas por todo seu jogo e vem junto com sua windowskin
. São aqueles quadradinhos embaixo e à direita da imagem.
Cada um dos quadrados representa uma cor, com o total de 32 cores. Na escala de cores para ser usada no código dos diálogos (exemplo: \c[3]esse texto é verde limão\c[0] e voltou a ser branco
), a primeira cor começa em 0 (zero).
{:.table-colors} | # | Cor | Hex | RGB | Nome aprox. | Muitas infos | | :---: | :--- | :---: | :---: | ---: | ---: | | 0 | Branco | {{ squareColor | replace: ‘var1’, ‘ffffff’ }} | 255, 255, 255 | White | White | 1 | Azul | {{ squareColor | replace: ‘var1’, ‘20a0d6’ }} | 32, 160, 214 | Curious Blue | Strong blue | | 2 | Coral | {{ squareColor | replace: ‘var1’, ‘ff784c’ }} | 255, 120, 76 | Coral | Light red | | 3 | Verde limão | {{ squareColor | replace: ‘var1’, ‘66cc40’ }} | 102, 204, 64 | Atlantis | Moderate green | | 4 | Azul bebê | {{ squareColor | replace: ‘var1’, ‘99ccff’ }} | 153, 204, 255 | Anakiwa | Very light blue | | 5 | Lilás | {{ squareColor | replace: ‘var1’, ‘ccc0ff’ }} | 204, 192, 255 | Melrose | Very pale blue | | 6 | Amarelo claro | {{ squareColor | replace: ‘var1’, ‘ffffa0’ }} | 255, 255, 160 | Milan | Pale yellow | | 7 | Cinza | {{ squareColor | replace: ‘var1’, ‘808080’ }} | 128, 128, 128 | Gray | Dark gray | | 8 | Cinza claro | {{ squareColor | replace: ‘var1’, ‘c0c0c0’ }} | 192, 192, 192 | Prata | Light gray | | 9 | Azul forte | {{ squareColor | replace: ‘var1’, ‘2080cc’ }} | 32, 128, 204 | Curious Blue | Strong Blue | | 10 | Escarlate | {{ squareColor | replace: ‘var1’, ‘ff3810’ }} | 255, 56, 16 | Scarlet | Vivid red | | 11 | Verde | {{ squareColor | replace: ‘var1’, ‘00a010’ }} | 0, 160, 16 | Japanese Laurel | Dark lime green | | 12 | Azul brilhante | {{ squareColor | replace: ‘var1’, ‘3e9ade’ }} | 62, 154, 222 | Picton Blue | Bright blue | | 13 | Roxo | {{ squareColor | replace: ‘var1’, ‘a098ff’ }} | 160, 152, 255 | Melrose | Very light blue | | 14 | Amarelo gema | {{ squareColor | replace: ‘var1’, ‘ffcc20’ }} | 255, 204, 32 | Lightning Yellow | Vivid yellow | | 15 | Preto | {{ squareColor | replace: ‘var1’, ‘000000’ }} | 0, 0, 0 | Black | Black | | 16 | Azul | {{ squareColor | replace: ‘var1’, ‘84aaff’ }} | 132, 170, 255 | Malibu | Very light blue | | 17 | Amarelo | {{ squareColor | replace: ‘var1’, ‘ffff40’ }} | 255, 255, 64 | Golden Fizz | Light yellow | | 18 | Vermelho | {{ squareColor | replace: ‘var1’, ‘ff2020’ }} | 255, 32, 32 | Torch Red | Vivid red | | 19 | Azul escuro | {{ squareColor | replace: ‘var1’, ‘202040’ }} | 32, 32, 64 | Mirage | Very dark desaturated blue | | 20 | Laranja | {{ squareColor | replace: ‘var1’, ‘e08040’ }} | 224, 128, 64 | Red Damask | Bright orange | | 21 | Amarelo | {{ squareColor | replace: ‘var1’, ‘f0c040’ }} | 240, 192, 64 | Ronchi | Bright orange | | 22 | Azul | {{ squareColor | replace: ‘var1’, ‘4080c0’ }} | 64, 128, 192 | Steel Blue | Moderate blue | | 23 | Ciano | {{ squareColor | replace: ‘var1’, ‘40c0f0’ }} | 64, 192, 240 | Picton Blue | Bright blue | | 24 | Menta | {{ squareColor | replace: ‘var1’, ‘80ff80’ }} | 64, 192, 240 | Mint Green | Very light lime green | | 25 | Vermelho pálido | {{ squareColor | replace: ‘var1’, ‘c08080’ }} | 192, 128, 128 | Old Rose | Slightly desaturated red | | 26 | Azul pálido | {{ squareColor | replace: ‘var1’, ‘8080ff’ }} | 128, 128, 255 | Malibu | Very light blue | | 27 | Rosa | {{ squareColor | replace: ‘var1’, ‘ff80ff’ }} | 255, 128, 255 | Blush Pink | Very light magenta | | 28 | Verde ciano | {{ squareColor | replace: ‘var1’, ‘00a040’ }} | 0, 160, 64 | Green Haze | Dark cyan - lime green | | 29 | Verde ciano | {{ squareColor | replace: ‘var1’, ‘00e060’ }} | 0, 224, 96 | Malachite | Pure (or mostly pure) cyan - lime green | | 30 | Roxo | {{ squareColor | replace: ‘var1’, ‘a060e0’ }} | 160, 96, 224 | Medium Purple | Soft violet | | 31 | Violeta | {{ squareColor | replace: ‘var1’, ‘c080ff’ }} | 192, 128, 255 | Heliotrope | Very light violet |
Infelizmente o markdown quebra se eu usar um include
para inserir os quadradinhos na tabela via liquid tag
. Então tive que fazer manualmente cada um inline! Entretanto, arrumei um jeito um pouco mais DRY de fazer os quadrinhos. Criei uma variável, a capturei e depois, ao chamá-la, dou um replace apenas na cor.
Minha variável:
{% raw %}
{% capture squareColor %}
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" width="16" height="16" fill="var1"></rect>
</svg> `var1`
{% endcapture %}
{% endraw %}
E então chamo assim:
{% raw %}
{{ squareColor | replace: 'var1', '#ffffff' }}
{% endraw %}
Eu poderia ter feito isso para os links também. Talvez eu o faça, mas só pensei isso agora, no fim do documento. Fica pra uma próxima? :+1: