Skip to content

Commit a01a496

Browse files
ganeshh123ganeshh123
authored
Merge pull request #6 from ganeshh123/reloaded
Reloaded
2 parents 9496d06 + 03033f0 commit a01a496

9 files changed

Lines changed: 363 additions & 5 deletions

File tree

‎img/campfire.png‎

1.96 MB
Loading

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ <h1>Headphones Recommended</h1>
6262
<a href="https://ganeshh123.github.io">Ganesh H</a>
6363
</div>
6464
</div>
65+
<script defer src='./js/timer.js' type='text/babel'></script>
6566
<script defer src='./js/app.js' type='text/babel'></script>
6667
</body>
6768

‎js/app.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ let styles = {
5252
display: 'flex',
5353
flexDirection: 'row',
5454
justifyContent: 'space-around',
55-
width: '100%'
55+
width: '100%',
56+
marginTop: 10,
57+
marginBottom: 10
5658
}
5759
}
5860

@@ -127,6 +129,7 @@ class SceneSelect extends React.Component{
127129
>
128130
<MenuItem value={'rain_on_leaves'}>Rain falling on leaves</MenuItem>
129131
<MenuItem value={'forest_1'}>Calm Forest</MenuItem>
132+
<MenuItem value={'campfire'}>Campfire</MenuItem>
130133
</Select>
131134
<FormHelperText>{this.state.currentScene.description}</FormHelperText>
132135
</FormControl>
@@ -162,16 +165,26 @@ class App extends React.Component{
162165
}
163166
}
164167

168+
toggleTimer = (e) => {
169+
let timerElement = document.querySelector('#appTimer')
170+
if(!timerElement.style.display || timerElement.style.display === 'none'){
171+
timerElement.style.display = 'flex'
172+
}else{
173+
timerElement.style.display ='none'
174+
}
175+
}
176+
165177

166178
render(){
167179
return(
168180
<div id='app' style={styles.app}>
181+
<MainTimer />
169182
<div id='sceneSwitch' style={styles.sceneSwitch}>
170183
<IconButton aria-label="switch_video" onClick={this.switchVideo}>
171184
<Icon>{this.state.videoMode}</Icon>
172185
</IconButton>
173-
<IconButton disabled>
174-
<Icon></Icon>
186+
<IconButton onClick={this.toggleTimer}>
187+
<Icon>timer</Icon>
175188
</IconButton>
176189
<IconButton disabled>
177190
<Icon></Icon>
@@ -180,7 +193,7 @@ class App extends React.Component{
180193
</div>
181194
<div id='volControls' style={styles.VolumeControls}>
182195
<VolumeControl type='music'/>
183-
<VolumeControl type='sfx' />'
196+
<VolumeControl type='sfx' />
184197

185198
</div>
186199
</div>

‎js/sceneselect.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,17 @@ let scenes = [
2121
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
2222
"description" : 'A calm forest with a gentle breeze',
2323
"background" : 'forest1'
24+
},
25+
{
26+
"scene": 'campfire',
27+
"name": 'Campfire',
28+
"video": 'campfire',
29+
"sfx": 'campfire',
30+
"sfxSource": 'https://www.youtube.com/watch?v=O_LJWYzdD4o',
31+
"videoSource": 'https://www.pexels.com/video/bonfire-in-the-woods-2060826/',
32+
"musicSource": 'https://www.youtube.com/watch?v=962VmrIh9vQ',
33+
"description" : 'Waking up to a campfire in the woods.',
34+
"background" : 'campfire'
2435
}
2536
]
2637

‎js/timer.js‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
const containerDOM = document.getElementById('container')
2+
const create = React.createElement
3+
4+
let styles = {
5+
6+
}
7+
8+
class Adjuster extends React.Component{
9+
constructor(props){
10+
super(props)
11+
}
12+
13+
labelText = this.props.type + ' length'
14+
15+
render(){
16+
return(
17+
<div class='adjuster'>
18+
<h6 id={this.props.type+'-label'}>{this.labelText}</h6>
19+
<div class='adjuster_module'>
20+
<a
21+
id={this.props.type+'-decrement'}
22+
class="large waves-effect btn-floating"
23+
onClick={() => {
24+
this.props.adjust(this.props.type+'_length', -1)
25+
}}
26+
>
27+
<Icon id='adjuster_button_up'>keyboard_arrow_down</Icon>
28+
</a>
29+
<div class='adjuster-info'>
30+
<h5 id={this.props.type+'-length'}>{this.props.length}</h5>
31+
</div>
32+
<a
33+
id={this.props.type+'-increment'}
34+
class="large waves-effect btn-floating"
35+
onClick={() => {
36+
this.props.adjust(this.props.type+'_length', 1)
37+
}}
38+
>
39+
<Icon id='adjuster_button_down'>keyboard_arrow_up</Icon>
40+
</a>
41+
</div>
42+
43+
</div>
44+
)
45+
}
46+
}
47+
48+
class Display extends React.Component{
49+
constructor(props){
50+
super(props)
51+
}
52+
53+
render(){
54+
return(
55+
<div id='display'>
56+
<h4 id='timer-label'>{this.props.mode}</h4>
57+
<h2 id='time-left'>{this.props.mins}:{this.props.secs}</h2>
58+
</div>
59+
)
60+
}
61+
}
62+
63+
64+
class MainTimer extends React.Component{
65+
constructor(props){
66+
super(props)
67+
}
68+
69+
interval;
70+
71+
state={
72+
mode: 'Session',
73+
break_length: 5,
74+
session_length: 25,
75+
duration: 25*60,
76+
minutes: '25',
77+
seconds: '00',
78+
status: 'Stopped'
79+
}
80+
81+
startTimer = () => {
82+
let timer = this.state.duration
83+
84+
let minutes = parseInt(timer / 60, 10)
85+
let seconds = parseInt(timer % 60, 10);
86+
87+
minutes = minutes < 10 ? "0" + minutes : minutes;
88+
seconds = seconds < 10 ? "0" + seconds : seconds;
89+
90+
this.setState({
91+
status: 'Running',
92+
minutes: minutes,
93+
seconds: seconds
94+
})
95+
96+
timer = timer - 1
97+
98+
this.interval = setInterval(function () {
99+
100+
if(this.state.status === 'Stopped'){
101+
clearInterval(this.interval)
102+
}
103+
104+
minutes = parseInt(timer / 60, 10)
105+
seconds = parseInt(timer % 60, 10);
106+
107+
minutes = minutes < 10 ? "0" + minutes : minutes;
108+
seconds = seconds < 10 ? "0" + seconds : seconds;
109+
110+
this.setState({
111+
minutes: minutes,
112+
seconds: seconds
113+
})
114+
115+
if (timer === 0) {
116+
document.getElementById('beep').play()
117+
clearInterval(this.interval)
118+
let timerElement = document.querySelector('#appTimer')
119+
if(!timerElement.style.display || timerElement.style.display === 'none'){
120+
timerElement.style.display = 'flex'
121+
}
122+
setTimeout(() => {
123+
if(this.state.mode === 'Session'){
124+
this.startBreak()
125+
}else{
126+
this.startSession()
127+
}
128+
}, 100)
129+
}else{
130+
timer = timer -1
131+
}
132+
133+
}.bind(this), 1000);
134+
}
135+
136+
adjust = (type, value) => {
137+
if(this.state[type] === 1 && value < 0){
138+
return
139+
}
140+
141+
if(this.state[type] === 60 && value >0){
142+
return
143+
}
144+
145+
this.state[type] = this.state[type] + value
146+
this.state.duration = this.state.session_length * 60
147+
148+
let mins = parseInt(this.state.duration / 60, 10)
149+
let secs = parseInt(this.state.duration % 60, 10)
150+
151+
mins= mins < 10 ? "0" + mins : mins
152+
secs = secs < 10 ? "0" + secs : secs
153+
154+
this.setState({
155+
minutes: mins,
156+
seconds: secs
157+
})
158+
}
159+
160+
startSession = () => {
161+
this.setState({
162+
mode: 'Session',
163+
duration: this.state.session_length *60
164+
})
165+
this.startTimer()
166+
this.forceUpdate()
167+
}
168+
169+
startBreak = () => {
170+
this.state.mode = 'Break'
171+
this.state.duration = this.state.break_length * 60
172+
this.forceUpdate()
173+
this.startTimer()
174+
}
175+
176+
reset = () => {
177+
document.getElementById('beep').pause();
178+
document.getElementById('beep').currentTime = 0;
179+
clearInterval(this.interval)
180+
this.setState({
181+
mode: 'Session',
182+
break_length: 5,
183+
session_length: 25,
184+
duration: 25 * 60,
185+
minutes: '25',
186+
seconds: '00',
187+
status: 'Stopped'
188+
})
189+
}
190+
191+
startStop = () => {
192+
if(this.state.status === 'Stopped'){
193+
this.startSession()
194+
}
195+
if(this.state.status === 'Paused'){
196+
this.state.duration = (this.state.minutes * 60) + this.state.seconds
197+
this.startTimer()
198+
}
199+
if(this.state.status === 'Running'){
200+
this.state.status = 'Paused'
201+
clearInterval(this.interval)
202+
}
203+
}
204+
205+
render(){
206+
return(
207+
<div id='appTimer'>
208+
<audio id='beep' ref="audio_tag" src="../sfx/beep.wav"/>
209+
<div id='first'>
210+
<Display mode={this.state.mode} mins={this.state.minutes} secs={this.state.seconds}/>
211+
</div>
212+
<div id='second'>
213+
<a
214+
id='start_stop'
215+
class="large waves-effect btn-floating"
216+
onClick={() => {
217+
this.startStop()
218+
}}
219+
><Icon id='timer_button_start'>play_arrow</Icon></a>
220+
<a
221+
id='reset'
222+
class="large waves-effect btn-floating"
223+
onClick={() => {
224+
this.reset()
225+
}}
226+
><Icon id='timer_button_reset'>restore</Icon></a>
227+
</div>
228+
<div id='third'>
229+
<Adjuster type='session' length={this.state.session_length} adjust={this.adjust}/>
230+
<Adjuster type='break' length={this.state.break_length} adjust={this.adjust}/>
231+
</div>
232+
</div>
233+
)
234+
}
235+
}
236+

‎sfx/beep.wav‎

634 KB
Binary file not shown.

‎sfx/campfire.mp3‎

815 KB
Binary file not shown.

0 commit comments

Comments
 (0)