karver's Site - Cloning Frames in a list?

Cloning Frames in a list? in Developer Help

ID:157300

Apr 4 2010, 6:55 pm

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..

#1 Apr 4 2010, 7:28 pm
Pirion	you want to look into the winclone, and winset - and also look at child in the skin reference for what you need.

#2 Apr 4 2010, 7:42 pm In response to Pirion (#1)
karver	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?

#3 Apr 5 2010, 11:53 am (Edited on Apr 5 2010, 12:15 pm)

In response to karver (#2)

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.

#4 Apr 5 2010, 7:59 pm (Edited on Apr 5 2010, 8:04 pm)

In response to karver (#3)

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.

#5 Apr 6 2010, 8:20 am

In response to karver (#4)

Pirion

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

#6 Apr 6 2010, 10:44 am (Edited on Apr 6 2010, 10:49 am)

In response to Pirion (#5)

karver

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

#7 Apr 9 2010, 7:34 am

In response to karver (#6)

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.disabledclick = function() {info.innerHTML=this.name;}; 
    newdiv.innerHTML='<table id="mytable"><tr><td width="125px">'+skillobj+'</td><td><button type="button" disabledclick=javascript:decskill("'+skillobj+'")>-1</button>'+newdiv.value+'<button type="button" disabledclick=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" disabledclick=javascript:remskill("'+newdiv.id+'")><- REM</button></td><td width="125px">'+newdiv.id+'</td><td><button type="button" disabledclick=javascript:decskill("'+newdiv.id+'")>-1</button>'+newdiv.value+'<button type="button" disabledclick=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" disabledclick=javascript:remskill("'+newdiv.id+'")><- REM</button></td><td width="125px">'+newdiv.id+'</td><td><button type="button" disabledclick=javascript:decskill("'+newdiv.id+'")>-1</button>'+newdiv.value+'<button type="button" disabledclick=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.disabledclick = function() {info.innerHTML=this.name;}; 
        newdiv.innerHTML=newdiv.id+'<button type="button" disabledclick=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" disabledclick=javascript:remskill("'+newdiv.id+'")><- REM</button></td><td width="125px">'+newdiv.id+'</td><td><button type="button" disabledclick=javascript:decskill("'+newdiv.id+'")>-1</button>'+newdiv.value+'<button type="button" disabledclick=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.disabledclick = function() {info.innerHTML=this.name;}; 
    newdiv.innerHTML=newdiv.id+'<button type="button" disabledclick=javascript:addskill("'+newdiv.id+'")>ADD>></button>';
    skillwindow.appendChild(newdiv);
}

</script>

&lt;style type="text/css"&gt;
<!--
#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;
}

-->
&lt;/style&gt;

</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' disabledclick='javascript:buildskilllist()'>Build Skills List - test</button>

</body>
</html>