misc/theme_editor.html
author koda
Tue, 23 Aug 2011 03:46:17 +0200
changeset 5662 99083392cd4f
parent 5543 5e597b725316
child 10017 de822cd3df3a
permissions -rw-r--r--
FREE AT LAST!!! SDL came around a (mostly) sane way for implementing rotation events, so we can scrap all the workaround code that has been added to workaround it!! Also this allows us to use proper (internal) multitasking handling and can simplify optional settings and other yet unexplored features. Yay!
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
5346
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     1
<!doctype html>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     2
<html>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     3
    <head>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     4
        <title>Hedgewars Theme Editor</title>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     5
        <script type="text/javascript">
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     6
            var sky, clouds, horizont, water, land, border;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     7
            var skyColor, waterTopColor, waterBottomColor;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     8
            var elements = 7;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
     9
            var landArray;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    10
            
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    11
            function landFunction(x){
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    12
                return 384 - 192 * Math.sin(x * Math.PI/512);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    13
            }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    14
            
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    15
            function tryToDraw(){
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    16
                if (--elements <= 0) {
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    17
                    draw();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    18
                }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    19
            }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    20
        
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    21
            function load(){
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    22
                    var canvas = document.getElementById('preview');
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    23
                    if (canvas.getContext){
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    24
                        var ctx = canvas.getContext('2d');
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    25
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    26
                        ctx.fillStyle = '#0b294b';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    27
                        ctx.fillRect(0, 0, 512, 384);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    28
                        
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    29
                        ctx.font = "40pt Arial";
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    30
                        ctx.fillStyle = '#2b7bd5';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    31
                        ctx.fillText('Loading Images...', 32, 212);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    32
                    }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    33
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    34
                    sky = new Image();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    35
                    sky.onload = tryToDraw;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    36
                    sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    37
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    38
                    clouds = new Image();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    39
                    clouds.onload = tryToDraw;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    40
                    clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    41
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    42
                    horizont = new Image();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    43
                    horizont.onload = tryToDraw;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    44
                    horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    45
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    46
                    land = new Image();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    47
                    land.onload = tryToDraw;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    48
                    land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    49
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    50
                    border = new Image();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    51
                    border.onload = tryToDraw;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    52
                    border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    53
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    54
                    water = new Image();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    55
                    water.onload = tryToDraw;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    56
                    water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    57
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    58
                    landArray = new Array(512);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    59
                    for (var x = 0; x < landArray.length; x++)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    60
                        landArray[x] = landFunction(x);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    61
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    62
                    skyColor = '#131252';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    63
                    document.getElementById('skyColor').value = skyColor;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    64
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    65
                    waterTopColor = '#555C9D';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    66
                    document.getElementById('waterTopColor').value = waterTopColor;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    67
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    68
                    waterBottomColor = '#343C7D';
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    69
                    document.getElementById('waterBottomColor').value = waterBottomColor;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    70
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    71
                    tryToDraw();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    72
            }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    73
            
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    74
            function draw(){
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    75
                var canvas = document.getElementById('preview');
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    76
                if (canvas.getContext){
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    77
                    var ctx = canvas.getContext('2d');
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    78
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    79
                    ctx.fillStyle = skyColor;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    80
                    ctx.fillRect(0, 0, 512, 384);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    81
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    82
                    ctx.drawImage(sky, 0, 64, 512, 256);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    83
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    84
                    for (var i = 0; i < 4; i++)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    85
                        ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    86
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    87
                    ctx.drawImage(horizont, 0, 192, 512, 128);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    88
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    89
                    ctx.save();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    90
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    91
                    ctx.beginPath();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    92
                    ctx.moveTo(0, 384);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    93
                    for (var x = 0; x < landArray.length; x++)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    94
                        ctx.lineTo(x, landArray[x]);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    95
                    ctx.clip();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    96
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    97
                    for (var i = 0; i < 2; i++)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    98
                    	for (var k = 0; k < 2; k++)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
    99
                    		ctx.drawImage(land, i * 320, k * 240, 320, 240);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   100
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   101
                    ctx.restore();
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   102
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   103
                    var k = 0;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   104
                    for (var x = 0; x < landArray.length; x++) {
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   105
                        if (++k == 64)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   106
                            k = 0;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   107
                        ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   108
                    }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   109
                        
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   110
                    
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   111
                    var gradient = ctx.createLinearGradient(0, 320, 0, 384);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   112
                    gradient.addColorStop(0, waterTopColor);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   113
                    gradient.addColorStop(1, waterBottomColor);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   114
                    ctx.fillStyle = gradient;
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   115
                    ctx.fillRect(0, 320, 512, 384);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   116
          
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   117
                    for (var i = 0; i < 8; i++)
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   118
                        ctx.drawImage(water, i * 64, 308, 64, 24);
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   119
                }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   120
            }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   121
        </script>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   122
        <style type="text/css">
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   123
            canvas { border: 1px solid black; }
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   124
        </style>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   125
    </head>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   126
    <body onload="load();">
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   127
        <h1>Hedgewars Theme editor</h1>
5543
5e597b725316 disable campaign button, structure and change sudden death music to hell.ogg
Henek
parents: 5346
diff changeset
   128
        <canvas id="preview" width="512" height="384">Sorry, your browser does not support Canvas.</canvas><br>
5346
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   129
        <table>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   130
        <tr><td>Sky:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   131
        <input id="sky" type="file" accept="image/png" onchange="sky.src = window.URL.createObjectURL(this.files[0])"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   132
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   133
        <tr><td>Sky Color:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   134
        <input id="skyColor" type="color" onchange="skyColor = this.value; draw()"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   135
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   136
        <tr><td>Clouds:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   137
        <input id="clouds" type="file" accept="image/png" onchange="clouds.src = window.URL.createObjectURL(this.files[0])"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   138
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   139
        <tr><td>Horizont:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   140
        <input id="horizont" type="file" accept="image/png" onchange="horizont.src = window.URL.createObjectURL(this.files[0])"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   141
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   142
        <tr><td>Land:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   143
        <input id="land" type="file" accept="image/png" onchange="land.src = window.URL.createObjectURL(this.files[0])"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   144
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   145
        <tr><td>Border:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   146
        <input id="border" type="file" accept="image/png" onchange="border.src = window.URL.createObjectURL(this.files[0])"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   147
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   148
        <tr><td>Water:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   149
        <input id="water" type="file" accept="image/png" onchange="water.src = window.URL.createObjectURL(this.files[0])"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   150
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   151
        <tr><td>Water Top Color:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   152
        <input id="waterTopColor" type="color" onchange="waterTopColor = this.value; draw()"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   153
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   154
        <tr><td>Water Bottom Color:</td><td>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   155
        <input id="waterBottomColor" type="color" onchange="waterBottomColor = this.value; draw()"></input>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   156
        </td></tr>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   157
        </table>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   158
    </body>
ee611abe9158 first draft of a html based theme editor
Henek
parents:
diff changeset
   159
</html>