Arka plan teması

Giriş

Obi-Wan Kenobi, Qui-Gon Jinn ve Darth Maul savaşmak üzere! Ancak, hepsi kendi ışın kılıcılarını getirmeyi unuttu. Dize Jedigirdi olarak verildiğinde buna benzer bir görüntü oluşturan bir program veya işlev yazın ^* :

ve dize verildiğinde, Sithbuna benzer bir görüntü oluşturur:

Görüntüler özellikleri

• 3 ışın (beyaz bıçak herhangi ucunda yuvarlak kenar ile birlikte (kırmızı biri için 2 yuvarlak kenarlar) ve kolu dahil ) uzunluğunda 900px olan (bu etmez olmayan bıçak çevresinde renk gradyanı dahil).

• Bıçağın ucundaki yuvarlak kenar, bıçağın genişliğine eşit bir çapa sahip bir yarım çemberdir (bunun ayrı bir yaklaşımı).

• Bıçak (yani ışın kılıcının beyaz kısmı) 12 piksel genişliğindedir.

• Yeşil ve mavi ışın koruyucular 200 piksel (yeşil bıçağın merkez çizgisinden mavi bıçağın merkez çizgisine) ile ayrılır.

• Tüm 3 ışın kılıcı için tutamak 180 pikseldir (toplam uzunluğun 1/5'i). Bu nedenle, yuvarlak kenar (lar) ı içeren bıçağın kendisi mavi ve yeşil ışın koruyucular için 720 piksel uzunluğunda ve kırmızı ışın koruyucunun iki bıçağı için 360 piksel uzunluğundadır.

• Mavi ve yeşil ışın kılıcıların tutacağı ışın kılıcının altındadır. Kırmızı ışın kılıcı tutamağı yatay olarak ortalanmıştır.

• Degradenin beyaz bıçağın kenarından tamamen beyaz bir renge kadar uzunluğu bıçağın genişliğinin 1.5 katıdır (örneğin doğrusal parçalar için 18 piksel).

• Yeşil renk geçişi RGB'den (0,255,0) beyaza (255,255,255) gider (veya uygulamanız daha kolaysa saydamdır). Kırmızı degrade (255,0,0) 'ten beyaza, mavi degrade (0,0,255)' den beyaza gider.

• Sapın rengi RGB'dir (128,128,128).

• Işın kılıcı (ları) çevresinde beyaz boşluklar olabilir.

Girdiler

Ya Sithya Jedidize olarak. Bu dizeyi bir işlev bağımsız değişkeni, komut satırı parametresi veya benzer bir şey olarak STDIN'den alabilirsiniz. Girişin her zaman tam olarak olacağını Sithya da Jedibaşka bir şey olmayacağını varsayabilirsiniz .

Çıktı

Giriş dizesine karşılık gelen görüntüyü içeren bir görüntü dosyası oluşturmalısınız. Gerçek Renkli bir görüntü olduğu sürece istediğiniz görüntü biçimini seçmekte özgürsünüz .

puanlama

Bu kod golf , bu yüzden bayttaki en kısa cevap kazanır. Güç seninle olsun.

^* Bu yazıdaki resimler tam boyutta gösterilmiyor.

HTML / CSS çözümü, 765 740541 bayt

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

Son refactor, a ve Javascript yerine :targetsözde sınıfı kullanır <form>.

Her iki giriş girmek için, bir hedef, örneğin olarak URL'nin sonuna eklemek test.html#Jediveyatest.html#Sith

İşte yine boşluk ve birkaç yorum ile:

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

Işın kılıcı, <table>her bir parçasında bir hücre (bıçak / tutamak) bulunan ve idözellikleriyle gizlenmeyen öğelerdir .

Bıçaklar CSS'ler ile renklendirilir box-shadowve Jedi ışın kılıcıları a transform: rotate().

Resimler ya da olmadı (tam çözünürlük için tıklayın):

td{background:#fff}body{background:#000}CSS'ye eklerseniz , serin ve karanlık bir görünüm elde edersiniz.

Firefox ve Chrome'da test edildi (Linux'ta). Boyutu olabildiğince küçültmeye çalıştığım için bunun standartlara uygun olmadığını unutmayın.

Teşekkür için @manatwork için border-spacingve :target.