ti3_helper/simple.html at master · frobcode/ti3_helper · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<HTML>
<HEAD>
    <SCRIPT language="javascript" src="data/techtree.js" ></SCRIPT>
    <SCRIPT language="javascript" src="src/dependency_mapper.js" ></SCRIPT>
    <SCRIPT language="javascript">
        function return_span(tech)
        {
            // this will return a span element that has the settings right for a tech
            var spanTag = document.createElement("span");
            spanTag.id = "tech_" + tech.sn;

            var titleSpan = document.createElement("span");
            titleSpan.id="tech_title_" + tech.sn;
            titleSpan.className = "techTitle";
            titleSpan.innerHTML = tech.fn;
            spanTag.appendChild(titleSpan);

            var have = document.createElement("input");
            have.id="tech_have_" + tech.sn;
            have.type = "checkbox";
            have.onclick=function() { onCheckboxClick( tech ) };
            spanTag.appendChild(have);

            return spanTag;
        }

        function onCheckboxClick(tech)
        {
            var checkBox = document.getElementById("tech_have_" + tech.sn);
            tech.have = checkBox.checked;
            refresh_the_world(tech.tree);
        }

        function refresh_the_world(with_tree)
        {
            set_availables(with_tree);
            for( var treeiter in with_tree)
            {
                var tech = with_tree[treeiter];
                set_properties(tech);
            }
        }

        function set_properties(tech)
        {
            var shortName = tech.sn;
            var spanClass = "techSpan " + (tech.have ? " have" : tech.available?" available":" notAvailable");
            var span = document.getElementById("tech_" + shortName);
            span.className = spanClass;
            var have = document.getElementById("tech_have_" + shortName);
            have.checked = tech.have;
            have.disabled = !tech.available;
        }

        function initial_population(with_techtree, div_to_add_to)
        {
            // find the 'techs' identifier
            // and then make an element per tech
            // with indication if it is enabled and available
            for( var tech in with_techtree )
            {
                var newSpan = return_span(with_techtree[tech]);
                div_to_add_to.appendChild(newSpan);
                set_properties(with_techtree[tech])
            }
        }
    </SCRIPT>
    <TITLE>This is a test</TITLE>
    <style type="text/css" >
        *.have { color: green }
        *.available { color: blue  }
        *.notAvailable {color: red }
        *.techSpan {display:block }
    </style>
</HEAD>
<BODY>
    Frob o la
    <div id="techs">

    </div>
    <SCRIPT language="javascript" >

        var tech_tree = create_tech_tree(techtree);
        var techs_div = document.getElementById("techs");
        initial_population( tech_tree, techs_div);
</SCRIPT>
</BODY>
</HTML>