Mass style & formatting cleanup

Added extra options to pages and tons of page edits

Author: ProcStack

docs/js/pxlNav.esm.js

@@ -58,10 +58,10 @@ userSettings['headBounce']['height'] = 0.3; // Bounce magnitude in units
 userSettings['headBounce']['rate'] = 0.025; // Bounce rate per Step()
 userSettings['headBounce']['easeIn'] = 0.03; // When move key is pressed, the ease into bounce; `bounce * ( boundInf + easeIn )`
 userSettings['headBounce']['easeOut'] = 0.95; // When move key is let go, the ease back to no bounce; `bounce * easeOut`
-userSettings['jump']['impulse'] = 0.75; // Jump impulse force applied to the player while holding the jump button
+userSettings['jump']['impulse'] = 0.60; // Jump impulse force applied to the player while holding the jump button
 userSettings['jump']['holdMax'] = 2.85; // Max influence of holding the jump button on current jump; in seconds
 userSettings['jump']['repeatDelay'] = 0.08; // Delay between jumps when holding the jump button
-userSettings['gravity']['UPS'] = 0.3; // Units per Step() per Step()
+userSettings['gravity']['UPS'] = 0.28; // Units per Step() per Step()
 userSettings['gravity']['Max'] = 15.5; // Max gravity rate
 
 // -- -- --

docs/js/pxlNavLoader.js

@@ -15,13 +15,15 @@ export class ProcPage {
     this.pageStyles = contentObject.pageStyles || "";
     this.styleOverrides = contentObject.styleOverrides || {};
     this.initialSection = contentObject.initialSection || 0;
+    this.activeNavButton = contentObject.activeNavButton || [];
 
     this.layoutTypes = ['single', 'triple', 'vertical'];
     this.layout = 'triple';
     if( contentObject.hasOwnProperty('layout') && this.layoutTypes.includes(contentObject.layout) ){
       this.layout = contentObject.layout;
     }
 
+    this.navButton = null;
     this.pageObject = null;
     this.pageContent = {};
     this.prevSection = null;
@@ -455,6 +457,14 @@ export class ProcPage {
       pageInnerContent.appendChild( pageSubHeader );
     }
 
+    if( this.hasPageStyle( 'headerLine' ) ){
+      let headerLineObj = document.createElement('div');
+      headerLineObj.classList.add('procPagesHeaderLine');
+      this.applyPageStyle( 'headerLine', headerLineObj );
+      pageInnerContent.appendChild( headerLineObj );
+    }
+
+
     let pageSections = pageInnerContent;
     if( false && this.layout == 'triple' ){
       pageSections = document.createElement('div');
@@ -530,8 +540,14 @@ export class ProcPage {
 
         let sectionContentBlock = document.createElement('div');
         sectionContentBlock.classList.add('procPageSectionContentStyle');
+        sectionContentBlock.classList.add('pagesVisOff');
         sectionContentBlock.id = sectionTitle;
 
+        if( sectionData.hasOwnProperty( 'contentStyle' ) && Array.isArray( sectionData.contentStyle ) ){
+          sectionData.contentStyle.forEach(( style )=>{ style!=''&&sectionContentBlock.classList.add(style) });
+        }
+
+        
         this.applyPageStyle( 'sectionNav', sectionContentBlock );
 
         pageContentView.appendChild( sectionContentBlock );
@@ -550,6 +566,7 @@ export class ProcPage {
           this.sectionData[sectionTitle].objects.push( ...builtObjs['content'] );
         }
 
+        builtObjs.content.push( sectionContentBlock );
         this.sectionData[sectionTitle].objects = builtObjs.content;
 
         if( builtObjs.hasOwnProperty('nav') ){
@@ -722,6 +739,7 @@ export class ProcPage {
 
 
     if( sectionData.name != '' ){
+
       let sectionTitleDiv = document.createElement('div');
       if( this.layout == 'triple' ){
         sectionTitleDiv.classList.add('procPagesNavSectionStyle');
@@ -739,8 +757,16 @@ export class ProcPage {
       sectionTitleDiv.innerHTML = sectionData.name;
 
       this.applyPageStyle( 'sectionNavButton', sectionTitleDiv );
-      
-      sectionList.appendChild( sectionTitleDiv );
+      if( this.hasPageStyle('sectionNavButtonBackground') ){
+        let buttonBgObj = document.createElement('div');
+        buttonBgObj.classList.add('procPagesSectionNavButtonBackground');
+        this.applyPageStyle( 'sectionNavButtonBackground', buttonBgObj );
+        buttonBgObj.appendChild( sectionTitleDiv );
+        sectionList.appendChild( buttonBgObj );
+      }else{
+        sectionList.appendChild( sectionTitleDiv );
+      }
+
       ret['nav'] = sectionTitleDiv;
     }
 
@@ -804,4 +830,8 @@ export class ProcPage {
     }
   }
 
+  hasPageStyle( styleType ){
+    return this.pageStyles.hasOwnProperty( styleType );
+  }
+
 }

docs/js/pxlPages/ProcPage.js

@@ -266,6 +266,7 @@ export class ProcPageManager {
     }
 
     //this.runHidePages();
+    this.activateNavButton( this.curPageName );
 
     // Let the dom settle for a step
     setTimeout( ()=>{
@@ -493,6 +494,28 @@ export class ProcPageManager {
     }
   }
 
+  activateNavButton( pageName ){
+    let navKeys = Object.keys(this.navBarObjs);
+    navKeys.forEach( (navKey)=>{
+      if( navKey == null ) return;
+
+      let curNav = this.navBarObjs[navKey];
+      if( this.pageListing.hasOwnProperty(navKey) ){
+        let pageData = this.pageListing[navKey]["pageData"];
+        if( navKey == pageName ){
+          console.log(pageData);
+          if( pageData.hasOwnProperty("activeNavButton") && Array.isArray(pageData["activeNavButton"]) ){
+            pageData["activeNavButton"].forEach( (activeNavButton)=>{ curNav.classList.add(activeNavButton); });
+          }
+        }else{
+          if( pageData.hasOwnProperty("activeNavButton") && Array.isArray(pageData["activeNavButton"]) ){
+            pageData["activeNavButton"].forEach( (activeNavButton)=>{ curNav.classList.remove(activeNavButton); });
+          }
+        }
+      }
+    });
+  }
+
   changePage( pageName, roomName=null, locationName=null ){
     if( pageName != this.curPage && Object.keys(this.pageListing).includes(pageName) ){
       this.toggleFader(this.curPage, false);
@@ -546,6 +569,9 @@ export class ProcPageManager {
       // Trigger css animation to bring the new page in
       this.toggleFader(this.curPage, true);
 
+      //Activate nav button
+      this.activateNavButton( pageName );
+
       // Apply new page styles
       this.setStyleOverrides();
 

docs/js/pxlPages/ProcPageManager.js

@@ -237,18 +237,18 @@ export class CampfireEnvironment extends RoomEnvironment{
 
     let systemName = "floatingDust";
     let dustSystem = new FloatingDust( this, systemName );
-  
     let dustSystemSettings = dustSystem.getSettings();
-    dustSystemSettings["vertCount"] = 800; // Point Count
-    dustSystemSettings["pScale"] = 7.0;  // Point Base Scale
-    dustSystemSettings["pOpacity"] = .6;  // Overall Opacity
-    dustSystemSettings["proxDist"] = 380;  // Proximity Distance from Camera
-    dustSystemSettings["fadeOutScalar"] = 1.9;  // Distance-opacity falloff multiplier
-    dustSystemSettings["additiveBlend"] = true;
+    dustSystemSettings["vertCount"] = 900; // Point Count
+    dustSystemSettings["pScale"] = 8.5;  // Point Base Scale
+    dustSystemSettings["pOpacity"] = .95;  // Overall Opacity
+    dustSystemSettings["proxDist"] = 220;  // Proximity Distance from Camera
+    dustSystemSettings["fadeOutScalar"] = 1.2;  // Distance-opacity falloff multiplier
+    dustSystemSettings["additiveBlend"] = false;
 
-    dustSystemSettings["windDir"] = new Vector3( -0.9, 0.25, -1 ); // Constant direction flow
+    dustSystemSettings["offsetPos"] = new Vector3( -10.0, 5.0, 10.0 ); // Offset center of the system
+    dustSystemSettings["windDir"] = new Vector3( -4.4, 0.25, 4.8 ); // Constant direction flow
     dustSystemSettings["wanderInf"] = 0.50; // How much the particle sways
-    dustSystemSettings["wanderFrequency"] = 2.30; // How frequent the sway happens
+    dustSystemSettings["wanderFrequency"] = 2.80; // How frequent the sway happens
 
 
     dustSystemSettings["atlasPicks"] = [

docs/js/pxlRooms/CampfireEnvironment/CampfireEnvironment.js

@@ -74,13 +74,13 @@ export class OutletEnvironment extends RoomEnvironment{
 buildDust(){
   if( this.mobile ) return;
 
-  let vertexCount = 800; // Point Count
-  let pScale = 8.5;  // Point Base Scale
+  let vertexCount = 600; // Point Count
+  let pScale = 8.0;  // Point Base Scale
   let visibleDistance = 380;  // Proximity Distance from Camera
-  let particleOpacity = .6;  // Overall Opacity
+  let particleOpacity = .55;  // Overall Opacity
   let opacityRolloff = 1.9;  // Distance-opacity falloff multiplier
 
-  let windDirection = new Vector3( 8.218, 0.406, -7.812 ); // Constant direction flow
+  let windDirection = new Vector3(  5.218, 0.406, -10.812 ); // Constant direction flow
   let wanderInfluence = 0.80; // How much the particle sways
   let wanderFrequency = 2.30; // How frequent the sway happens
 

docs/js/pxlRooms/OutletEnvironment/OutletEnvironment.js

@@ -173,15 +173,17 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
 
     let dustSystemSettings = dustSystem.getSettings();
     dustSystemSettings["vertCount"] = 800; // Point Count
-    dustSystemSettings["pScale"] = 7.0;  // Point Base Scale
-    dustSystemSettings["pOpacity"] = .6;  // Overall Opacity
-    dustSystemSettings["proxDist"] = 380;  // Proximity Distance from Camera
-    dustSystemSettings["fadeOutScalar"] = 1.9;  // Distance-opacity falloff multiplier
+    dustSystemSettings["pScale"] = 5.5;  // Point Base Scale
+    dustSystemSettings["pOpacity"] = .85;  // Overall Opacity
+    dustSystemSettings["proxDist"] = 300;  // Proximity Distance from Camera
+    dustSystemSettings["fadeOutScalar"] = 3.0;  // Distance-opacity falloff multiplier
     dustSystemSettings["additiveBlend"] = true;
 
-    dustSystemSettings["windDir"] = new Vector3( -0.9, 0.25, -1 ); // Constant direction flow
-    dustSystemSettings["wanderInf"] = 0.50; // How much the particle sways
-    dustSystemSettings["wanderFrequency"] = 2.30; // How frequent the sway happens
+    dustSystemSettings["offsetPos"] = new Vector3( -200.0, 15.0, 0.0 ); // Offset center of the system
+    dustSystemSettings["windDir"] = new Vector3( -0.0, 0.25, 10.0 ); // Constant direction flow
+    dustSystemSettings["wanderInf"] = 0.5; // How much the particle sways
+    dustSystemSettings["wanderRate"] = 1.85; // Wander noise rate
+    dustSystemSettings["wanderFrequency"] = 2.80; // How frequent the sway happens
 
 
     dustSystemSettings["atlasPicks"] = [
@@ -192,7 +194,7 @@ export class SaltFlatsEnvironment extends RoomEnvironment{
     ];
 
     // Use a texture from the internal `pxlAsset` folder; ( RGB, Alpha )
-    //dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
+    dustSystem.setAtlasPath( "sprite_dustLiquid_rgb.jpg", "sprite_dustLiquid_alpha.jpg" );
 
     // Generate geometry and load texture resources
     dustSystem.build( dustSystemSettings );

docs/js/pxlRooms/SaltFlatsEnvironment/SaltFlatsEnvironment.js

@@ -4,7 +4,7 @@ import { ProcPage } from '../js/pxlPages/ProcPage.js';
 import { pageListingData as aiDevData } from './aboutMe/aidev.js';
 import { pageListingData as filmWorkData } from './aboutMe/filmWork.js';
 import { pageListingData as plushiesData } from './aboutMe/plushies.js';
-import { pageListingData as whoAmIData } from './aboutMe/whoAmI.js';
+import { pageListingData as whatAmIData } from './aboutMe/whatAmI.js';
 
 const metaDataInput = {
   'page': 'AboutMe',
@@ -20,6 +20,7 @@ const pageContentObject = {
   'page' : 'AboutMe',
   'title' : 'About Me; Kevin Edzenga',
   'theme' : '#656565',
+  'activeNavButton' : [ 'procPagesNav_aboutMeActiveStyle' ],
   'layout' : 'vertical',
   'header' : 'About Me',
   'subHeader' : '',
@@ -34,7 +35,7 @@ const pageContentObject = {
     'sectionNavList' : [ 'gitAboutMePage-sectionNavListStyle' ],
     'sectionNav' : [],
     'sectionNavButton' : [ 'gitAboutMePage-sectionNavButtonStyle' ],
-    'sectionNavButtonActive' : [ 'gitAboutMePage-sectionNavButtonAvtiveStyle' ],
+    'sectionNavButtonActive' : [ 'gitAboutMePage-sectionNavButtonActiveStyle' ],
     'sectionContent' : [],
     'sectionMedia' : [],
     'sectionCaption' : [ 'gitAboutMePage-sectionCaptionStyle' ],
@@ -47,7 +48,7 @@ const pageContentObject = {
     'footerBar' : 'aboutMePage_footerBar'
   },
   'sections' : [
-    whoAmIData,
+    whatAmIData,
     filmWorkData,
     plushiesData,
     aiDevData