Skip to content

Commit 85fdaf2

Browse files
niklasRniklasR
committed
MVP
1 parent 9f31355 commit 85fdaf2

12 files changed

+216
-31
lines changed

Diff for: ‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,5 @@ node_modules
3131

3232
# Optional REPL history
3333
.node_repl_history
34+
35+
*.DS_Store

Diff for: ‎app/public/js/jquery.min.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎app/public/js/socket-reader.js

+41-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,46 @@ $(function() {
22
console.log('Establishing Socket Connection')
33
var socket = io.connect('http://localhost:3000');
44
socket.emit('requestData');
5-
socket.on('new-content', function (data) {
6-
console.log("New content:", data);
7-
$('#content').text(data.content);
5+
socket.on('newContent', function (data) {
6+
$('#text').html(data.content);
87
});
8+
socket.on('time', function (data) {
9+
$('#time').html("NOW: " + data.currentText + "<br />NEXT: " + data.countdownText);
10+
});
11+
12+
socket.on('options', function (data) {
13+
if (data.mirror) {
14+
$('#text').css({
15+
'-webkit-transform' : 'scale(1, -1)',
16+
'-moz-transform' : 'scale(1, -1)',
17+
'-ms-transform' : 'scale(1, -1)',
18+
'-o-transform' : 'scale(1, -1)',
19+
'transform' : 'scale(1, -1)'
20+
});
21+
$('#time').css({
22+
'-webkit-transform' : 'scale(1, -1)',
23+
'-moz-transform' : 'scale(1, -1)',
24+
'-ms-transform' : 'scale(1, -1)',
25+
'-o-transform' : 'scale(1, -1)',
26+
'transform' : 'scale(1, -1)'
27+
});
28+
}
29+
else {
30+
$('#text').css({
31+
'-webkit-transform' : 'scale(1, 1)',
32+
'-moz-transform' : 'scale(1, 1)',
33+
'-ms-transform' : 'scale(1, 1)',
34+
'-o-transform' : 'scale(1, 1)',
35+
'transform' : 'scale(1, 1)'
36+
});
37+
$('#time').css({
38+
'-webkit-transform' : 'scale(1, 1)',
39+
'-moz-transform' : 'scale(1, 1)',
40+
'-ms-transform' : 'scale(1, 1)',
41+
'-o-transform' : 'scale(1, 1)',
42+
'transform' : 'scale(1, 1)'
43+
});
44+
}
45+
});
46+
947
});

Diff for: ‎app/public/js/socket-writer.js

+40-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,52 @@
11
$(function() {
22
console.log('Establishing Socket Connection')
33
var socket = io.connect('http://localhost:3000');
4-
socket.emit('requestData');
54

6-
socket.on('current-content', function (data) {
5+
socket.on('currentContent', function (data) {
76
$('#niks-text-box').val(data.content)
87
});
98

10-
socket.on('new-content', function (data) {
11-
console.log(data);
9+
socket.on('time', function (data) {
10+
$('.current').text("NOW: " + data.currentText + " | NEXT: " + data.countdownText);
11+
});
12+
13+
socket.on('options', function (data) {
14+
if (data.mirror) {
15+
$('#flip-image').addClass('btn-success');
16+
} else {
17+
$('#flip-image').removeClass('btn-success');
18+
}
1219
});
1320

1421
$('#niks-text-box').on('input', function(){
15-
socket.emit('text-box-update', { content: $('#niks-text-box').val() });
22+
socket.emit('textBoxUpdate', { content: $('#niks-text-box').val() });
23+
});
24+
25+
$( "#flip-image" ).click(function() {
26+
socket.emit('options', { value: 'flipImage' });
27+
});
28+
29+
$( "#5s" ).click(function() {
30+
socket.emit('setCountdown', { value: 5 });
31+
});
32+
33+
$( "#10s" ).click(function() {
34+
socket.emit('setCountdown', { value: 10 });
35+
});
36+
37+
$( "#30s" ).click(function() {
38+
socket.emit('setCountdown', { value: 30 });
39+
});
40+
41+
$( "#1m" ).click(function() {
42+
socket.emit('setCountdown', { value: 60 });
43+
});
44+
45+
$( "#2m" ).click(function() {
46+
socket.emit('setCountdown', { value: 120 });
47+
});
48+
49+
$( "#3m" ).click(function() {
50+
socket.emit('setCountdown', { value: 180 });
1651
});
1752
});

Diff for: ‎app/public/js/socket.io-1.4.5.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎app/public/stylesheets/bootstrap.min.css

+5
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎app/public/stylesheets/reader.css

+20-9
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
1-
html, body{
2-
height:100%;
3-
width: 100%;
4-
background-color: black;
1+
html, body {
2+
height: 100%;
3+
width: 100%;
4+
background-color: black;
55
}
6-
7-
#content {
8-
margin: 50px;
6+
#text {
7+
position: absolute;
98
color: white;
10-
font-size: 50px;
11-
height: 100%;
9+
font-size: 70px;
10+
top: 50px;
11+
height: 500px;
12+
width: 100%;
13+
font-family: sans-serif;
14+
white-space: pre;
15+
white-space: pre-wrap;
16+
}
17+
#time {
18+
position: absolute;
19+
color: white;
20+
font-size: 100px;
21+
height: 218px;
22+
top: 550px;
1223
width: 100%;
1324
font-family: sans-serif;
1425
}

Diff for: ‎app/routes/index.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ var router = express.Router();
33

44
/* GET home page. */
55
router.get('/', function(req, res, next) {
6-
res.render('socket-writer', { title: 'Socket' });
6+
res.render('socket-reader', { title: 'CUE' });
77
});
88

9-
router.get('/read', function(req, res, next) {
10-
res.render('socket-reader', { title: 'READ' });
9+
router.get('/write', function(req, res, next) {
10+
res.render('socket-writer', { title: 'WRITE' });
1111
});
1212
module.exports = router;

Diff for: ‎app/service/socketService.js

+62-5
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,84 @@
11
module.exports = function(server) {
22
var io = require('socket.io')(server);
33
var text = '';
4+
var countdown = 0;
5+
var flipState = false;
46

57
io.on('connection', function(socket) {
6-
socket.on('text-box-update', function(data) {
8+
io.emit('options', {
9+
mirror: flipState
10+
});
11+
io.emit('currentContent', {
12+
content: text
13+
});
14+
io.emit('newContent', {
15+
content: text
16+
});
17+
18+
socket.on('textBoxUpdate', function(data) {
719
messageUpdate(data);
820
});
921

10-
socket.on('requestData', function(){
11-
io.emit('current-content', {content: text});
12-
io.emit('new-content', {content: text});
22+
socket.on('setCountdown', function(data) {
23+
countdown = Date.now() + (data.value * 1000)
24+
});
25+
26+
socket.on('options', function(data) {
27+
switch (data.value) {
28+
case 'flipImage':
29+
flipState = !flipState;
30+
io.emit('options', {
31+
mirror: flipState
32+
});
33+
break;
34+
}
1335
});
1436

1537
socket.on('disconnect', function() {
1638
console.log("disconnected");
1739
});
40+
41+
setInterval(function() {
42+
io.emit('time', {
43+
currentText: getDateTime(),
44+
countdownText: getCountdown()
45+
})
46+
}, 100);
47+
1848
});
1949

2050
function messageUpdate(data) {
2151
text = data.content;
22-
io.emit('new-content', {
52+
io.emit('newContent', {
2353
content: text
2454
});
2555
console.log('Send new data', data);
2656
}
57+
58+
function getDateTime() {
59+
var date = new Date();
60+
61+
var hour = date.getHours();
62+
hour = (hour < 10 ? "0" : "") + hour;
63+
64+
var min = date.getMinutes();
65+
min = (min < 10 ? "0" : "") + min;
66+
67+
var sec = date.getSeconds();
68+
sec = (sec < 10 ? "0" : "") + sec;
69+
70+
return hour + ":" + min + ":" + sec;
71+
}
72+
73+
function getCountdown() {
74+
var now = Date.now()
75+
var difference = (countdown - now)/1000;
76+
if (difference > 0) {
77+
var min = Math.floor(difference/60);
78+
var sec = Math.round((difference - min*60)*10)/10;
79+
return ((min < 10) ? '0' + min : min) + ":" + ((sec < 10) ? '0' + sec : sec) ;
80+
} else {
81+
return '0';
82+
}
83+
}
2784
}

Diff for: ‎app/views/bootstrap.jade

+3-3
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ html(lang="en")
88
meta(name="author",content="Nik")
99
title= title
1010
block styles
11-
link(rel="stylesheet",href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css")
11+
link(rel="stylesheet",href="/stylesheets/bootstrap.min.css")
1212
block scripts
13-
script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js")
14-
script(src="https://cdn.socket.io/socket.io-1.4.5.js")
13+
script(src="/js/jquery.min.js")
14+
script(src="/js/socket.io-1.4.5.js")
1515
body(data-spy="scroll",data-target=".scrollspy")
1616
block body

Diff for: ‎app/views/socket-reader.jade

+5-3
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,11 @@ html(lang="en")
1010
block styles
1111
link(rel="stylesheet",href="/stylesheets/reader.css")
1212
block scripts
13-
script(src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js")
14-
script(src="https://cdn.socket.io/socket.io-1.4.5.js")
13+
script(src="/js/jquery.min.js")
14+
script(src="/js/socket.io-1.4.5.js")
1515
script(src="/js/socket-reader.js")
1616
body
17-
#content
17+
#text
1818
| Hello World
19+
#time
20+
| 00:00:00 | 00:00 | LIVE

Diff for: ‎app/views/socket-writer.jade

+27
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,30 @@ block body
2525
| Type here
2626
.panel-body
2727
textarea(id="niks-text-box" class="form-control" rows="3")
28+
.panel.panel-default
29+
.panel-heading
30+
h3.panel-title
31+
| Countdown
32+
.panel-body
33+
.current
34+
|
35+
.buttons
36+
button(class="btn btn-default" type="button" id="5s")
37+
| 5s
38+
button(class="btn btn-default" type="button" id="10s")
39+
| 10s
40+
button(class="btn btn-default" type="button" id="30s")
41+
| 30s
42+
button(class="btn btn-default" type="button" id="1m")
43+
| 1m
44+
button(class="btn btn-default" type="button" id="2m")
45+
| 2m
46+
button(class="btn btn-default" type="button" id="3m")
47+
| 3m
48+
.panel.panel-default
49+
.panel-heading
50+
h3.panel-title
51+
| Options
52+
.panel-body
53+
button(class="btn btn-default" type="button" id="flip-image")
54+
| Flip

0 commit comments

Comments
 (0)