author | sheepluva |
Tue, 22 Jun 2021 22:13:55 +0200 | |
changeset 15802 | d5c37e78ab83 |
parent 13606 | ba6648614cd7 |
permissions | -rw-r--r-- |
<!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 = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/Sky.png'; clouds = new Image(); clouds.onload = tryToDraw; clouds.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Graphics/Clouds.png'; horizont = new Image(); horizont.onload = tryToDraw; horizont.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/horizont.png'; land = new Image(); land.onload = tryToDraw; land.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/LandTex.png'; border = new Image(); border.onload = tryToDraw; border.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/share/hedgewars/Data/Themes/Nature/Border.png'; water = new Image(); water.onload = tryToDraw; water.src = 'https://hg.hedgewars.org/hedgewars/raw-file/tip/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">Sorry, your browser does not support Canvas.</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>