ธีมพื้นหลัง

บทนำ

โอบีวันเคโนบี Qui-Gon Jinn และ Darth Maul กำลังจะสู้กัน! อย่างไรก็ตามพวกเขาทุกคนลืมที่จะนำกระบี่แสงที่เกี่ยวข้อง เขียนโปรแกรมหรือฟังก์ชั่นที่ให้สายอักขระJediเป็นอินพุตสร้างภาพที่คล้ายกับ^* :

และรับสตริงSithสร้างภาพที่คล้ายกับสิ่งนี้:

ข้อกำหนดรูปภาพ

• มีไฟกระบี่ 3 ดวงใด ๆ (ใบมีดสีขาวรวมถึงขอบกลมที่ส่วนท้าย (2 รอบสำหรับสีแดง) และรวมถึงที่จับ ) มีความยาว 900px (ซึ่งไม่รวมถึงการไล่ระดับสีรอบ ๆ ใบมีด)

• ขอบกลมที่ปลายใบมีดเป็นครึ่งวงกลม (โดยประมาณ) โดยมีเส้นผ่านศูนย์กลางเท่ากับความกว้างของใบมีด

• ใบมีด (เช่นส่วนสีขาวของกระบี่แสง) กว้าง 12px

• แสงสีเขียวและสีน้ำเงินถูกแยกออกจากกันโดย 200 px (จากเส้นกึ่งกลางของใบมีดสีเขียวไปยังเส้นกลางของใบมีดสีน้ำเงิน)

• ที่จับสำหรับไฟกระบี่ทั้ง 3 อันคือ 180px (1/5 ของความยาวทั้งหมด) ดังนั้นใบมีดเองรวมถึงขอบกลมยาว 720px สำหรับแสงสีฟ้าและสีเขียวและยาว 360px สำหรับใบมีดสองดวงของกระบี่แสงสีแดง

• ที่จับสำหรับกระบี่แสงสีน้ำเงินและสีเขียวอยู่ที่ด้านล่างของกระบี่แสง ที่จับสำหรับกระบี่แสงสีแดงอยู่ตรงกลางในแนวนอน

• ความยาวของการไล่ระดับสีจากขอบของใบมีดสีขาวเป็นสีขาวอย่างสมบูรณ์คือ 1.5 * ความกว้างของใบมีด (เช่น 18px สำหรับชิ้นส่วนเชิงเส้น)

• การไล่ระดับสีเขียวไปจาก RGB (0,255,0) เป็นสีขาว (255,255,255) (หรือโปร่งใสถ้าคุณใช้งานได้ง่ายกว่า) ไล่ระดับสีแดงไปจาก (255,0,0) เป็นสีขาวและไล่ระดับสีฟ้าไปจาก (0,0,255) เป็นสีขาว

• สีของที่จับคือ RGB (128,128,128)

• อาจมีพื้นที่ว่างสีขาวรอบ ๆ แสงไฟ

ปัจจัยการผลิต

อาจเป็นSithหรือJediเป็นสตริงก็ได้ คุณสามารถใช้สตริงนี้จาก STDIN เป็นอาร์กิวเมนต์ฟังก์ชันพารามิเตอร์บรรทัดคำสั่งหรือสิ่งอื่นที่คล้ายคลึงกัน คุณอาจจะสมมติว่าอินพุตนั้นจะถูกต้องเสมอSithหรือJediและไม่มีอะไรอื่น

เอาท์พุต

คุณต้องสร้างไฟล์ภาพที่มีภาพที่สอดคล้องกับสายป้อน คุณมีอิสระที่จะเลือกรูปแบบภาพใดก็ได้ที่คุณต้องการตราบใดที่ยังเป็นภาพสีจริง

เกณฑ์การให้คะแนน

นี่คือรหัสกอล์ฟดังนั้นคำตอบที่สั้นที่สุดในหน่วยไบต์ชนะ ขอพลังจงอยู่กับท่าน.

^*รูปภาพในโพสต์นี้ไม่แสดงเป็นขนาดเต็ม

โซลูชัน 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>

refactor ล่าสุดใช้:targetpseudo-classมากกว่า<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>

Lightsabers เป็น<table>องค์ประกอบที่มีหนึ่งเซลล์ต่อส่วน (ใบมีด / ที่จับ) ที่ไม่ถูกซ่อนผ่านidคุณสมบัติของพวกเขา

ใบมีสีด้วย CSS box-shadows และ lightsabers transform: rotate()เจไดรับการ

รูปภาพหรือไม่เกิดขึ้น (คลิกเพื่อดูความละเอียดเต็ม):

หากคุณเพิ่มtd{background:#fff}body{background:#000}ใน CSS คุณจะได้รับมุมมองที่มืดสนิท

ทดสอบใน Firefox และ Chrome (บน Linux) โปรดทราบว่านี่ไม่ได้เป็นไปตามมาตรฐานทั้งหมดเนื่องจากฉันพยายามลดขนาดให้มากที่สุด

ขอขอบคุณที่ @manatwork สำหรับและborder-spacing:target