Components separated, interactive object method overhauled, and networked Objects

node_server/app.js

@@ -72,8 +72,8 @@ app.use(
       "media-src":        ["*"],
       "frame-src":        ["*"],
       "style-src":        ["*", "'unsafe-inline'"],
-      "script-src":       ["'self'", "'unsafe-inline'", "'unsafe-eval'", "unpkg.com", "aframe.io", "blob:"],
-      "script-src-attr":  ["'unsafe-inline'"],
+      "script-src":       ["*", "'self'", "'unsafe-inline'", "'unsafe-eval'", "unpkg.com", "aframe.io", "blob:"],
+      "script-src-attr":  ["*", "'unsafe-inline'"],
       "object-src":       ["'none'"],
     },
   })
@@ -303,6 +303,8 @@ io.on("connection", socket => {
 
   //listen for all events and forward to all other clients
   socket.on("*", function(event, data) {
+    //console.log('socket event fired: ' + event);
+
     //ignore reserved event names
     if (  event === CIRCLES.EVENTS.REQUEST_DATA_SYNC ||
           event === CIRCLES.EVENTS.REQUEST_DATA_SYNC ||

node_server/controllers/controller.js

@@ -563,8 +563,10 @@ const generateAuthLink = (email, baseURL, route, expiryTimeMin) => {
 
 const getMagicLinks = (req, res, next) => {
   const route = req.query.route;
-  const userTypeAsking = req.query.userTypeAsking;
-  const expiryTimeMin = req.query.expiryTimeMin;
+  const usernameAsking  = req.query.usernameAsking;
+  const emailAsking     = req.query.emailAsking;
+  const userTypeAsking  = req.query.userTypeAsking;
+  const expiryTimeMin   = req.query.expiryTimeMin;
   let allAccounts = [];
 
   //ignore req.protocol as it will try and re-direct to https anyhow.
@@ -574,7 +576,7 @@ const getMagicLinks = (req, res, next) => {
   let error = null;
   async function getItems() {
     try {
-      users = await User.find({usertype: (req.query.userTypeAsking === CIRCLES.USER_TYPE.TEACHER) ? CIRCLES.USER_TYPE.STUDENT : CIRCLES.USER_TYPE.PARTICIPANT }).exec();
+      users = await User.find({usertype: (userTypeAsking === CIRCLES.USER_TYPE.TEACHER) ? CIRCLES.USER_TYPE.STUDENT : CIRCLES.USER_TYPE.PARTICIPANT }).exec();
     } catch(err) {
       error = err;
     }
@@ -584,6 +586,10 @@ const getMagicLinks = (req, res, next) => {
     if (error) {
       res.send(error);
     }
+
+    //add "self" first
+    allAccounts.push({username:usernameAsking, email:emailAsking, magicLink:generateAuthLink(emailAsking, baseURL, route, expiryTimeMin)});
+
     for (let i = 0; i < users.length; i++) {
       allAccounts.push({username:users[i].username, email:users[i].email, magicLink:generateAuthLink(users[i].email, baseURL, route, expiryTimeMin)});
 
@@ -594,6 +600,47 @@ const getMagicLinks = (req, res, next) => {
   });
 };
 
+const loopAndGetFolderNames =  async (folderPath) => {
+  let allSubFolderNames = [];
+  // Get the files as an array
+  let files = null;
+  try{
+    files = await fs.promises.readdir(folderPath);
+  }
+  catch(e) {
+    console.log(e.message);
+    return allSubFolderNames;
+  }
+
+  // Loop them all with the new for...of
+  let worldName = "";
+  for( const file of files ) {
+      // Get the full paths
+      const fullPath = path.join( folderPath, file );
+
+      // Stat the file to see if we have a file or dir
+      const stat = await fs.promises.stat( fullPath );
+
+      if( stat.isDirectory() ) {
+          //console.log( fullPath + " is a directory.");
+          worldName = file;
+          worldName.replace(folderPath, "");
+          allSubFolderNames.push(file);
+      }
+  }
+  allSubFolderNames.sort();
+
+  return allSubFolderNames;
+};
+
+const getWorldsList = async (req, res, next) => {
+  const folderPath = __dirname + '/../../src/worlds';
+  loopAndGetFolderNames(folderPath).then(function(data) {
+    res.json(data);
+  });
+}
+
+
 const addTestUsers = () => {
   let usersToAdd  = [];
   let tenColors   = [ CIRCLES.COLOR_PALETTE.PEARL, CIRCLES.COLOR_PALETTE.TURQUOISE, CIRCLES.COLOR_PALETTE.EMERALD, CIRCLES.COLOR_PALETTE.RIVER, CIRCLES.COLOR_PALETTE.AMETHYST,
@@ -894,5 +941,6 @@ module.exports = {
   addAllTestData,
   serveExplore,
   generateAuthLink,
-  getMagicLinks
+  getMagicLinks,
+  getWorldsList,
 };

node_server/public/global/js/components/aframe-mirror.js

@@ -35,7 +35,7 @@ let Reflector = function ( mesh, renderer, options, cameraEl ) {
 	var parameters = {
 		minFilter: THREE.LinearFilter,
 		magFilter: THREE.LinearFilter,
-		format: THREE.RGBFormat
+		format: THREE.RGBAFormat
 	};
 
 	var renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );

node_server/public/web/js/app.js

@@ -1,8 +1,12 @@
 window.onload = function () {
   //have something in the group field when opening page
-  if (typeof MagicLinkGroup !== 'undefined') {
-    autogenerateGroupName(MagicLinkGroup, 4);
-  }
+  //let's not as "explore" will be used if field is blank
+  // if (typeof MagicLinkGroup !== 'undefined') {
+  //   autogenerateGroupName(MagicLinkGroup, 4);
+  // }
+
+  //get worlds available from server
+  getWorldsList();
 
   let popover = new Popover();
   const cps = document.querySelectorAll('.colorPicker'); //from here - https://github.com/tovic/color-picker 
@@ -93,17 +97,19 @@ function startCoundown(numMS, textId) {
 
 
 //*********** magic links button functionality */
-//function createMagicLinks(url, userTypeAsking, expiryTimeMin = CIRCLES.CONSTANTS.AUTH_TOKEN_EXPIRATION_MINUTES) {
-function createMagicLinks(userTypeAsking) {
+function createMagicLinks(username, email, userTypeAsking) {
   const magic_world = document.querySelector("#MagicLinkWorld").value;
   const magic_group = document.querySelector("#MagicLinkGroup").value;
   const url = 'w/' + magic_world + '?group=' + ((magic_group === '') ? 'explore' : magic_group);
 
-  //const userTypeAsking = userInfo.userType;
   const expiryTimeMin = document.querySelector("#MagicLinkExpiry").value * 24 * 60; //convert days to mins
 
   let request = new XMLHttpRequest();
-  request.open('GET', '/get-magic-links?route=' + url + '&userTypeAsking=' + userTypeAsking + '&expiryTimeMin=' + expiryTimeMin);
+  request.open('GET', '/get-magic-links?route=' + url 
+                                                + '&usernameAsking='  + username 
+                                                + '&emailAsking='     + email 
+                                                + '&userTypeAsking='  + userTypeAsking 
+                                                + '&expiryTimeMin='   + expiryTimeMin);
   request.responseType = 'text';
 
   request.onload = function() {
@@ -124,33 +130,16 @@ function copyText(copyTextElem, username) {
   });
 }
 
-const YEATS_WORD_LIST = [  'had', 'i', 'the', 'heavens', 'embroidered', 'cloths',
-                            'enwrought', 'with', 'golden', 'and', 'silver', 'light',
-                            'the', 'blue', 'and', 'the', 'dim', 'and', 'the', 'dark', 'cloths',
-                            'of', 'night', 'and', 'light', 'and', 'the', 'half', 'light',
-                            'i', 'would', 'spread', 'the', 'cloths', 'under', 'your', 'feet'];
 function autogenerateGroupName(inputElem, numWords = 1) {
-  //const textInput = document.querySelector("#" + inputID);
-  const arrLength = YEATS_WORD_LIST.length;
-
-  const getRandomWord = () => {
-    return YEATS_WORD_LIST[Math.floor(Math.random() * arrLength)];
-  };
-
-  let autoStr     = getRandomWord();
-  for (let i = 0; i < numWords; i++) {
-    autoStr += '-' + getRandomWord();
-  }
-
-  inputElem.value = autoStr;
+  inputElem.value = CIRCLES.UTILS.generateRandomString(numWords);
 }
 
 function showMagicLinks(data, expiryTimeMin) {
   startCoundown(expiryTimeMin * 60000, 'countdownElem'); //start visual timer
 
   const jsonData = JSON.parse(data);
   const menuElem = document.querySelector('#MagicLinksContent');
-  let tableStr        = '<table class=\'pure-table\'>'        
+  let tableStr   = '<table class=\'pure-table\'>'        
   menuElem.setAttribute('class', 'pure-menu gutter-bottom');
 
   tableStr += '<thead>';
@@ -163,15 +152,58 @@ function showMagicLinks(data, expiryTimeMin) {
   tableStr += '<tbody>';
 
   for (let i = 0; i < jsonData.length; i++) {
+    let isYou     = (i === 0);
+    let username  = ((isYou) ? ' <strong>' : '') + jsonData[i].username + ((isYou) ? ' (you) </strong>' : '');
+    let email     = ((isYou) ? ' <strong>' : '') + jsonData[i].email + ((isYou) ? '</strong>' : '');
+    let magicLink = jsonData[i].magicLink ;
+
     tableStr += '<tr>';
-    tableStr += '<td>' + jsonData[i].username +  '</td>';
-    tableStr += '<td>' + jsonData[i].email +  '</td>';
-    tableStr += '<td><input type=\'button\' class=\'pure-button pure-button-primary\' value=\'copy\' onclick=\'copyText(linkCopy' + i + ',"' + jsonData[i].username + '")\'>';
-    tableStr += '<input id=linkCopy' + i + ' type=\'text\' class=\'\' value=\'' + jsonData[i].magicLink + '\' size=\'50\' readonly></td>';
+    tableStr += '<td>' + username +  '</td>';
+    tableStr += '<td>' + email +  '</td>';
+    tableStr += '<td><input type=\'button\' class=\'pure-button pure-button-primary\' value=\'copy\' onclick=\'copyText(linkCopy' + i + ',"' + username + '")\'>';
+    tableStr += '<input id=linkCopy' + i + ' type=\'text\' class=\'\' value=\'' + magicLink + '\' size=\'50\' readonly></td>';
     tableStr += '</tr>';
   }
 
   tableStr += '</tbody>';
   tableStr += '</table>';
   menuElem.innerHTML = tableStr;
+}
+
+function getWorldsList() {
+  let request = new XMLHttpRequest();
+  request.open('GET', '/get-worlds-list');
+  request.responseType = 'text';
+  request.onload = function() {
+    showWorldList(request.response); //show copy button
+  };
+  request.send();
+}
+
+function showWorldList(data) {
+  const jsonData                = JSON.parse(data);
+
+  let htmlStr_list    = '<ul class="pure-menu-list">';
+  let htmlStr_select  = '';
+  let urlLink = '';
+  let worldName = ';'
+  for (let i = 0; i < jsonData.length; i++) {
+    worldName = jsonData[i];
+    urlLink = '/w/' + worldName;
+
+    htmlStr_list += '<li><a class="pure-button" href="' + urlLink + '">';
+    htmlStr_list += worldName;
+    htmlStr_list += '</a></li>';
+
+    htmlStr_select += '<option value="' + worldName + '">' + worldName + '</option>';
+  }
+  htmlStr_list += '</ul>';
+
+  const worldsWrapperElem       = document.querySelector('#worlds_list_wrapper');
+  worldsWrapperElem.innerHTML = htmlStr_list;
+
+  const worldsSelectElem        = document.querySelector('#MagicLinkWorld');
+  if(worldsSelectElem) {
+    worldsSelectElem.innerHTML = htmlStr_select;
+  }
 }

node_server/public/web/views/explore.pug

@@ -8,60 +8,10 @@ block content
   - var targetUsersText       = (userInfo.userType === CIRCLES.USER_TYPE.TEACHER) ? CIRCLES.USER_TYPE.STUDENT : CIRCLES.USER_TYPE.PARTICIPANT;
   - var buttonText            = 'Create ' + targetUsersText + ' Links';
 
-  //this should be dynamically created one day from 'worlds' folders ...
-  - const wit_worlds          = [ 'hub', 'WIT_1_Kitchen', 'WIT_2_Lab', 'WIT_3_Work'];
-  - const wit_worlds_txt      = [ 'Campfire Hub', 'Growing Up', 'In The Classroom', 'On The Job'];
-
-  - const desmond_worlds      = [ 'VD_1_Salon', 'VD_2_Theatre', 'VD_3_ProvinceHouse'];
-  - const desmond_worlds_txt  = [ 'The Salon', 'The Roseland Theatre', 'The Province House'];
-
-  - const kin_worlds          = [ 'KIN_Hub', 'KIN_FreeFall', 'KIN_ShootAndDrop', 'KIN_ShootTheMonkey' ];
-  - const kin_worlds_txt      = [ 'Kinematics Hub', 'Freefall', 'Shoot and Drop', 'Shoot the Monkey' ];
-
-  - const cog_worlds          = [ 'COG_MemoryPalace', 'COG_MemoryPalace_WIP' ];
-  - const cog_worlds_txt      = [ 'Memory Palace', 'Memory Palace (WIP)' ];
-
-  - const test_worlds         = [ 'explore', 'ExampleWorld', 'Wardrobe', 'Carleton_University', 'Testbed' ];
-  - const test_worlds_txt     = [ 'This "Circles\' Worlds" Page (explore)', 'Circles\' Example', 'Wardrobe', 'Carleton University WIP', 'Research Room' ];
-
-  - const all_circles_worlds      = [].concat(wit_worlds, desmond_worlds, kin_worlds, cog_worlds, test_worlds);
-  - const all_circles_worlds_txt  = [].concat(wit_worlds_txt, desmond_worlds_txt, kin_worlds_txt, cog_worlds_txt, test_worlds_txt);
-
   h2 Circles' Worlds
   div(class="gutter-bottom-doubled")
-
-    div(class="pure-menu gutter-bottom")
-    <span class="pure-menu-heading">Challenges Surrounding Women in the Trades</span>
-      ul(class="pure-menu-list")
-        each val, index in wit_worlds
-          li!= '<a class="pure-button" href="' + '/w/' + wit_worlds[index] + '">' + wit_worlds_txt[index] + '</a>'
-
-    div(class="pure-menu gutter-bottom")
-    <span class="pure-menu-heading">Viola Desmond, Canadian Civil Rights Pioneer</span>
-      ul(class="pure-menu-list")
-        each val, index in desmond_worlds
-          li!= '<a class="pure-button" href="' + '/w/' + desmond_worlds[index] + '">' + desmond_worlds_txt[index] + '</a>'
-
-    div(class="pure-menu gutter-bottom")
-    <span class="pure-menu-heading">Education - Kinematics</span>
-      ul(class="pure-menu-list")
-        each val, index in kin_worlds
-          li
-            a(class= 'pure-button', href!= '/w/' + kin_worlds[index])!= kin_worlds_txt[index]
-
-    div(class="pure-menu gutter-bottom")
-    <span class="pure-menu-heading">Education - CogSci</span>
-      ul(class="pure-menu-list")
-        each val, index in cog_worlds
-          li
-            a(class= 'pure-button', href!= '/w/' + cog_worlds[index])!= cog_worlds_txt[index]
-
-    div(class="pure-menu gutter-bottom")
-    <span class="pure-menu-heading">For Testing</span>
-      ul(class="pure-menu-list")
-        each val, index in test_worlds
-          li
-            a(class= 'pure-button', href!= '/w/' + test_worlds[index])!= test_worlds_txt[index]
+    div(id="worlds_list_wrapper" class="pure-menu gutter-bottom")
+    //will ask for worlds list from server and populate here
 
   if userCanGenMagicLinks
 
@@ -79,20 +29,21 @@ block content
             select(name='MagicLinkExpiry', id='MagicLinkExpiry', class="pure-input-1-3")
               while n < 365
                 - val = n++;
-                - selected = (val === 30)
+                - selected = (val === 7)
                 option(value!= val, selected!= selected)!= val
                 - selected = false
           div(class='pure-control-group')
             label(for='MagicLinkGroup') Create Group Name
-            input(name='MagicLinkGroup', id='MagicLinkGroup', type="text", placeholder="type group name", class="pure-input-1-3")
-            button(type="button", class="pure-button pure-button", onclick='autogenerateGroupName(MagicLinkGroup, 4)') autogenerate
+            input(name='MagicLinkGroup', id='MagicLinkGroup', type="text", placeholder="explore", class="pure-input-1-3")
+            button(type="button", class="pure-button pure-button", onclick='autogenerateGroupName(MagicLinkGroup, 4)') create new group
           div(class='pure-control-group')
             label(for='MagicLinkWorld') Select Entry World
             select(name='MagicLinkWorld', id='MagicLinkWorld', , class="pure-input-1-3")
-              each val, index in all_circles_worlds
-                option=val
+            //will populate this select element when we load in worlds
+            //-   each val, index in window.all_circles_worlds 
+            //-     option=val
           div(class='pure-controls')
-            input(type='button', class="pure-button pure-button-primary", value=buttonText, onclick='createMagicLinks("' + userInfo.userType + '")')
+            input(type='button', class="pure-button pure-button-primary", value=buttonText, onclick='createMagicLinks("' + userInfo.userName + '","' + userInfo.email + '","' + userInfo.userType + '")')
 
       p Selection the expiry and world, then click on the blue <span style='color:#0078e7; font-weight:bold;'>[#{buttonText}]</span> button above to generate "magic links" to the selected world for each #{targetUsersText}. Just copy and send each link to each #{targetUsersText} to automatically log them in. Ask them to save the link so they can login repeatedly. 
       p <em>Note these links expire in <span id='countdownElem' style='color:#0078e7; font-weight:bold;'>15 minutes</span></em>.

node_server/routes/router.js

@@ -53,6 +53,9 @@ router.post('/login',  passport.authenticate('local', {
 //magic links for students
 router.get('/get-magic-links', authenticated, controller.getMagicLinks);
 
+//get list of worlds
+router.get('/get-worlds-list', authenticated, controller.getWorldsList);
+
 router.get('/magic-login', function(req, res, next) {
   passport.authenticate('jwt', function(err, user, info) {
     if (err) { return next(err); }