Good evening everyone. I'm having some trouble with this bit of code and have been at it for a few hours. If you take a look in the constructor at this.drawArc and then in the prototype, I've logged to the console a couple things. You can see this.count logs a value, but this.drawArc does not. Obviously, this.minutes and this.toSeconds work, or the timer wouldn't start, but why does the drawArc not register the values?? I had this(the status ring) working before placing it in a constructor, but for some reason, it no longer registers any values. I have attached a fiddle.
NOTES: this is not complete - currently you have to re-run if you want to enter a new value into the input field. Once a value has been entered into the input(the small circle above the button) you can hover over the canvas(the larger circle) to view the countdown. The reason it is on hover is for those that don't want to see the ticking clock and prefer just the visual of the status ring. Any ideas??? I've been stuck for a few hours. Thank you in advance
https://jsfiddle.net/asthewaterfalls/szn0mch1/9/
function Pomodoro(userInput) {
this.minutes = userInput;
this.toSeconds = 60 * this.minutes;//seconds - actual
this.cout = this.toSeconds; //for timer
this.seconds = 0; //display
this.count = 0; //for status ring
this.circleStart = Math.PI * 1.5;
this.drawArc = (2 / this.toSeconds) * this.count;
}
Pomodoro.prototype.statusRing = function () {
if(this.count <= this.toSeconds) {
dom.canv.beginPath();
dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc), false);
dom.canv.stroke();
this.count++;
console.log(this.count, this.drawArc);
const timeout = setTimeout(() => this.statusRing(), 1000 );
}
};
I took a look at your fiddle. With two small changes I got some animation into the blue ring around the clock. I did not check the ratios or angeles.
I made drawArg
a function, calculating with the current value as argument and this.toSeconds
as max value:
this.drawArc = function(arg){ return (2 / this.toSeconds) * arg; };
Second, I calld the function in dom.conv.arc()
:
dom.canv.arc(/*...*/, Math.PI * (1.5 + this.drawArc(this.count)), /*...*/);
Here is the complete example:
function Pomodoro(userInput) {
this.minutes = userInput;
this.toSeconds = 60 * this.minutes;//seconds - actual
this.cout = this.toSeconds; //for timer
this.seconds = 0; //display
this.count = 0; //for status ring
this.circleStart = Math.PI * 1.5;
this.drawArc = function(arg){ return (2 / this.toSeconds) * arg; };
}
Pomodoro.prototype.statusRing = function () {
if(this.count <= this.toSeconds) {
dom.canv.beginPath();
dom.canv.arc(125, 125, 121, this.circleStart, Math.PI * (1.5 + this.drawArc(this.count)), false);
dom.canv.stroke();
this.count++;
console.log(this.count, this.drawArc);
const timeout = setTimeout(() => this.statusRing(), 1000 );
}
};
Please let me know, if this helps ;)