ID:157300
 
After a couple hourse scowering the forums I'm posting. Also, I am always open to an easyer execution of my idea as well....

I'm trying to make an object list in a grid(that part I can do), and I also want behind it to display a number associated with that object, I'll call it 'Var1'. I also want two buttons behind it to increase and decrease that number by a number, we'll say 1 for now.

I'm hoping to make a small skin frame that will house an object, an output box that will have the Var1 number outputted to it and two buttons that will have a verb to increase and decrease that 'Var1' number. THen I can clone that skin and associate the appropriate object and change the verbs on the buttons.. Im thinking by just passing variable into it like [IncVar(varoutput as control, /obj as object, amt as num)], then with that object I can change it's Var1 and then output that to the output control.
That way I can add and remove things tothe list and increment or decrement the variable associated with it and once I'm finished I can generate the players skill list from that.

Or make a list from the /obj/skills that exist and then somehow add those buttons and be able to inact with all the things in that list.

My apologies if I wasn't very clear..
you want to look into the winclone, and winset - and also look at child in the skin reference for what you need.
In response to Pirion
Well, I did look into those but I don't know how to apply it all, I mean I read about winset and winclone but I still don't know how to make the connection and force specific verbs into the buttons I want to make. As well as making multiple copies and continue adding it into the list.

Any example for a single application with 1 button and I can expand from there?
In response to karver
I think I have a more specific line of questioning with an example.

I make a grid called 'skillgrid',
I want to clone a skin, or interface frame, called 'skillframe' over and over into that grid so it looks like a list.
'skillframe' will contain an object, and a button. The button will call a verb that will be "InvVar(/obj/skill as object, amt as num)". This verb is to increase a variable by 1 that is associated with that object.

Every time I clone this I have put a different obj/skill in it and change the reference in the verb that the button in the 'skillframe' is calling.

This then makes a list of objects in the grid of objects and when you click the button in it it increases a variable in the specific objects in a frame.

Skills will be objects because I need to be able to click on them and select verbs.

I then need to search through the list and add all the objects to the character, but I think I can figure that part out.

Hope that clears things up a bit.
Thank you

[EDIT] oohh I think i figured the part out about changing the button command. I'll keep at it but any advice is greatly appreciated.
In response to karver
Okay, I made a try at it and I can't get it to work based on my current understanding of winclone and winset here's the test I tried....

winclone(usr,"skillgrid","skillgrid01")
winset(usr,"skillgrid01","charcreat4.childskills")
usr<<output(55,"skillgrid01.skillnum")

I have a few layers of child windows but basically...

skillgrid = a window frame skin.
skillgrid01 = clone of skillgrid.
charcreate4 = a window frame skin that will contain everything.
childskills = the child pane that is inside charcreate4.
skillnum = an output control inside the skillgrid frame.
In response to karver
obj/clickable/Command // each of these is a button.
icon = 'player.dmi'
icon_state = "X"
Click()
usr.command() // call a proc or a verb of the person that clicked it.

mob/proc/commands_setup()
commands.Add(new/obj/clickable/Command) //adds this object to a list, This is what we would click to call the verb.

mob/proc/output_to_grid()
for(X in commands)
src << output(X,"grid: gridx, gridy") //output the list to the grid


In response to Pirion
Thank you for the example, I'm not sure how to connect it to my previous question unless I change the way I'm doing this (which is fine if this works better).

If I want to change the command reference so each command in usr.commnad() can be unique, how do I do that?
For example if I put my skill object in 1,1 and then my first button object in 1,2 then the obj/skill variable reference in 1,3 then another button in 1,4 , How can I change the command in the button to look at the skill object in 1,1 so I can do what I for example incrementing the varaible under the skill object in 1,1?

Can I do something like this ..
    Click()
usr.command(/obj/skill/S as obj) // call a proc or a verb of the person that clicked it

Then when I'm going through the motions of making this row in the grid I can import the object as a reference in the command?

... or perhaps someone knows a way of making my previous proposal function easily or maybe even how to make it liek this?
. . . http://www.byond.com/games/hubpic/36649_28.png
In response to karver
I know some people are using browser and javascript for some things, so I thought I would share a successful test I made for selecting skills that I plan to use with Browser().

Just copy and past this into a document with the 'html' extension and open it up. I was using IE7.

All the css, and javascript is there. I threw it together in a few hours so it doens't look that pretty.

I do plan on searching for how to sorts the div's in the skill list alphabetically but for now this works.
<html>
<head>

<script type="text/javascript" language="JavaScript">
/* === test functions ===
function addskill(skillobj)//test function
{
var newdiv = document.createElement("div");
var skillnum=10;
newdiv.setAttribute('id', skillobj);
newdiv.setAttribute('class', "skillbox");
newdiv.setAttribute('value', skillnum);
newdiv.setAttribute('name', "<u><b>"+newdiv.id+"</b></u><br>Information Description...");
newdiv.onclick = function() {info.innerHTML=this.name;};
newdiv.innerHTML='<table id="mytable"><tr><td width="125px">'+skillobj+'</td><td><button type="button" onclick=javascript:decskill("'+skillobj+'")>-1</button>'+newdiv.value+'<button type="button" onclick=javascript:incskill("'+skillobj+'")>+1</button></td></tr></table>';
document.getElementById('charskills').appendChild(newdiv);
}

function searchskill()//test function
{
var divid="skillname";
var children = document.getElementById('charskills').childNodes;
alert(children.length);
alert(children[0].id);
}
*/

function incskill(childid)
{
var pool=document.getElementById('poolpoints');
var parent=document.getElementById('charskills');
for(var i=0;i<parent.childNodes.length;i++)
{
var thisnode=parent.childNodes[i];
if(thisnode.id==childid)
{
if(pool.value>0)
{
var newdiv=thisnode;
newdiv.value++;
pool.value--;
pool.innerHTML=pool.value;
newdiv.innerHTML='<table id="mytable"><tr><td><button type="button" onclick=javascript:remskill("'+newdiv.id+'")><- REM</button></td><td width="125px">'+newdiv.id+'</td><td><button type="button" onclick=javascript:decskill("'+newdiv.id+'")>-1</button>'+newdiv.value+'<button type="button" onclick=javascript:incskill("'+newdiv.id+'")>+1</button></td></tr></table>';
}
break;
}
}
}

function decskill(childid)
{
var pool=document.getElementById('poolpoints');
var parent=document.getElementById('charskills');
for(var i=0;i<parent.childNodes.length;i++)
{
var thisnode=parent.childNodes[i];
if(thisnode.id==childid)
{
var newdiv=thisnode;
if(newdiv.value>10)
{
newdiv.value--;
pool.value++;
pool.innerHTML=pool.value;
newdiv.innerHTML='<table id="mytable"><tr><td><button type="button" onclick=javascript:remskill("'+newdiv.id+'")><- REM</button></td><td width="125px">'+newdiv.id+'</td><td><button type="button" onclick=javascript:decskill("'+newdiv.id+'")>-1</button>'+newdiv.value+'<button type="button" onclick=javascript:incskill("'+newdiv.id+'")>+1</button></td></tr></table>';
}
break;
}
}
}

function buildskilllist()
{
var skillwindow=document.getElementById('allskills');
var charskillwindow=document.getElementById('charskills');
var pool=document.getElementById('poolpoints');
var infowindow=document.getElementById('info');

if (skillwindow.hasChildNodes())
{
while (skillwindow.childNodes.length >= 1 )
{
skillwindow.removeChild(skillwindow.firstChild );
}
}
if (charskillwindow.hasChildNodes())
{
while (charskillwindow.childNodes.length >= 1 )
{
pool.value=Number(pool.value)+Number(charskillwindow.firstChild.value);
charskillwindow.removeChild(charskillwindow.firstChild );
}
}
pool.innerHTML=pool.value;
for(i=0;i<5;i++)
{
var newdiv = document.createElement("div");
newdiv.setAttribute('id', "Skillname"+i);
newdiv.setAttribute('class', "skillbox");
newdiv.setAttribute('value', 10);
newdiv.setAttribute('name', "<u><b>"+newdiv.id+"</b></u><br>Information Description...");
newdiv.onclick = function() {info.innerHTML=this.name;};
newdiv.innerHTML=newdiv.id+'<button type="button" onclick=javascript:addskill("'+newdiv.id+'")>ADD>></button>';
skillwindow.appendChild(newdiv);
}
}

function addskill(skilldivid)
{
//alert(skilldivid);
var pool=document.getElementById('poolpoints');
if(pool.value>=10)
{
pool.value=pool.value-10;
pool.innerHTML=pool.value;
var skilldiv=document.getElementById(skilldivid);
var skillwindow=document.getElementById('allskills');
var charskillwindow=document.getElementById('charskills');
var newdiv = document.createElement("div");
newdiv.setAttribute('id', skilldivid);
newdiv.setAttribute('class', "skillbox");
newdiv.setAttribute('value', 10);
newdiv.setAttribute('name', skilldiv.name);
newdiv.onclick = function() {info.innerHTML=this.name;};
newdiv.innerHTML='<table id="mytable"><tr><td><button type="button" onclick=javascript:remskill("'+newdiv.id+'")><- REM</button></td><td width="125px">'+newdiv.id+'</td><td><button type="button" onclick=javascript:decskill("'+newdiv.id+'")>-1</button>'+newdiv.value+'<button type="button" onclick=javascript:incskill("'+newdiv.id+'")>+1</button></td></tr></table>';
document.getElementById('charskills').appendChild(newdiv);
for(var i=0;i<skillwindow.childNodes.length;i++)
{
if(skillwindow.childNodes[i].id==newdiv.id);
{
skillwindow.removeChild(skilldiv);
break;
}
}
}
}

function remskill(skilldivid)
{
var newdiv = document.createElement("div");
var skillwindow=document.getElementById('allskills');
var charskillwindow=document.getElementById('charskills');
var pool=document.getElementById('poolpoints');
newdiv.setAttribute('id', skilldivid);
for(var i=0;i<charskillwindow.childNodes.length;i++)
{
//alert(charskillwindow.childNodes[i].id+" / "+skilldivid);
if(charskillwindow.childNodes[i].id==skilldivid)
{
newdiv.setAttribute('name', charskillwindow.childNodes[i].name);
pool.value=Number(pool.value)+Number(charskillwindow.childNodes[i].value);
//alert("Removing "+charskillwindow.childNodes[i].id);
charskillwindow.removeChild(charskillwindow.childNodes[i]);
break;
}
}
pool.innerHTML=pool.value;
newdiv.setAttribute('class', "skillbox");
newdiv.setAttribute('value', 10);
newdiv.onclick = function() {info.innerHTML=this.name;};
newdiv.innerHTML=newdiv.id+'<button type="button" onclick=javascript:addskill("'+newdiv.id+'")>ADD>></button>';
skillwindow.appendChild(newdiv);
}

</script>

<style type="text/css">
<!--
#main
{
border:1px solid black;
height:600;
width:800;
position:absolute;
display:block;

}
div.inlinetop
{
margin:10px;
display:inline;
}
div.inlineskills
{
border:1px solid black;
height:300px;
width:350px;
display:inline;
position:relative;
margin:10px;
}
div.skillbox
{
border:1px solid black;
height:50px;
width:345px;
}
#info
{
border:1px solid black;
height:150px;
width:720px;
}

-->
</style>

</head>
<body>

<div id="main">
<br>
<center>
<div id="top">
<div class="inlinetop" id="poollabel">Attack Pool</div><div class="inlinetop" id="poolpoints" value=45>00</div>
</div>

<div id="bottom">

<div class="inlineskills" id="allskills">

</div>
<div class="inlineskills" id="charskills">

</div>
</div>
<br>
<div id="info">
</div>
</center>
</div>

<button type='button' onclick='javascript:buildskilllist()'>Build Skills List - test</button>

</body>
</html>