Tema di sfondo

introduzione

Obi-Wan Kenobi, Qui-Gon Jinn e Darth Maul stanno per combattere! Tuttavia, si sono tutti dimenticati di portare le rispettive spade laser. Scrivi un programma o una funzione che, data la stringa Jedicome input, genera un'immagine simile a questa ^* :

e data la stringa Sith, genera un'immagine simile a questa:

Specifiche delle immagini

• Una delle 3 spade laser (la lama bianca compreso il bordo arrotondato all'estremità (2 bordi arrotondati per quello rosso) e compresa la maniglia ) è lunga 900 px (questo non include il gradiente di colore attorno alla lama).

• Il bordo arrotondato all'estremità della lama è un semicerchio (una sua approssimazione discreta, ovviamente) con un diametro uguale alla larghezza della lama.

• La lama (ovvero la parte bianca della spada laser) è larga 12 pixel.

• Le spade laser verde e blu sono separate da 200 px (dalla linea centrale della lama verde alla linea centrale della lama blu).

• L'impugnatura per tutte e 3 le spade laser è 180px (1/5 della lunghezza totale). Pertanto la lama stessa, incluso il / i bordo / i arrotondato / i, è lunga 720px per le spade laser blu e verde e 360px per le due lame della spada laser rossa.

• La maniglia per le spade laser blu e verde è nella parte inferiore della spada laser. L'impugnatura per la spada laser rossa è centrata orizzontalmente.

• La lunghezza del gradiente dal bordo della lama bianca a un colore completamente bianco è 1,5 * la larghezza della lama (ad esempio 18px per le parti lineari).

• Il gradiente verde va da RGB (0,255,0) a bianco (255,255,255) (o trasparente se è più facile da implementare). Il gradiente rosso va da (255,0,0) al bianco e il gradiente blu da (0,0,255) al bianco.

• Il colore della maniglia è RGB (128.128.128).

• Ci possono essere spazi vuoti bianchi attorno alla spada laser.

ingressi

Sia Sitho Jedicome una stringa. Puoi prendere questa stringa da STDIN, come argomento di funzione, parametro della riga di comando o qualcosa di simile. Si può presumere che l'input sarà sempre esattamente Sitho Jediniente altro.

Produzione

È necessario generare un file di immagine contenente l'immagine corrispondente alla stringa di input. Sei relativamente libero di scegliere il formato immagine che desideri, purché sia ​​un'immagine True Color .

punteggio

Questo è code-golf , quindi vince la risposta più breve in byte. Che la forza sia con te.

^* Le immagini in questo post non vengono visualizzate a grandezza naturale.

Soluzione HTML / CSS, 765 740 541 byte

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

Il recente refactor utilizza la :targetpseudo-classe anziché a <form>e Javascript.

Per inserire uno dei due input, aggiungilo alla fine dell'URL come target, ad es. test.html#JediOtest.html#Sith

Eccolo di nuovo con spazi bianchi e alcuni commenti:

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

Le spade laser sono <table>elementi con una cella per parte (lama / impugnatura) che sono nascosti tramite i loro idattributi.

Le lame sono colorate con CSS box-shadowe le spade laser Jedi subiscono a transform: rotate().

Immagini o non è accaduto (fare clic per la risoluzione completa):

Se aggiungi td{background:#fff}body{background:#000}al CSS, otterrai una bella vista scura.

Testato su Firefox e Chrome (su Linux). Si noti che questo non è affatto conforme agli standard, poiché stavo cercando di ridurre le dimensioni il più possibile.

Grazie a @manatwork per border-spacinge :target.