Tema de fondo

Introducción

¡Obi-Wan Kenobi, Qui-Gon Jinn y Darth Maul están a punto de pelear! Sin embargo, todos se han olvidado de traer sus respectivos sables de luz. Escriba un programa o función que, dada la cadena Jedicomo entrada, genere una imagen similar a esta ^* :

y dada la cadena Sith, genera una imagen similar a esta:

Especificaciones de imágenes

• Cualquiera de los 3 sables de luz (la cuchilla blanca que incluye el borde redondo en el extremo (2 bordes redondos para el rojo) y el mango incluido ) tiene 900px de largo (Esto no incluye el gradiente de color alrededor de la cuchilla).

• El borde redondo en el extremo de la cuchilla es un semicírculo (una aproximación discreta de la misma, obviamente) con un diámetro igual al ancho de la cuchilla.

• La hoja (es decir, la parte blanca del sable de luz) tiene 12 píxeles de ancho.

• Los sables de luz verde y azul están separados por 200 px (desde la línea central de la cuchilla verde hasta la línea central de la cuchilla azul).

• El mango para los 3 sables de luz es 180px (1/5 de la longitud total). Por lo tanto, la propia cuchilla, incluidos los bordes redondos, tiene 720px de largo para los sables de luz azul y verde y 360px para las dos cuchillas del sable de luz rojo.

• El mango de los sables de luz azul y verde está en la parte inferior del sable de luz. El mango del sable láser rojo está centrado horizontalmente.

• La longitud del gradiente desde el borde de la cuchilla blanca hasta un color completamente blanco es 1.5 * el ancho de la cuchilla (por ejemplo, 18px para las partes lineales).

• El degradado verde va de RGB (0,255,0) a blanco (255,255,255) (o transparente si es más fácil de implementar). El gradiente rojo va de (255,0,0) a blanco, y el gradiente azul va de (0,0,255) a blanco.

• El color del mango es RGB (128,128,128).

• Puede haber un espacio vacío blanco alrededor del sable de luz.

Entradas

Ya sea Sitho Jedicomo una cadena. Puede tomar esta cadena de STDIN, como argumento de función, parámetro de línea de comando o algo similar. Puede suponer que la entrada siempre será exactamente Sitho Jediy nada más.

Salida

Debe generar un archivo de imagen que contenga la imagen correspondiente a la cadena de entrada. Usted es relativamente libre de elegir el formato de imagen que desee, siempre que sea una imagen de Color verdadero .

Puntuación

Este es el código de golf , por lo que gana la respuesta más corta en bytes. Que la fuerza esté con usted.

^* Las imágenes en esta publicación no se muestran a tamaño completo.

Solución 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>

El refactor reciente utiliza la :targetpseudoclase en lugar de a <form>y Javascript.

Para ingresar cualquier entrada, agréguela al final de la URL como destino, por ejemplo, test.html#Jediotest.html#Sith

Aquí está de nuevo con espacios en blanco y algunos comentarios:

<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>

Los sables de luz son <table>elementos con una celda por parte (cuchilla / mango) que están ocultos a través de sus idatributos.

Las cuchillas están coloreadas con CSS box-shadowy los sables láser Jedi se someten a una transform: rotate().

Imágenes o no sucedió (haga clic para obtener una resolución completa):

Si agrega td{background:#fff}body{background:#000}al CSS, obtendrá una vista oscura genial.

Probado en Firefox y Chrome (en Linux). Tenga en cuenta que esto no cumple con los estándares, ya que estaba tratando de reducir el tamaño tanto como sea posible.

Gracias a @manatwork por border-spacingy :target.