Motyw tła

Wprowadzenie

Obi-Wan Kenobi, Qui-Gon Jinn i Darth Maul wkrótce będą walczyć! Wszyscy jednak zapomnieli przynieść swoje miecze świetlne. Napisz program lub funkcję, która na podstawie łańcucha Jediwejściowego generuje obraz podobny do tego ^* :

i podany ciąg Sithgeneruje obraz podobny do tego:

Specyfikacja obrazów

• Dowolny z 3 mieczy świetlnych (białe ostrze, w tym okrągła krawędź na końcu (2 okrągłe krawędzie dla czerwonego) i uchwyt ) ma długość 900 pikseli ( nie obejmuje to gradientu kolorów wokół ostrza).

• Okrągła krawędź na końcu ostrza jest półkolem (oczywiście jego dyskretne przybliżenie) o średnicy równej szerokości ostrza.

• Ostrze (tj. Biała część miecza świetlnego) ma szerokość 12 pikseli.

• Zielone i niebieskie miecze świetlne są oddzielone o 200 pikseli (od środkowej linii zielonego ostrza do środkowej linii niebieskiego ostrza).

• Uchwyt dla wszystkich 3 mieczy świetlnych wynosi 180 pikseli (1/5 całkowitej długości). Dlatego samo ostrze, w tym zaokrąglone krawędzie, ma 720px długości dla niebieskiego i zielonego miecza świetlnego i 360px długości dla dwóch ostrzy czerwonego miecza świetlnego.

• Uchwyt niebieskiego i zielonego miecza świetlnego znajduje się na dole miecza świetlnego. Uchwyt czerwonego miecza świetlnego jest wyśrodkowany poziomo.

• Długość gradientu od krawędzi białego ostrza do całkowicie białego koloru wynosi 1,5 * szerokość ostrza (np. 18 pikseli dla części liniowych).

• Zielony gradient zmienia się z RGB (0,255,0) na biały (255,255,255) (lub przezroczysty, jeśli łatwiej go zaimplementować). Czerwony gradient zmienia się z (255,0,0) na biały, a niebieski gradient zmienia się z (0,0,255) na biały.

• Kolor uchwytu to RGB (128, 128, 128).

• Wokół miecza (ów) świetlnego może znajdować się biała pusta przestrzeń.

Wejścia

Albo Sithalbo Jedijako ciąg. Możesz pobrać ten ciąg ze STDIN jako argument funkcji, parametr wiersza poleceń lub cokolwiek podobnego. Możesz założyć, że dane wejściowe zawsze będą dokładnie Sithlub Jedinic więcej.

Wynik

Musisz wygenerować plik obrazu zawierający obraz odpowiadający ciągowi wejściowemu. Możesz względnie swobodnie wybierać dowolny format obrazu, o ile jest to obraz True Color .

Punktacja

To jest golf golfowy , więc wygrywa najkrótsza odpowiedź w bajtach. Niech moc będzie z Tobą.

^* Obrazy w tym poście nie są wyświetlane w pełnym rozmiarze.

Rozwiązanie HTML / CSS, 765 740 541 bajtów

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

Niedawny refaktor używa raczej :targetpseudoklasy niż a <form>i Javascript.

Aby wprowadzić dane wejściowe, dodaj je na końcu adresu URL jako cel, np. test.html#JediLubtest.html#Sith

Oto znowu z białą spacją i kilkoma komentarzami:

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

<table>Miecze świetlne to elementy z jedną komórką na część (ostrze / uchwyt), które są ukryte dzięki swoim idatrybutom.

Ostrza są zabarwione CSS, box-shadowa miecze świetlne Jedi przechodzą transform: rotate().

Zdjęcia lub tak się nie stało (kliknij, aby zobaczyć pełną rozdzielczość):

Jeśli dodasz td{background:#fff}body{background:#000}do CSS, uzyskasz fajny ciemny widok.

Testowany w Firefox i Chrome (w systemie Linux). Zauważ, że nie jest to w ogóle zgodne ze standardami, ponieważ starałem się jak najbardziej zmniejszyć rozmiar.

Dzięki @manatwork dla border-spacingi :target.