shosho996
95eff42dfe
Co-authored-by: Lala, Shahd <Shahd.Lala@sybit.de> Co-authored-by: shahdlala66 <shahd.lala66@gmail.com> Reviewed-on: #8
47 lines
2.3 KiB
HTML
47 lines
2.3 KiB
HTML
<div class="moves" role="list" #movesEl>
|
|
@if (movePairs.length === 0) {
|
|
<div class="moves-empty">No moves yet.</div>
|
|
} @else {
|
|
@for (pair of movePairs; track $index) {
|
|
<div class="mv-num" role="presentation">{{ $index + 1 }}</div>
|
|
<div class="mv" [class.current]="isWhiteViewing($index)" role="listitem"
|
|
tabindex="0" (click)="clickWhite($index)" (keydown.enter)="clickWhite($index)">
|
|
{{ pair.white }}
|
|
</div>
|
|
<div class="mv" [class.current]="isBlackViewing($index)" [class.mv-empty]="!pair.black" role="listitem"
|
|
[attr.tabindex]="pair.black ? 0 : null"
|
|
(click)="clickBlack($index, pair.black)" (keydown.enter)="clickBlack($index, pair.black)">
|
|
{{ pair.black ?? '…' }}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
|
|
<div class="moves-foot">
|
|
<div class="moves-nav" role="group" aria-label="Move navigation">
|
|
<button class="icon-btn" title="First move" (click)="navigate.emit('first')">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="11 17 6 12 11 7"/><polyline points="18 17 13 12 18 7"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-btn" title="Previous move" (click)="navigate.emit('prev')">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-btn" title="Next move" (click)="navigate.emit('next')">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="9 18 15 12 9 6"/>
|
|
</svg>
|
|
</button>
|
|
<button class="icon-btn" title="Last move / return to live" (click)="navigate.emit('last')">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="13 17 18 12 13 7"/><polyline points="6 17 11 12 6 7"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
@if (plyCount > 0) {
|
|
<span class="live-label" [class.reviewing]="!isLive">{{ isLive ? 'LIVE' : 'REVIEWING' }}</span>
|
|
}
|
|
</div>
|