Golf Wars Episode I: The Phantom Lightsabers

12

Perang golf masukkan deskripsi gambar di sini 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 * :

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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 , jadi jawaban tersingkat dalam byte menang. Semoga kekuatan bersamamu.


* Gambar dalam posting ini tidak ditampilkan ukuran penuh.

Fatalisasi
sumber
Apakah kita harus menyimpan file ke disk atau dapatkah kita menulisnya ke stdout? Bagaimana dengan hanya menampilkannya di layar?
Martin Ender
Menampilkannya di layar baik-baik saja, jika bahasa Anda dapat melakukannya dengan mudah. Adapun untuk menulis file itu sendiri ke STDOUT, saya kira itu dapat diterima untuk bahasa yang tidak dapat dengan mudah menyimpan file ke disk
Fatalize
Saya pikir judulnya harus Golf Wars Episode I: The Phantom Dennis .
mbomb007

Jawaban:

9

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.

Adam Katz
sumber
1
Anda bisa menggunakan :targetpseudo-class , seperti yang pernah saya lakukan . pastebin.com/WtxbSsr3 lalu mengaksesnya seperti file: ///tmp/test.html#Jedi dan file: ///tmp/test.html#Dengan (BTW, perubahan HTML cellspacing=0→ CSS border-spacing:0terlihat benar di Firefox saya, tetapi tidak diperiksa di browser lain.)
manatwork
Terima kasih, saya telah mencari border-spacingwaktu yang lama (ini menghemat 25 karakter). The :targetsaran diperbolehkan menghapus <form>dan semua JS. Dalam edit terakhir saya, saya juga memperketatnya lebih jauh. Itu bisa menjadi lebih kecil lagi jika kita gunakan <hr>dengan float:leftdan clear:left, tetapi ini harus dilakukan.
Adam Katz
1
Ini masih akan berfungsi jika Anda menghapus karakter pertama dan terakhir: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
RudolfJelin
1
@ RudolfL.Jelínek Itu gila! Saya tidak nyaman dengan pintasan itu, dan saya tidak yakin berapa banyak browser yang mendukungnya, tetapi jika didukung secara universal, Anda telah berhasil memotong dua karakter dari kode. Ada tweak lain yang juga akan sedikit menciut di sana-sini dengan degradasi visual yang minimal, termasuk potensi penggunaan <hr>s sebagai pengganti <table>s.
Adam Katz