Hintergrundthema

Einführung

Obi-Wan Kenobi, Qui-Gon Jinn und Darth Maul stehen kurz vor dem Kampf! Sie haben jedoch alle vergessen, ihre jeweiligen Lichtschwerter mitzubringen. Schreiben Sie ein Programm oder eine Funktion, die mit der Zeichenfolge Jedials Eingabe ein Bild ähnlich dem folgenden erzeugt ^* :

und die Zeichenfolge gegeben Sith, erzeugt ein Bild ähnlich dem folgenden:

Bildspezifikationen

• Jede der 3 Lichtschwerter (die weiße Klinge einschließlich der Rundkante am Ende (2 runde Kanten für die Rote) und einschließlich dem Griff ) ist 900px lang (Dies gilt nicht , umfasst die Farbgradienten um die Klinge).

• Die runde Kante am Ende der Klinge ist ein Halbkreis (offensichtlich eine diskrete Annäherung) mit einem Durchmesser, der der Breite der Klinge entspricht.

• Die Klinge (dh der weiße Teil des Lichtschwerts) ist 12px breit.

• Das grüne und das blaue Lichtschwert sind um 200 Pixel voneinander getrennt (von der Mittellinie der grünen Klinge bis zur Mittellinie der blauen Klinge).

• Der Griff für alle 3 Lichtschwerter ist 180px (1/5 der Gesamtlänge). Daher ist die Klinge selbst einschließlich der runden Kante (n) 720px lang für das blaue und grüne Lichtschwert und 360px lang für die beiden Klingen des roten Lichtschwerts.

• Der Griff für das blaue und das grüne Lichtschwert befindet sich unten am Lichtschwert. Der Griff für das rote Lichtschwert ist horizontal zentriert.

• Die Länge des Verlaufs von der Kante der weißen Klinge bis zu einer vollständig weißen Farbe beträgt das 1,5-fache der Klingenbreite (z. B. 18 Pixel für die linearen Teile).

• Der grüne Farbverlauf reicht von RGB (0,255,0) bis Weiß (255,255,255) (oder transparent, wenn die Implementierung für Sie einfacher ist). Der rote Farbverlauf geht von (255,0,0) nach Weiß und der blaue Farbverlauf geht von (0,0,255) nach Weiß.

• Die Farbe des Griffs ist RGB (128,128,128).

• Um das Lichtschwert (die Lichtschwerter) kann sich ein weißer Leerraum befinden.

Eingänge

Entweder Sithoder Jedials String. Sie können diese Zeichenfolge von STDIN als Funktionsargument, Befehlszeilenparameter oder ähnliches verwenden. Sie können davon ausgehen, dass die Eingabe immer genau Sithoder Jedigar nichts anderes ist.

Ausgabe

Sie müssen eine Bilddatei generieren, die das Bild enthält, das der Eingabezeichenfolge entspricht. Sie können relativ frei wählen, welches Bildformat Sie möchten, solange es sich um ein True-Color- Bild handelt.

Wertung

Das ist Code-Golf , also gewinnt die kürzeste Antwort in Bytes. Möge die Macht mit dir sein.

^* Die Bilder in diesem Beitrag werden nicht in voller Größe angezeigt.

HTML / CSS-Lösung, 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>

Der aktuelle Refactor verwendet die :target Pseudoklasse anstelle von a <form>und Javascript.

Um eine der Eingaben einzugeben, fügen Sie sie als Ziel am Ende der URL hinzu, z. B. test.html#Jediodertest.html#Sith

Hier ist es wieder mit Leerzeichen und ein paar Kommentaren:

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

Die Lichtschwerter sind <table> Elemente mit einer Zelle pro Teil (Klinge / Griff), die über ihre idAttribute nicht .

Die Klingen sind mit CSS eingefärbt box-shadow CSSs und die Jedi-Lichtschwerter durchlaufen eine transform: rotate().

Bilder oder es ist nicht passiert (Klick für volle Auflösung):

Wenn Sie td{background:#fff}body{background:#000}dem CSS hinzufügen , erhalten Sie eine coole dunkle Ansicht.

Getestet in Firefox und Chrome (unter Linux). Beachten Sie, dass dies überhaupt nicht den Standards entspricht, da ich versucht habe, die Größe so weit wie möglich zu verkleinern.

Vielen Dank an @manatwork für border-spacingund :target.