<head>
<meta http-equiv="content-type" value="text/html; charset=utf-8" />
<meta charset="utf-8" />
-<!-- <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"> -->
+ <link href="fonts/exo.css" rel="stylesheet">
<link href="fonts/lato.css" rel="stylesheet">
- <style>
-* {
- -webkit-box-sizing: border-box;
- Box-Sizing: border-box;
- -webkit-backface-visibility: hidden;
- -webkit-transition: translate3d(0,0,0);
-}
-html, body {
- width: 1280px;
- height: 720px;
- margin: 0;
- padding: 0;
- background: transparent;
- overflow: hidden;
- -webkit-font-smoothing: antialiased !important;
-}
-body {
- font-family: 'Lato', sans-serif;
- color: white;
-}
-
-/* Score */
-.scorebug {
- position: fixed;
- font-size: 25px;
- left: 10px;
- top: 10px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 3px solid black;
- z-index: 1;
-}
-.scorebug td {
- border: 3px solid #008;
-}
-.team1color, .team2color {
- width: 15px;
- margin: 5px;
-}
-.team1color {
- background: red;
-}
-.team2color {
- background: green;
-}
-.team1, .team2 {
- font-weight: bold;
- width: 100px;
- text-align: center;
- height: 35px;
- background: #00a;
-}
-.score {
- text-align: center;
- background: #00c;
- width: 110px;
- height: 35px;
-}
-
-/* Clock, to the right of score */
-.clockbug {
- position: fixed;
- font-size: 25px;
- left: 360px;
- top: 10px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 3px solid black;
-}
-.clock {
- border: 3px solid #008;
- background: #00a;
- text-align: center;
- height: 35px;
- width: 90px;
-}
-.clockbug-hidden {
- -webkit-transform:translateX(-200%);
-}
-.clockbug-animate-in {
- -webkit-animation: from-left 1s ease;
-}
-.clockbug-animate-out {
- -webkit-animation: to-left 1s ease;
- -webkit-transform:translateX(-200%);
-}
-
-/* Comment, below score */
-.commentbug {
- position: fixed;
- font-size: 20px;
- left: 10px;
- top: 52px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 3px solid black;
-}
-.comment {
- border: 3px solid #008;
- background: #00a;
- text-align: center;
- height: 30px;
- width: 340px;
-}
-
-.commentbug-hidden {
- -webkit-transform:translateY(-40px);
-}
-.commentbug-animate-in {
- -webkit-animation: from-top 0.5s ease;
-}
-.commentbug-animate-out {
- -webkit-animation: to-top 0.5s ease;
- -webkit-transform:translateY(-40px);
-}
-
-/* Lower third */
-.lowerthird-headline {
- position: fixed;
- font-size: 40px;
- left: 10px;
- top: 520px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 2px solid #ccc;
- height: 118px;
- font-weight: bold;
- width: 1050px;
- /*background: linear-gradient(to right, #ccc, #fff 15px); */
- background-image: url(lowerthird-bg.png);
- color: black;
- /* padding-top: 20px; */
-}
-.lowerthird-headline-hidden {
- width: 0px;
- border-left: 0px;
- border-right: 0px;
-}
-.lowerthird-headline-animate-in {
- -webkit-animation: scale-out 1.0s;
-}
-.lowerthird-headline-animate-out {
- -webkit-animation: scale-in 1.0s;
-}
-.lowerthird-headline-content {
- padding-left: 20px;
- position: absolute;
-}
-.lowerthird-headline-content-hidden {
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-headline-content-animate-in {
- -webkit-animation: wipe-out 2.0s ease;
-}
-.lowerthird-headline-content-animate-out {
- -webkit-animation: wipe-in 2.0s ease;
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading {
- position: fixed;
- font-size: 24px;
- left: 40px;
- top: 637px;
- height: 40px;
- width: 500px;
- border-collapse: collapse;
- white-space: nowrap;
- border: 1px solid black;
- /*display: flex;
- align-items: center; */
- /*background: linear-gradient(to right, #44c, #33a 15px); */
- background-image: url(lowerthird-bg2.png);
-}
-.lowerthird-subheading-hidden {
- clip: rect(0px,0px,200px,0px);
-}
-.lowerthird-subheading-animate-in {
- -webkit-animation: scale-out-small 1.6s ease;
-}
-.lowerthird-subheading-animate-out {
- -webkit-animation: scale-in-small 1.6s ease;
- width: 0px;
- border-left: 0px;
-}
-.lowerthird-subheading-content {
- position: absolute;
- padding-left: 20px;
-}
-.lowerthird-subheading-content-hidden {
- width: 0px;
- border: 0px;
-}
-.lowerthird-subheading-content-animate-in {
- -webkit-animation: wipe-out 2.2s ease;
-}
-.lowerthird-subheading-content-animate-out {
- -webkit-animation: wipe-in 2.2s ease;
- clip: rect(0px,0px,200px,0px);
-}
-
-/* these are hidden when actually run in casparcg */
-#area {
- position: fixed;
- left: 0px;
- top: 0px;
- width: 1280px;
- height: 720px;
- background: cyan;
-}
-#manualcontrols {
- z-index: 3;
- position: fixed;
- top: 250px;
-}
-
-/* Animations */
-@-webkit-keyframes from-left {
- 0% {
- -webkit-transform:translateX(-200%);
- }
- 100% {
- -webkit-transform:translateX(0);
- }
-}
-@-webkit-keyframes to-left {
- 0% {
- -webkit-transform:translateX(0);
- }
- 100% {
- -webkit-transform:translateX(-200%);
- }
-}
-@-webkit-keyframes from-top {
- 0% {
- -webkit-transform:translateY(-40px);
- }
- 100% {
- -webkit-transform:translateY(0);
- }
-}
-@-webkit-keyframes to-top {
- 0% {
- -webkit-transform:translateY(0);
- }
- 100% {
- -webkit-transform:translateY(-40px);
- }
-}
-
-@-webkit-keyframes scale-out {
- 0% {
- width: 0px;
- }
- 100% {
- width: 1050px;
- }
-}
-@-webkit-keyframes scale-in {
- 0% {
- width: 1050px;
- border: 2px solid #ccc;
- }
- 100% {
- width: 0px;
- border: 2px solid #ccc;
- }
-}
-@-webkit-keyframes scale-out-small {
- 0% {
- width: 0px;
- border: 0px;
- }
- 19.99% {
- border: 0px;
- }
- 20% {
- width: 0px;
- border: 1px solid black;
- }
- 100% {
- width: 500px;
- }
-}
-@-webkit-keyframes scale-in-small {
- 0% {
- width: 500px;
- border: 1px solid black;
- }
- 80% {
- width: 0px;
- border: 1px solid black;
- }
- 80.01% {
- border: 0px;
- }
- 100% {
- width: 0px;
- border: 0px;
- }
-}
-@-webkit-keyframes wipe-out {
- 0% {
- clip: rect(0px,0px,200px,0px);
- }
- 20% {
- clip: rect(0px,0px,200px,0px);
- }
- 100% {
- clip: rect(0px,1050px,200px,0px);
- }
-}
-@-webkit-keyframes wipe-in {
- 0% {
- clip: rect(0px,1050px,200px,0px);
- }
- 20% { /* Not symmetrical! */
- clip: rect(0px,0px,200px,0px);
- }
- 100% {
- clip: rect(0px,0px,200px,0px);
- }
-}
- </style>
+ <link href="score.css" rel="stylesheet">
</head>
<body>
<div id="area"></div>
- <table class="scorebug">
- <tr>
- <td class="team1color" id="team1color"></td>
- <td class="team1" id="team1">PCL</td>
- <td class="score" id="score">17 – 11</td>
- <td class="team2" id="team2">NMBUI</td>
- <td class="team2color" id="team2color"></td>
- </tr>
- </table>
- <table class="clockbug clockbug-hidden" id="clockbug">
- <tr>
- <td class="clock" id="clock">25:00</td>
- </tr>
- </table>
- <table class="commentbug commentbug-hidden" id="commentbug">
- <tr>
- <td class="comment" id="comment">Pagacap: First to 9 points</td>
- </tr>
- </table>
+ <div id="entire-bug">
+ <table class="scorebug">
+ <tr>
+ <td class="team1color" id="team1color"></td>
+ <td class="team1" id="team1">TM1</td>
+ <td class="score" id="score">0 – 0</td>
+ <td class="team2" id="team2">TM2</td>
+ <td class="team2color" id="team2color"></td>
+ </tr>
+ </table>
+ <table class="clockbug clockbug-hidden" id="clockbug">
+ <tr>
+ <td class="clock" id="clock">0:00</td>
+ </tr>
+ </table>
+ <table class="commentbug commentbug-hidden" id="commentbug">
+ <tr>
+ <td class="comment" id="comment">Pagacap: First to 9 points</td>
+ </tr>
+ </table>
+ <table class="scorebug scorebug2" id="scorebug2" style="display: none">
+ <tr>
+ <td class="team1" id="score2_team1">TM3</td>
+ <td class="score" id="score2_score">0 – 0</td>
+ <td class="team2" id="score2_team2">TM4</td>
+ </tr>
+ </table>
+ <table class="clockbug2 clockbug-hidden" id="clockbug2" style="display: none">
+ <tr>
+ <td class="clock" id="clock2">0:00</td>
+ </tr>
+ </table>
+ <table class="scorebug scorebug3" id="scorebug3" style="display: none">
+ <tr>
+ <td class="team1" id="score3_team1">TM3</td>
+ <td class="score" id="score3_score">0 – 0</td>
+ <td class="team2" id="score3_team2">TM4</td>
+ </tr>
+ </table>
+ <table class="clockbug3 clockbug-hidden" id="clockbug3" style="display: none">
+ <tr>
+ <td class="clock" id="clock3">0:00</td>
+ </tr>
+ </table>
+ </div>
<div class="lowerthird-headline lowerthird-headline-hidden" id="lowerthird-headline"><div class="lowerthird-headline-content lowerthird-headline-content-hidden" id="lowerthird-headline-content">
- John Doe<br>Ola Nordmann
+ Call on the field: Foul
</div></div>
<div class="lowerthird-subheading lowerthird-subheading-hidden" id="lowerthird-subheading"><div class="lowerthird-subheading-content lowerthird-subheading-content-hidden" id="lowerthird-subheading-content">
- Commentators, Trøndisk 2016
+ Commentators, Trøndisk 2018
+ </div></div>
+ <div class="lowerthird-picture lowerthird-picture-hidden" id="lowerthird-picture"><div class="lowerthird-picture-content lowerthird-picture-content-hidden" id="lowerthird-picture-content">
+ <img src="foul.png" id="lowerthird-img" style="display: none">
</div></div>
+ <table id="carousel">
+ </table>
<div id="manualcontrols">
<p>
- <a href="javascript:startclock()">start clock</a>
- <a href="javascript:stopclock()">stop clock</a>
- <a href="javascript:setclock(25*60)">reset clock</a>
+ <a href="javascript:startclock(0)">start clock</a>
+ <a href="javascript:stopclock(0)">stop clock</a>
+ <a href="javascript:setclock(0,0)">reset clock</a>
<a href="javascript:showclock()">show clock</a>
<a href="javascript:hideclock()">hide clock</a>
</p>
<p>
<a href="javascript:showlowerthird()">show lower third</a>
<a href="javascript:hidelowerthird()">hide lower third</a>
+ <a href="javascript:showmatch2()">show match 2</a>
+ <a href="javascript:hidematch2()">hide match 2</a>
+ </p>
+ <p>
+ <a href="javascript:stopcarousel();hidetable();showscorebug()">show scorebug</a>
+ <a href="javascript:stopcarousel();showroster('TFK')">show roster 1</a>
+ <a href="javascript:stopcarousel();showroster('ESK')">show roster 2</a>
+ <a href="javascript:stopcarousel();showrostercarousel('TFK', 'ESK')">show roster 1+2</a>
+ <a href="javascript:stopcarousel();showgroup('Group A')">show group A</a>
+ <a href="javascript:stopcarousel();showgroup('Group B')">show group B</a>
+ <a href="javascript:stopcarousel();showgroup('Group C')">show group C</a>
+ <a href="javascript:stopcarousel();showgroup('Playoffs 9th–11th')">show group L1</a>
+ <a href="javascript:stopcarousel();showgroup('Playoffs 12th–14th')">show group L2</a>
+ <a href="javascript:stopcarousel();showschedule()">show schedule</a>
+ <a href="javascript:stopcarousel();showcarousel()">show carousel</a>
+ <a href="javascript:stopcarousel();hidetable()">table out</a>
+ </p>
+ <p>
+ <a href="javascript:set_sound_shark_volume_db(-100.0)">sound shark off</a>
+ <a href="javascript:set_sound_shark_volume_db(0.0)">sound shark on</a>
</p>
</div>
-<script>
-var clock_running = false;
-var clock_visible = false;
-var comment_visible = false;
-var lowerthird_visible = false;
-var clock_left = 25 * 60;
-var scoreA = 0;
-var scoreB = 0;
-var clock_origin;
-var state = {};
-
-function setteams()
-{
- document.getElementById('team1').innerHTML = state['team1'];
- document.getElementById('team2').innerHTML = state['team2'];
-}
-
-function setcolors()
-{
- document.getElementById('team1color').style.backgroundColor = state['team1color'];
- document.getElementById('team2color').style.backgroundColor = state['team2color'];
-}
-
-function setscore()
-{
- scoreA = state['score1'];
- scoreB = state['score2'];
- update_score();
-}
-
-function startclock()
-{
- if (!clock_running) {
- clock_origin = Date.now();
- clock_running = true;
- }
- showclock();
-}
-
-function stopclock()
-{
- if (!clock_running) return;
- clock_left = time_left();
- clock_origin = Date.now();
- clock_running = false;
-}
-
-function setclock(amount)
-{
- clock_left = amount;
- clock_origin = Date.now();
- update_clock();
-}
-
-function setclockfromstate()
-{
- var amount = parseInt(state['clock_min']) * 60 + parseInt(state['clock_sec']);
- setclock(amount);
-}
-
-function showclock()
-{
- if (clock_visible) return;
- var clockbug = document.getElementById('clockbug');
- clockbug.className = 'clockbug clockbug-animate-in';
- clock_visible = true;
-}
-
-function hideclock()
-{
- if (!clock_visible) return;
- var clockbug = document.getElementById('clockbug');
- clockbug.className = 'clockbug clockbug-animate-out';
- clock_visible = false;
-}
-
-function setcomment()
-{
- document.getElementById('comment').innerHTML = state['comment'];
-}
-
-function showcomment()
-{
- if (comment_visible) return;
- var commentbug = document.getElementById('commentbug');
- commentbug.className = 'commentbug commentbug-animate-in';
- comment_visible = true;
-}
-
-function hidecomment()
-{
- if (!comment_visible) return;
- var commentbug = document.getElementById('commentbug');
- commentbug.className = 'commentbug commentbug-animate-out';
- comment_visible = false;
-}
-
-function showlowerthird()
-{
- if (lowerthird_visible) return;
-
- // With no flexbox, this is how it has to be...
- var f = document.getElementById('lowerthird-headline');
- var g = document.getElementById('lowerthird-headline-content');
- f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
-
- f = document.getElementById('lowerthird-subheading');
- g = document.getElementById('lowerthird-subheading-content');
- f.style.paddingTop = Math.round((f.clientHeight - g.clientHeight) / 2) + 'px';
-
- document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-animate-in';
- document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-in';
- document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-in';
- document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-in';
- lowerthird_visible = true;
-}
-
-function setandshowlowerthird()
-{
- document.getElementById('lowerthird-headline-content').innerHTML = state['text1'];
- document.getElementById('lowerthird-subheading-content').innerHTML = state['text2'];
- showlowerthird();
-}
-
-function hidelowerthird()
-{
- if (!lowerthird_visible) return;
- document.getElementById('lowerthird-headline').className = 'lowerthird-headline lowerthird-headline-hidden lowerthird-headline-animate-out';
- document.getElementById('lowerthird-headline-content').className = 'lowerthird-headline-content lowerthird-headline-content-animate-out';
- document.getElementById('lowerthird-subheading').className = 'lowerthird-subheading lowerthird-subheading-animate-out';
- document.getElementById('lowerthird-subheading-content').className = 'lowerthird-subheading-content lowerthird-subheading-content-animate-out';
- lowerthird_visible = false;
-}
-
-function time_left()
-{
- var elapsed = (Date.now() - clock_origin) * 1e-3;
- if (elapsed > clock_left) return 0;
- return Math.ceil(clock_left - elapsed);
-}
-
-function update_clock()
-{
- var left = time_left();
- var min = Math.floor(left / 60);
- var sec = left % 60;
-
- if (sec < 10) sec = "0" + sec;
- document.getElementById('clock').innerHTML = min + ":" + sec;
-}
-
-function goalA()
-{
- ++scoreA;
- update_score();
-}
-
-function goalB()
-{
- ++scoreB;
- update_score();
-}
-
-function ungoalA()
-{
- if (scoreA > 0) --scoreA;
- update_score();
-}
-
-function ungoalB()
-{
- if (scoreB > 0) --scoreB;
- update_score();
-}
-
-function resetscore()
-{
- scoreA = scoreB = 0;
- update_score();
-}
-
-function update_score()
-{
- document.getElementById('score').innerHTML = scoreA + " – " + scoreB;
-}
-
-/* called by caspar only */
-function play()
-{
- document.getElementById('manualcontrols').style.display = 'none';
- document.getElementById('area').style.display = 'none';
-
- // Old CEF workaround
- document.getElementById('lowerthird-subheading').style.top = '638px';
-}
-
-function update(v)
-{
- console.log('[[[' + v + ']]]');
- var j = JSON.parse(v);
- for(var key in j) state[key] = j[key];
-}
-
-setInterval(function() {
- if (clock_running) {
- update_clock();
- }
-}, 100);
-update_score();
+<script src="jsrsasign-all-min.js" type="text/javascript"></script>
-//play();
-//startclock();
-</script>
+<script src="config.js" type="text/javascript"></script>
+<script src="carousel.js" type="text/javascript"></script>
+<script src="score.js" type="text/javascript"></script>
+<script src="quickl3.js" type="text/javascript"></script>
+<script src="roster.js" type="text/javascript"></script>
+<script src="update_sheets.js" type="text/javascript"></script>
</body>
</html>
projects / ultimatescore / blobdiff