Skip to content

Commit 5be5fd8

Browse files
thecouchcoderthecouchcoder
committed
session counting now works, sessions also work. Needs to be cleaned up
1 parent 8edb6f7 commit 5be5fd8

File tree

5 files changed

+184
-105
lines changed

5 files changed

+184
-105
lines changed

‎app/index.js

Lines changed: 100 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -4,126 +4,129 @@
44
import document from "document";
55
import clock from "clock";
66
clock.granularity = "seconds";
7+
import { style } from "./style.js"
78

89
//grab screen elements
9-
let background = document.getElementById("background");
10-
let backgroundColor = document.getElementsByClassName("backgroundColor")
11-
let progressArc = document.getElementById("progressArc");
12-
let backgroundArc = document.getElementById("backgroundArc");
13-
let countdown = document.getElementById("countdown");
14-
let sprintCounter = document.getElementById("sprintCounter");
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;
19-
background.value = 0;
20-
21-
22-
let intervalInSeconds = 1500;
10+
const progressArc = document.getElementById("progressArc");
11+
const countdown = document.getElementById("countdown");
12+
const sprintCounter = document.getElementById("sprintCounter");
13+
const sessionText = document.getElementById("sessionText");
14+
const playPauseButton = document.getElementById("playPauseButton");
15+
const playPauseIcon = playPauseButton.getElementById("combo-button-icon");
16+
const playPauseIconPressed = playPauseButton.getElementById("combo-button-icon-press");
17+
18+
19+
const flowInSeconds = 5;//1500;
20+
const shortBreakInSeconds = 10;//300;
21+
const longBreakInSeconds = 15;//900;
22+
const sprints = 4;
23+
const flowText = "Flow";
24+
const breakText = "Break";
25+
26+
2327
let formattedHours = 0;
2428
let formattedMinutes = 0;
2529
let formattedSeconds = 0;
26-
let seconds = intervalInSeconds;
30+
let seconds = flowInSeconds;
2731
let counting = false;
2832

33+
//used to toggle between flow sessions and breaks
34+
let flow = true;
35+
let sessionTime = flowInSeconds;
36+
let currentSprint = 1;
37+
38+
console.log(style);
39+
style();
40+
clock.ontick = () => progress();
41+
playPauseButton.onactivate = (evt) => {
42+
//countingdown
43+
if (counting){
44+
pause();
45+
} //paused
46+
else{
47+
play();
48+
}
49+
50+
}
51+
2952
function secondsToAngle(seconds){
3053
//degree per second * elapsedseconds
31-
return (360/intervalInSeconds) * seconds;
54+
return (360/sessionTime) * seconds;
3255
}
3356

3457
function progress(){
3558
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);
59+
if( !isSprintOver(seconds) ) {
60+
seconds--;
61+
//calculate and update angle
62+
progressArc.sweepAngle = secondsToAngle(sessionTime - seconds);
63+
}
64+
}
65+
66+
formatCountdown(seconds);
67+
}
4668

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;
69+
function isSprintOver(seconds){
70+
if(seconds === 0){
71+
pause();
72+
nextSprint();
73+
return true;
74+
}
75+
return false;
76+
}
5177

52-
//update countdown text
53-
countdown.text = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
78+
function nextSprint(){
79+
//swap session type
80+
flow = !flow;
81+
82+
if (flow){
83+
setupSession(flowInSeconds, flowText);
84+
currentSprint++;
85+
sprintCounter.text = `${currentSprint} of ${sprints}`
86+
}
87+
else {
88+
if(currentSprint < sprints){
89+
setupSession(shortBreakInSeconds, breakText);
90+
}
91+
else{
92+
setupSession(longBreakInSeconds, breakText);
93+
}
5494
}
5595
}
5696

57-
clock.ontick = () => progress();
97+
function setupSession(nextSessionSeconds, text){
98+
//change the arc back to 0
99+
progressArc.sweepAngle = 0;
100+
//update session text
101+
sessionText.text = text;
102+
//set the correct seconds for progress
103+
sessionTime = seconds = nextSessionSeconds;
104+
105+
}
58106

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{
107+
function play(){
67108
counting = true;
68109
playPauseIcon.image = "pause.png";
69110
playPauseIconPressed.image = "pause_press.png";
70-
}
71-
72111
}
73112

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;
113+
function pause(){
114+
counting = false
115+
playPauseIcon.image = "play.png";
116+
playPauseIconPressed.image = "play_press.png";
91117
}
92118

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-
];
119+
function formatCountdown(seconds){
120+
//calculate time left
121+
formattedHours = Math.floor((seconds/60/60) % 60);
122+
formattedMinutes = Math.floor((seconds/60) % 60);
123+
formattedSeconds = Math.floor(seconds % 60);
124+
125+
//pad with 0
126+
formattedHours = formattedHours < 10 ? "0" + formattedHours : formattedHours;
127+
formattedMinutes = formattedMinutes < 10 ? "0" + formattedMinutes : formattedMinutes;
128+
formattedSeconds = formattedSeconds < 10 ? "0" + formattedSeconds : formattedSeconds;
129+
130+
//update countdown text
131+
countdown.text = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
132+
}

‎app/style.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
//style functions
2+
3+
import document from "document";
4+
5+
//grab screen elements
6+
const background = document.getElementById("background");
7+
const backgroundColor = document.getElementsByClassName("backgroundColor")
8+
const progressArc = document.getElementById("progressArc");
9+
const backgroundArc = document.getElementById("backgroundArc");
10+
const countdown = document.getElementById("countdown");
11+
const sprintCounter = document.getElementById("sprintCounter");
12+
const playPauseButton = document.getElementById("playPauseButton");
13+
const playPauseIcon = playPauseButton.getElementById("combo-button-icon");
14+
const playPauseIconPressed = playPauseButton.getElementById("combo-button-icon-press");
15+
const oldBackground = background.value;
16+
17+
export function style(){
18+
background.value = 0;
19+
20+
//check if they changed the background every 100 ms
21+
setInterval(()=>{
22+
if(background.value != oldBackground){
23+
applyStyle(background.value);
24+
oldBackground = background.value;
25+
}}, 100);
26+
}
27+
28+
function applyStyle(value){
29+
let colorProfile = styleProfiles[value];
30+
backgroundColor[value].style.fill = colorProfile.background;
31+
progressArc.style.fill = colorProfile.accentColor;
32+
backgroundArc.style.fill = colorProfile.backgroundArc;
33+
countdown.style.fill = colorProfile.accentColor;
34+
playPauseButton.style.fill = colorProfile.accentColor;
35+
// pauseButton.style.fill = colorProfile.accentColor;
36+
sprintCounter.style.fill = colorProfile.baseColor;
37+
}
38+
39+
const styleProfiles = [
40+
{ background: "#000",
41+
baseColor: "#fff",
42+
accentColor: "#FF9F1E",
43+
backgroundArc: "#636366"
44+
},
45+
{ background: "#000",
46+
baseColor: "#fff",
47+
accentColor: "#00FFFF",
48+
backgroundArc: "#636366"
49+
},
50+
{ background: "#000",
51+
baseColor: "#fff",
52+
accentColor: "#48f442",
53+
backgroundArc: "#636366"
54+
},
55+
{ background: "#000",
56+
baseColor: "#fff",
57+
accentColor: "#f727ca",
58+
backgroundArc: "#636366"
59+
},
60+
{ background: "#44090C",
61+
baseColor: "#fff",
62+
accentColor: "#fff",
63+
backgroundArc: "#636366"
64+
},
65+
{ background: "#51a3a3",
66+
baseColor: "#fff",
67+
accentColor: "#dfcc74",
68+
backgroundArc: "#636366"
69+
},
70+
{ background: "#0b032d",
71+
baseColor: "#fff",
72+
accentColor: "#f67e7d",
73+
backgroundArc: "#636366"
74+
}
75+
];

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"fitbit": {
33
"appUUID": "fe63f225-3f27-47fc-9a8c-12261dcf0da9",
44
"appType": "app",
5-
"appDisplayName": "ProductivityFlow",
5+
"appDisplayName": "WorkFlow",
66
"iconFile": "resources/icon.png",
77
"wipeColor": "#8bc34a",
88
"requestedPermissions": [],
@@ -12,7 +12,7 @@
1212
],
1313
"i18n": {
1414
"en": {
15-
"name": "ProductivityFlow"
15+
"name": "WorkFlow"
1616
}
1717
}
1818
}

‎resources/index.gui

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
<arc id="backgroundArc" class="backgroundArcColor" x="30" y="30" height="240" width="240" arc-width="20" start-angle="0" sweep-angle="360"/>
3838
<arc id="progressArc" class="accentColor" x="30" y="30" height="240" width="240" arc-width="20" start-angle="0" sweep-angle="0"/>
3939

40+
<text id="sessionText" class="baseColor" x="150" y="100">Flow</text>
4041
<text id="countdown" class="accentColor" x="150" y="160">00:25:00</text>
4142
<text id="sprintCounter" class="baseColor" x="150" y="210">1 of 4</text>
4243

@@ -45,12 +46,6 @@
4546
<set href="combo-button-icon-press" attributeName="href" to="play_press.png"/>
4647
<set href="combo-button-stroke" attributeName="display" to="inline"/>
4748
</use>
48-
49-
<!-- <use id="pauseButton" class="accentColor" href="#combo-button-lower-left">
50-
<set href="combo-button-icon" attributeName="href" to="pause.png"/>
51-
<set href="combo-button-icon-press" attributeName="href" to="pause_press.png"/>
52-
<set href="combo-button-stroke" attributeName="display" to="inline"/>
53-
</use> -->
5449

5550

5651
</svg>

‎resources/styles.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,9 @@
2727
text-anchor: "middle";
2828
}
2929

30+
#sessionText{
31+
font-family: "System-Regular";
32+
font-size: "30";
33+
text-anchor: "middle";
34+
}
35+

0 commit comments

Comments
 (0)