Hi, maybe I'm just doing something wrong here. Not fully sure how to describe this one so code dump incoming:
"monster-menu": {
id: "monster-menu",
EZGUI: null,
createWindow: function(args){
var wH = MIRend.renderer.height * 0.8;
var wW = wH;
return {
id: args.id,
component: 'Window',
skin: 'MonsterManageWindow',
draggable: false,
position: { x: (MIRend.renderer.width - wW)/2, y: (MIRend.renderer.height - wH)/2 },
width: wW,
height: wH,
children: [
]
};
},
createChildren: function(args){
//Add build btn
//Add battle btn
//Add research btn
//Add adventure btn
var wH = MIRend.renderer.height * 0.8;
var wW = wH;
var bW1 = MIRend.renderer.width * 0.07;
var bH1 = bW1;
var bW2 = MIRend.renderer.width * 0.04;
var bH2 = bW2;
var close_menu = {
id: 'close-menu',
image: '../securetest/images/monster_view/skills1_icon.png',
component: 'Button',
position: {x: wW * 0.95, y: wH * 0.15},
wH: 50,
wW: 50
};
var nav_bar = {
id: 'monster-nav-list',
position: {x: wW * 0.07, y: wH * 0.15 },
component: 'List',
width: wW * 0.9,
height: wH * 0.2,
layout: [6,1],
//Buy btn must contain
//Name
//Can Build X
//Price
//Image
//El flag is applicable
children: [
MIMen.templates['nav-bar-btn']({
id: 'stats-nav-btn',
text: 'Stats',
img: '../securetest/images/monster_view/stats_icon.png',
wH: wH,
wW: wW
}),
MIMen.templates['nav-bar-btn']({
id: 'skills-nav-btn',
text: 'Skills',
img: '../securetest/images/monster_view/skills1_icon.png',
wH: wH,
wW: wW
}),
MIMen.templates['nav-bar-btn']({
id: 'boost-nav-btn',
text: 'Boost',
img: '../securetest/images/monster_view/boost_icon.png',
wH: wH,
wW: wW
}),
MIMen.templates['nav-bar-btn']({
id: 'move-nav-btn',
text: 'Move',
img: '../securetest/images/monster_view/movemonster_icon.png',
wH: wH,
wW: wW
}),
MIMen.templates['nav-bar-btn']({
id: 'storage-nav-btn',
text: 'Storage',
img: '../securetest/images/monster_view/storage_icon.png',
wH: wH,
wW: wW
}),
MIMen.templates['nav-bar-btn']({
id: 'sell-nav-btn',
text: 'Sell',
img: '../securetest/images/monster_view/sell_icon.png',
wH: wH,
wW: wW
})
]
};
//Child components:
//Nav bar
//Monster Portrait
//Monster Info
//Monster Stats
//Feed Rigg
var feed_rigg = {
id: 'feed-container',
position: {x: 0, y: (wH * 0.8) - (wH * 0.2) },
component: 'List',
width: wW,
height: wH * 0.2,
children: [
{
id: 'feed-btn',
component: 'Button',
skin: 'ClearButton',
width: (wW * 0.9) * 0.16,
height: wH * 0.15,
position: {x: 0, y: 0},
children: [
{
id: "feed-btn-txt",
text: 'Feed',
position: {x: 0, y: 40}
},
{
id: "feed-btn-img",
image: 'feed.png',
position: {x: 0, y: 0}
}
]
},
{
id: 'feed-bar-container',
position: {x: 0, y: 0},
component: 'List',
height: wH,
width: wW,
children: [
{
id: 'feed-bar-empty',
image: 'feed_bar_empty.png',
component: 'Layout',
position: {x: 0, y: 0},
wH: wH,
wW: wW
},
{
id: 'feed-bar-full',
image: 'feed_bar_'+GMan.selected_monster.element.toLowerCase()+'.png',
component: 'Layout',
text: 'feed',
position: {x: 0, y: 0},
wH: 300,
wW: wW
}
]
}
]
};
//Feed Btn
//Feed Bar
var monster_portrait = {
id: "monster-portait",
position: {x: 0, y: (wH * 0.4) },
component: 'List',
width: wW * 0.6,
height: wH * 0.5,
layout: [1,1],
children: [
MIMen.templates['nav-bar-btn']({
id: 'sell-nav-btn',
text: 'Sell',
img: '../securetest/images/monster_view/sell_icon.png',
wH: wH,
wW: wW
})
]
};
var monster_portrait_container = {
id: "monster-portrait-container",
position: {x: 0, y: wH * 0.2 },
component: 'List',
width: wW * 0.6,
height: wH * 0.8,
children: [
monster_portrait,
feed_rigg
]
};
var monster_stats = {
id: 'stats-list',
component: 'Layout',
position: {x: wW * 0.6, y: wH * 0.45},
width: wW * 0.4,
height: wH * 0.16,
layout: [2,2],
children: [
{
id: 'hp-stat',
component: 'Layout',
text: GMan.selected_monster.name,
image: '../securetest/images/monster_view/health_stat.png',
position: {x: 0, y: 0},
width: 35,
height: 35,
children: [
{
image: '../securetest/images/monster_view/health_stat.png',
position: {x: 0, y: 0},
component: 'Label'
},
{
text: Math.round(GMan.selected_monster.health),
position: {x: 0, y: 0},
component: 'Label'
}
]
},
{
id: 'dmg-stat',
component: 'Layout',
text: GMan.selected_monster.name,
image: '../securetest/images/monster_view/attack_stat.png',
position: {x: 0, y: 0},
width: 35,
height: 35,
children: [
{
position: {x: 0, y: 0},
component: 'Label'
},
{
text: Math.round((GMan.selected_monster.damage + GMan.selected_monster.e_damage)/2),
position: {x: 0, y: 0},
component: 'Label'
}
]
},
{
id: 'def-stat',
component: 'Layout',
text: GMan.selected_monster.name,
image: '../securetest/images/monster_view/defense_stat.png',
position: {x: 0, y: 0},
width: 35,
height: 35,
children: [
{
position: {x: 0, y: 0},
component: 'Label'
},
{
text: Math.round((GMan.selected_monster.defense + GMan.selected_monster.e_defense)/2),
position: {x: 0, y: 0},
component: 'Label'
}
]
},
{
id: 'spd-stat',
component: 'Layout',
text: GMan.selected_monster.name,
image: '../securetest/images/monster_view/speed_stat.png',
position: {x: 0, y: 0},
width: 35,
height: 35,
children: [
{
position: {x: 0, y: 0},
component: 'Label'
},
{
text: Math.round(1/GMan.selected_monster.speed),
position: {x: 0, y: 0},
component: 'Label'
}
]
}
]
};
var monster_info = {
id: 'monster-info',
component: 'Layout',
position: {x: wW * 0.6, y: wH * 0.25},
width: wW * 0.4,
height: wH * 0.16,
children: [
{
id: 'monster-name-'+GMan.selected_monster.id,
width: bW1 * 0.16,
height: wH * 0.15,
position: {x: 0, y: 0},
text: GMan.selected_monster.name,
position: {x: 0, y: 0},
component: 'Label'
},
{
id: 'monster-rarity-'+GMan.selected_monster.id,
text: "Rarity",
width: 100,
height: 100,
position: {x: 0, y: 25},
component: 'Label'
},
{
id: 'monster-type-'+GMan.selected_monster.id,
text: "Type",
width: 100,
height: 100,
position: {x: 50, y: 0},
component: 'Label'
}
]
};
var monster_info_container = {
id: "monster-info-container",
component: "Layout",
position: {x: 0, y: 0 },
width: wW,
height: wH,
children: [
monster_info,
monster_stats
]
};
return [close_menu, nav_bar, monster_portrait_container, monster_info_container];
},
addListeners: function(){
if(EZGUI.components['feed-btn']){
EZGUI.components['feed-btn'].on('mouseup',function(data){
//Feed Monster this.settings.dataid
console.log("Feed monster "+this.settings.dataid);
});
}
}
},
It's kind of a lot of code but pretty simple. I call createWindow(), then createChildren(), then addListeners(). I have another menu that works as expected with clickable elements, but they are free floating (the top level of their menu being a Layout). All of the menus having clickable problems have a top level of Window. When I set that element to Layout though, no difference so I'm pretty sure it's not that.