1+ // ProcStack.Git.io Javascript
2+ // Written by Kevin Edzenga; 2024
3+ //
4+ // -- -- -- -- -- -- -- -- -- -- -- -- -- --
5+ //
6+ // This is an example implementation of `pxlNav` in a project;
7+ // Tieing in `ProcPages` to manage the pages of the site,
8+ // Listening to / triggering events on `pxlNav`
9+ // For `pxlNav` scripting, the entry-point is `./Source/js/pxlNavCore.js`
10+ //
11+
12+ import { pxlNav , pxlNavVersion , pxlEnums , pxlOptions } from './pxlNav.esm.js' ;
13+
14+
15+ // Console logging level
16+ // Options are - NONE, ERROR, WARN, INFO
17+ const verbose = pxlEnums . VERBOSE_LEVEL . NONE ;
18+
19+ // The Title of your Project
20+ // This will be displayed on the load bar
21+ const projectTitle = "pxlNav : Field Env." ;
22+
23+ // pxlRoom folder path, available to change folder names or locations if desired
24+ const pxlRoomRootPath = "../pxlRooms" ;
25+
26+ // Current possible rooms - "CampfireEnvironment", "SaltFlatsEnvironment", "FieldEnvironment", "VoidEnvironment"
27+ const bootRoomList = [ "VoidEnvironment" ] ; //,"FieldEnvironment"];
28+ const startingRoom = bootRoomList [ 0 ] ;
29+
30+ // -- -- --
31+
32+ // Set a list of phrases to display during the loading process
33+ // The loader with randomly pick a phrase from the list
34+ const loaderPhrases = [
35+ "...chasing the bats from the belfry..." ,
36+ "...shuffling the deck..." ,
37+ "...checking the air pressure..." ,
38+ "...winding the clock..." ,
39+ "...tuning the strings..." ,
40+ "...ringing the quartz..." ,
41+ "...crashing the glasses..." ,
42+ "...sharpening the pencils..." ,
43+ ] ;
44+
45+ // -- -- --
46+
47+ // Anti-aliasing level
48+ // Options are - NONE, LOW, MEDIUM, HIGH
49+ const antiAliasing = pxlEnums . ANTI_ALIASING . LOW ;
50+
51+ // Shadow + Edge softness
52+ // Default is `BASIC` - a simple shadow edge
53+ // Options are - OFF, BASIC, SOFT
54+ // *Mobile devices are limited to `OFF` or `BASIC` automatically
55+ const shadowMapBiasing = pxlEnums . SHADOW_MAP . SOFT ;
56+
57+ // Set camera to static Camera Positions
58+ // Locations pulled from the 'Camera' group in the pxlRoom's FBX file
59+ // Default is `false`
60+ const enableStaticCamera = false ;
61+
62+ // Visual effect for the sky
63+ // Default is `OFF`
64+ // Options are - OFF, VAPOR
65+ const skyHaze = pxlEnums . SKY_HAZE . VAPOR ;
66+
67+
68+
69+ // -- -- -- -- -- -- -- -- -- -- -- -- -- -- //
70+ // -- -- -- -- -- -- -- -- -- -- -- -- -- -- //
71+ // -- -- -- -- -- -- -- -- -- -- -- -- -- -- //
72+
73+
74+
75+ // -- Below are the initialization and event handling for pxlNav
76+ // -- No need to edit the below code unless you're adding custom event handling
77+
78+ // -- Prepare pxlNav options --
79+
80+ let pxlNavOptions = Object . assign ( { } , pxlOptions ) ;
81+ pxlNavOptions . verbose = verbose ;
82+ pxlNavOptions . antiAliasing = antiAliasing ;
83+ pxlNavOptions . pxlRoomRoot = pxlRoomRootPath ;
84+ pxlNavOptions . staticCamera = enableStaticCamera ;
85+ pxlNavOptions . skyHaze = skyHaze ;
86+ pxlNavOptions . shadowMapBiasing = shadowMapBiasing ;
87+ pxlNavOptions . loaderPhrases = loaderPhrases ;
88+
89+
90+
91+ // Create the pxlNav environment manager
92+ const pxlNavEnv = new pxlNav ( pxlNavOptions , projectTitle , startingRoom , bootRoomList ) ;
93+
94+
95+ // -- -- --
96+
97+ // <div id="roomToggle" roomToggles="VoidEnvironment:Void Space;FieldEnvironment:Field">Void Space</div>
98+
99+ let switchButton = document . getElementById ( "roomToggle" ) ;
100+ if ( switchButton && switchButton . hasAttribute ( "roomToggles" ) ) {
101+ let roomValues = switchButton . getAttribute ( "roomToggles" ) . split ( ";" ) ;
102+ let roomLabelDict = { } ;
103+ roomValues . forEach ( curVal => {
104+ let curPair = curVal . split ( ":" ) ;
105+ roomLabelDict [ curPair [ 0 ] ] = curPair [ 1 ] ;
106+ } ) ;
107+
108+ switchButton . addEventListener ( "click" , function ( ) {
109+ let switchButtonObj = document . getElementById ( "roomToggle" ) ;
110+ if ( switchButtonObj && switchButtonObj . hasAttribute ( "curRoom" ) ) {
111+ let curVal = switchButtonObj . getAttribute ( "curRoom" ) ;
112+ let nextVal = "" ;
113+ let labelKeys = Object . keys ( roomLabelDict ) ;
114+ let curIndex = labelKeys . indexOf ( curVal ) ;
115+ curIndex = ( curIndex + 1 ) % labelKeys . length ;
116+ nextVal = labelKeys [ curIndex ] ;
117+ switchButtonObj . innerText = roomLabelDict [ nextVal ] ;
118+ switchButtonObj . setAttribute ( "curRoom" , nextVal ) ;
119+ pxlNavEnv . emit ( 'warptoroom' , nextVal , 'default' ) ;
120+ }
121+ } ) ;
122+ }
123+
124+
125+ // -- -- --
126+
127+
128+ function pxlNav_init ( ) {
129+ // Start the timer and initilize pxlNAv
130+ pxlNavEnv . bootTimer ( ) ;
131+ pxlNavEnv . init ( ) ;
132+
133+ // -- -- --
134+
135+ // -- Add pxlNav versioning to the page --
136+ // Set the version number
137+ // Remove this section if you are using this file as a template
138+ let version = pxlNavVersion ;
139+ if ( version [ 0 ] != "v" ) {
140+ version = "v" + version ;
141+ }
142+ let pnv = [ ...document . getElementsByClassName ( "pxlNavVersion" ) ] ;
143+ pnv . forEach ( curPNV => {
144+ curPNV . innerText = version ;
145+ } ) ;
146+ // -- End of versioning --
147+
148+ }
149+
150+ window . addEventListener ( 'load' , function ( ) {
151+ pxlNav_init ( ) ;
152+ } ) ;
0 commit comments