From 18648921f75a7c458cf0c951c249b28a48f08a6b Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 4 Aug 2015 23:54:12 -0400 Subject: ws shit --- public/js/lib/ws.js | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 public/js/lib/ws.js (limited to 'public/js/lib/ws.js') diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js new file mode 100644 index 0000000..37a8248 --- /dev/null +++ b/public/js/lib/ws.js @@ -0,0 +1,43 @@ +var ws = function(){ + var ws = {} + var socket, socketIsReady + ws.connect = function () { + if (this.socket) return; + var socketPath = window.location.origin + '/' + posthang.room.subdomain + + ws.socket = socket = io(socketPath) + // this.socket.on('connect', function(){ console.log(new Date(), "connected")}) + socket.on('ready', ws.ready) + socket.on('error', ws.error) + socket.on('connect', ws.connected) + socket.on('reconnect', ws.reconnected) + socket.on('disconnect', ws.disconnected) + } + + ws.ready = function (obj) { + console.log(new Date(), "ready") + + // presumably we might have reconnected? + if (socketIsReady) { + this.chatView.fetchAndDedupe() + } + else { + socketIsReady = true + this.checkIfLoaded() + } + } + + ws.error = function (a,b,c){ + console.log(new Date(), "error", a, b, c) + } + ws.connected = function (){ + console.log(new Date(), "connected") + } + ws.reconnected = function (){ + console.log(new Date(), "reconnected") + } + ws.disconnected = function (){ + console.log(new Date(), "disconnected") + // this.chatView.appendInfo({ content: "Disconnected." }) + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From d0b4cd4f7e6364a35a420f2f3b0fcdbb502d8a9a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 00:51:32 -0400 Subject: basic routing --- public/css/css.css | 2 +- public/js/index.js | 16 +++++++++++++++- public/js/lib/views/index.js | 22 ++++++++++++++++++++++ public/js/lib/views/lobby/index.js | 9 +++++++++ public/js/lib/views/room/index.js | 9 +++++++++ public/js/lib/ws.js | 7 ++++--- server/index.js | 6 ++++-- server/ws.js | 37 +++++++++++++++++++++++++++++++++++++ views/pages/index.ejs | 17 ----------------- views/pages/lobby.ejs | 22 ++++++++++++++++++++++ views/pages/room.ejs | 6 +++++- views/partials/scripts.ejs | 1 + 12 files changed, 129 insertions(+), 25 deletions(-) create mode 100644 public/js/lib/views/index.js create mode 100644 public/js/lib/views/lobby/index.js create mode 100644 public/js/lib/views/room/index.js create mode 100644 server/ws.js delete mode 100644 views/pages/index.ejs create mode 100644 views/pages/lobby.ejs (limited to 'public/js/lib/ws.js') diff --git a/public/css/css.css b/public/css/css.css index ec56cfe..1fce66f 100644 --- a/public/css/css.css +++ b/public/css/css.css @@ -1,5 +1,5 @@ html,body{width:100%;height:100%;margin:0;padding:0;} -#bg{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background-color:black;z-index:-1;background-position:center center;background-size:contain;} +#bg{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background-color:white;z-index:-1;background-position:center center;background-size:contain;} #bg.tile{background-size:auto auto;} html{background:black;} body{background:transparent;} diff --git a/public/js/index.js b/public/js/index.js index 560a2a1..30f5975 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -2,11 +2,25 @@ var app = (function(){ var app = {} app.init = function(){ - // ws.connect() + user.init() + + app.socket = ws.connect() + + app.router = new SiteRouter () $(window).on("focus", app.focus) $(window).on("blur", app.blur) } + app.focused = true + + app.focus = function(){ + app.focused = true + } + + app.blur = function(){ + app.focused = false + } + document.addEventListener('DOMContentLoaded', app.init) })() diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js new file mode 100644 index 0000000..d96bffb --- /dev/null +++ b/public/js/lib/views/index.js @@ -0,0 +1,22 @@ +var SiteRouter = Router.extend({ + el: "body", + + events: { + }, + + routes: { + "/": 'lobby', + "/v/:name": 'room', + }, + + initialize: function(){ + this.route() + }, + + lobby: function(){ + }, + + room: function(name){ + }, + +}) \ No newline at end of file diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/index.js new file mode 100644 index 0000000..5ed1966 --- /dev/null +++ b/public/js/lib/views/lobby/index.js @@ -0,0 +1,9 @@ +var LobbyView = View.extend({ + + events: { + }, + + initialize: function(){ + } + +}) \ No newline at end of file diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js new file mode 100644 index 0000000..b266e29 --- /dev/null +++ b/public/js/lib/views/room/index.js @@ -0,0 +1,9 @@ +var RoomView = View.extend({ + + events: { + }, + + initialize: function(){ + } + +}) \ No newline at end of file diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js index 37a8248..fbf9211 100644 --- a/public/js/lib/ws.js +++ b/public/js/lib/ws.js @@ -12,6 +12,7 @@ var ws = function(){ socket.on('connect', ws.connected) socket.on('reconnect', ws.reconnected) socket.on('disconnect', ws.disconnected) + return socket } ws.ready = function (obj) { @@ -19,11 +20,11 @@ var ws = function(){ // presumably we might have reconnected? if (socketIsReady) { - this.chatView.fetchAndDedupe() + // this.chatView.fetchAndDedupe() } else { socketIsReady = true - this.checkIfLoaded() + // this.checkIfLoaded() } } @@ -40,4 +41,4 @@ var ws = function(){ console.log(new Date(), "disconnected") // this.chatView.appendInfo({ content: "Disconnected." }) } -} \ No newline at end of file +} diff --git a/server/index.js b/server/index.js index d375351..657cdc8 100644 --- a/server/index.js +++ b/server/index.js @@ -9,7 +9,8 @@ var http = require('http'), express = require('express'), bodyParser = require('body-parser'), multer = require('multer'), - path = require('path'); + path = require('path'), + ws = require("./ws"); var app = express() var server @@ -31,7 +32,7 @@ app.use(express.query()) // } app.get("/", function(req,res){ - res.render("pages/index", {}) + res.render("pages/lobby", {}) }) app.get("/v/:room", function(req,res){ res.render("pages/room") @@ -42,3 +43,4 @@ server.listen(app.get('port'), function () { console.log('asdf-yt server listening on port ' + app.get('port')); }) +ws.listen(server) \ No newline at end of file diff --git a/server/ws.js b/server/ws.js new file mode 100644 index 0000000..4715d34 --- /dev/null +++ b/server/ws.js @@ -0,0 +1,37 @@ + +var server = require('socket.io') + +var ws = module.exports = {} + +ws.listen = function(app){ + ws.io = server(app) +} +ws.add = function(name){ + var room = {} + room.users = {} + + var ns = base.io.of('/' + name) + + ns.on('connection', function(socket){ + + var username + + socket.on('join', function(data){ + username = data.username + if (room.users[username]) { + // already connected? + room.users[username].disconnect() + room.users[username] = socket + } + }) + + socket.on('message', function(data){ + ns.emit('message', data) + }) + + socket.on('disconnect', function(){ + delete room.users[username] + }) + + }) +} diff --git a/views/pages/index.ejs b/views/pages/index.ejs deleted file mode 100644 index 9a1a900..0000000 --- a/views/pages/index.ejs +++ /dev/null @@ -1,17 +0,0 @@ - - - -yt-chat - - - - - -
- - - - -<% include ../partials/scripts %> - \ No newline at end of file diff --git a/views/pages/lobby.ejs b/views/pages/lobby.ejs new file mode 100644 index 0000000..46b634c --- /dev/null +++ b/views/pages/lobby.ejs @@ -0,0 +1,22 @@ + + + +yt-chat + + + + + +
+ +
+ please enter your nick..
+ +
+ + + + +<% include ../partials/scripts %> + \ No newline at end of file diff --git a/views/pages/room.ejs b/views/pages/room.ejs index fb14a6f..568a136 100644 --- a/views/pages/room.ejs +++ b/views/pages/room.ejs @@ -18,6 +18,11 @@ +
+ please enter your nick..
+ +
+ - [[ include ../partials/scripts ]] \ No newline at end of file diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index d946f86..5908ee7 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -16,6 +16,7 @@ + -- cgit v1.2.3-70-g09d2 From 18f6f0219474f0f43e7403a5f5f8cff7c3dd0246 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 01:21:38 -0400 Subject: login view, lobby view --- public/css/css.css | 21 +++++++++++++++++++++ public/js/index.js | 2 -- public/js/lib/user.js | 4 ++-- public/js/lib/views/index.js | 9 ++++++++- public/js/lib/views/lobby/index.js | 8 ++++++++ public/js/lib/views/login.js | 29 +++++++++++++++++++++++++++++ public/js/lib/views/room/index.js | 3 ++- public/js/lib/ws.js | 9 +++++---- public/js/vendor/util.js | 35 +++++++++++++++++++++++++++++++++++ views/pages/lobby.ejs | 14 +++++++++----- views/partials/scripts.ejs | 5 +++++ 11 files changed, 124 insertions(+), 15 deletions(-) create mode 100644 public/js/lib/views/login.js (limited to 'public/js/lib/ws.js') diff --git a/public/css/css.css b/public/css/css.css index 1fce66f..a8d3df1 100644 --- a/public/css/css.css +++ b/public/css/css.css @@ -3,3 +3,24 @@ html,body{width:100%;height:100%;margin:0;padding:0;} #bg.tile{background-size:auto auto;} html{background:black;} body{background:transparent;} +#login { + display: none; +} +#login { + position: absolute; top: 0; left: 0; + width: 100%; height: 100%; + background: rgba(0,0,0,0.95); +} +#lobby form, #login form { + position: absolute; + top: 50%; left: 50%; + -webkit-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); + background: #fff; + padding: 20px; +} + +#lobby input { + font-size: 3vw; + width: 40vw; +} \ No newline at end of file diff --git a/public/js/index.js b/public/js/index.js index 30f5975..6e171fc 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -4,8 +4,6 @@ var app = (function(){ app.init = function(){ user.init() - app.socket = ws.connect() - app.router = new SiteRouter () $(window).on("focus", app.focus) diff --git a/public/js/lib/user.js b/public/js/lib/user.js index f96946f..1293895 100644 --- a/public/js/lib/user.js +++ b/public/js/lib/user.js @@ -2,10 +2,9 @@ var user = (function(){ var user = {} user.init = function(){ user.load() - user.bind() } user.bind = function(){ - $("#username").on("input", user.save) + // $("#username").on("input", user.save) } user.load = function(){ user.username = user.getCookie() @@ -38,6 +37,7 @@ var user = (function(){ } user.save = function(){ var username = user.sanitize() + if (! username.length) return if (username != user.username) user.setCookie(username); } user.setCookie = function(username){ diff --git a/public/js/lib/views/index.js b/public/js/lib/views/index.js index d96bffb..d5ec35d 100644 --- a/public/js/lib/views/index.js +++ b/public/js/lib/views/index.js @@ -10,13 +10,20 @@ var SiteRouter = Router.extend({ }, initialize: function(){ - this.route() + if (! user.username) { + $("#login").show() + } + else { + this.route() + } }, lobby: function(){ + this.view = new LobbyView () }, room: function(name){ + this.view = new RoomView (name) }, }) \ No newline at end of file diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/index.js index 5ed1966..70b63c4 100644 --- a/public/js/lib/views/lobby/index.js +++ b/public/js/lib/views/lobby/index.js @@ -1,9 +1,17 @@ var LobbyView = View.extend({ events: { + "form submit": "join" }, initialize: function(){ + this.$createRoom = this.$("#create-room") + }, + + join: function(){ + var name = this.$createRoom.sanitize() + if (! name) { return } + window.location.href = "/v/" + name } }) \ No newline at end of file diff --git a/public/js/lib/views/login.js b/public/js/lib/views/login.js new file mode 100644 index 0000000..325d22d --- /dev/null +++ b/public/js/lib/views/login.js @@ -0,0 +1,29 @@ +var LoginView = View.extend({ + el: "#login", + + events: { + "form submit": "save", + }, + + initialize: function(){ + this.$el.show() + }, + + save: function(e){ + e.preventDefault() + user.save() + var that = this + if (user.username.length) { + app.router.route() + oktween.add({ + obj: this.el.style, + from: { opacity: 1 }, + to: { opacity: 0 }, + duration: 500, + finished: function(){ + that.el.style.display = "none" + } + }) + } + }, +}) \ No newline at end of file diff --git a/public/js/lib/views/room/index.js b/public/js/lib/views/room/index.js index b266e29..58d7449 100644 --- a/public/js/lib/views/room/index.js +++ b/public/js/lib/views/room/index.js @@ -3,7 +3,8 @@ var RoomView = View.extend({ events: { }, - initialize: function(){ + initialize: function(name){ + app.socket = ws.connect(name) } }) \ No newline at end of file diff --git a/public/js/lib/ws.js b/public/js/lib/ws.js index fbf9211..15af8a1 100644 --- a/public/js/lib/ws.js +++ b/public/js/lib/ws.js @@ -1,9 +1,9 @@ -var ws = function(){ +var ws = (function(){ var ws = {} var socket, socketIsReady - ws.connect = function () { + ws.connect = function (room) { if (this.socket) return; - var socketPath = window.location.origin + '/' + posthang.room.subdomain + var socketPath = window.location.origin + '/' + room ws.socket = socket = io(socketPath) // this.socket.on('connect', function(){ console.log(new Date(), "connected")}) @@ -41,4 +41,5 @@ var ws = function(){ console.log(new Date(), "disconnected") // this.chatView.appendInfo({ content: "Disconnected." }) } -} + return ws +})() diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js index 0f5c6ed..7c73ae2 100644 --- a/public/js/vendor/util.js +++ b/public/js/vendor/util.js @@ -240,6 +240,41 @@ if (!Function.prototype.bind) { }; }()); +// Identify browser based on useragent string +(function( ua ) { + ua = ua.toLowerCase(); + var match = /(chrome)[ \/]([\w.]+)/.exec( ua ) || + /(webkit)[ \/]([\w.]+)/.exec( ua ) || + /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) || + /(msie) ([\w.]+)/.exec( ua ) || + ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) || + []; + var matched = { + browser: match[ 1 ] || "", + version: match[ 2 ] || "0" + }; + browser = {}; + if ( matched.browser ) { + browser[ matched.browser ] = true; + browser.version = matched.version; + } + // Chrome is Webkit, but Webkit is also Safari. + if ( browser.chrome ) { + browser.webkit = true; + } else if ( browser.webkit ) { + browser.safari = true; + } + if (window.$) $.browser = browser; + return browser; +})( navigator.userAgent ); + +// Naive useragent detection pattern +var is_iphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) +var is_ipad = (navigator.userAgent.match(/iPad/i)) +var is_android = (navigator.userAgent.match(/Android/i)) +var is_mobile = is_iphone || is_ipad || is_android +var is_desktop = ! is_mobile; +var app_devicePixelRatio = is_mobile ? devicePixelRatio : 1; function selectElementContents(el) { if (window.getSelection && document.createRange) { diff --git a/views/pages/lobby.ejs b/views/pages/lobby.ejs index 46b634c..80bbf88 100644 --- a/views/pages/lobby.ejs +++ b/views/pages/lobby.ejs @@ -3,19 +3,23 @@ yt-chat -
- please enter your nick..
- +
+ please enter your nick..
+ +
- +
+
+ +
+
<% include ../partials/scripts %> diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 5908ee7..844d884 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -16,7 +16,12 @@ + + + + -- cgit v1.2.3-70-g09d2