Tema de fundo

Introdução

Obi-Wan Kenobi, Qui-Gon Jinn e Darth Maul estão prestes a lutar! No entanto, todos eles se esqueceram de trazer seus respectivos sabres de luz. Escreva um programa ou função que, dada a string Jedicomo entrada, gere uma imagem semelhante a esta ^* :

e, dada a string Sith, gera uma imagem semelhante a esta:

Especificações das imagens

• Qualquer um dos três sabres de luz (a lâmina branca, incluindo a borda redonda no final (2 bordas redondas para a vermelha) e a alça ) tem 900 px de comprimento (isso não inclui o gradiente de cor ao redor da lâmina).

• A aresta redonda no final da lâmina é um meio-círculo (uma aproximação discreta dela, obviamente) com um diâmetro igual à largura da lâmina.

• A lâmina (ou seja, a parte branca do sabre de luz) tem 12px de largura.

• Os sabres de luz verde e azul são separados por 200 px (da linha central da lâmina verde à linha central da lâmina azul).

• A alça para todos os 3 sabres de luz é de 180 px (1/5 do comprimento total). Portanto, a lâmina em si, incluindo a (s) borda (s) redonda (s), tem 720px para os sabres de luz azuis e verdes e 360px para as duas lâminas do sabre de luz vermelho.

• A alça dos sabres de luz azul e verde fica na parte inferior do sabre de luz. A alça do sabre de luz vermelho é centralizada horizontalmente.

• O comprimento do gradiente desde a borda da lâmina branca até uma cor completamente branca é 1,5 * a largura da lâmina (por exemplo, 18 px para as partes lineares).

• O gradiente verde passa de RGB (0,255,0) para branco (255,255,255) (ou transparente, se for mais fácil para você implementar). O gradiente vermelho passa de (255,0,0) para branco e o gradiente azul passa de (0,0,255) para branco.

• A cor da alça é RGB (128,128,128).

• Pode haver um espaço vazio em branco ao redor do (s) sabre (s) de luz.

Entradas

Quer Sithou Jedicomo uma string. Você pode pegar essa string no STDIN, como um argumento de função, parâmetro de linha de comando ou algo semelhante. Você pode assumir que a entrada será sempre exatamente Sithou Jedinada mais.

Resultado

Você deve gerar um arquivo de imagem contendo a imagem correspondente à sequência de entrada. Você é relativamente livre para escolher o formato de imagem que desejar, desde que seja uma imagem True Color .

Pontuação

Isso é código-golfe , então a resposta mais curta em bytes vence. Que a força esteja com você.

^* As imagens neste post não são exibidas em tamanho real.

Solução HTML / CSS, 765 740 541 bytes

<style>[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}</style><div id=Jedi><table><td><td></table><table><td><td></table></div><table id=Sith><td><td><td></table>

O refator recente usa a :targetpseudo classe em vez de a <form>e Javascript.

Para inserir uma entrada, adicione-a no final do URL como destino, por exemplo, test.html#Jedioutest.html#Sith

Aqui está novamente com espaço em branco e alguns comentários:

<style>
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  td:nth-last-child(2) {
    background:#888; width:180px; box-shadow:none!important }
</style>
<div id=Jedi>
  <table><td><td></table>
  <table><td><td></table>
</div>
<table id=Sith><td><td><td></table>

Os sabres de luz são <table>elementos com uma célula por peça (lâmina / alça) que não são ocultados por meio de seus idatributos.

As lâminas são coloridas com CSS box-shadowe os sabres de luz Jedi passam por um transform: rotate().

Fotos ou isso não aconteceu (clique para obter as resoluções completas):

Se você adicionar td{background:#fff}body{background:#000}ao CSS, obterá uma visão escura legal.

Testado no Firefox e Chrome (no Linux). Observe que isso não é totalmente compatível com os padrões, pois eu estava tentando reduzir o tamanho o máximo possível.

Obrigado a @manatwork por border-spacinge :target.