first draft of a html based theme editor
authorHenek
Tue, 28 Jun 2011 21:31:02 +0200 (2011-06-28)
changeset 5346 ee611abe9158
parent 5343 ff7ecf483759
child 5349 ce527b35d063
first draft of a html based theme editor
misc/theme_editor.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/misc/theme_editor.html	Tue Jun 28 21:31:02 2011 +0200
@@ -0,0 +1,159 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Hedgewars Theme Editor</title>
+        <script type="text/javascript">
+            var sky, clouds, horizont, water, land, border;
+            var skyColor, waterTopColor, waterBottomColor;
+            var elements = 7;
+            var landArray;
+            
+            function landFunction(x){
+                return 384 - 192 * Math.sin(x * Math.PI/512);
+            }
+            
+            function tryToDraw(){
+                if (--elements <= 0) {
+                    draw();
+                }
+            }
+        
+            function load(){
+                    var canvas = document.getElementById('preview');
+                    if (canvas.getContext){
+                        var ctx = canvas.getContext('2d');
+                    
+                        ctx.fillStyle = '#0b294b';
+                        ctx.fillRect(0, 0, 512, 384);
+                        
+                        ctx.font = "40pt Arial";
+                        ctx.fillStyle = '#2b7bd5';
+                        ctx.fillText('Loading Images...', 32, 212);
+                    }
+                    
+                    sky = new Image();
+                    sky.onload = tryToDraw;
+                    sky.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Sky.png';
+          
+                    clouds = new Image();
+                    clouds.onload = tryToDraw;
+                    clouds.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/Clouds.png';
+          
+                    horizont = new Image();
+                    horizont.onload = tryToDraw;
+                    horizont.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/horizont.png';
+          
+                    land = new Image();
+                    land.onload = tryToDraw;
+                    land.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/LandTex.png';
+          
+                    border = new Image();
+                    border.onload = tryToDraw;
+                    border.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Themes/Nature/Border.png';
+          
+                    water = new Image();
+                    water.onload = tryToDraw;
+                    water.src = 'http://hedgewars.googlecode.com/hg/share/hedgewars/Data/Graphics/BlueWater.png';
+                    
+                    landArray = new Array(512);
+                    for (var x = 0; x < landArray.length; x++)
+                        landArray[x] = landFunction(x);
+                    
+                    skyColor = '#131252';
+                    document.getElementById('skyColor').value = skyColor;
+                    
+                    waterTopColor = '#555C9D';
+                    document.getElementById('waterTopColor').value = waterTopColor;
+                    
+                    waterBottomColor = '#343C7D';
+                    document.getElementById('waterBottomColor').value = waterBottomColor;
+                    
+                    tryToDraw();
+            }
+            
+            function draw(){
+                var canvas = document.getElementById('preview');
+                if (canvas.getContext){
+                    var ctx = canvas.getContext('2d');
+                    
+                    ctx.fillStyle = skyColor;
+                    ctx.fillRect(0, 0, 512, 384);
+                    
+                    ctx.drawImage(sky, 0, 64, 512, 256);
+          
+                    for (var i = 0; i < 4; i++)
+                        ctx.drawImage(clouds, 0, i * 128, 256, 128, i * 128, 64, 128, 64);
+          
+                    ctx.drawImage(horizont, 0, 192, 512, 128);
+                    
+                    ctx.save();
+                    
+                    ctx.beginPath();
+                    ctx.moveTo(0, 384);
+                    for (var x = 0; x < landArray.length; x++)
+                        ctx.lineTo(x, landArray[x]);
+                    ctx.clip();
+                    
+                    for (var i = 0; i < 2; i++)
+                    	for (var k = 0; k < 2; k++)
+                    		ctx.drawImage(land, i * 320, k * 240, 320, 240);
+                    
+                    ctx.restore();
+                    
+                    var k = 0;
+                    for (var x = 0; x < landArray.length; x++) {
+                        if (++k == 64)
+                            k = 0;
+                        ctx.drawImage(border, k, 0, 2, 16, x, landArray[x] - 4, 1, 8);
+                    }
+                        
+                    
+                    var gradient = ctx.createLinearGradient(0, 320, 0, 384);
+                    gradient.addColorStop(0, waterTopColor);
+                    gradient.addColorStop(1, waterBottomColor);
+                    ctx.fillStyle = gradient;
+                    ctx.fillRect(0, 320, 512, 384);
+          
+                    for (var i = 0; i < 8; i++)
+                        ctx.drawImage(water, i * 64, 308, 64, 24);
+                }
+            }
+        </script>
+        <style type="text/css">
+            canvas { border: 1px solid black; }
+        </style>
+    </head>
+    <body onload="load();">
+        <h1>Hedgewars Theme editor</h1>
+        <canvas id="preview" width="512" height="384"></canvas><br>
+        <table>
+        <tr><td>Sky:</td><td>
+        <input id="sky" type="file" accept="image/png" onchange="sky.src = window.URL.createObjectURL(this.files[0])"></input>
+        </td></tr>
+        <tr><td>Sky Color:</td><td>
+        <input id="skyColor" type="color" onchange="skyColor = this.value; draw()"></input>
+        </td></tr>
+        <tr><td>Clouds:</td><td>
+        <input id="clouds" type="file" accept="image/png" onchange="clouds.src = window.URL.createObjectURL(this.files[0])"></input>
+        </td></tr>
+        <tr><td>Horizont:</td><td>
+        <input id="horizont" type="file" accept="image/png" onchange="horizont.src = window.URL.createObjectURL(this.files[0])"></input>
+        </td></tr>
+        <tr><td>Land:</td><td>
+        <input id="land" type="file" accept="image/png" onchange="land.src = window.URL.createObjectURL(this.files[0])"></input>
+        </td></tr>
+        <tr><td>Border:</td><td>
+        <input id="border" type="file" accept="image/png" onchange="border.src = window.URL.createObjectURL(this.files[0])"></input>
+        </td></tr>
+        <tr><td>Water:</td><td>
+        <input id="water" type="file" accept="image/png" onchange="water.src = window.URL.createObjectURL(this.files[0])"></input>
+        </td></tr>
+        <tr><td>Water Top Color:</td><td>
+        <input id="waterTopColor" type="color" onchange="waterTopColor = this.value; draw()"></input>
+        </td></tr>
+        <tr><td>Water Bottom Color:</td><td>
+        <input id="waterBottomColor" type="color" onchange="waterBottomColor = this.value; draw()"></input>
+        </td></tr>
+        </table>
+    </body>
+</html>