example timer
class Store { | |
status = "" | |
cycleCount = 0; | |
count = 0; | |
constructor(status){ | |
this.status = status | |
this.cycleCount = 3; | |
this.count = 1; | |
} | |
getSatus(){ | |
return this.status | |
} | |
setStatus(status){ | |
this.status = status | |
} | |
getCycleCount(){ | |
return this.cycleCount | |
} | |
setCycleCount(count){ | |
this.cycleCount = count | |
} | |
getCount(){ | |
return this.count | |
} | |
setCount(count){ | |
this.count = count | |
} | |
} | |
const countDownForView = (time, timeInstance) => { | |
const remainigTime = (time * 60 *1000) - timeInstance.getElapsedTime() - (Date.now() - timeInstance.getStartTime()); | |
const restMin = String(Math.floor((remainigTime / 1000 / 60) % 60)).padStart(2, '0'); | |
const restSec = String(Math.floor((remainigTime / 1000) % 60)).padStart(2, '0'); | |
return {res: `${restMin}:${restSec}`, remainigTime}; | |
} | |
const reculcuteRemainingTime = (timeInstance, stateInstance, view, remainigTime) => { | |
let id | |
if (remainigTime >= 0) { | |
id = setTimeout(() => { | |
reculcuteRemainingTime(timeInstance) | |
}, 100); | |
timeInstance.setTimeOutId(id) | |
} else if (remainigTime < 0 ) { | |
clearTimeout(timeInstance.getTimeOutId()); | |
timeInstance.setStartTime(Date.now()) | |
timeInstance.setElapsedTime(0); | |
if (stateInstance.getCount() === stateInstance.getCycleCount() && stateInstance.getState() === "work") { | |
stateInstance.setState("longBreak") | |
view.displayState(stateInstance.getSatus()); | |
reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.longBreakTime); | |
} else if (stateInstance.getStatus() === "work") { | |
stateInstance.setStatus("break") | |
// displayState(state); | |
view.display(stateInstance.getStatus(), timeInstance.getCount()); | |
reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.ibreakTime); | |
} else if (stateInstance.getState() === "break") { | |
stateInstance.setStatus("work") | |
timeInstance.setCount(timeInstance.getCount() + 1); | |
view.display(stateInstance.getStatus(), timeInstance.getCount()); | |
reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.workTime); | |
} else if (stateInstance.getState() === "longBreak") { | |
stateInstance.setStatus("work") | |
timeInstance.setCount(1) | |
view.display(stateInstance.getStatus(), timeInstance.getCount()); | |
reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.workTime); | |
} | |
} | |
class Time { | |
remainigTime = null | |
restMin = null | |
restSec = null | |
elapsedTime = null | |
startTime = null | |
timeOutId = "" | |
static workTime = 25 | |
static breakTime = 5 | |
static longBreakTime = 30 | |
constructor(){ | |
this.startTime = Date.now(); | |
} | |
getTimeOutId(){ | |
return this.timeOutId | |
} | |
setTimeOutId(id){ | |
this.timeOutId = id | |
} | |
setElapsedTime(time){ | |
this.elapsedTime = time | |
} | |
getElapsedTime(){ | |
return this.elapsedTime | |
} | |
static getRemainigTime (time, elapsedTime, startTime){ | |
return (time * 60 *1000) - elapsedTime - (Date.now() - startTime); | |
} | |
setStartTime(time){ | |
this.startTime = time | |
} | |
getStartTime(){ | |
return this.startTime | |
} | |
nowTime(){ | |
} | |
} | |
class View { | |
timer = null; | |
start = null; | |
stop = null; | |
reset = null; | |
timeState = null; | |
cycle = null; | |
time = null | |
constructor(document, time, store){ | |
this.timer = document.getElementById('timer'); | |
this.start = document.getElementById('start'); | |
this.stop = document.getElementById('stop'); | |
this.reset = document.getElementById('reset'); | |
this.timeState = document.getElementById('timeState'); | |
this.cycle = document.getElementById('cycle'); | |
this.time = time | |
this.state = store | |
const status = this.state.getSatus() | |
const count = this.state.getCount() | |
this.displayState(status, count) | |
this.displayTime(Time.workTime) | |
this.setButtonState(false, true, true) | |
this.start.addEventListener('click', () => { | |
this.setButtonState(true, false, true); | |
this.time.setStartTime(Date.now()) | |
const status = this.state.getSatus() | |
switch (status) { | |
case "work": | |
const {res: res1, remainigTime} = countDownForView(Time.workTime, this.time, this); | |
this.displayTimeCountDown(res1) | |
reculcuteRemainingTime(this.time, this.state, this, remainigTime) | |
break; | |
case "break": | |
const {res: res2, remainigTime} = countDownForView(Time.breakTime, this.time, this); | |
this.displayTimeCountDown(res2) | |
break; | |
case "longBreak": | |
const {res: re3, remainigTime} = countDownForView(Time.longBreakTime, this.time, this, ); | |
this.displayTimeCountDown(re3) | |
break; | |
default: | |
new Error("no status") | |
} | |
}); | |
this.stop.addEventListener('click', () => { | |
this.setButtonState(false, true, false); | |
clearTimeout(this.time.getTimeOutId()); | |
this.time.setElapsedTime(Date.now() - this.time.getStartTime()); | |
}); | |
this.reset.addEventListener('click', () => { | |
this.setButtonState(false, true, true); | |
const status = this.state.getSatus() | |
switch (status) { | |
case "work": this.displayTime(Time.workTime); | |
break; | |
case "break": this.displayTime(Time.breakTime); | |
break; | |
case "longBreak": this.displayTime(Time.longBreakTime); | |
break; | |
} | |
this.time.setElapsedTime(0) | |
}) | |
} | |
displayState(status, count){ | |
if(status === "work"){ | |
this.cycle.textContent = `${count}/${this.state.getCycleCount()}`; | |
} | |
} | |
setButtonState(isStart, isStop, isReset){ | |
this.start.disabled = isStart | |
this.stop.disabled = isStop | |
this.reset.disabled = isReset | |
} | |
displayCountDown(time){ | |
const remainigTime = (time * 60 *1000) - new Time().elapsedTime - (Date.now() - startTime); | |
const restMin = String(Math.floor((remainigTime / 1000 / 60) % 60)).padStart(2, '0'); | |
const restSec = String(Math.floor((remainigTime / 1000) % 60)).padStart(2, '0'); | |
this.timer.textContent = `${restMin}:${restSec}`; | |
} | |
displayTime(time) { | |
this.timer.textContent = `${String(time).padStart(2, '0')}:00`; | |
} | |
displayTimeCountDown(time) { | |
this.timer.textContent = time | |
} | |
} | |
function init(){ | |
new View(window.document, new Time(), new Store("work")) | |
} | |
init() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment