From dd4d3d64fe59542e1841105ec75f33e2a2215304 Mon Sep 17 00:00:00 2001 From: LearningNerd Date: Tue, 27 Jun 2017 22:55:10 -0700 Subject: [PATCH 1/3] For #1: rename editor events - editorChange --> editorTextChange - changeScroll --> editorScrollChange - changeCursor --> editorCursorChange --- public/local.js | 28 ++++++++++++++-------------- server.js | 42 +++++++++++++++++++++--------------------- 2 files changed, 35 insertions(+), 35 deletions(-) diff --git a/public/local.js b/public/local.js index f523ace..3780fca 100644 --- a/public/local.js +++ b/public/local.js @@ -92,21 +92,21 @@ editor.getSession().setMode('ace/mode/javascript'); - connection Send: SocketIO built-in event - disconnect Send: SocketIO built-in event - loggedIn Send: handleUserLogin - - editorChange Send: handleUserTyping + - editorTextChange Send: handleUserTyping Receive: handleEditorChange - playerListChange Receive: handlePlayerListChange - updateState Receive: handleUpdateState - turnChange Receive: handleTurnChange - - changeCursor Send: handleChangeCursor + - editorCursorChange Send: handleChangeCursor Receive: handleNewCursorData - - changeScroll Send: handleChangeScroll + - editorScrollChange Send: handleeditorScrollChange Receive: handleNewScrollData - createNewGist Receive: createNewGist - newGistLink Receive: handleNewGistLink Send: (sent after creating or forking) -------------------------------------------------------------- */ editor.getSession().on('change', handleUserTyping); -editor.getSession().selection.on('changeCursor', handleChangeCursor); +editor.getSession().selection.on('editorCursorChange', handleChangeCursor); editor.getSession().on('changeScrollLeft', handleChangeScroll); editor.getSession().on('changeScrollTop', handleChangeScroll); @@ -149,7 +149,7 @@ function handleUserTyping (event) { if (socket.id === currentPlayerId) { //console.log('Sending data to server!') // Send data to server - socket.emit( 'editorChange', editor.getValue() ); + socket.emit( 'editorTextChange', editor.getValue() ); } } @@ -177,7 +177,7 @@ function handleUserNameChange (event) { // Send cursor and selection data to server function handleChangeCursor (event) { - //console.log('changeCursor fired!'); + //console.log('editorCursorChange fired!'); //console.log('%c ' + event, 'color: green; font-weight: bold;'); // Cursor object: @@ -187,16 +187,16 @@ function handleChangeCursor (event) { // { end: {column, row}, start: {column, row} } // Send to server: - socket.emit( 'changeCursor', { cursor: editor.getSession().selection.getCursor(), range: editor.getSession().selection.getRange() } ); + socket.emit( 'editorCursorChange', { cursor: editor.getSession().selection.getCursor(), range: editor.getSession().selection.getRange() } ); } // Send scroll data to server function handleChangeScroll (event) { - //console.log('changeScroll (left or top) fired!'); + //console.log('editorScrollChange (left or top) fired!'); //console.log('%c scrollLeft: ' + editor.getSession().getScrollLeft() + ', scrollTop: ' + editor.getSession().getScrollTop(), 'color: green; font-weight: bold;'); // Send to server: - socket.emit('changeScroll', { scrollLeft: editor.getSession().getScrollLeft(), scrollTop: editor.getSession().getScrollTop() }); + socket.emit('editorScrollChange', { scrollLeft: editor.getSession().getScrollLeft(), scrollTop: editor.getSession().getScrollTop() }); } // TODO: Test 'input' event some more in different browsers! @@ -205,9 +205,9 @@ function handleChangeScroll (event) { /* ------------------------------------------------- EVENT LISTENERS / RECEIVE DATA FROM SERVER ---------------------------------------------------- */ -socket.on('editorChange', handleEditorChange); -socket.on('changeCursor', handleNewCursorData); -socket.on('changeScroll', handleNewScrollData); +socket.on('editorTextChange', handleEditorChange); +socket.on('editorCursorChange', handleNewCursorData); +socket.on('editorScrollChange', handleNewScrollData); socket.on('playerListChange', handlePlayerListChange); socket.on('updateState', handleUpdateState); socket.on('turnChange', handleTurnChange); @@ -216,7 +216,7 @@ socket.on('newGistLink', handleNewGistLink); // When receiving new editorInputView data from server function handleEditorChange (data) { - //console.log('editorChange event received!'); + //console.log('editorTextChange event received!'); //console.log('%c ' + data, 'color: blue; font-weight: bold;'); updateEditorView(data); @@ -234,7 +234,7 @@ function handleNewCursorData (data) { // When receiving new scroll data from server function handleNewScrollData (data) { - //console.log('%c scrollChange event received!', 'color: blue; font-weight: bold;'); + //console.log('%c editorScrollChange event received!', 'color: blue; font-weight: bold;'); //console.dir(data); // Set Ace editor's scroll position to match diff --git a/server.js b/server.js index d101972..f6d3c62 100644 --- a/server.js +++ b/server.js @@ -67,11 +67,11 @@ server.listen(port, function() { /* ------------------------------------------------------------ EVENT NAMES: SERVER FUNCTIONS: - loggedIn io.emit: playerListChange - socket.emit: editorChange, changeScroll, changeCursor, turnChange + socket.emit: editorTextChange, editorScrollChange, editorCursorChange, turnChange - disconnect Broadcast: playerListChange - - editorChange Broadcast: editorChange - - changeCursor Broadcast: changeCursor - - changeScroll Broadcast: changeScroll + - editorTextChange Broadcast: editorTextChange + - editorCursorChange Broadcast: editorCursorChange + - editorScrollChange Broadcast: editorScrollChange - updateState Broadcast: updateState - turnChange Broadcast: turnChange - createNewGist Broadcast: createNewGist @@ -114,12 +114,12 @@ io.on('connection', function (socket) { playerList.push(socket.id); // Send current state of the text editor to the new client, to initialize! - socket.emit('editorChange', editorContent); + socket.emit('editorTextChange', editorContent); if (editorScroll != null) { - socket.emit('changeScroll', editorScroll); + socket.emit('editorScrollChange', editorScroll); } if (editorCursorAndSelection != null) { - socket.emit('changeCursor', editorCursorAndSelection); + socket.emit('editorCursorChange', editorCursorAndSelection); } // Initialize the turn (and timer) with first connected user @@ -204,10 +204,10 @@ io.on('connection', function (socket) { } }); - // When "editorChange" event received, update editor state and broadcast it back out - socket.on('editorChange', function (data) { + // When "editorTextChange" event received, update editor state and broadcast it back out + socket.on('editorTextChange', function (data) { - //console.log('editorChange event received!'); + //console.log('editorTextChange event received!'); //console.log(data); // Double check that this user is allowed to type (in case of client-side tampering with the JS!) @@ -216,17 +216,17 @@ io.on('connection', function (socket) { editorContent = data; // Broadcast updated editor content to other clients - socket.broadcast.emit('editorChange', editorContent); + socket.broadcast.emit('editorTextChange', editorContent); //console.log('Broadcasting editorContent to other clients!'); } }); - // When "changeCursor" event received, update editor state and broadcast it back out - socket.on('changeCursor', function (data) { + // When "editorCursorChange" event received, update editor state and broadcast it back out + socket.on('editorCursorChange', function (data) { - //console.log('changeCursor event received!'); + //console.log('editorCursorChange event received!'); //console.log(data); // Double check that this user is allowed to broadcast (in case of client-side tampering with the JS!) @@ -235,17 +235,17 @@ io.on('connection', function (socket) { editorCursorAndSelection = data; // Broadcast data to other clients - socket.broadcast.emit('changeCursor', editorCursorAndSelection); + socket.broadcast.emit('editorCursorChange', editorCursorAndSelection); - //console.log('Broadcasting changeCursor to other clients!'); + //console.log('Broadcasting editorCursorChange to other clients!'); } }); - // When "changeScroll" event received, update editor state and broadcast it back out - socket.on('changeScroll', function (data) { + // When "editorScrollChange" event received, update editor state and broadcast it back out + socket.on('editorScrollChange', function (data) { - //console.log('changeScroll event received!'); + //console.log('editorScrollChange event received!'); //console.log(data); // Double check that this user is allowed to broadcast (in case of client-side tampering with the JS!) @@ -254,9 +254,9 @@ io.on('connection', function (socket) { editorScroll = data; // Broadcast data to other clients - socket.broadcast.emit('changeScroll', editorScroll); + socket.broadcast.emit('editorScrollChange', editorScroll); - //console.log('Broadcasting changeScroll to other clients!'); + //console.log('Broadcasting editorScrollChange to other clients!'); } }); From a8fe678886fe5f670eb84cc377835372fbf0acba Mon Sep 17 00:00:00 2001 From: LearningNerd Date: Tue, 27 Jun 2017 23:14:32 -0700 Subject: [PATCH 2/3] For #1: rename client functions for editor events - handleUserTyping --> handleLocalEditorTextChange - handleNewCursorData --> handleServerEditorTextChange - handleChangeScroll --> handleLocalEditorScrollChange - handleNewScrollData --> handleServerEditorScrollChange - handleChangeCursor --> handleLocalEditorCursorChange - handleNewCursorData --> handleServerEditorCursorChange --- public/local.js | 60 ++++++++++++++++++++++++------------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/public/local.js b/public/local.js index 3780fca..c002c28 100644 --- a/public/local.js +++ b/public/local.js @@ -88,27 +88,27 @@ editor.getSession().setMode('ace/mode/javascript'); /* ------------------------------------------------------------ EVENT LISTENERS / SEND DATA TO SERVER - EVENT NAMES: CLIENT FUNCTIONS: - - connection Send: SocketIO built-in event - - disconnect Send: SocketIO built-in event - - loggedIn Send: handleUserLogin - - editorTextChange Send: handleUserTyping - Receive: handleEditorChange - - playerListChange Receive: handlePlayerListChange - - updateState Receive: handleUpdateState - - turnChange Receive: handleTurnChange - - editorCursorChange Send: handleChangeCursor - Receive: handleNewCursorData - - editorScrollChange Send: handleeditorScrollChange - Receive: handleNewScrollData - - createNewGist Receive: createNewGist - - newGistLink Receive: handleNewGistLink - Send: (sent after creating or forking) + EVENT NAMES: CLIENT FUNCTIONS: + - connection Send: SocketIO built-in event + - disconnect Send: SocketIO built-in event + - loggedIn Send: handleUserLogin + - editorTextChange Send: handleLocalEditorTextChange + Receive: handleServerEditorTextChange + - playerListChange Receive: handlePlayerListChange + - updateState Receive: handleUpdateState + - turnChange Receive: handleTurnChange + - editorCursorChange Send: handleLocalEditorCursorChange + Receive: handleServerEditorCursorChange + - editorScrollChange Send: handleLocalEditorScrollChange + Receive: handleServerEditorScrollChange + - createNewGist Receive: createNewGist + - newGistLink Receive: handleNewGistLink + Send: (sent after creating or forking) -------------------------------------------------------------- */ -editor.getSession().on('change', handleUserTyping); -editor.getSession().selection.on('editorCursorChange', handleChangeCursor); -editor.getSession().on('changeScrollLeft', handleChangeScroll); -editor.getSession().on('changeScrollTop', handleChangeScroll); +editor.getSession().on('change', handleLocalEditorTextChange); +editor.getSession().selection.on('editorCursorChange', handleLocalEditorCursorChange); +editor.getSession().on('changeScrollLeft', handleLocalEditorScrollChange); +editor.getSession().on('changeScrollTop', handleLocalEditorScrollChange); // When client connects to server, socket.on('connect', function(){ @@ -139,8 +139,8 @@ function handleUserLogin (userData) { } // Send editorInputView data to server -function handleUserTyping (event) { - //console.log('handleUserTyping event! value: '); +function handleLocalEditorTextChange (event) { + //console.log('handleLocalEditorTextChange event! value: '); //console.log(event); //console.log('%c ' + editor.getValue(), 'color: green; font-weight: bold;'); @@ -176,7 +176,7 @@ function handleUserNameChange (event) { } // Send cursor and selection data to server -function handleChangeCursor (event) { +function handleLocalEditorCursorChange (event) { //console.log('editorCursorChange fired!'); //console.log('%c ' + event, 'color: green; font-weight: bold;'); @@ -191,7 +191,7 @@ function handleChangeCursor (event) { } // Send scroll data to server -function handleChangeScroll (event) { +function handleLocalEditorScrollChange (event) { //console.log('editorScrollChange (left or top) fired!'); //console.log('%c scrollLeft: ' + editor.getSession().getScrollLeft() + ', scrollTop: ' + editor.getSession().getScrollTop(), 'color: green; font-weight: bold;'); @@ -205,9 +205,9 @@ function handleChangeScroll (event) { /* ------------------------------------------------- EVENT LISTENERS / RECEIVE DATA FROM SERVER ---------------------------------------------------- */ -socket.on('editorTextChange', handleEditorChange); -socket.on('editorCursorChange', handleNewCursorData); -socket.on('editorScrollChange', handleNewScrollData); +socket.on('editorTextChange', handleServerEditorTextChange); +socket.on('editorCursorChange', handleServerEditorCursorChange); +socket.on('editorScrollChange', handleServerEditorScrollChange); socket.on('playerListChange', handlePlayerListChange); socket.on('updateState', handleUpdateState); socket.on('turnChange', handleTurnChange); @@ -215,7 +215,7 @@ socket.on('createNewGist', createNewGist); socket.on('newGistLink', handleNewGistLink); // When receiving new editorInputView data from server -function handleEditorChange (data) { +function handleServerEditorTextChange (data) { //console.log('editorTextChange event received!'); //console.log('%c ' + data, 'color: blue; font-weight: bold;'); @@ -223,7 +223,7 @@ function handleEditorChange (data) { } // When receiving new cursor/selection data from server -function handleNewCursorData (data) { +function handleServerEditorCursorChange (data) { //console.log('%c cursorChange event received!', 'color: blue; font-weight: bold;'); //console.dir(data); @@ -233,7 +233,7 @@ function handleNewCursorData (data) { } // When receiving new scroll data from server -function handleNewScrollData (data) { +function handleServerEditorScrollChange (data) { //console.log('%c editorScrollChange event received!', 'color: blue; font-weight: bold;'); //console.dir(data); From 5ed5588293714f41b66dc78f554f26368aa1e3c7 Mon Sep 17 00:00:00 2001 From: LearningNerd Date: Tue, 27 Jun 2017 23:21:47 -0700 Subject: [PATCH 3/3] For #1: rename loggedIn event, createNewGist function - loggedIn --> userLogin - createNewGist --> handleCreateNewGist --- public/local.js | 14 +++++++------- server.js | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/public/local.js b/public/local.js index c002c28..cc62007 100644 --- a/public/local.js +++ b/public/local.js @@ -91,7 +91,7 @@ editor.getSession().setMode('ace/mode/javascript'); EVENT NAMES: CLIENT FUNCTIONS: - connection Send: SocketIO built-in event - disconnect Send: SocketIO built-in event - - loggedIn Send: handleUserLogin + - userLogin Send: handleUserLogin - editorTextChange Send: handleLocalEditorTextChange Receive: handleServerEditorTextChange - playerListChange Receive: handlePlayerListChange @@ -101,7 +101,7 @@ editor.getSession().setMode('ace/mode/javascript'); Receive: handleServerEditorCursorChange - editorScrollChange Send: handleLocalEditorScrollChange Receive: handleServerEditorScrollChange - - createNewGist Receive: createNewGist + - createNewGist Receive: handleCreateNewGist - newGistLink Receive: handleNewGistLink Send: (sent after creating or forking) -------------------------------------------------------------- */ @@ -135,7 +135,7 @@ function handleUserLogin (userData) { updateLoggedInView(userData.login, userData.avatar_url); // Notify server that user logged in - socket.emit('loggedIn', {login: userData.login, avatar_url: userData.avatar_url}); + socket.emit('userLogin', {login: userData.login, avatar_url: userData.avatar_url}); } // Send editorInputView data to server @@ -211,7 +211,7 @@ socket.on('editorScrollChange', handleServerEditorScrollChange); socket.on('playerListChange', handlePlayerListChange); socket.on('updateState', handleUpdateState); socket.on('turnChange', handleTurnChange); -socket.on('createNewGist', createNewGist); +socket.on('createNewGist', handleCreateNewGist); socket.on('newGistLink', handleNewGistLink); // When receiving new editorInputView data from server @@ -531,8 +531,8 @@ function updateCurrentGistView (gistData) { GITHUB API FUNCTIONS ---------------------------------------------------- */ // Make a POST request via AJAX to create a Gist for the current user -function createNewGist() { - console.log('called createNewGist at ' + new Date().toString().substring(16,25), 'color: red; font-weight: bold;'); +function handleCreateNewGist() { + console.log('called handleCreateNewGist at ' + new Date().toString().substring(16,25), 'color: red; font-weight: bold;'); // use currentAccessToken // use https://developer.github.com/v3/gists/#create-a-gist @@ -551,7 +551,7 @@ function createNewGist() { postWithGitHubToken('https://api.github.com/gists', gistObject).then(function(responseText){ //console.log(responseText); - console.log('createNewGist: response received at ' + new Date().toString().substring(16,25), 'color: red; font-weight: bold;'); + console.log('handleCreateNewGist: response received at ' + new Date().toString().substring(16,25), 'color: red; font-weight: bold;'); console.dir(gistObject); var gistObject = JSON.parse(responseText); diff --git a/server.js b/server.js index f6d3c62..a2ae265 100644 --- a/server.js +++ b/server.js @@ -66,7 +66,7 @@ server.listen(port, function() { /* ------------------------------------------------------------ EVENT NAMES: SERVER FUNCTIONS: - - loggedIn io.emit: playerListChange + - userLogin io.emit: playerListChange socket.emit: editorTextChange, editorScrollChange, editorCursorChange, turnChange - disconnect Broadcast: playerListChange - editorTextChange Broadcast: editorTextChange @@ -102,7 +102,7 @@ io.on('connection', function (socket) { //console.log('\t\t playerList.length: ' + playerList.length); // When a user logs in, - socket.on('loggedIn', function (userData) { + socket.on('userLogin', function (userData) { console.log('\n* * * * # # # # User logged in! # # # # * * * * *'); console.log('\t\t > > > ' + userData.login + ' < < <\n'); //console.log('\t\t playerList.length: ' + playerList.length); @@ -137,7 +137,7 @@ io.on('connection', function (socket) { // Broadcast updated playerList to ALL clients io.emit('playerListChange', playerData); - console.log('\non("loggedIn") -- turnData broadcasted!\n'); + console.log('\non("userLogin") -- turnData broadcasted!\n'); //console.log( getTurnData() ); //console.log(' ! ! ! ! ! ! player data and list ! ! ! ! ! !');