misc/theme_editor.html
changeset 10017 de822cd3df3a
parent 5543 5e597b725316
child 13513 7e188a28f078
equal deleted inserted replaced
10015:4feced261c68 10017:de822cd3df3a
     5         <script type="text/javascript">
     5         <script type="text/javascript">
     6             var sky, clouds, horizont, water, land, border;
     6             var sky, clouds, horizont, water, land, border;
     7             var skyColor, waterTopColor, waterBottomColor;
     7             var skyColor, waterTopColor, waterBottomColor;
     8             var elements = 7;
     8             var elements = 7;
     9             var landArray;
     9             var landArray;
    10             
    10 
    11             function landFunction(x){
    11             function landFunction(x){
    12                 return 384 - 192 * Math.sin(x * Math.PI/512);
    12                 return 384 - 192 * Math.sin(x * Math.PI/512);
    13             }
    13             }
    14             
    14 
    15             function tryToDraw(){
    15             function tryToDraw(){
    16                 if (--elements <= 0) {
    16                 if (--elements <= 0) {
    17                     draw();
    17                     draw();
    18                 }
    18                 }
    19             }
    19             }
    20         
    20 
    21             function load(){
    21             function load(){
    22                     var canvas = document.getElementById('preview');
    22                     var canvas = document.getElementById('preview');
    23                     if (canvas.getContext){
    23                     if (canvas.getContext){
    24                         var ctx = canvas.getContext('2d');
    24                         var ctx = canvas.getContext('2d');
    25                     
    25 
    26                         ctx.fillStyle = '#0b294b';
    26                         ctx.fillStyle = '#0b294b';
    27                         ctx.fillRect(0, 0, 512, 384);
    27                         ctx.fillRect(0, 0, 512, 384);
    28                         
    28 
    29                         ctx.font = "40pt Arial";
    29                         ctx.font = "40pt Arial";
    30                         ctx.fillStyle = '#2b7bd5';
    30                         ctx.fillStyle = '#2b7bd5';
    31                         ctx.fillText('Loading Images...', 32, 212);
    31                         ctx.fillText('Loading Images...', 32, 212);
    32                     }
    32                     }
    33                     
    33 
    34                     sky = new Image();
    34                     sky = new Image();
    35                     sky.onload = tryToDraw;
    35                     sky.onload = tryToDraw;
    36                     sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png';
    36                     sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png';
    37           
    37 
    38                     clouds = new Image();
    38                     clouds = new Image();
    39                     clouds.onload = tryToDraw;
    39                     clouds.onload = tryToDraw;
    40                     clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png';
    40                     clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png';
    41           
    41 
    42                     horizont = new Image();
    42                     horizont = new Image();
    43                     horizont.onload = tryToDraw;
    43                     horizont.onload = tryToDraw;
    44                     horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png';
    44                     horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png';
    45           
    45 
    46                     land = new Image();
    46                     land = new Image();
    47                     land.onload = tryToDraw;
    47                     land.onload = tryToDraw;
    48                     land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png';
    48                     land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png';
    49           
    49 
    50                     border = new Image();
    50                     border = new Image();
    51                     border.onload = tryToDraw;
    51                     border.onload = tryToDraw;
    52                     border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png';
    52                     border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png';
    53           
    53 
    54                     water = new Image();
    54                     water = new Image();
    55                     water.onload = tryToDraw;
    55                     water.onload = tryToDraw;
    56                     water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png';
    56                     water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png';
    57                     
    57 
    58                     landArray = new Array(512);
    58                     landArray = new Array(512);
    59                     for (var x = 0; x < landArray.length; x++)
    59                     for (var x = 0; x < landArray.length; x++)
    60                         landArray[x] = landFunction(x);
    60                         landArray[x] = landFunction(x);
    61                     
    61 
    62                     skyColor = '#131252';
    62                     skyColor = '#131252';
    63                     document.getElementById('skyColor').value = skyColor;
    63                     document.getElementById('skyColor').value = skyColor;
    64                     
    64 
    65                     waterTopColor = '#555C9D';
    65                     waterTopColor = '#555C9D';
    66                     document.getElementById('waterTopColor').value = waterTopColor;
    66                     document.getElementById('waterTopColor').value = waterTopColor;
    67                     
    67 
    68                     waterBottomColor = '#343C7D';
    68                     waterBottomColor = '#343C7D';
    69                     document.getElementById('waterBottomColor').value = waterBottomColor;
    69                     document.getElementById('waterBottomColor').value = waterBottomColor;
    70                     
    70 
    71                     tryToDraw();
    71                     tryToDraw();
    72             }
    72             }
    73             
    73 
    74             function draw(){
    74             function draw(){
    75                 var canvas = document.getElementById('preview');
    75                 var canvas = document.getElementById('preview');
    76                 if (canvas.getContext){
    76                 if (canvas.getContext){
    77                     var ctx = canvas.getContext('2d');
    77                     var ctx = canvas.getContext('2d');
    78                     
    78 
    79                     ctx.fillStyle = skyColor;
    79                     ctx.fillStyle = skyColor;
    80                     ctx.fillRect(0, 0, 512, 384);
    80                     ctx.fillRect(0, 0, 512, 384);
    81                     
    81 
    82                     ctx.drawImage(sky, 0, 64, 512, 256);
    82                     ctx.drawImage(sky, 0, 64, 512, 256);
    83           
    83 
    84                     for (var i = 0; i < 4; i++)
    84                     for (var i = 0; i < 4; i++)
    85                         ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64);
    85                         ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64);
    86           
    86 
    87                     ctx.drawImage(horizont, 0, 192, 512, 128);
    87                     ctx.drawImage(horizont, 0, 192, 512, 128);
    88                     
    88 
    89                     ctx.save();
    89                     ctx.save();
    90                     
    90 
    91                     ctx.beginPath();
    91                     ctx.beginPath();
    92                     ctx.moveTo(0, 384);
    92                     ctx.moveTo(0, 384);
    93                     for (var x = 0; x < landArray.length; x++)
    93                     for (var x = 0; x < landArray.length; x++)
    94                         ctx.lineTo(x, landArray[x]);
    94                         ctx.lineTo(x, landArray[x]);
    95                     ctx.clip();
    95                     ctx.clip();
    96                     
    96 
    97                     for (var i = 0; i < 2; i++)
    97                     for (var i = 0; i < 2; i++)
    98                     	for (var k = 0; k < 2; k++)
    98                         for (var k = 0; k < 2; k++)
    99                     		ctx.drawImage(land, i * 320, k * 240, 320, 240);
    99                             ctx.drawImage(land, i * 320, k * 240, 320, 240);
   100                     
   100 
   101                     ctx.restore();
   101                     ctx.restore();
   102                     
   102 
   103                     var k = 0;
   103                     var k = 0;
   104                     for (var x = 0; x < landArray.length; x++) {
   104                     for (var x = 0; x < landArray.length; x++) {
   105                         if (++k == 64)
   105                         if (++k == 64)
   106                             k = 0;
   106                             k = 0;
   107                         ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8);
   107                         ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8);
   108                     }
   108                     }
   109                         
   109 
   110                     
   110 
   111                     var gradient = ctx.createLinearGradient(0, 320, 0, 384);
   111                     var gradient = ctx.createLinearGradient(0, 320, 0, 384);
   112                     gradient.addColorStop(0, waterTopColor);
   112                     gradient.addColorStop(0, waterTopColor);
   113                     gradient.addColorStop(1, waterBottomColor);
   113                     gradient.addColorStop(1, waterBottomColor);
   114                     ctx.fillStyle = gradient;
   114                     ctx.fillStyle = gradient;
   115                     ctx.fillRect(0, 320, 512, 384);
   115                     ctx.fillRect(0, 320, 512, 384);
   116           
   116 
   117                     for (var i = 0; i < 8; i++)
   117                     for (var i = 0; i < 8; i++)
   118                         ctx.drawImage(water, i * 64, 308, 64, 24);
   118                         ctx.drawImage(water, i * 64, 308, 64, 24);
   119                 }
   119                 }
   120             }
   120             }
   121         </script>
   121         </script>