Skip to content

Instantly share code, notes, and snippets.

@kenmori
Created Jul 3, 2020
Embed
What would you like to do?
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