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/vendor/util.js | 256 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 public/js/vendor/util.js (limited to 'public/js/vendor/util.js') diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js new file mode 100644 index 0000000..0f5c6ed --- /dev/null +++ b/public/js/vendor/util.js @@ -0,0 +1,256 @@ +if (window.$) { + $.fn.int = function() { return parseInt($(this).val(),10) } + $.fn.float = function() { return parseFloat($(this).val()) } + $.fn.string = function() { return trim($(this).val()) } + $.fn.enable = function() { return $(this).attr("disabled",null) } + $.fn.disable = function() { return $(this).attr("disabled","disabled") } + $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) } + $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) } + $.fn.toDollars = function(i) { return $(this).html((i/100).toFixed(2)) } +} + +function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } +function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } +function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") } +function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } +function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } +function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") } +function rgb_string (rgb) { return "rgb(" + rgb.map(Math.round).join(",") + ")" } +function rgba_string (rgb,a) { return "rgba(" + rgb.map(Math.round).join(",") + "," + a + ")" } +function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ var s = n.toString(16); return s.length == 1 ? "0"+s : s }).join("") } +function parse_rgba_string (s) { return s.match(/(\d+)/g).slice(0,3) } + +var E = Math.E +var PI = Math.PI +var PHI = (1+Math.sqrt(5))/2 +var TWO_PI = PI*2 +var HALF_PI = PI/2 +var LN10 = Math.LN10 +function clamp(n,a,b){ return n= a) + 0 + // ^^ bool -> int +} + +function julestep (a,b,n) { + return clamp(norm(n,a,b), 0.0, 1.0); +} + +// hermite curve apparently +function smoothstep(min,max,n){ + var t = clamp((n - min) / (max - min), 0.0, 1.0); + return t * t * (3.0 - 2.0 * t) +} + +function shuffle(a){ + var r, swap + for (var i = a.length; i > 0; i--){ + r = randint(i) + swap = a[i-1] + a[i-1] = a[r] + a[r] = swap + } + return a +} +function reverse(a){ + var reversed = [] + for (var i = 0, _len = a.length-1; i <= _len; i++){ + reversed[i] = a[_len-i] + } + return reversed +} +function deinterlace(a){ + var odd = [], even = [] + for (var i = 0, _len = a.length; i < _len; i++) { + if (i % 2) even.push(a[i]) + else odd.push(a[i]) + } + return [even, odd] +} +function weave(a){ + var aa = deinterlace(a) + var b = [] + aa[0].forEach(function(el){ b.push(el) }) + reverse(aa[1]).forEach(function(el){ b.push(el) }) + return b +} +function range(m,n,s){ + var a = [] + s = s || 1 + for (var i = m; i <= n; i += s) { + a.push(i) + } + return a +} + +var guid_syllables = "iz az ez or iv ex baz el lo lum ot un no".split(" ") +var guid_n = 0 +function guid(n){ + var len = guid_syllables.length + return ((++guid_n*(len-1)*(~~log(guid_n))).toString(len)).split("").map(function(s){ + return guid_syllables[parseInt(s, len) % len--] + }).join("") +} + +function defaults (dest, src) { + dest = dest || {} + for (var i in src) { + dest[i] = typeof dest[i] == 'undefined' ? src[i] : dest[i] + } + return dest +} + +// Change straight quotes to curly and double hyphens to em-dashes. +function smarten(a) { + a = a.replace(/(^|[-\u2014\s(\["])'/g, "$1\u2018"); // opening singles + a = a.replace(/'/g, "\u2019"); // closing singles & apostrophes + a = a.replace(/(^|[-\u2014/\[(\u2018\s])"/g, "$1\u201c"); // opening doubles + a = a.replace(/"/g, "\u201d"); // closing doubles + a = a.replace(/--/g, "\u2014"); // em-dashes + return a +}; + + +function pairs(h){ + var a = [] + for (var i in h) { + if(h.hasOwnProperty(i)) { + a.push([i, h[i]]) + } + } + return a +} +function invert_hash (h) { + var k = {} + for (var i in h) { if (h.hasOwnProperty(i)) k[h[i]] = i } + return k +} +function filenameFromUrl (url) { + var partz = url.split( "/" ) + return partz[partz.length-1].split(".")[0] +} + +function bitcount(v) { + v = v - ((v >>> 1) & 0x55555555); + v = (v & 0x33333333) + ((v >>> 2) & 0x33333333); + return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24; +} + +// Function.bind polyfill +if (!Function.prototype.bind) { + Function.prototype.bind = function(oThis) { + if (typeof this !== 'function') { + // closest thing possible to the ECMAScript 5 + // internal IsCallable function + throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable'); + } + + var aArgs = Array.prototype.slice.call(arguments, 1), + fToBind = this, + fNOP = function() {}, + fBound = function() { + return fToBind.apply(this instanceof fNOP && oThis + ? this + : oThis, + aArgs.concat(Array.prototype.slice.call(arguments))); + }; + + fNOP.prototype = this.prototype; + fBound.prototype = new fNOP(); + + return fBound; + }; +} + +// rAF polyfill +(function() { + var lastTime = 0; + var vendors = ['ms', 'moz', 'webkit', 'o']; + for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { + window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; + window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] + || window[vendors[x]+'CancelRequestAnimationFrame']; + } + + if (!window.requestAnimationFrame) + window.requestAnimationFrame = function(callback, element) { + var currTime = new Date().getTime(); + var timeToCall = Math.max(0, 16 - (currTime - lastTime)); + var id = window.setTimeout(function() { callback(currTime + timeToCall); }, + timeToCall); + lastTime = currTime + timeToCall; + return id; + }; + + if (!window.cancelAnimationFrame) + window.cancelAnimationFrame = function(id) { + clearTimeout(id); + }; +}()); + + +function selectElementContents(el) { + if (window.getSelection && document.createRange) { + var sel = window.getSelection(); + var range = document.createRange(); + range.selectNodeContents(el); + sel.removeAllRanges(); + sel.addRange(range); + } else if (document.selection && document.body.createTextRange) { + var textRange = document.body.createTextRange(); + textRange.moveToElementText(el); + textRange.select(); + } +} -- 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/vendor/util.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 From 3b7da491072e5c366738ff549e8958d97948076a Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 5 Aug 2015 10:45:17 -0400 Subject: hook into ws --- public/js/lib/video.js | 2 +- public/js/lib/views/lobby/index.js | 2 +- public/js/vendor/util.js | 2 ++ server/index.js | 6 +++++- server/ws.js | 3 +++ 5 files changed, 12 insertions(+), 3 deletions(-) (limited to 'public/js/vendor/util.js') diff --git a/public/js/lib/video.js b/public/js/lib/video.js index 45e6043..2eb5c82 100644 --- a/public/js/lib/video.js +++ b/public/js/lib/video.js @@ -2,7 +2,7 @@ var video = (function(){ var video = {} var mx - video.init = function(opt){ + video.init = function(media){ video.build() } diff --git a/public/js/lib/views/lobby/index.js b/public/js/lib/views/lobby/index.js index 70b63c4..0306445 100644 --- a/public/js/lib/views/lobby/index.js +++ b/public/js/lib/views/lobby/index.js @@ -9,7 +9,7 @@ var LobbyView = View.extend({ }, join: function(){ - var name = this.$createRoom.sanitize() + var name = this.$createRoom.sanitizeName() if (! name) { return } window.location.href = "/v/" + name } diff --git a/public/js/vendor/util.js b/public/js/vendor/util.js index 7c73ae2..73a25ad 100644 --- a/public/js/vendor/util.js +++ b/public/js/vendor/util.js @@ -5,12 +5,14 @@ if (window.$) { $.fn.enable = function() { return $(this).attr("disabled",null) } $.fn.disable = function() { return $(this).attr("disabled","disabled") } $.fn.sanitize = function(s) { return trim(sanitize($(this).val())) } + $.fn.sanitizeName = function(s) { return trim(sanitizeName($(this).val())) } $.fn.htmlSafe = function(s) { return $(this).html(sanitize(s)) } $.fn.toDollars = function(i) { return $(this).html((i/100).toFixed(2)) } } function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") } function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") } +function sanitizeName (s){ return (s || "").replace(new RegExp("[^-_a-zA-Z0-9]", 'g'), "") } function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") } function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") } function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) } diff --git a/server/index.js b/server/index.js index 8b8c738..d08cf2e 100644 --- a/server/index.js +++ b/server/index.js @@ -35,10 +35,14 @@ app.use(express.query()) app.get("/", function(req,res){ res.render("pages/lobby", {}) }) -app.post("/v/", function(req,res){ +app.post("/v/:room", function(req,res){ + var room = util.sanitizeName(req.params.room) + ws.add(room) res.render("pages/room") }) app.get("/v/:room", function(req,res){ + var room = util.sanitizeName(req.params.room) + ws.add(room) res.render("pages/room") }) diff --git a/server/ws.js b/server/ws.js index 4715d34..860319a 100644 --- a/server/ws.js +++ b/server/ws.js @@ -3,10 +3,13 @@ var server = require('socket.io') var ws = module.exports = {} +var rooms = {} + ws.listen = function(app){ ws.io = server(app) } ws.add = function(name){ + if (name in rooms) { return } var room = {} room.users = {} -- cgit v1.2.3-70-g09d2