Thème de fond

introduction

Obi-Wan Kenobi, Qui-Gon Jinn et Dark Maul sont sur le point de se battre! Cependant, ils ont tous oublié d'apporter leurs sabres laser respectifs. Écrivez un programme ou une fonction qui, étant donné la chaîne Jedien entrée, génère une image similaire à ceci ^* :

et étant donné la chaîne Sith, génère une image similaire à ceci:

Spécifications des images

• L'un des 3 sabres laser (la lame blanche, y compris le bord rond à la fin (2 bords ronds pour le rouge) et y compris la poignée ), a une longueur de 900 pixels (cela n'inclut pas le dégradé de couleurs autour de la lame).

• Le bord rond à l'extrémité de la lame est un demi-cercle (une approximation discrète de celui-ci, évidemment) avec un diamètre égal à la largeur de la lame.

• La lame (c'est-à-dire la partie blanche du sabre laser) a une largeur de 12 pixels.

• Les sabres laser verts et bleus sont séparés de 200 px (de la ligne centrale de la lame verte à la ligne centrale de la lame bleue).

• La poignée des 3 sabres laser mesure 180 pixels (1/5 de la longueur totale). Par conséquent, la lame elle-même, y compris le ou les bords ronds, mesure 720 pixels pour les sabres laser bleu et vert et 360 pixels pour les deux lames du sabre laser rouge.

• La poignée des sabres laser bleu et vert se trouve en bas du sabre laser. La poignée du sabre laser rouge est centrée horizontalement.

• La longueur du dégradé du bord de la lame blanche à une couleur complètement blanche est de 1,5 * la largeur de la lame (par exemple 18px pour les parties linéaires).

• Le dégradé vert passe de RVB (0,255,0) au blanc (255,255,255) (ou transparent s'il est plus facile à mettre en œuvre). Le dégradé rouge passe de (255,0,0) au blanc, et le dégradé bleu va de (0,0,255) au blanc.

• La couleur de la poignée est RVB (128, 128, 128).

• Il peut y avoir un espace vide blanc autour du ou des sabres laser.

Contributions

Soit Sithou Jedisous forme de chaîne. Vous pouvez prendre cette chaîne de STDIN, comme argument de fonction, paramètre de ligne de commande ou quelque chose de similaire. Vous pouvez supposer que l'entrée sera toujours exactement Sithou Jedirien d'autre.

Production

Vous devez générer un fichier image contenant l'image correspondant à la chaîne d'entrée. Vous êtes relativement libre de choisir le format d'image que vous souhaitez, tant qu'il s'agit d'une image True Color .

Notation

Il s'agit de code-golf , donc la réponse la plus courte en octets l'emporte. Que la force soit avec toi.

^* Les images de ce message ne sont pas affichées en taille réelle.

Solution HTML / CSS, 765 740 541 octets

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

Le refactorisme récent utilise la :targetpseudo-classe plutôt qu'un <form>et Javascript.

Pour saisir une entrée, ajoutez-la à la fin de l'URL comme cible, par exemple test.html#Jedioutest.html#Sith

Le voici à nouveau avec un espace et quelques commentaires:

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

Les sabres laser sont des <table>éléments avec une cellule par pièce (lame / poignée) qui ne sont pas cachés via leurs idattributs.

Les lames sont colorées avec des CSS box-shadowet les sabres laser Jedi subissent un transform: rotate().

Images ou cela ne s'est pas produit (cliquez pour la résolution complète):

Si vous ajoutez td{background:#fff}body{background:#000}au CSS, vous obtiendrez une vue sombre et cool.

Testé sous Firefox et Chrome (sous Linux). Notez que ce n'est pas du tout conforme aux normes, car j'essayais de réduire la taille autant que possible.

Merci à @manatwork pour border-spacinget :target.