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/js/lib/views/index.js | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 public/js/lib/views/index.js (limited to 'public/js/lib/views/index.js') 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 -- 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/views/index.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