misc/theme_editor.html
author Urbertar@gmail.com
Tue, 26 Feb 2013 10:27:51 +0200
branchicegun
changeset 8581 f3bc24ef756e
parent 5543 5e597b725316
child 10017 de822cd3df3a
permissions -rw-r--r--
Check bounds of landscape in drawice procedure
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>