[pull] main from lo-th:main

assets/models/avatar/animation/animations.json

@@ -0,0 +1,12 @@
+{
+	"main" : [
+		"idle",
+		"idle2",
+		"roll",
+		"Jog Backward",
+		"Jog Forward",
+		"Jog Strafe Left",
+		"Jog Strafe Right",
+		"Standard Run"
+	]
+}

src/3TH/Gui.js

@@ -33,19 +33,12 @@ export const Gui = {
 		fontSize:12,
 		weight:'bold',
 
-		//groups:'rgba(50,50,50,0.3)',
-
-		//select:'#06A',
-
 		text:'rgba(0,0,6,1)',
 		title:'rgba(0,0,6,1)',
 		titleoff: '#000',
 		textOver: '#7fFF00',
 		textSelect: '#7fFF00',
 
-		//select:'#7fFF00',//rgba(0,255,255,0.6)',
-		//over:'rgba(255,255,255,0.6)',
-		//overoff:'rgba(255,255,255,0.3)',
 		button:'rgba(255,255,255,0.1)',
 		overoff : 'rgba(0,0,6,0.3)',
 		over:'rgba(0,0,6,0.2)',
@@ -54,7 +47,7 @@ export const Gui = {
 		//fontShadow:'#000006',
 
 		border:'rgba(255,255,255,0.2)',//'none',
-		borderSize:0,
+		borderSize:1,
 		//overoff:'rgba(255,255,255,0.1)',
 
 		groups:'rgba(255,255,255,0.1)',
@@ -67,15 +60,25 @@ export const Gui = {
 
 		const options = Main.getOption();
 
-		const ui = new UIL.Gui( { w:250, h:20, close:true, bottomText:['OPTIONS', 'CLOSE'], css:'right:5px;', colors:Gui.colors } )
+		UIL.Tools.setStyle(Gui.colors)
+
+		const b1 = UIL.add('button', { name:'O', w:40, h:40, bw:40, pos:{right:'14px', top:'5px'}, simple:true }).onChange( Gui.showHide )
+		const b2 = UIL.add('button', { name:'P', w:40, h:40, bw:40, pos:{right:'59px', top:'5px'}, simple:true }).onChange( Gui.gotoGithub )
+		b1.icon( UIL.Tools.icon('config', 'rgba(0,0,6,0.66)', 30 ) )
+		b2.icon( UIL.Tools.icon('phy', 'rgba(0,0,6,0.66)', 30 ) )
+
+		const ui = new UIL.Gui( { w:250, h:20, close:false, css:'top:48px; right:5px;', colors:Gui.colors } )
+
+
+
 
 		ui.content.style.backdropFilter = 'blur(6px)'
 		//ui.content.style.boxShadow = '0 0px 10px rgba(2,4,24,0.25)'
 
-		ui.add( 'empty', {h:3})
+		//ui.add( 'empty', {h:3})
 
-		let bb = ui.add('button', { name:'GITHUB / ABOUT', h:40, bw:40 }).onChange( Gui.gotoGithub )
-		bb.icon( UIL.Tools.icon('phy', 'rgba(0,0,6,1)', 30 ) )
+		//let bb = ui.add('button', { name:'GITHUB / ABOUT', h:40, bw:40 }).onChange( Gui.gotoGithub )
+		//
 
 		if( Main.devMode ){
 			Main.engineList.push('RAPIER')
@@ -86,33 +89,34 @@ export const Gui = {
 
 		ui.add( 'bool', { name:'WORKER OFF', onName:'WORKER ON', value:Main.isWorker, mode:1 }).onChange( Gui.swapWorker )
 
-		ui.add( 'empty', {h:3})
+		//ui.add( 'empty', {h:3})
 
-		ui.add( 'bool', { name:'CAPTURE', onName:'STOP', value:false, mode:1 }).onChange( Gui.capture )
+		//ui.add( 'bool', { name:'CAPTURE', onName:'STOP', value:false, mode:1 }).onChange( Gui.capture )
 
 		//ui.add('button', { name:'CAMERA' }).onChange( function(){ console.log( controls.getInfo() )} )
 
 
 		//ui.add( 'empty', {h:6})
-		ui.add( options, 'mode', { type:'button', values:['LOW', 'HIGH'], selectable:true, p:0 }).onChange( Main.changeMode )
+
 
-		ui.add( 'empty', {h:3})
+		//ui.add( 'empty', {h:3})
 
-		ui.add( 'button', { type:'button', values:['EDIT', 'REPLAY', 'PAUSE'], selectable:false, p:0 }).onChange( function(n){ 
+		ui.add( 'button', { type:'button', values:['EDIT', 'REPLAY', 'PAUSE'], selectable:false, p:0, h:30 }).onChange( function(n){ 
 			if(n === 'EDIT'){ Main.showEditor(true); this.switchValues(0, 'CLOSE' ); }
 			if(n === 'CLOSE'){ Main.showEditor(false); this.switchValues(0, 'EDIT' ); }
 			if(n === 'PAUSE'){ phy.pause( true ); this.switchValues(2, 'PLAY' ); }
 			if(n === 'PLAY'){ phy.pause( false ); this.switchValues(2, 'PAUSE' ); }
 			if(n === 'REPLAY') Main.injectCode( Main.getCode() )
 		})
-		ui.add( 'empty', {h:3})
+
 
 		Gui.ui = ui;
 
 		Gui.display()
 
 		const g2 = Gui.ui.add('group', { name:'DEMOS', open:true })
 		//Gui.camera()
+		//ui.add( 'empty', {h:3})
 
 		Gui.demo(g2)
 
@@ -130,6 +134,8 @@ export const Gui = {
 
 		const g = Gui.ui.add('group', { name:'DISPLAY' })
 
+		g.add( options, 'mode', { type:'button', values:['LOW', 'HIGH'], selectable:true, p:0 }).onChange( Main.changeMode )
+
 
 		g.add( options, 'show_light', { type:'bool' }).onChange( Main.showDebugLight )
 		g.add( options, 'show_stat', { type:'bool' }).onChange( Main.showStatistic )
@@ -279,17 +285,33 @@ export const Gui = {
 
 		let data = Main.getDemos()
 
-		let grB = gg.add('group', { name:'BASIC', open:true, bg:'rgba(180,255,180,0.1)' })
+		/*let colors = [
+		'rgba(180,255,180,0.1)',
+		'rgba(255,255,180,0.1)',
+		'rgba(255,180,180,0.1)'
+		]*/
+
+		let colors = [
+		'rgba(255,255,255,0.1)',
+		'rgba(200,200,200,0.1)',
+		'rgba(150,150,150,0.1)'
+		]
+
+		let grB = gg.add('group', { name:'BASIC', open:true, bg:colors[0] })
 		Gui.g1 = grB.add( 'grid', { values:data.Basic, selectable:true } ).onChange( Main.loadDemo )
 
-		let grA = gg.add('group', { name:'ADVANCED', open:true, bg:'rgba(255,255,180,0.1)' })
+		let grA = gg.add('group', { name:'ADVANCED', open:true, bg:colors[1] })
 		Gui.g2 = grA.add( 'grid', { values:data.Advanced, selectable:true } ).onChange( Main.loadDemo )
 
 		if( data[Main.engineType] ){
-			let grC = gg.add('group', { name:'SPECIFIC', open:true, bg:'rgba(255,180,180,0.1)' })
+			let grC = gg.add('group', { name:'SPECIFIC', open:true, bg:colors[2] })
 			Gui.g3 = grC.add( 'grid', { values:data[Main.engineType], selectable:true } ).onChange( Main.loadDemo )
 		}
 
+		gg.add( 'empty', {h:3})
+
+
+
 		gg.reset()
 
 	},
@@ -313,6 +335,15 @@ export const Gui = {
 
 	gotoGithub: () => { window.open( 'https://github.com/lo-th/phy', '_blank' ) },
 
+	showHide: () => { 
+
+		if( Gui.ui.isOpen) Gui.ui.isOpen = false;
+		else Gui.ui.isOpen = true;
+		Gui.ui.calc()
+		Gui.ui.mode('def')
+
+	},
+
 	swapWorker: ( b ) => {
 		Main.isWorker = b
 		Gui.swapEngine()