Skip to content

Commit 53dfb4b

Browse files
scaredcatscaredcat
committed
added transition between small and full scoreboard
1 parent c7a3b0a commit 53dfb4b

File tree

2 files changed

+73
-51
lines changed

2 files changed

+73
-51
lines changed

‎index.html‎

Lines changed: 73 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Darwin AFL Scoring - DTS V5</title>
6+
<title>Darwin AFL Scoring - DTS V6</title>
77
<style>
88
/*import the font to use for the scoring webpage*/
99
@font-face {
@@ -47,30 +47,41 @@
4747
#score {
4848
line-height:22px;
4949
width: 385px; /*width of the background image*/
50-
height: 46px; /*height of the background image*/
51-
border-collapse: collapse;
5250
cursor: default;
53-
}
54-
55-
#score-container {
56-
background-image: url('score-background.png');
57-
padding-top: 22px; /*make room for the ntfl hashtag*/
51+
font-family: 'NewsGoth Cn BT';
5852

5953
/*position of the scoreboard*/
6054
position: absolute;
6155
top: 600px;
6256
left: 40px;
6357
}
6458

65-
#score.small {
66-
width: 293px; /*width of the background only showing the points*/
59+
#score > div {
60+
float: left;
61+
position: relative;
62+
}
63+
64+
.time div {
65+
height: 50%;
6766
}
6867

69-
/*all cells in the score table should have no padding and make use of the newgoth font*/
70-
#score td {
71-
font-family:'NewsGoth Cn BT';
72-
padding-top: 0;
73-
padding-bottom: 0;
68+
.tag, .time, .number, .team {
69+
background-image: url('score-background.png');
70+
background-position-y: -21px;
71+
height: 47px;
72+
padding: 1px;
73+
}
74+
75+
.team, .number {
76+
margin-left: 4px;
77+
}
78+
79+
.tag {
80+
width: 100%;
81+
height: 19px;
82+
padding: 0;
83+
margin-bottom: 2px;
84+
background-position: 0 0;
7485
}
7586

7687
/*font used for displaying the time and qt/ht/3q/ft */
@@ -79,50 +90,68 @@
7990
width: 55px; /*width of the first section of the score widget*/
8091
text-align: center;
8192
font-size: 14pt;
93+
94+
background-clip: padding-box;
8295
}
8396

8497
/*font used to display the numbers on the score widget*/
8598
.number {
8699
width: 38px; /* width available for each number on the scoreboard */
87-
padding-left: 7px; /*space between the numbers on the scoreboard */
88100
font-size: 18pt;
89101
text-align: center;
90102
font-weight: bold;
103+
104+
background-position-x: -254px;
105+
background-clip: padding-box;
106+
transition: transform 240ms ease-out;
107+
z-index: -1;
108+
}
109+
110+
.small {
111+
transform: translateX(-89px);
91112
}
92113

93114
.points {
94115
color: white;
116+
background-position-x: -346px;
95117
}
96118

97119
/*font styling used for the team names*/
98120
.team {
99-
width: 185px; /*the width available for the team name*/
100-
padding-left: 10px; /*space to the left of the team names*/
121+
width: 182px; /*the width available for the team name*/
101122
font-size: 15pt;
102123
color: white;
103124
font-weight: bold;
125+
padding-left: 4px;
126+
127+
background-position-x: -63px;
104128
}
105129
</style>
106130
</head>
107131
<body>
108132

109-
<div id="score-container">
110-
<table id="score">
111-
<tr>
112-
<td class="time" align="center" id="quarter"></td>
113-
<td class="team" id="home" contenteditable="true">HOME</td>
114-
<td class="number" id="home-goals">0</td>
115-
<td class="number" id="home-behinds">0</td>
116-
<td class="number points" id="home-points">0</td>
117-
</tr>
118-
<tr>
119-
<td class="time" id="clock">00:00</td>
120-
<td class="team" id="away" contenteditable="true">AWAY</td>
121-
<td class="number" id="away-goals">0</td>
122-
<td class="number" id="away-behinds">0</td>
123-
<td class="number points" id="away-points">0</td>
124-
</tr>
125-
</table>
133+
<div id="score">
134+
<div class="tag"></div>
135+
<div class="time">
136+
<div id="quarter"></div>
137+
<div id="clock">00:00</div>
138+
</div>
139+
<div class="team">
140+
<div id="home" contenteditable="true">HOME</div>
141+
<div id="away" contenteditable="true">AWAY</div>
142+
</div>
143+
<div class="number">
144+
<div id="home-goals">0</div>
145+
<div id="away-goals">0</div>
146+
</div>
147+
<div class="number">
148+
<div id="home-behinds">0</div>
149+
<div id="away-behinds">0</div>
150+
</div>
151+
<div class="number points">
152+
<div id="home-points">0</div>
153+
<div id="away-points">0</div>
154+
</div>
126155
</div>
127156

128157
<img id='logo' src='logo.png' alt='logo' style="display: none;" />
@@ -309,21 +338,14 @@
309338
* This function takes the score values and displays them to the screen
310339
*/
311340
function displayScore() {
312-
if(smallDisplay === true) {
313-
document.getElementById('home-goals').style.display = 'none';
314-
document.getElementById('home-behinds').style.display = 'none';
315-
document.getElementById('away-goals').style.display = 'none';
316-
document.getElementById('away-behinds').style.display = 'none';
317-
document.getElementById('score-container').style.backgroundImage = "url('score-background-small.png')";
318-
document.getElementById('score').className = 'small';
319-
} else {
320-
document.getElementById('home-goals').style.display = 'table-cell';
321-
document.getElementById('home-behinds').style.display = 'table-cell';
322-
document.getElementById('away-goals').style.display = 'table-cell';
323-
document.getElementById('away-behinds').style.display = 'table-cell';
324-
document.getElementById('score-container').style.backgroundImage = "url('score-background.png')";
325-
document.getElementById('score').className = '';
326-
}
341+
const elements = document.getElementsByClassName('number');
342+
for (let i = 0; i < elements.length; i++) {
343+
if (smallDisplay) {
344+
elements[i].classList.add('small');
345+
} else {
346+
elements[i].classList.remove('small');
347+
}
348+
};
327349

328350
//show home team score
329351
document.getElementById('home-goals').innerHTML = score.home.goals;
@@ -405,4 +427,4 @@
405427
}
406428
</script>
407429
</body>
408-
</html>
430+
</html>

‎score-background-small.png‎

-51.2 KB
Binary file not shown.

0 commit comments

Comments
 (0)