bz-toggler

app/views/editors/KeyframeView.html

@@ -23,10 +23,13 @@
     <article eiccard>
         <section>
             Arena
+            <bz-toggler labelLeft="gauche" data-output="testToggler"></bz-toggler>
+            <bz-toggler labelRight="droite"></bz-toggler>
+            <bz-toggler labelLeft="gauche" labelRight="droite"></bz-toggler>
         </section>
     </article>
     <article eiccard="">
-         <header>Properties</header>
+         <header><h1>Agent properties</h1></header>
         <section>Props form</section>
     </article>
 

app/views/editors/KeyframeView.js

@@ -21,23 +21,74 @@ class KeyframeView extends WindozDomContent {
         this.setupTriggers(components)        
         this.setupRefs(components)
 
-        this.agentDefs = await this.models.agents.getSprites('Basic 3D')
-        this.outputs.agentsSelector.fillOptions( Object.keys(this.agentDefs).map(aname => {
-            console.log(this.agentDefs[aname])
-            return({ markup: `${aname}`, value: aname})
+        const [sprites, types] = await Promise.all([
+            this.models.agents.getSprites('Basic 3D'),
+            this.models.agents.getTypes('Test agents')
+        ])
+
+        this.agentSprites = sprites
+        this.agentTypes = types
+
+
+        this.outputs.agentsSelector.fillOptions( this.agentTypes.map(item => {
+            return({ markup: `${item.atp_name}`, value: item.atp_id})
         }))
         this.outputs.agentsSelector.addEventListener('change',this.onChangeAgent.bind(this))
         
-        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentDefs)
+        this.agentPreview = new app.LoadedModules.AgentPreview(this.outputs.agentSampleCanvas, this.agentSprites)
         this.onChangeAgent()
         this.agentPreview.startRendering()
         this.agentPreview.animation = true
+
+
+        this.outputs.testToggler.addEventListener('change',(e)=> {
+            console.log(e.target.value, e)
+
+        })
     }
 
 
 
-    onChangeAgent(event){
+    async onChangeAgent(event){
         if(this.outputs.agentsSelector.value) this.agentPreview.setAgent(this.outputs.agentsSelector.value)
+        if(!this.outputs.agentsSelector.value) return
+        const agent = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
+        this.fillAgentProperties(agent.atp_props)
+    }
+
+    fillAgentProperties(agentProps){
+        for(const propName in agentProps){
+            const fieldRow = ui.create(`<div class="cols-2"><label>${propName}</label></div>`)
+            let component
+            switch(agentProps[propName].type){
+                case 'number':
+                    component = document.createElement('input')
+                    component.setAttribute('type','number')
+                    if(agentProps[propName].min) component.setAttribute('min', agentProps[propName].min)
+                    if(agentProps[propName].max) component.setAttribute('max', agentProps[propName].max)
+                    component.value = agentProps[propName].default
+                    break
+                case 'string': 
+                    component = document.createElement('input')
+                    component.setAttribute('type','text')
+                    break
+                case 'boolean':                        
+                    component = new InputToggler({
+                        value: agentProps[propName].default, 
+                    })
+                    fieldRow.append(component.el)                    
+                    break                    
+                case 'list':
+                    component = document.createElement('bz-select')
+                    component.fillOptions( agentProps[propName].choices.map(item => {
+                        return({ markup: `${item}`, value: item})
+                    })) 
+                    break
+                default:
+                    console.warn(`Unknown field type ${agentProps[propName].type}`)
+            }
+            fieldRow.append(component)
+        }
     }
 
 }

app/views/editors/modules/agentPreview.module.js

@@ -4,11 +4,11 @@ import * as TWEEN from '/app/thirdparty/Three/tween.module.js'
 
 export class AgentPreview{
 
-    constructor(canvasEl, agentDefs){
+    constructor(canvasEl, agentSprites){
         Object.assign(this, app.helpers.helpers3D)
-        this.agentDefs = app.Assets.Store.json.agentDefs
+        this.agentSprites = app.Assets.Store.json.agentSprites
         this.canvasEl = canvasEl
-        this.agentDefs = agentDefs
+        this.agentSprites = agentSprites
         this.currentAgentObj = null
         this.renderer = null
         this._animation = false
@@ -41,11 +41,13 @@ export class AgentPreview{
         this.renderer.render(this.scene, this.camera)
     }
 
-    setAgent(atype){
+    setAgent(id){ 
         if(this.currentAgentObj && (this.scene.children.includes(this.currentAgentObj))){
             this.scene.remove(this.currentAgentObj)
         }
-        this.currentAgentObj = this.agentFromJSON('previewedAgent', this.agentDefs[atype])
+        const agentSprite = this.agentSprites.find(item => item.atp_id==id)
+        if(!agentSprite) return
+        this.currentAgentObj = this.agentFromJSON('previewedAgent', agentSprite.asp_3d)
         this.currentAgentObj.position.set(0, 0, 0)
         this.scene.add(this.currentAgentObj)