241 lines
13 KiB
HTML
241 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<link href="controller.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
|
|
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
|
|
integrity="5e2ESR8Ycmos6g3gAKr1Jvwye8sW4U1u/cAKulfVJnkakCcMqhOudbtPnvJ+nbv7" crossorigin="anonymous">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-latest.js"
|
|
integrity="sha512-2AL/VEauKkZqQU9BHgnv48OhXcJPx9vdzxN1JrKDVc4FPU/MEE/BZ6d9l0mP7VmvLsjtYwqiYQpDskK9dG8KBA=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
|
|
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
|
|
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"
|
|
integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
|
|
crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="alert alert-danger" role="alert" data-bind="text: disconnectedMessage(), hidden: isConnected"></div>
|
|
<div class="container text-center">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Match
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gx-2">
|
|
<!-- Make these conditionally visible
|
|
|
|
WaitingForStart = 1,
|
|
FirstHalf = 2,
|
|
HalfTime = 3,
|
|
SecondHalf = 3,
|
|
Finished = 4,
|
|
TimeOff = 5
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3">Start Match</button>
|
|
</div>
|
|
-->
|
|
|
|
<!-- ko if: gameState() === "WaitingForStart" || gameState() === "" -->
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-body" data-bind="text: getMatchPendingMessage()">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === "FirstHalf" || gameState() === 'SecondHalf' -->
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3">Time Off</button>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === "TimeOff"-->
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3">Time On</button>
|
|
</div>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: gameState() === "FirstHalf"-->
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3">Half Time</button>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === "HalfTime"-->
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3">Start Second Half</button>
|
|
</div>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: gameState() === "SecondHalf"-->
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3">Finish Match</button>
|
|
</div>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: gameState() === 'Finished' -->
|
|
<div>Match has finished, no actions to perform.</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ko if: gameState() !== 'WaitingForStart' && gameState() !== 'Finished' -->
|
|
<div class="row gx-7 mt-5">
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header" data-bind="text: homeTeamName">
|
|
Home
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gx-2">
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Home','Try'), enable: isConnected">Try</button>
|
|
</div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Home','Conversion'), enable: isConnected">Conversion</button>
|
|
</div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Home','Penalty'), enable: isConnected">Penalty</button>
|
|
</div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Home','DropGoal'), enable: isConnected">Drop
|
|
Goal</button>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mt-4 gx-4">
|
|
<div class="col-2">
|
|
<button type="button" class="btn btn-warning btn-lg p-4 mr-4"
|
|
data-bind="click: addTeamEvent.bind(this,'Home','YellowCard'), enable: isConnected"></button>
|
|
</div>
|
|
<div class="col-2">
|
|
<button type="button" class=" btn btn-danger btn-lg p-4 ml-4"
|
|
data-bind="click: addTeamEvent.bind(this,'Home','RedCard'), enable: isConnected"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="card">
|
|
<div class="card-header" data-bind="text: awayTeamName">
|
|
Away
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row gx-2">
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Away','Try'), enable: isConnected">Try</button>
|
|
</div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Away','Conversion'), enable: isConnected">Conversion</button>
|
|
</div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Away','Penalty'), enable: isConnected">Penalty</button>
|
|
</div>
|
|
<div class="col">
|
|
<button type="button" class="btn btn-secondary btn-lg p-3"
|
|
data-bind="click: addTeamEvent.bind(this,'Away','DropGoal'), enable: isConnected">Drop
|
|
Goal</button>
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center mt-4 gx-4">
|
|
<div class="col-2">
|
|
<button type="button" class="btn btn-warning btn-lg p-4 mr-4"
|
|
data-bind="click: addTeamEvent.bind(this,'Away','YellowCard'), enable: isConnected"></button>
|
|
</div>
|
|
<div class="col-2">
|
|
<button type="button" class=" btn btn-danger btn-lg p-4 ml-4"
|
|
data-bind="click: addTeamEvent.bind(this,'Away','RedCard'), enable: isConnected"></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
|
|
<div data-bind="if: gameOn" class="mt-5">
|
|
<div class="scoreboard">
|
|
<div class="border">
|
|
<div class="team" data-bind="style:{'background-color': homeTeamColor}">
|
|
<div class="team-info">
|
|
<div class="team-name summary-team-label" data-bind="text: homeTeamName">Home</div>
|
|
</div>
|
|
<div class="team-details">
|
|
<div class="team-score" data-bind="text: homeTeamPoints">0</div>
|
|
</div>
|
|
</div>
|
|
<div class="timer-container">
|
|
<!-- ko if: gameState() !== 'WaitingForStart' && gameState() !== 'Finished' && gameState() !== 'HalfTime'-->
|
|
<div class="timer" id="match-timer" data-bind="text: calculateRemainingTime"></div>
|
|
<div class="half-indicator" data-bind="text: halfIndicator"></div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === 'WaitingForStart' -->
|
|
<div class="kickoff-indicator" data-bind="text: halfIndicator"></div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === 'Finished' -->
|
|
<div class="finalscore-indicator">Full Time</div>
|
|
<!-- /ko -->
|
|
<!-- ko if: gameState() === 'HalfTime' -->
|
|
<div class="kickoff-indicator">Half Time</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
<div class="team" data-bind="style:{'background-color': awayTeamColor}">
|
|
<div class="team-info">
|
|
<div class="team-name summary-team-label" data-bind="text: awayTeamName">Away</div>
|
|
</div>
|
|
<div class="team-details">
|
|
<div class="team-score" data-bind="text: awayTeamPoints">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ko if: eventList().length === 0 && gameState() !== 'WaitingForStart' -->
|
|
<div class="noMatch">No events available yet.</div>
|
|
<!-- /ko-->
|
|
<!-- ko if: eventList().length > 0 -->
|
|
<div class="timeline" data-bind="foreach: eventList">
|
|
<!-- ko if: category === 'Match' -->
|
|
<div class="timeline-item match">
|
|
<div class="timeline-content-match">
|
|
<p data-bind="text: $parent.getEventMessage($data)"></p>
|
|
</div>
|
|
</div>
|
|
<!-- /ko -->
|
|
<!-- ko ifnot: category === 'Match' -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-content"
|
|
data-bind="css: { away: category ==='Away' }, style: { 'border-color': category === 'Home' ? $parent.homeTeamColor() : $parent.awayTeamColor() }">
|
|
<button class="delete-btn" data-bind="click: () => $parent.deleteEvent(id)">
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
<p data-bind="text: $parent.getEventMessage($data)"></p>
|
|
</div>
|
|
<!-- ko if: eventType !== 'YellowCard' && eventType !== 'RedCard' -->
|
|
<span class="score-panel" data-bind="text: $parent.getScoreAtEvent($data.id)"></span>
|
|
<!-- /ko -->
|
|
|
|
<!-- ko if: eventType === 'YellowCard' || eventType === 'RedCard' -->
|
|
<i class="fa fa-circle icon"
|
|
data-bind="css:{ yc: eventType ==='YellowCard', rc: eventType ==='RedCard' }"></i>
|
|
<!-- /ko -->
|
|
</div>
|
|
<!-- /ko-->
|
|
</div>
|
|
<!-- /ko -->
|
|
</div>
|
|
|
|
<script src="controller.js" type="text/javascript"></script>
|
|
</body> |