Tema latar belakang

pengantar

Obi-Wan Kenobi, Qui-Gon Jinn dan Darth Maul akan bertarung! Namun, mereka semua lupa membawa lightsaber masing-masing. Tulis sebuah program atau fungsi yang, diberi string Jedisebagai input, menghasilkan gambar yang mirip dengan ini ^* :

dan diberi string Sith, menghasilkan gambar yang mirip dengan ini:

Spesifikasi gambar

• Salah satu dari 3 lightsabers (pisau putih termasuk tepi bundar di ujungnya (2 tepi bundar untuk yang merah) dan termasuk pegangan ) panjangnya 900px (Ini tidak termasuk gradien warna di sekitar pisau).

• Tepi bundar di ujung mata pisau adalah setengah lingkaran (perkiraan tersendiri, dengan diameter sama dengan lebar mata pisau).

• Blade (yaitu bagian putih lightsaber) selebar 12px.

• Lightsabers hijau dan biru dipisahkan oleh 200 px (dari garis tengah bilah hijau ke garis tengah bilah biru).

• Pegangan untuk semua 3 lightsabers adalah 180px (1/5 dari total panjang). Oleh karena itu bilah itu sendiri termasuk ujung bundar adalah 720px panjang untuk lightsabers biru dan hijau dan 360px panjang untuk dua bilah lightsaber merah.

• Pegangan untuk lightsaber biru dan hijau ada di bagian bawah lightsaber. Pegangan untuk lightsaber merah horizontaly berpusat.

• Panjang gradien dari tepi blade putih ke warna sepenuhnya putih adalah 1,5 * lebar blade (misalnya 18px untuk bagian linier).

• Gradien hijau berubah dari RGB (0,255,0) menjadi putih (255.255.255) (atau transparan jika lebih mudah bagi Anda untuk menerapkan). Gradien merah berubah dari (255,0,0) menjadi putih, dan gradien biru berubah dari (0,0255) menjadi putih.

• Warna pegangannya adalah RGB (128.128.128).

• Mungkin ada ruang kosong putih di sekitar lightsaber.

Input

Entah Sithatau Jedisebagai string. Anda dapat mengambil string ini dari STDIN, sebagai argumen fungsi, parameter baris perintah, atau yang serupa lainnya. Anda dapat berasumsi bahwa input akan selalu tepat Sithatau Jeditidak ada yang lain.

Keluaran

Anda harus membuat file gambar yang berisi gambar yang sesuai dengan string input. Anda relatif bebas memilih format gambar apa pun yang Anda inginkan, asalkan itu adalah gambar True Color .

Mencetak gol

Ini adalah kode-golf , jadi jawaban tersingkat dalam byte menang. Semoga kekuatan bersamamu.

^* Gambar dalam posting ini tidak ditampilkan ukuran penuh.

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

Refactor baru-baru ini menggunakan :targetpseudo-class daripada a <form>dan Javascript.

Untuk memasukkan salah satu input, tambahkan ke akhir URL sebagai target, misalnya test.html#Jediatautest.html#Sith

Ini dia lagi dengan whitespace dan beberapa komentar:

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

Lightsabers adalah <table>elemen dengan satu sel per bagian (blade / handle) yang tidak dihindarkan melalui idatributnya.

Pisau diwarnai dengan CSS box-shadowdan lightsabers Jedi menjalani transform: rotate().

Gambar atau tidak terjadi (klik untuk res penuh):

Jika Anda menambahkan td{background:#fff}body{background:#000}ke CSS, Anda akan mendapatkan tampilan gelap yang keren.

Diuji dalam Firefox dan Chrome (di Linux). Perhatikan bahwa ini sama sekali tidak memenuhi standar, karena saya mencoba mengecilkan ukurannya sebanyak mungkin.

Terima kasih kepada @manatwork untuk border-spacingdan :target.