Skip to content

Commit 8edb6f7

Browse files
thecouchcoderthecouchcoder
committed
new styles and dynamic play/pause button that actually functions
1 parent a24ef21 commit 8edb6f7

File tree

3 files changed

+154
-34
lines changed

3 files changed

+154
-34
lines changed

‎app/index.js

Lines changed: 100 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,125 @@ import document from "document";
55
import clock from "clock";
66
clock.granularity = "seconds";
77

8+
//grab screen elements
89
let background = document.getElementById("background");
9-
let play = document.getElementById("playButton");
10-
let pause = document.getElementById("pauseButton");
10+
let backgroundColor = document.getElementsByClassName("backgroundColor")
1111
let progressArc = document.getElementById("progressArc");
12+
let backgroundArc = document.getElementById("backgroundArc");
1213
let countdown = document.getElementById("countdown");
1314
let sprintCounter = document.getElementById("sprintCounter");
14-
15-
let currentIndex = background.value;
15+
let playPauseButton = document.getElementById("playPauseButton");
16+
let playPauseIcon = playPauseButton.getElementById("combo-button-icon");
17+
let playPauseIconPressed = playPauseButton.getElementById("combo-button-icon-press");
18+
let oldBackground = background.value;
1619
background.value = 0;
1720

21+
1822
let intervalInSeconds = 1500;
1923
let formattedHours = 0;
2024
let formattedMinutes = 0;
2125
let formattedSeconds = 0;
2226
let seconds = intervalInSeconds;
27+
let counting = false;
2328

2429
function secondsToAngle(seconds){
2530
//degree per second * elapsedseconds
2631
return (360/intervalInSeconds) * seconds;
2732
}
2833

2934
function progress(){
30-
seconds--;
31-
32-
//calculate and update angle
33-
let a = secondsToAngle(intervalInSeconds - seconds);
34-
progressArc.sweepAngle = a;
35-
36-
//calculate time left
37-
formattedHours = Math.floor((seconds/60/60) % 60);
38-
formattedMinutes = Math.floor((seconds/60) % 60);
39-
formattedSeconds = Math.floor(seconds % 60);
40-
41-
//pad with 0
42-
formattedHours = formattedHours < 10 ? "0" + formattedHours : formattedHours;
43-
formattedMinutes = formattedMinutes < 10 ? "0" + formmatedMinutes : formattedMinutes;
44-
formattedSeconds = formattedSeconds < 10 ? "0" + formattedSeconds : formattedSeconds;
45-
46-
//update countdown text
47-
countdown.text = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
35+
if (counting){
36+
seconds--;
37+
38+
//calculate and update angle
39+
let a = secondsToAngle(intervalInSeconds - seconds);
40+
progressArc.sweepAngle = a;
41+
42+
//calculate time left
43+
formattedHours = Math.floor((seconds/60/60) % 60);
44+
formattedMinutes = Math.floor((seconds/60) % 60);
45+
formattedSeconds = Math.floor(seconds % 60);
46+
47+
//pad with 0
48+
formattedHours = formattedHours < 10 ? "0" + formattedHours : formattedHours;
49+
formattedMinutes = formattedMinutes < 10 ? "0" + formmatedMinutes : formattedMinutes;
50+
formattedSeconds = formattedSeconds < 10 ? "0" + formattedSeconds : formattedSeconds;
51+
52+
//update countdown text
53+
countdown.text = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
54+
}
4855
}
4956

5057
clock.ontick = () => progress();
5158

52-
play.onactivate = (evt) => {}
59+
playPauseButton.onactivate = (evt) => {
60+
//countingdown
61+
if (counting){
62+
counting = false
63+
playPauseIcon.image = "play.png";
64+
playPauseIconPressed.image = "play_press.png";
65+
} //paused
66+
else{
67+
counting = true;
68+
playPauseIcon.image = "pause.png";
69+
playPauseIconPressed.image = "pause_press.png";
70+
}
71+
72+
}
73+
74+
75+
//style functions
76+
setInterval(()=>{
77+
if(background.value != oldBackground){
78+
applyStyle(background.value);
79+
oldBackground = background.value;
80+
}}, 100);
81+
82+
function applyStyle(value){
83+
let colorProfile = style[value];
84+
backgroundColor[value].style.fill = colorProfile.background;
85+
progressArc.style.fill = colorProfile.accentColor;
86+
backgroundArc.style.fill = colorProfile.backgroundArc;
87+
countdown.style.fill = colorProfile.accentColor;
88+
playPauseButton.style.fill = colorProfile.accentColor;
89+
// pauseButton.style.fill = colorProfile.accentColor;
90+
sprintCounter.style.fill = colorProfile.baseColor;
91+
}
92+
93+
const style = [
94+
{ background: "#000",
95+
baseColor: "#fff",
96+
accentColor: "#FF9F1E",
97+
backgroundArc: "#636366"
98+
},
99+
{ background: "#000",
100+
baseColor: "#fff",
101+
accentColor: "#00FFFF",
102+
backgroundArc: "#636366"
103+
},
104+
{ background: "#000",
105+
baseColor: "#fff",
106+
accentColor: "#48f442",
107+
backgroundArc: "#636366"
108+
},
109+
{ background: "#000",
110+
baseColor: "#fff",
111+
accentColor: "#f727ca",
112+
backgroundArc: "#636366"
113+
},
114+
{ background: "#44090C",
115+
baseColor: "#fff",
116+
accentColor: "#fff",
117+
backgroundArc: "#636366"
118+
},
119+
{ background: "#51a3a3",
120+
baseColor: "#fff",
121+
accentColor: "#dfcc74",
122+
backgroundArc: "#636366"
123+
},
124+
{ background: "#0b032d",
125+
baseColor: "#fff",
126+
accentColor: "#f67e7d",
127+
backgroundArc: "#636366"
128+
}
129+
];

‎resources/index.gui

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,25 @@
11
<svg>
22
<use id="background" href="#panoramaview">
33
<use id="color1" href="#panoramaview-item">
4-
<rect width="100%" height="100%" fill="red"/>
4+
<rect class="backgroundColor" width="100%" height="100%"/>
55
</use>
66
<use id="color2" href="#panoramaview-item">
7-
<rect width="100%" height="100%" fill="white"/>
7+
<rect class="backgroundColor" width="100%" height="100%"/>
88
</use>
99
<use id="color3" href="#panoramaview-item">
10-
<rect width="100%" height="100%" fill="blue"/>
10+
<rect class="backgroundColor" width="100%" height="100%"/>
11+
</use>
12+
<use href="#panoramaview-item">
13+
<rect class="backgroundColor" width="100%" height="100%"/>
14+
</use>
15+
<use href="#panoramaview-item">
16+
<rect class="backgroundColor" width="100%" height="100%"/>
17+
</use>
18+
<use href="#panoramaview-item">
19+
<rect class="backgroundColor" width="100%" height="100%"/>
20+
</use>
21+
<use href="#panoramaview-item">
22+
<rect class="backgroundColor" width="100%" height="100%"/>
1123
</use>
1224

1325
<use id="pagination-dots" href="#pagination-widget" y="8">
@@ -16,27 +28,29 @@
1628
<use href="#pagination-dot" />
1729
<use href="#pagination-dot" />
1830
<use href="#pagination-dot" />
31+
<use href="#pagination-dot" />
32+
<use href="#pagination-dot" />
1933
<use href="#pagination-highlight-dot" />
2034
</use>
21-
</use>
35+
</use>
2236

23-
<arc id="backgroundArc" x="30" y="30" height="240" width="240" fill="fb-dark-gray" arc-width="20" start-angle="0" sweep-angle="360"/>
24-
<arc id="progressArc" x="30" y="30" height="240" width="240" fill="black" arc-width="20" start-angle="0" sweep-angle="0"/>
37+
<arc id="backgroundArc" class="backgroundArcColor" x="30" y="30" height="240" width="240" arc-width="20" start-angle="0" sweep-angle="360"/>
38+
<arc id="progressArc" class="accentColor" x="30" y="30" height="240" width="240" arc-width="20" start-angle="0" sweep-angle="0"/>
2539

26-
<text id="countdown" x="150" y="160" fill="black" font-family="System-Bold" font-size="45" text-anchor="middle" text-length="12">25:00</text>
27-
<text id="sprintCount" x="150" y="210" fill="black" font-family="System-Regular" font-size="30" text-anchor="middle">1 of 4</text>
40+
<text id="countdown" class="accentColor" x="150" y="160">00:25:00</text>
41+
<text id="sprintCounter" class="baseColor" x="150" y="210">1 of 4</text>
2842

29-
<use class="cornerButton" id="playButton" href="#combo-button-lower-right" fill="black">
43+
<use id="playPauseButton" class="accentColor" href="#combo-button-lower-right">
3044
<set href="combo-button-icon" attributeName="href" to="play.png"/>
3145
<set href="combo-button-icon-press" attributeName="href" to="play_press.png"/>
3246
<set href="combo-button-stroke" attributeName="display" to="inline"/>
3347
</use>
3448

35-
<use class="cornerButton" id="pauseButton" href="#combo-button-lower-left" fill="black">
49+
<!-- <use id="pauseButton" class="accentColor" href="#combo-button-lower-left">
3650
<set href="combo-button-icon" attributeName="href" to="pause.png"/>
3751
<set href="combo-button-icon-press" attributeName="href" to="pause_press.png"/>
3852
<set href="combo-button-stroke" attributeName="display" to="inline"/>
39-
</use>
53+
</use> -->
4054

4155

4256
</svg>

‎resources/styles.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.backgroundColor{
2+
fill: "#000000"
3+
}
4+
5+
.accentColor{
6+
fill: "#FF9F1E";
7+
}
8+
9+
.baseColor{
10+
fill: "#FFFFFF";
11+
}
12+
13+
.backgroundArcColor{
14+
fill: "#636366";
15+
}
16+
17+
#countdown{
18+
font-family: "System-Bold";
19+
font-size: "45";
20+
text-anchor: "middle";
21+
text-length: "12";
22+
}
23+
24+
#sprintCounter{
25+
font-family: "System-Regular";
26+
font-size: "30";
27+
text-anchor: "middle";
28+
}
29+

0 commit comments

Comments
 (0)