Location: PHPKode > projects > Solar Imperium > solar27/templates/game/starmap_ingame.html
<script type="text/javascript" src="../scripts/game/wz_jsgraphics.js"></script>
<LINK href='../css/game/slider_default.css' type='text/css' rel='stylesheet'>

<script type="text/javascript" src="../scripts/game/AFLAX/aflax.js"></script>
<script type="text/javascript" src="../scripts/game/sylvester.js"></script>

<script type="text/javascript">

    var grid;
    var mouse;
    var pressed;
    var root;
    var last_x;
    var last_y;
    var empire_shown;

    var aflax = new AFLAX('../scripts/game/AFLAX/aflax.swf');


    var empires = new Array(
    {section name="ed" loop=$empires_data}
    ['{$empires_data[ed].emperor}','{$empires_data[ed].empire}','{$empires_data[ed].networth|number_format}','{$empires_data[ed].population|number_format}',{$empires_data[ed].radius},{$empires_data[ed].x},{$empires_data[ed].y},{$empires_data[ed].turns_played},'{$empires_data[ed].img}']{$empires_data[ed].separator}
    {/section}
);

    var lines = new Array(
    {section name="ld" loop=$lines_data}
    [{$lines_data[ld].start_x},
     {$lines_data[ld].start_y},
     {$lines_data[ld].end_x},
     {$lines_data[ld].end_y},
     {$lines_data[ld].convoy_type},
     {$lines_data[ld].percent}]{$lines_data[ld].separator}
    {/section}
);

    {literal}

    var imageClip = Array();
    var lineClip = Array();



    function showEmpirePopup(i,x,y)
    {
        empire_shown = true;
        var emperor = empires[j][0];
        var empire = empires[j][1];
        var networth = empires[j][2];
        var population = empires[j][3];
        var radius = empires[j][4];
        var pos_x = empires[j][5];
        var pos_y = empires[j][6];
        var turns = empires[j][7];
        var image = empires[j][8];

        var obj = document.getElementById('div_empire');
    

        var width = obj.style.width;
        var height = obj.style.height;
        width = width.replace('px','');
        height = height.replace('px','');

        obj.style.left = parseInt(x) + (parseInt(width)/2);
        obj.style.top = parseInt(y) + (parseInt(height));
        obj.style.display = 'block';

        document.getElementById('div_empire_emperor').innerHTML = emperor;
        document.getElementById('div_empire_empire').innerHTML = empire;
        document.getElementById('div_empire_networth').innerHTML = networth;
        document.getElementById('div_empire_population').innerHTML = population;
        document.getElementById('div_empire_turns_played').innerHTML = turns;

    }


    function hideEmpirePopup()
    {
        document.getElementById('div_empire').style.display = 'none';
        empire_shown = false;
    }

    function zoom(v)
    {
        grid.set_xscale(v);
        grid.set_yscale(v);

        var v2 = 1000 - v;

        v2 /= 12;

        var v3 = v2 - 50;
        v2 = 50 + (v3 * 0.2);
        
        document.getElementById('debug_text').innerHTML = 'Zoom: ' + v + ' / ' + v2;

        for (j=0;j<imageClip.length;j++) {
            imageClip[j].set_xscale(v2);
            imageClip[j].set_yscale(v2);
        }

    }

    function changeSelection(v)
    {
        if (v == -1) { resetView(); return; }
        var a = v.split('x');
        var x = Math.round(a[0]/2);
        var y = Math.round(a[1]/2);
        grid.set_x(250-x);
        grid.set_y(250-y);
        grid.set_xscale(200);
        grid.set_yscale(200);

        document.getElementById('vertical_slider_2').style.top = '120px';
    }



    function init()
    {

        var s = document.getElementById('empires_select');
        for (j=0;j<empires.length;j++)
            s.options[j+1] = new Option(empires[j][0]+'@'+empires[j][1],empires[j][5]+"x"+empires[j][6],false,false);

        last_x = -1;
        last_y = -1;

        grid = new AFLAX.MovieClip(aflax);
        root = aflax.getRoot();

        grid.set_xscale(50);
        grid.set_yscale(50);

        grid.addEventHandler('onPress','onMousePress');
        grid.addEventHandler('onRelease','onMouseRelease');
        grid.addEventHandler('onReleaseOutside','onMouseReleaseOutside');
        grid.addEventHandler('onMouseMove','onMouseMove');
        pressed = false;
    }

    function onMouseMove()
    {
        var x = root.get_xmouse();
        var y = root.get_ymouse();
        var x2 = grid.get_xmouse();
        var y2 = grid.get_ymouse();

        if (last_x == -1) last_x = x;
        if (last_y == -1) last_y = y;

        var x3 = x-last_x;
        var y3 = y-last_y;
        last_x = x;
        last_y = y;

        if (pressed == true) {
            document.getElementById('debug_text').innerHTML = 'Dragging ... X:'+x+', Y:'+y+', X2:'+x2+', Y2:'+y2+', X3:'+x3+', Y3:'+y3;
            grid.set_x(grid.get_x()+x3);
            grid.set_y(grid.get_y()+y3);
        } else {

            var xx = x2*4; // - 400;
            var yy = y2*4; // - 300;
            var output = 'Moving ... X:'+xx+', Y:'+yy + '<br/>';

            for (j=0;j<empires.length;j++) {

                var emperor = empires[j][0];
                var empire = empires[j][1];
                var networth = empires[j][2];
                var population = empires[j][3];
                var radius = empires[j][4];
                var pos_x = empires[j][5];
                var pos_y = empires[j][6];
                var turns = empires[j][7];
                var image = empires[j][8];
                if (radius < 25) radius = 25;

  
                if (((xx >= pos_x-32) && (xx <= (pos_x+32))) && ((yy >= pos_y-32) && (yy <= (pos_y+32)))) {
                    output += 'OVER ... X:'+pos_x+', Y:'+pos_y+'<br/>';
                    showEmpirePopup(j,x,y);
                    break;
                        
                } else {
                    output += '(EMPIRE ' + j + ' ... X:'+pos_x+', Y:'+pos_y+')<br/>';
                    hideEmpirePopup();
                }


            }

            document.getElementById('debug_text').innerHTML = output;

        }

    }


    function onMouseRelease()
    {
        pressed = false;
    }

    function onMouseReleaseOutside()
    {
        pressed = false;
    }

    function onMousePress()
    {
        pressed = true;

        var x = root.get_xmouse();
        var y = root.get_ymouse();
        var x2 = grid.get_xmouse();
        var y2 = grid.get_ymouse();

    }


    function resetView()
    {
        grid.set_x(400);
        grid.set_y(250);
        grid.set_xscale(50);
        grid.set_yscale(50);
        document.getElementById('vertical_slider_2').style.top = '220px';

    }

    function resolveAngle(x,  y) {


        y = -y;

        var angle =  (Math.atan(y / x)) * 57.2957;
        if ((x < 0) && (y >= 0)) {
            angle += 180;
        }
        if ((x >= 0) && (y < 0)) {
            angle += 360;
        }
        if ((x < 0) && (y < 0)) {
            angle += 180;
        }

        if (angle > 360) {
            angle -= 360;
        }
        if (angle < 0) {
            angle += 360;
        }

        angle /= 10;
        angle = Math.round(angle);
        angle *= 10;

        return angle;
    }



    function draw(updateZoom)
    {
        grid.set_x(0);
        grid.set_y(0);

        // draw borders
        grid.beginFill(0x111111);
        grid.lineStyle(2, 0x999999, 100);
        grid.moveTo(-250, -250);
        grid.lineTo(-250, 250);
        grid.lineTo(250, 250);
        grid.lineTo(250, -250);
        grid.lineTo(-250, -250);
        grid.endFill();

        // draw grid

        for (var x = 50;x<500;x+=50) {

            grid.lineStyle(2, 0x111122, 100);

            grid.moveTo(-250+x,-244);
            grid.lineTo(-250+x,244);
                
            grid.moveTo(-244,-250+x);
            grid.lineTo(244,-250+x);
        }

        grid.lineStyle(2, 0x222233, 100);
        grid.moveTo(0,-244);
        grid.lineTo(0,244);
        grid.moveTo(-244,0);
        grid.lineTo(244,0);


   // draw empires
        // emperor , empire, networth, pop, radius, posx, posy, image
        grid.lineStyle(2, 0xFFFF00, 100);




        for (j=0;j<empires.length;j++) {

            var empire = empires[j][0];
            var emperor = empires[j][1];
            var networth = empires[j][2];
            var population = empires[j][3];
            var radius = empires[j][4];
            var pos_x = empires[j][5];
            var pos_y = empires[j][6];
            var turns = empires[j][7];
            var image = empires[j][8];
            if (radius < 25) radius = 25;

            var w = 500;
            var h = 500;

            // 1) Scale positions
            pos_x = pos_x / (2000 / w);
            pos_y = pos_y / (2000 / h);


            // 2) draw image
            imageClip[j] = new AFLAX.MovieClip(aflax,grid.id);
            imageClip[j].loadMovie(image);
            imageClip[j].set_x(pos_x-8);
            imageClip[j].set_y(pos_y-8);
            imageClip[j].set_xscale(50);
            imageClip[j].set_yscale(50);
            grid.drawCircle(pos_x,pos_y,radius * 0.52);


        }
        

        // draw lines
        for (var x = 0;x < lines.length;x++)
        {
            var x_from = Math.round(lines[x][0]/4);
            var y_from = Math.round(lines[x][1]/4);
            var x_to = Math.round(lines[x][2]/4);
            var y_to = Math.round(lines[x][3]/4);
            var ctype = lines[x][4];
            var percent = lines[x][5];
            var x_current = x_from + Math.floor(((x_to-x_from)/100) * percent);
            var y_current = y_from + Math.floor(((y_to-y_from)/100) * percent);

            var xx = x_to - x_from;
            var yy = y_to - y_from;
            var angle = resolveAngle(xx,yy);

        

            // Convoy type: Trade
            if (ctype == -2) {
                grid.lineStyle(3, 0x009900, 100);
                lineClip[x] = new AFLAX.MovieClip(aflax,grid.id);
                lineClip[x].loadMovie('../images/common/tradeconvoy/'+angle+'.png');
                lineClip[x].set_x(x_current-12);
                lineClip[x].set_y(y_current-10);
                lineClip[x].set_xscale(20);
                lineClip[x].set_yscale(20);
            }
            // Convoy type: Diplomacy
            if (ctype == -1) {
                    grid.lineStyle(3, 0x333333, 100);
            }
           
            // Convoy type: Invasion
            if (ctype == 0) {

                grid.lineStyle(3, 0xCC0000, 100);
                lineClip[x] = new AFLAX.MovieClip(aflax,grid.id);
                lineClip[x].loadMovie('../images/common/armyconvoy/'+angle+'.png');
                lineClip[x].set_x(x_current-12);
                lineClip[x].set_y(y_current-10);
                lineClip[x].set_xscale(20);
                lineClip[x].set_yscale(20);

            }

            // Convoy type: Defense
            if (ctype == 1) {
                grid.lineStyle(3, 0x0000CC, 100);
                lineClip[x] = new AFLAX.MovieClip(aflax,grid.id);
                lineClip[x].loadMovie('../images/common/armyconvoy/'+angle+'.png');
                lineClip[x].set_x(x_current-12);
                lineClip[x].set_y(y_current-10);
                lineClip[x].set_xscale(20);
                lineClip[x].set_yscale(20);
            }

            // Convoy type: Invasion retreat
            if (ctype == 2) {
                grid.lineStyle(3, 0x660000, 100);
                lineClip[x] = new AFLAX.MovieClip(aflax,grid.id);
                lineClip[x].loadMovie('../images/common/armyconvoy/'+angle+'.png');
                lineClip[x].set_x(x_current-12);
                lineClip[x].set_y(y_current-10);
                lineClip[x].set_xscale(20);
                lineClip[x].set_yscale(20);
            }

            // Convoy type: Defense retreat
            if (ctype == 3) {
                grid.lineStyle(3, 0x000066, 100);
                lineClip[x] = new AFLAX.MovieClip(aflax,grid.id);
                lineClip[x].loadMovie('../images/common/armyconvoy/'+angle+'.png');
                lineClip[x].set_x(x_current-12);
                lineClip[x].set_y(y_current-10);
                lineClip[x].set_xscale(20);
                lineClip[x].set_yscale(20);
            }


            grid.moveTo(x_from,y_from);
            grid.lineTo(x_current,y_current);


        }

     

        grid.set_x(400);
        grid.set_y(300);
        
        if (updateZoom == true) {
            zoom(150);
            document.getElementById('vertical_slider_2').style.top = '150px';
        }

    }


    function go()
    {
        init();
        draw(true);
    }

    var old_v = -1;

    function update_flash(v)
    {
        if (old_v == v) return;

        zoom(v);
        old_v = v;
    }

    {/literal}

</script>
<script type="text/javascript" src="../scripts/game/slider.js"></script>


<div align="left">
    <form>
        <table bgcolor="#7a7a7a" style="border:1px solid #9a9a9a;padding:5px;margin-bottom:5px">
            <tr>
                <td style="color:#eaeaea">{t}Focus the starmap on empire:{/t}</td>
                <td>
                    <select class="input_text" id="empires_select" onChange="changeSelection(this.value)">
                        <option value="-1">---</option>

                    </select>
                </td>
            </tr>
        </table>
    </form>

    <table>
        <tr><td style="border:1px solid white">

                <script language="javascript">
                    aflax.insertFlash(800, 500, "#333333", "go");
                </script>
            </td><td valign="top">
                <table>
                    <tr>
                        <td>
                            <div class="display_holder">{t}Zoom{/t}</div>
                        </td>
                    </tr><tr>
                        <td>

                            <!-- Vertical slider 2 (default color - grey) -->
                            <div class="vertical_track" style="height: 220px" >
                                <div class="vertical_slit" style="height: 220px" >&nbsp;</div>
                                <!-- Total movement: 50 pixels, range: -250 .. 250
			total allowed number of values: 51, 0 decimals,
			default position: 25 pixels from the top (value: 0) -->

                                <div class="vertical_slider" id="vertical_slider_2" style="top: 220px;"
                                     onmousedown="slide(event, 'vertical', 220, 50, 400, 90, 0, 'vertical_display_2');">&nbsp;</div>
                            </div>
                            <div class="display_holder" style="display:block">
                                <input type="text" class="value_display" id="vertical_display_2" value="160" onfocus="blur(this);" />
                            </div>
                        </td>
                    </tr><tr>
                        <td>
                            <div class="display_holder"><a style="color:black" href="javascript:resetView()">{t}Reset{/t}</a></div>
                        </td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>
</div>

<table style="padding:2px;border:1px solid black; background-color: #9f9f9f;width:806px;color:#000000">
    <tr>
        <td bgcolor="#333333" style="width:16px;height:16px">&nbsp;</td>
        <td  class="text_small">Diplomatic Ties</td>
        <td bgcolor="#CC0000" style="width:16px;height:16px">&nbsp;</td>
        <td class="text_small">Invasion Convoy</td>
        <td bgcolor="#660000" style="width:16px;height:16px">&nbsp;</td>
        <td class="text_small">Invasion (Retreating)</td>
        <td bgcolor="#0000CC" style="width:16px;height:16px">&nbsp;</td>
        <td class="text_small">Defense Convoy</td>
        <td bgcolor="#000066" style="width:16px;height:16px">&nbsp;</td>
        <td class="text_small">Defense (Retreating)</td>
        <td bgcolor="#009900" style="width:16px;height:16px">&nbsp;</td>
        <td class="text_small">Trade Convoy</td>
    </tr>
</table>


<div id="debug_text" style="display:none">Debug info</div>

<div id="div_empire" style="position:absolute;left:100px;top:100px;width:280px;z-index:500;height:130px;display:none;background-color:#333333;border:1px solid white">

    <table style="padding:5px">
        <tr>
            <td style="color:#ababab">Emperor/ess:</td>
            <td id="div_empire_emperor">EMPEROR</td>
        </tr>

        <tr>
            <td style="color:#ababab">Empire:</td>
            <td id="div_empire_empire">EMPIRE</td>
        </tr>

        <tr>
            <td style="color:#ababab">Networth:</td>
            <td id="div_empire_networth">NETWORTH</td>
        </tr>

        <tr>
            <td style="color:#ababab">Population:</td>
            <td id="div_empire_population">POP</td>
        </tr>


        <tr>
            <td style="color:#ababab">Turns Played:</td>
            <td id="div_empire_turns_played">TURNS</td>
        </tr>


    </table>

</div>

<script>
    setTimeout('ajax_update_status()', 60000);

</script>
Return current item: Solar Imperium