|
|
<div class="bubble">
|
|
|
|
|
|
<div class="flex-row">
|
|
|
<label class="left-label matchtitle">
|
|
|
<span x-text="match.group_stage_name"></span>
|
|
|
<span x-show="match.group_stage_name"> :</span>
|
|
|
<span x-text="match.title"></span>
|
|
|
</label>
|
|
|
<label class="right-label minor-info bold" x-show="match.ended === false">
|
|
|
<span x-text="match.court"></span>
|
|
|
</label>
|
|
|
</div>
|
|
|
|
|
|
<template x-for="i in match.teams.length">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div class="match-result">
|
|
|
<div class="player">
|
|
|
<!-- Show lucky loser or walkout status -->
|
|
|
<template x-if="match.teams[i-1].is_lucky_loser">
|
|
|
<div class="overlay-text right-label minor-info semibold">(LL)</div>
|
|
|
</template>
|
|
|
<template x-if="match.teams[i-1].walk_out === 1">
|
|
|
<div class="overlay-text right-label minor-info semibold">(WO)</div>
|
|
|
</template>
|
|
|
|
|
|
<template x-for="name in match.teams[i-1].names">
|
|
|
<div :class="{
|
|
|
'bold': true,
|
|
|
'strikethrough': match.teams[i-1].walk_out === 1,
|
|
|
'winner': match.teams[i-1].is_winner
|
|
|
}">
|
|
|
<span x-text="name === '' ? ' ' : name"></span>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="scores">
|
|
|
<template x-for="score in match.teams[i-1].scores">
|
|
|
<template x-if="match.has_walk_out === false ">
|
|
|
<span class="score ws"
|
|
|
:class="{
|
|
|
'w35px': score.tiebreak,
|
|
|
'w30px': !score.tiebreak,
|
|
|
'winner': match.teams[i-1].is_winner
|
|
|
}"
|
|
|
>
|
|
|
<span x-text="score.main"></span>
|
|
|
<template x-if="score.tiebreak">
|
|
|
<sup x-text="score.tiebreak"></sup>
|
|
|
</template>
|
|
|
</span>
|
|
|
</template>
|
|
|
</template>
|
|
|
|
|
|
<span x-data="{
|
|
|
showWalkOut(match, team) {
|
|
|
let html = ``
|
|
|
if (match.has_walk_out) {
|
|
|
html += `<span class='score bold w60px'>`
|
|
|
if (team.walk_out == 0) html += `WO`
|
|
|
html += `</span>`
|
|
|
}
|
|
|
return html
|
|
|
},
|
|
|
}" x-html="showWalkOut(match, match.teams[i-1])">
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div x-show="i === 1">
|
|
|
<hr/>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="status-container" :class="{'running': !match.ended && match.started}">
|
|
|
<div class="top-margin flex-row">
|
|
|
<label class="left-label minor-info bold"><span x-text="match.time_indication"></span></label>
|
|
|
<label class="right-label minor-info semibold"><span x-text="match.format"></span></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
