| class CombatSequence extends HTMLElement { |
| constructor() { |
| super(); |
| this.attachShadow({ mode: 'open' }); |
| } |
|
|
| connectedCallback() { |
| this.render(); |
| } |
|
|
| static get observedAttributes() { |
| return ['sequence-id', 'accuracy', 'hits', 'shots', 'suspicion']; |
| } |
|
|
| attributeChangedCallback(name, oldValue, newValue) { |
| if (oldValue !== newValue) { |
| this.render(); |
| } |
| } |
|
|
| render() { |
| this.shadowRoot.innerHTML = ` |
| <style> |
| :host { |
| display: block; |
| background-color: #1f2937; |
| border-radius: 0.5rem; |
| padding: 1rem; |
| margin-bottom: 1rem; |
| transition: all 0.2s ease; |
| } |
| |
| :host(:hover) { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); |
| } |
| |
| .header { |
| display: flex; |
| justify-content: space-between; |
| align-items: flex-start; |
| margin-bottom: 0.75rem; |
| } |
| |
| .title { |
| font-weight: 600; |
| font-size: 1.125rem; |
| } |
| |
| .id { |
| font-size: 0.75rem; |
| color: #9ca3af; |
| } |
| |
| .accuracy { |
| padding: 0.25rem 0.5rem; |
| border-radius: 0.25rem; |
| font-size: 0.75rem; |
| font-weight: 500; |
| } |
| |
| .high-accuracy { |
| background-color: #ef4444; |
| } |
| |
| .normal-accuracy { |
| background-color: #3b82f6; |
| } |
| |
| .stats { |
| display: flex; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| margin-bottom: 0.25rem; |
| } |
| |
| .meter-container { |
| margin-bottom: 0.5rem; |
| } |
| |
| .meter { |
| height: 0.25rem; |
| border-radius: 0.125rem; |
| background-color: #374151; |
| overflow: hidden; |
| } |
| |
| .meter-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #3b82f6, #ef4444); |
| } |
| |
| .suspicion-label { |
| display: flex; |
| justify-content: space-between; |
| font-size: 0.75rem; |
| } |
| |
| .suspicion-meter { |
| height: 0.25rem; |
| border-radius: 0.125rem; |
| background-color: #374151; |
| overflow: hidden; |
| } |
| |
| .suspicion-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #10b981, #ef4444); |
| } |
| </style> |
| |
| <div class="header"> |
| <div> |
| <div class="title">Combat Sequence</div> |
| <div class="id">${this.getAttribute('sequence-id') || 'Unknown'}</div> |
| </div> |
| <div class="accuracy ${this.getAccuracyClass()}"> |
| ${Math.round((parseFloat(this.getAttribute('accuracy')) || 0) * 100)}% |
| </div> |
| </div> |
| |
| <div class="meter-container"> |
| <div class="stats"> |
| <span>${this.getAttribute('hits') || 0} hits</span> |
| <span>${this.getAttribute('shots') || 0} shots</span> |
| </div> |
| <div class="meter"> |
| <div class="meter-fill" style="width: ${(parseFloat(this.getAttribute('accuracy')) || 0) * 100}%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="suspicion-label"> |
| <span>Suspicion level</span> |
| <span>${this.getAttribute('suspicion') || 0}/100</span> |
| </div> |
| <div class="suspicion-meter"> |
| <div class="suspicion-fill" style="width: ${this.getAttribute('suspicion') || 0}%"></div> |
| </div> |
| </div> |
| `; |
| } |
|
|
| getAccuracyClass() { |
| const accuracy = parseFloat(this.getAttribute('accuracy')) || 0; |
| return accuracy > 0.6 ? 'high-accuracy' : 'normal-accuracy'; |
| } |
| } |
|
|
| customElements.define('combat-sequence', CombatSequence); |
