Фонова тема

Вступ

Оби-Ван Кенобі, Кві-Гон Джінн і Дарт Мол збираються битися! Однак вони всі забули принести свої світлові мечки. Напишіть програму або функцію, яка, даючи рядок Jediяк вхід, створює зображення, подібне до цього ^* :

і даючи рядок Sith, створює зображення, подібне до цього:

Технічні характеристики зображень

• Будь-яке з 3-х світильників (біле лезо, включаючи круглий край на кінці (2 круглих кромки для червоного) і включаючи ручку ), має довжину 900 пікселів (сюди не входить градієнт кольору навколо леза).

• Круглий край на кінці леза - це півкруг (очевидно, його дискретне наближення) діаметром, рівним ширині леза.

• Лезо (тобто біла частина світлового меча) шириною 12 пікселів.

• Зелені та сині світлові мечі розділені на 200 пікс (від центральної лінії зеленого леза до центральної лінії синього леза).

• Ручка для всіх 3 світлих мечів становить 180 пікселів (1/5 від загальної довжини). Тому саме лезо, включаючи круглі кромки, має довжину 720 пікселів для синіх та зелених світлових мечей і 360 пікселів для двох лопатей червоного світлового меча.

• Ручка для синіх та зелених світлових шарів знаходиться внизу світлового меча. Ручка для червоного світлового меча розташована горизонтально по центру.

• Довжина градієнта від краю білого леза до абсолютно білого кольору становить 1,5 * ширина леза (наприклад, 18px для лінійних деталей).

• Зелений градієнт переходить від RGB (0,255,0) до білого (255,255,255) (або прозорого, якщо вам це легше здійснити). Червоний градієнт переходить від (255,0,0) до білого, а синій градієнт переходить від (0,0255) до білого.

• Колір ручки - RGB (128,128,128).

• Навколо світлового меча може бути порожній пробіл.

Вхідні дані

Або Sithчи Jediу вигляді рядка. Ви можете взяти цей рядок із STDIN як аргумент функції, параметр командного рядка чи щось подібне. Ви можете припустити, що введення завжди буде точно Sithабо Jediнічого іншого.

Вихідні дані

Ви повинні створити файл зображення, що містить зображення, відповідне вхідному рядку. Ви відносно вільні у виборі потрібного формату зображення, якщо це зображення True Color .

Оцінка балів

Це код-гольф , тому найкоротша відповідь у байтах виграє. Нехай сила буде з тобою.

^* Зображення в цій публікації не відображаються в повному розмірі.

Рішення HTML / CSS, 765 740 541 байт

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

Останній рефактор використовує :targetпсевдоклас, а не a <form>і Javascript.

Щоб ввести будь-який вхід, додайте його до кінця URL-адреси як цільового, наприклад, test.html#Jediабоtest.html#Sith

Ось знову з пробілом та кількома коментарями:

<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>елементи, що мають одну клітинку на частину (лезо / ручку), які не розкриваються за допомогою своїх idатрибутів.

Лопаті кольорові за допомогою CSS box-shadows, а світлодіодні джедаї проходять a transform: rotate().

Фотографії або цього не сталося (натисніть для повного перегляду):

Якщо ви додасте td{background:#fff}body{background:#000}до CSS, ви отримаєте прохолодний темний вигляд.

Тестується в Firefox та Chrome (на Linux). Зауважте, що це зовсім не відповідає стандартам, оскільки я намагався максимально зменшити розмір.

Завдяки @manatwork для border-spacingта :target.