Start to make color-selectable kitty
This commit is contained in:
parent
2d3fb6d001
commit
01df4571d0
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Kitty Explorer</title>
|
||||
<script type="text/javascript" src="kitty.js"></script>
|
||||
<script type="text/javascript">
|
||||
function meow() {
|
||||
c = document.getElementById("kitty")
|
||||
ctx = c.getContext("2d")
|
||||
kitty(ctx, "#0088ff")
|
||||
}
|
||||
|
||||
window.addEventListener("load", meow)
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id="kitty" height="300" width="300" style="border: solid black 1px;">(meow)</canvas>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
// This is kludged together from the output of http://www.professorcloud.com/svg-to-canvas/
|
||||
// I saved as a 100×68.83 pixel SVG, then twiddled around with the prelude of the JS output.
|
||||
// If you are reading this, there's probably a nicer converter out now.
|
||||
// But this seems to work okay so it may not be worth the effort.
|
||||
|
||||
var kitty = function(ctx, kittyColor) {
|
||||
|
||||
var scaleBase = 0.1098503139616503
|
||||
var scaleX = scaleBase * ctx.canvas.width / 100
|
||||
var scaleY = scaleBase * ctx.canvas.height / 68.83
|
||||
var scale = Math.min(scaleX, scaleY)
|
||||
|
||||
|
||||
ctx.save();
|
||||
ctx.scale(scale, scale);
|
||||
ctx.translate(187.81991,187.81991);
|
||||
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
||||
ctx.lineCap = 'butt';
|
||||
ctx.lineJoin = 'miter';
|
||||
ctx.miterLimit = 4;
|
||||
ctx.save();
|
||||
ctx.translate(0.22995231,-396.76901);
|
||||
ctx.save();
|
||||
ctx.fillStyle = kittyColor;
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(263.23037,219.17781);
|
||||
ctx.bezierCurveTo(209.09715,219.95058,155.19615,230.72191999999998,105.64392999999998,251.41147);
|
||||
ctx.bezierCurveTo(105.57612999999998,251.43927000000002,105.47314999999999,251.38257000000002,105.40514999999998,251.41147);
|
||||
ctx.bezierCurveTo(74.58948199999998,237.52258,40.50337099999997,225.86925000000002,15.867370999999977,229.44481000000002);
|
||||
ctx.bezierCurveTo(-2.982406800000021,254.52492,-9.558406700000024,291.54425000000003,-10.397073000000024,327.57825);
|
||||
ctx.bezierCurveTo(-68.96529500000003,384.63103,-109.75229000000002,464.09403000000003,-118.55874000000001,566.34569);
|
||||
ctx.lineTo(-93.72685000000001,566.34569);
|
||||
ctx.bezierCurveTo(-99.55329500000002,829.8689099999999,218.71792,826.24936,262.99159,825.16958);
|
||||
ctx.bezierCurveTo(271.39515,824.9648,290.07180999999997,824.88991,314.80415,823.02069);
|
||||
ctx.bezierCurveTo(331.29237,821.77436,350.61791999999997,819.6868,371.15326,816.3351399999999);
|
||||
ctx.bezierCurveTo(376.28715,815.49736,381.38669999999996,814.48214,386.67314999999996,813.4700199999999);
|
||||
ctx.bezierCurveTo(497.68913999999995,792.2149099999999,637.94381,730.7707999999999,621.6202499999999,549.8706899999999);
|
||||
ctx.lineTo(660.7781399999999,549.8706899999999);
|
||||
ctx.bezierCurveTo(649.6126999999999,467.2469199999999,617.1321399999999,400.28402999999986,571.4791399999999,348.58980999999983);
|
||||
ctx.bezierCurveTo(572.5872599999999,307.2829199999998,567.21926,261.8263599999998,545.2146999999999,232.54880999999983);
|
||||
ctx.bezierCurveTo(518.6728099999999,228.69657999999984,481.3090299999999,242.58857999999984,448.7526999999999,257.8581399999998);
|
||||
ctx.bezierCurveTo(448.68599999999986,257.82703999999984,448.5803699999999,257.8892399999998,448.51391999999987,257.8581399999998);
|
||||
ctx.bezierCurveTo(390.90069999999986,231.21335999999982,326.91391999999985,218.26880999999983,263.2303699999999,219.17780999999982);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.translate(0.22995231,-396.76901);
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(45, 45, 45, 0.6745098039215687)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(263.23037,219.17781);
|
||||
ctx.bezierCurveTo(209.02281,219.9517,155.01337,230.66592,105.40514999999999,251.41147);
|
||||
ctx.bezierCurveTo(124.77393,260.14114,142.75193,269.80447000000004,156.26259,277.19836);
|
||||
ctx.bezierCurveTo(101.54814999999999,287.66580999999996,23.972259999999977,334.24057999999997,-9.20318450000002,369.84013999999996);
|
||||
ctx.bezierCurveTo(-10.36285100000002,356.41981,-10.73551800000002,342.11868999999996,-10.39707300000002,327.57824999999997);
|
||||
ctx.bezierCurveTo(-68.96529500000003,384.63102999999995,-109.75229000000002,464.09403,-118.55874000000001,566.34569);
|
||||
ctx.lineTo(-41.675629000000015,566.34569);
|
||||
ctx.lineTo(-41.675629000000015,439.32147);
|
||||
ctx.bezierCurveTo(96.42092599999998,476.58558,501.82402999999994,478.74613999999997,577.4483700000001,446.96202999999997);
|
||||
ctx.lineTo(579.5972600000001,549.87069);
|
||||
ctx.lineTo(660.7781400000001,549.87069);
|
||||
ctx.bezierCurveTo(649.6127000000001,467.24692,617.1321400000002,400.28403,571.4791400000001,348.58980999999994);
|
||||
ctx.bezierCurveTo(571.2552600000001,356.94624999999996,570.9641400000002,365.08991999999995,570.2852600000001,372.94402999999994);
|
||||
ctx.bezierCurveTo(537.1098100000002,337.34457999999995,459.5339200000001,290.76980999999995,404.8194800000001,280.3023599999999);
|
||||
ctx.bezierCurveTo(416.6672600000001,273.81846999999993,432.09703000000013,265.6700299999999,448.7527000000001,257.85813999999993);
|
||||
ctx.bezierCurveTo(391.08781,231.15081,326.98737,218.2677,263.23037,219.17781);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-41.675629,439.32136);
|
||||
ctx.lineTo(-41.675629,566.34569);
|
||||
ctx.lineTo(-93.72685,566.34569);
|
||||
ctx.bezierCurveTo(-99.55329499999999,829.8689099999999,218.71792,826.24936,262.9917,825.16958);
|
||||
ctx.bezierCurveTo(307.81048,824.07647,646.49437,825.52791,621.62037,549.87069);
|
||||
ctx.lineTo(579.59726,549.87069);
|
||||
ctx.lineTo(577.44837,446.96191999999996);
|
||||
ctx.bezierCurveTo(501.82413999999994,478.74602999999996,96.42092599999995,476.58547,-41.67562900000007,439.32135999999997);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.transform(0.1017341,0,0,0.1017341,-189.21074,758.53069);
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 200.2725372314453;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(5838.2978,-4701.1388);
|
||||
ctx.bezierCurveTo(6376.116,-4598.2485,7139.0243,-4139.491099999999,7465.124900000001,-3789.5636999999997);
|
||||
ctx.bezierCurveTo(7504.7714000000005,-4248.3897,7479.873700000001,-4823.4601,7219.823,-5169.4639);
|
||||
ctx.bezierCurveTo(6825.455400000001,-5226.701,6182.3921,-4889.4492,5838.2978,-4701.1388);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 200.2725372314453;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(3397.0185,-4731.6101);
|
||||
ctx.bezierCurveTo(2859.2003,-4628.7198,2096.2920000000004,-4169.9624,1770.1914000000002,-3820.035);
|
||||
ctx.bezierCurveTo(1730.5449,-4278.861,1755.4426,-4853.9313,2015.4933,-5199.9351);
|
||||
ctx.bezierCurveTo(2409.8609,-5257.172299999999,3052.9242000000004,-4919.9205,3397.0185,-4731.6101);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(52.032037,620.50691);
|
||||
ctx.bezierCurveTo(52.032037,620.50691,55.796148,645.0247999999999,71.66670400000001,650.0097999999999);
|
||||
ctx.bezierCurveTo(71.66670400000001,650.0097999999999,79.093259,652.2479099999999,86.621593,649.2976899999999);
|
||||
ctx.bezierCurveTo(86.621593,649.2976899999999,93.946481,646.4491399999998,98.727926,639.8363599999999);
|
||||
ctx.bezierCurveTo(98.727926,639.8363599999999,103.30604,633.4271399999999,104.22158999999999,623.76236);
|
||||
ctx.bezierCurveTo(104.22158999999999,623.76236,104.93369999999999,617.0479099999999,103.91636999999999,606.1623599999999);
|
||||
ctx.bezierCurveTo(103.91636999999999,606.1623599999999,102.39036999999999,598.6340299999999,98.42281499999999,592.5300299999999);
|
||||
ctx.bezierCurveTo(98.42281499999999,592.5300299999999,93.94648099999999,585.61214,87.63892599999998,582.7635799999999);
|
||||
ctx.bezierCurveTo(87.63892599999998,582.7635799999999,39.91114799999998,566.1871399999999,35.457925999999986,571.0994699999999);
|
||||
ctx.bezierCurveTo(31.004703999999986,576.0117999999999,65.93703699999999,585.0342499999999,61.053814999999986,587.5775799999999);
|
||||
ctx.bezierCurveTo(61.053814999999986,587.5775799999999,49.38692599999999,596.3959099999998,52.03203699999999,620.50691);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(297.48526,699.49191);
|
||||
ctx.bezierCurveTo(297.48526,699.49191,285.37881,707.63058,268.38926,707.0202499999999);
|
||||
ctx.bezierCurveTo(268.38926,707.0202499999999,253.23091999999997,706.5115799999999,239.08980999999997,699.5936899999999);
|
||||
ctx.bezierCurveTo(239.08980999999997,699.5936899999999,231.76503999999997,695.93125,228.40780999999998,688.5045799999999);
|
||||
ctx.bezierCurveTo(228.40780999999998,688.5045799999999,225.15225999999998,681.3832499999999,226.27137,672.5323599999999);
|
||||
ctx.bezierCurveTo(226.27137,672.5323599999999,227.18692,665.8179099999999,230.54415,660.3242499999999);
|
||||
ctx.bezierCurveTo(230.54415,660.3242499999999,234.41004,654.3219099999999,240.3107,651.37169);
|
||||
ctx.bezierCurveTo(240.3107,651.37169,251.70492,643.84336,267.77881,644.1485799999999);
|
||||
ctx.bezierCurveTo(267.77881,644.1485799999999,283.44592,644.4537999999999,295.55226000000005,651.6769099999999);
|
||||
ctx.bezierCurveTo(295.55226000000005,651.6769099999999,301.24937000000006,654.3219099999999,305.11526000000003,659.9173599999999);
|
||||
ctx.bezierCurveTo(305.11526000000003,659.9173599999999,308.87948000000006,665.4110299999999,309.69337,671.9219099999999);
|
||||
ctx.bezierCurveTo(309.69337,671.9219099999999,310.71070000000003,680.3659099999999,307.45515,687.5890299999999);
|
||||
ctx.bezierCurveTo(307.45515,687.5890299999999,304.30137,694.8121399999999,297.48526,699.4919099999998);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "#d35f5f";
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(271.03437,661.23991);
|
||||
ctx.bezierCurveTo(271.03437,661.23991,281.51292,662.0538,287.10837000000004,668.66647);
|
||||
ctx.bezierCurveTo(287.10837000000004,668.66647,289.14304000000004,670.19247,289.95692,672.93925);
|
||||
ctx.lineTo(290.97426,678.02603);
|
||||
ctx.bezierCurveTo(290.97426,678.02603,290.87204,681.07803,288.63437,683.72314);
|
||||
ctx.bezierCurveTo(288.63437,683.72314,286.5997,686.16469,283.64937,687.4872499999999);
|
||||
ctx.bezierCurveTo(283.64937,687.4872499999999,275.81581,691.4549099999999,265.84592,690.9462499999998);
|
||||
ctx.bezierCurveTo(265.84592,690.9462499999998,255.57080999999997,690.5393599999999,248.65281,685.4525799999999);
|
||||
ctx.bezierCurveTo(248.65281,685.4525799999999,242.65059,679.75547,244.78691999999998,674.2617999999999);
|
||||
ctx.bezierCurveTo(244.78691999999998,674.2617999999999,245.49915,671.3115799999999,247.83903999999998,668.3612499999999);
|
||||
ctx.bezierCurveTo(247.83903999999998,668.3612499999999,250.07715,665.5126899999999,252.82392,663.98669);
|
||||
ctx.bezierCurveTo(252.82392,663.98669,261.98004,660.42603,271.03436999999997,661.23991);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "#000000";
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(472.46781,621.05491);
|
||||
ctx.bezierCurveTo(472.46781,621.05491,468.70369999999997,645.5727999999999,452.83315,650.5577999999999);
|
||||
ctx.bezierCurveTo(452.83315,650.5577999999999,445.40659,652.7959099999999,437.87826,649.8456899999999);
|
||||
ctx.bezierCurveTo(437.87826,649.8456899999999,430.55337000000003,646.9971399999998,425.77192,640.3843599999999);
|
||||
ctx.bezierCurveTo(425.77192,640.3843599999999,421.19392000000005,633.9751399999999,420.27826000000005,624.31036);
|
||||
ctx.bezierCurveTo(420.27826000000005,624.31036,419.56615000000005,617.5959099999999,420.58348000000007,606.7103599999999);
|
||||
ctx.bezierCurveTo(420.58348000000007,606.7103599999999,422.1094800000001,599.1820299999999,426.0771500000001,593.0780299999999);
|
||||
ctx.bezierCurveTo(426.0771500000001,593.0780299999999,430.5533700000001,586.16014,436.8609200000001,583.3115799999999);
|
||||
ctx.bezierCurveTo(436.8609200000001,583.3115799999999,484.5887000000001,566.7351399999999,489.04192000000006,571.6474699999999);
|
||||
ctx.bezierCurveTo(493.49514000000005,576.5597999999999,458.56281000000007,585.5822499999999,463.44603000000006,588.1255799999999);
|
||||
ctx.bezierCurveTo(463.44603000000006,588.1255799999999,475.1129200000001,596.9439099999998,472.46781000000004,621.05491);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(581.84259,635.47703);
|
||||
ctx.bezierCurveTo(605.9547,636.57303,667.3308099999999,646.43714,687.05892,651.91714);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(550.05848,705.62125);
|
||||
ctx.bezierCurveTo(573.0745900000001,706.71725,635.54681,734.1173600000001,662.94681,749.4614700000001);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(569.78648,573.0048);
|
||||
ctx.bezierCurveTo(601.5707,563.1408,692.53892,559.8528,712.26703,563.1408);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(3.1525932,710.00536);
|
||||
ctx.bezierCurveTo(-22.055518,715.48536,-79.047739,745.07747,-109.73585,772.47758);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-34.111629,654.10914);
|
||||
ctx.bezierCurveTo(-62.607629,656.30114,-114.11985000000001,663.9731400000001,-137.13596,674.93325);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "round";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-38.495629,586.15692);
|
||||
ctx.bezierCurveTo(-76.85574,575.1968,-157.95996,580.6768,-177.68807,589.44491);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(-41.675629,439.32136);
|
||||
ctx.lineTo(-41.675629,566.34569);
|
||||
ctx.lineTo(-93.72685,566.34569);
|
||||
ctx.bezierCurveTo(-99.55329499999999,829.8689099999999,218.71792,826.24936,262.9917,825.16958);
|
||||
ctx.bezierCurveTo(307.81048,824.07647,646.49437,825.52791,621.62037,549.87069);
|
||||
ctx.lineTo(579.59726,549.87069);
|
||||
ctx.lineTo(577.44837,446.96191999999996);
|
||||
ctx.bezierCurveTo(501.82413999999994,478.74602999999996,96.42092599999995,476.58547,-41.67562900000007,439.32135999999997);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "#d7d7d7";
|
||||
ctx.strokeStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(194.05837,466.43958);
|
||||
ctx.bezierCurveTo(194.05837,430.27146999999997,215.66548,237.52380999999997,227.72147999999999,221.08369999999996);
|
||||
ctx.lineTo(351.55826,226.78069999999997);
|
||||
ctx.bezierCurveTo(340.59815000000003,257.46880999999996,319.89015,411.05714,325.37015,469.14536);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = "rgba(0, 0, 0, 0)";
|
||||
ctx.strokeStyle = "#000000";
|
||||
ctx.lineWidth = 20.37454605102539;
|
||||
ctx.lineCap = "butt";
|
||||
ctx.lineJoin = "round";
|
||||
ctx.miterLimit = 4;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(263.23037,219.17781);
|
||||
ctx.bezierCurveTo(209.02281,219.9517,155.01337,230.66592,105.40514999999999,251.41147);
|
||||
ctx.bezierCurveTo(124.77393,260.14114,142.75193,269.80447000000004,156.26259,277.19836);
|
||||
ctx.bezierCurveTo(101.54814999999999,287.66580999999996,23.972259999999977,334.24057999999997,-9.20318450000002,369.84013999999996);
|
||||
ctx.bezierCurveTo(-10.36285100000002,356.41981,-10.73551800000002,342.11868999999996,-10.39707300000002,327.57824999999997);
|
||||
ctx.bezierCurveTo(-68.96529500000003,384.63102999999995,-109.75229000000002,464.09403,-118.55874000000001,566.34569);
|
||||
ctx.lineTo(-41.675629000000015,566.34569);
|
||||
ctx.lineTo(-41.675629000000015,439.32147);
|
||||
ctx.bezierCurveTo(96.42092599999998,476.58558,501.82402999999994,478.74613999999997,577.4483700000001,446.96202999999997);
|
||||
ctx.lineTo(579.5972600000001,549.87069);
|
||||
ctx.lineTo(660.7781400000001,549.87069);
|
||||
ctx.bezierCurveTo(649.6127000000001,467.24692,617.1321400000002,400.28403,571.4791400000001,348.58980999999994);
|
||||
ctx.bezierCurveTo(571.2552600000001,356.94624999999996,570.9641400000002,365.08991999999995,570.2852600000001,372.94402999999994);
|
||||
ctx.bezierCurveTo(537.1098100000002,337.34457999999995,459.5339200000001,290.76980999999995,404.8194800000001,280.3023599999999);
|
||||
ctx.bezierCurveTo(416.6672600000001,273.81846999999993,432.09703000000013,265.6700299999999,448.7527000000001,257.85813999999993);
|
||||
ctx.bezierCurveTo(391.08781,231.15081,326.98737,218.2677,263.23037,219.17781);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
ctx.restore();
|
||||
ctx.restore();
|
||||
};
|
||||
113
res/kitty.svg
113
res/kitty.svg
|
|
@ -10,13 +10,13 @@
|
|||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.0"
|
||||
width="128"
|
||||
height="128"
|
||||
viewBox="-187.81991 -187.81991 1165.08 1165.222"
|
||||
width="100"
|
||||
height="100"
|
||||
viewBox="-187.81991 -187.81991 910.21878 910.32965"
|
||||
id="svg10326"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="kitty.svg"
|
||||
inkscape:export-filename="/home/neale/src/scoreboard/res/kitty.png"
|
||||
inkscape:export-filename="/home/neale/src/scoreboard/res/kitty-k.png"
|
||||
inkscape:export-xdpi="226.56"
|
||||
inkscape:export-ydpi="226.56">
|
||||
<metadata
|
||||
|
|
@ -45,31 +45,48 @@
|
|||
id="namedview16"
|
||||
showgrid="false"
|
||||
inkscape:object-paths="true"
|
||||
inkscape:zoom="4.12"
|
||||
inkscape:cx="61.432328"
|
||||
inkscape:cy="62.180965"
|
||||
inkscape:window-x="37"
|
||||
inkscape:window-y="0"
|
||||
inkscape:zoom="5.7699913"
|
||||
inkscape:cx="49.511891"
|
||||
inkscape:cy="51.063088"
|
||||
inkscape:window-x="166"
|
||||
inkscape:window-y="6"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="g3123" />
|
||||
inkscape:current-layer="g3131"
|
||||
units="px" />
|
||||
<defs
|
||||
id="defs10328" />
|
||||
<g
|
||||
id="g3123"
|
||||
transform="matrix(0.12121048,0,0,0.12121048,-149.1743,676.39722)">
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
inkscape:label="Background"
|
||||
style="display:inline"
|
||||
transform="translate(0,-254.89235)">
|
||||
<path
|
||||
style="fill:#2d2d2d;fill-opacity:0.67543858;stroke:#000000;stroke-width:2.66663074000000000;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
d="M 63.46875 24.34375 C 56.37403 24.445027 49.305249 25.847319 42.8125 28.5625 C 45.347492 29.705043 47.700467 30.969783 49.46875 31.9375 C 42.307696 33.307485 32.154532 39.403214 27.8125 44.0625 C 27.660728 42.306048 27.61196 40.434314 27.65625 38.53125 C 19.990813 45.998351 14.652581 56.398505 13.5 69.78125 L 23.5625 69.78125 L 23.5625 53.15625 C 41.636637 58.033397 94.696009 58.31617 104.59375 54.15625 L 104.875 67.625 L 115.5 67.625 C 114.03867 56.81115 109.78759 48.04701 103.8125 41.28125 C 103.78316 42.374949 103.74507 43.440791 103.65625 44.46875 C 99.314218 39.809464 89.161054 33.713735 82 32.34375 C 83.550637 31.495142 85.570097 30.428669 87.75 29.40625 C 80.202799 25.910769 71.813297 24.224632 63.46875 24.34375 z "
|
||||
transform="matrix(75.103216,0,0,75.103216,-319.41636,-7129.8879)"
|
||||
id="path3770" />
|
||||
style="fill:#00ff00;fill-opacity:1;stroke:#000000;stroke-width:18.33709145;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
|
||||
d="m 263.63628,249.48375 c -48.7199,0.6955 -97.2308,10.3897 -141.8278,29.0103 -0.061,0.025 -0.1537,-0.026 -0.2149,0 -27.7341,-12.5 -58.4116,-22.988 -80.584,-19.77 -16.9648,22.5721 -22.8832,55.8895 -23.638,88.3201 -52.7114,51.3475 -89.4197,122.8642 -97.3455,214.8907 l 22.3487,0 c -5.2438,237.1709 281.2003,233.9133 321.0466,232.9415 7.5632,-0.1843 24.3722,-0.2517 46.6313,-1.934 14.8394,-1.1217 32.2324,-3.0005 50.7142,-6.017 4.6205,-0.754 9.2101,-1.6677 13.9679,-2.5786 99.9144,-19.1296 226.1436,-74.4293 211.4524,-237.2394 l 35.2421,0 c -10.0489,-74.3614 -39.2814,-134.628 -80.3691,-181.1528 0.9973,-37.1762 -3.8339,-78.0871 -23.638,-104.4369 -23.8877,-3.467 -57.5151,9.0358 -86.8158,22.7784 -0.06,-0.028 -0.1551,0.028 -0.2149,0 -51.8519,-23.9803 -109.44,-35.6304 -166.7552,-34.8123 z"
|
||||
id="path3770-1"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:label="Foreground"
|
||||
id="g3131"
|
||||
inkscape:groupmode="layer"
|
||||
style="display:inline"
|
||||
transform="translate(0,-254.89235)">
|
||||
<path
|
||||
style="fill:#2d2d2d;fill-opacity:0.67543856;stroke:#000000;stroke-width:18.33709145;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
|
||||
d="m 263.63628,249.48375 c -48.7868,0.6965 -97.3953,10.3393 -142.0427,29.0103 17.4319,7.8567 33.6121,16.5537 45.7717,23.2082 -49.243,9.4207 -119.0613,51.338 -148.9192,83.3776 -1.0437,-12.0783 -1.3791,-24.9493 -1.0745,-38.0357 -52.7114,51.3475 -89.4197,122.8642 -97.3455,214.8907 l 69.1948,0 0,-114.3218 c 124.2869,33.5377 489.1497,35.4822 557.2116,6.8765 l 1.934,92.6178 73.0628,0 c -10.0489,-74.3614 -39.2814,-134.628 -80.3691,-181.1528 -0.2015,7.5208 -0.4635,14.8501 -1.0745,21.9188 -29.8579,-32.0395 -99.6762,-73.9568 -148.9192,-83.3775 10.663,-5.8355 24.5498,-13.1691 39.5399,-20.1998 -51.8984,-24.0366 -109.5888,-35.6314 -166.9701,-34.8123 z"
|
||||
id="path3770"
|
||||
inkscape:connector-curvature="0" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
d="m 1450.2032,-3137.6826 0,1248.591 -511.64069,0 C 881.2915,701.22207 4009.7535,665.64417 4444.9439,655.02983 c 440.5486,-10.74501 3769.6572,3.52234 3525.1572,-2706.06273 l -413.0677,0 -21.1228,-1011.5465 c -743.3521,312.4234 -4728.2816,291.1863 -6085.7074,-75.1032 z"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
|
||||
d="m -10.77912,447.61295 0,114.3219 -46.8461,0 c -5.2438,237.1709 281.2003,233.9133 321.0467,232.9415 40.3369,-0.9838 345.1524,0.3225 322.7658,-247.769 l -37.8208,0 -1.934,-92.6179 c -68.0618,28.6057 -432.9247,26.6612 -557.2116,-6.8765 z"
|
||||
id="path3836" />
|
||||
<g
|
||||
transform="matrix(0.09156069,0,0,0.09156069,-143.56072,734.90135)"
|
||||
id="g3003"
|
||||
style="fill:none">
|
||||
style="fill:none;display:inline">
|
||||
<path
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
|
||||
d="m 5838.2978,-4701.1388 c 537.8182,102.8903 1300.7265,561.6477 1626.8271,911.5751 39.6465,-458.826 14.7488,-1033.8964 -245.3019,-1379.9002 -394.3676,-57.2371 -1037.4309,280.0147 -1381.5252,468.3251 z"
|
||||
|
|
@ -84,80 +101,84 @@
|
|||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
</g>
|
||||
<path
|
||||
d="m 2371.3064,-1356.7112 c 0,0 37,241 193,290 0,0 73,22 147,-7 0,0 72,-28 119,-93 0,0 45,-63 54,-158 0,0 7,-66 -3,-173 0,0 -15,-74 -54,-134 0,0 -44,-68 -106,-96 0,0 -469.1426,-162.9385 -512.9158,-114.6523 -43.7732,48.2862 299.5961,136.972 251.5961,161.972 0,0 -114.6803,86.6803 -88.6803,323.6803"
|
||||
d="m 73.55778,610.67995 c 0,0 3.3877,22.0661 17.6712,26.5526 0,0 6.6839,2.0143 13.4594,-0.6409 0,0 6.5924,-2.5637 10.8957,-8.5152 0,0 4.1203,-5.7683 4.9443,-14.4666 0,0 0.6409,-6.043 -0.2747,-15.84 0,0 -1.3734,-6.7755 -4.9442,-12.2691 0,0 -4.0287,-6.2261 -9.7055,-8.7898 0,0 -42.955,-14.9188 -46.9629,-10.4977 -4.0079,4.4211 27.4312,12.5413 23.0363,14.8303 0,0 -10.5002,7.9365 -8.1196,29.6364"
|
||||
id="path2995"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;display:inline"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccczcc" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;display:inline"
|
||||
id="path9508"
|
||||
d="m 4783.9999,-580.3246 c 0,0 -119,80 -286,74 0,0 -149,-5 -288,-73 0,0 -72,-36 -105,-109 0,0 -32.0001,-70 -21.0001,-157 0,0 9,-66 42.0001,-120 0,0 38,-59 96,-88 0,0 112,-74 270,-71 0,0 154,3 273,74 0,0 56,26 94,81 0,0 37,54 45,118 0,0 10,83 -22,154 0,0 -31,71 -98,117" />
|
||||
d="m 294.46568,681.76645 c 0,0 -10.8958,7.3248 -26.1864,6.7755 0,0 -13.6425,-0.4578 -26.3695,-6.6839 0,0 -6.5923,-3.2962 -9.6138,-9.9802 0,0 -2.93,-6.4092 -1.9228,-14.375 0,0 0.824,-6.043 3.8455,-10.9873 0,0 3.4793,-5.4021 8.7899,-8.0573 0,0 10.2548,-6.7755 24.7213,-6.5008 0,0 14.1004,0.2747 24.9961,6.7755 0,0 5.1274,2.3805 8.6067,7.4164 0,0 3.3878,4.9443 4.1203,10.8041 0,0 0.9156,7.5996 -2.0144,14.1004 0,0 -2.8384,6.5008 -8.9729,10.7126" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#d35f5f;fill-opacity:1;stroke:none"
|
||||
style="fill:#d35f5f;fill-opacity:1;stroke:none;display:inline"
|
||||
id="path9510"
|
||||
d="m 4523.9999,-956.3246 c 0,0 103,8 158,73 0,0 20,15 28,42 l 10,50 c 0,0 -1,30 -23,56 0,0 -20,24 -49,37 0,0 -77,39 -175,34 0,0 -101,-4 -169,-54 0,0 -59,-56 -38,-110 0,0 7,-29 30,-58 0,0 22,-28 49,-43 0,0 90,-35 179,-27" />
|
||||
d="m 270.65988,647.33965 c 0,0 9.4307,0.7325 14.4666,6.6839 0,0 1.8312,1.3734 2.5637,3.8455 l 0.9156,4.5781 c 0,0 -0.092,2.7468 -2.1059,5.1274 0,0 -1.8312,2.1974 -4.4865,3.3877 0,0 -7.0502,3.5709 -16.0231,3.1131 0,0 -9.2476,-0.3662 -15.4738,-4.9443 0,0 -5.402,-5.1274 -3.4793,-10.0717 0,0 0.641,-2.6552 2.7469,-5.3105 0,0 2.0143,-2.5637 4.4864,-3.9371 0,0 8.2405,-3.2046 16.3894,-2.4721" />
|
||||
<path
|
||||
sodipodi:nodetypes="cccccccczcc"
|
||||
inkscape:connector-curvature="0"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none"
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;display:inline"
|
||||
id="path9512"
|
||||
d="m 6503.9998,-1351.3246 c 0,0 -37,241 -193,290 0,0 -73,22 -147,-7 0,0 -72,-28 -119,-93 0,0 -45,-63 -54,-158 0,0 -7,-66 3,-173 0,0 15,-74 54,-134 0,0 44,-68 106,-96 0,0 469.1426,-162.9385 512.9158,-114.6523 43.7732,48.2862 -299.5961,136.972 -251.5961,161.972 0,0 114.6803,86.6803 88.6803,323.6803" />
|
||||
d="m 451.94998,611.17315 c 0,0 -3.3877,22.0661 -17.6712,26.5526 0,0 -6.6839,2.0143 -13.4594,-0.6409 0,0 -6.5924,-2.5637 -10.8957,-8.5152 0,0 -4.1202,-5.7683 -4.9443,-14.4666 0,0 -0.6409,-6.043 0.2747,-15.84 0,0 1.3734,-6.7755 4.9443,-12.2691 0,0 4.0286,-6.2261 9.7054,-8.7898 0,0 42.955,-14.9188 46.9629,-10.4977 4.0079,4.4211 -27.4312,12.5413 -23.0363,14.8303 0,0 10.5002,7.9365 8.1196,29.6364" />
|
||||
<path
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3838"
|
||||
d="m 7579.1035,-1209.5615 c 237.0109,10.7733 840.3111,107.7322 1034.2291,161.5983"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m 550.38728,624.15305 c 21.7009,0.9864 76.9394,9.8641 94.6947,14.7961"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3840"
|
||||
d="m 7266.6802,-520.0755 c 226.2376,10.7732 840.3111,280.1038 1109.6416,430.928896"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m 521.78158,687.28285 c 20.7145,0.9864 76.9395,25.6465 101.5995,39.4562"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3842"
|
||||
d="m 7460.5981,-1823.6351 c 312.4235,-96.9589 1206.6006,-129.2785 1400.5186,-96.9589"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m 539.53678,567.92805 c 28.6058,-8.8776 110.4772,-11.8368 128.2325,-8.8776"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3844"
|
||||
d="m 1890.8434,-476.9825 c -247.7841,53.8661 -807.9915,344.743 -1109.64161,614.0735"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m 29.56628,691.22855 c -22.6873,4.932 -73.9803,31.5649 -101.5996,56.225"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3846"
|
||||
d="m 1524.554,-1026.4168 c -280.1037,21.5464 -786.44513,96.959 -1012.68271,204.6912"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m -3.97152,640.92195 c -25.6464,1.9728 -72.0074,8.8776 -92.7219,18.7417"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
sodipodi:nodetypes="cc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3848"
|
||||
d="m 1481.4611,-1694.3564 c -377.0627,-107.7323 -1174.28098,-53.8661 -1368.19894,32.3197"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m -7.91712,579.76495 c -34.5241,-9.8641 -107.5179,-4.9321 -125.2732,2.9592"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3796"
|
||||
d="m 1450.2032,-3137.6826 0,1248.591 -511.64069,0 C 881.2915,701.22207 4009.7535,665.64417 4444.9439,655.02983 c 440.5486,-10.74501 3769.6572,3.52234 3525.1572,-2706.06273 l -413.0677,0 -21.1228,-1011.5465 c -743.3521,312.4234 -4728.2816,291.1863 -6085.7074,-75.1032 z"
|
||||
style="fill:none;stroke:#000000;stroke-width:200.27253723;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m -10.77912,447.61295 0,114.3219 -46.8461,0 c -5.2438,237.1709 281.2003,233.9133 321.0467,232.9415 40.3369,-0.9838 345.1524,0.3225 322.7658,-247.769 l -37.8208,0 -1.934,-92.6179 c -68.0618,28.6057 -432.9247,26.6612 -557.2116,-6.8765 z"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline" />
|
||||
<path
|
||||
sodipodi:nodetypes="ccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3852"
|
||||
d="m 3767.3612,-2871.1229 c 0,-355.5162 212.3876,-2250.1385 330.8931,-2411.7368 l 1217.2588,55.9985 c -107.7322,301.6501 -311.2826,1811.3539 -257.4165,2382.3345 z"
|
||||
style="fill:#d7d7d7;fill-opacity:1;fill-rule:nonzero;stroke:none" />
|
||||
d="m 201.38148,472.01935 c 0,-32.5513 19.4464,-206.0242 30.2968,-220.8203 l 111.4531,5.1273 c -9.8641,27.6193 -28.5013,165.8488 -23.5693,218.1282 z"
|
||||
style="fill:#d7d7d7;fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline" />
|
||||
<path
|
||||
id="path3817"
|
||||
transform="matrix(75.103216,0,0,75.103216,-319.41636,-7129.8879)"
|
||||
d="M 63.46875 24.34375 C 56.37403 24.445027 49.305249 25.847319 42.8125 28.5625 C 45.347492 29.705043 47.700467 30.969783 49.46875 31.9375 C 42.307696 33.307485 32.154532 39.403214 27.8125 44.0625 C 27.660728 42.306048 27.61196 40.434314 27.65625 38.53125 C 19.990813 45.998351 14.652581 56.398505 13.5 69.78125 L 23.5625 69.78125 L 23.5625 53.15625 C 41.636637 58.033397 94.696009 58.31617 104.59375 54.15625 L 104.875 67.625 L 115.5 67.625 C 114.03867 56.81115 109.78759 48.04701 103.8125 41.28125 C 103.78316 42.374949 103.74507 43.440791 103.65625 44.46875 C 99.314218 39.809464 89.161054 33.713735 82 32.34375 C 83.550637 31.495142 85.570097 30.428669 87.75 29.40625 C 80.202799 25.910769 71.813297 24.224632 63.46875 24.34375 z "
|
||||
style="fill:none;fill-opacity:0.81578945999999997;stroke:#000000;stroke-width:2.66663074000000000;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none" />
|
||||
d="m 263.63628,249.48375 c -48.7868,0.6965 -97.3953,10.3393 -142.0427,29.0103 17.4319,7.8567 33.6121,16.5537 45.7717,23.2082 -49.243,9.4207 -119.0613,51.338 -148.9192,83.3776 -1.0437,-12.0783 -1.3791,-24.9493 -1.0745,-38.0357 -52.7114,51.3475 -89.4197,122.8642 -97.3455,214.8907 l 69.1948,0 0,-114.3218 c 124.2869,33.5377 489.1497,35.4822 557.2116,6.8765 l 1.934,92.6178 73.0628,0 c -10.0489,-74.3614 -39.2814,-134.628 -80.3691,-181.1528 -0.2015,7.5208 -0.4635,14.8501 -1.0745,21.9188 -29.8579,-32.0395 -99.6762,-73.9568 -148.9192,-83.3775 10.663,-5.8355 24.5498,-13.1691 39.5399,-20.1998 -51.8984,-24.0366 -109.5888,-35.6314 -166.9701,-34.8123 z"
|
||||
style="fill:none;stroke:#000000;stroke-width:18.33709145;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;display:inline"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
<g
|
||||
id="g3123"
|
||||
transform="matrix(0.09156068,0,0,0.09156068,-143.56072,480.00905)"
|
||||
style="display:inline" />
|
||||
</svg>
|
||||
<!-- version: 20090314, original size: 8945 6260.6636, border: 3% -->
|
||||
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 12 KiB |
|
|
@ -1,23 +1,23 @@
|
|||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
src: url('Ubuntu-Medium.ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'Ubuntu';
|
||||
src: url('Ubuntu-Medium.ttf');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Ubuntu';
|
||||
src: url('Ubuntu-Bold.ttf');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-family: 'Ubuntu';
|
||||
src: url('Ubuntu-Bold.ttf');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background: url(bg.jpg) #222;
|
||||
background-size: 100% auto;
|
||||
font-size: 160px;
|
||||
color: #eee;
|
||||
margin: 0;
|
||||
background: url(bg.jpg) #222;
|
||||
background-size: 100% auto;
|
||||
font-size: 160px;
|
||||
color: #eee;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -31,110 +31,118 @@ input[readonly] {
|
|||
}
|
||||
|
||||
#scoreboard {
|
||||
cursor: default;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
cursor: default;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
}
|
||||
#scoreboard p {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#scoreboard *[id] {
|
||||
cursor: pointer;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.left, .right {
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 2em;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.left {
|
||||
left: 0;
|
||||
left: 0;
|
||||
}
|
||||
.right {
|
||||
right: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-width: 1.8em;
|
||||
max-height: 2em;
|
||||
.logo img {
|
||||
max-width: 1.8em;
|
||||
max-height: 2em;
|
||||
}
|
||||
|
||||
.logo input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeouts {
|
||||
position: absolute;
|
||||
font-size: 50%;
|
||||
bottom: 1em;
|
||||
color: #0f0;
|
||||
position: absolute;
|
||||
font-size: 50%;
|
||||
bottom: 1em;
|
||||
color: #0f0;
|
||||
}
|
||||
#timeouts-a {
|
||||
left: 0em;
|
||||
left: 0em;
|
||||
}
|
||||
#timeouts-b {
|
||||
right: 0em;
|
||||
right: 0em;
|
||||
}
|
||||
|
||||
/* Jammer indicators */
|
||||
#jammer-a, #jammer-b {
|
||||
font-family: monospace;
|
||||
position: absolute;
|
||||
bottom: 0em;
|
||||
color: #444;
|
||||
font-family: monospace;
|
||||
position: absolute;
|
||||
bottom: 0em;
|
||||
color: #444;
|
||||
}
|
||||
#jammer-a.lead, #jammer-b.lead, #jamtext, #periodtext {
|
||||
color: yellow;
|
||||
color: yellow;
|
||||
}
|
||||
#jammer-a {
|
||||
left: 0.5em;
|
||||
left: 0.5em;
|
||||
}
|
||||
#jammer-b {
|
||||
right: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
|
||||
#jam, #period {
|
||||
text-align: center;
|
||||
background: #000;
|
||||
border-radius: 15px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: #000;
|
||||
border-radius: 15px;
|
||||
}
|
||||
#period {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 3.4em;
|
||||
margin-left: -1.7em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 3.4em;
|
||||
margin-left: -1.7em;
|
||||
}
|
||||
|
||||
#jam {
|
||||
position: absolute;
|
||||
bottom: 0em;
|
||||
left: 50%;
|
||||
width: 3.5em;
|
||||
margin-left: -1.75em;
|
||||
position: absolute;
|
||||
bottom: 0em;
|
||||
left: 50%;
|
||||
width: 3.5em;
|
||||
margin-left: -1.75em;
|
||||
}
|
||||
|
||||
#jamtext, #periodtext, #preset {
|
||||
text-align: center;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 75%;
|
||||
text-align: center;
|
||||
font-family: Ubuntu, sans-serif;
|
||||
font-size: 75%;
|
||||
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 5em;
|
||||
margin-left: -2.5em;
|
||||
z-index: -1;
|
||||
padding: 0.2em;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 5em;
|
||||
margin-left: -2.7em;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#periodtext {
|
||||
top: 1.4em;
|
||||
top: 1.4em;
|
||||
}
|
||||
|
||||
#preset {
|
||||
|
|
@ -143,7 +151,7 @@ input[readonly] {
|
|||
}
|
||||
|
||||
#jamtext {
|
||||
bottom: 1.4em;
|
||||
bottom: 1.4em;
|
||||
}
|
||||
|
||||
#advert {
|
||||
|
|
@ -153,24 +161,24 @@ input[readonly] {
|
|||
}
|
||||
|
||||
.score {
|
||||
position: absolute;
|
||||
font-size: 1.2em;
|
||||
top: 50%;
|
||||
margin-top: -0.6em;
|
||||
position: absolute;
|
||||
font-size: 1.2em;
|
||||
top: 50%;
|
||||
margin-top: -0.6em;
|
||||
}
|
||||
#score-a {
|
||||
left: 0em;
|
||||
left: 0em;
|
||||
}
|
||||
#score-b {
|
||||
right: 0em;
|
||||
right: 0em;
|
||||
}
|
||||
|
||||
#jamno {
|
||||
color: #0f0;
|
||||
position: absolute;
|
||||
font-size: 50%;
|
||||
bottom: 2.2em;
|
||||
right: 25%;
|
||||
color: #0f0;
|
||||
position: absolute;
|
||||
font-size: 50%;
|
||||
bottom: 2.2em;
|
||||
right: 25%;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -178,16 +186,16 @@ input[readonly] {
|
|||
* States timers can be in
|
||||
*/
|
||||
#jam.paused, #period.paused {
|
||||
color: #aaf;
|
||||
color: #aaf;
|
||||
}
|
||||
#jam.lowtime, #period.lowtime {
|
||||
background: #f24;
|
||||
background: #f24;
|
||||
}
|
||||
#jam.timeout {
|
||||
background: #044;
|
||||
background: #044;
|
||||
}
|
||||
#jam.lineup {
|
||||
background: #060;
|
||||
background: #060;
|
||||
}
|
||||
|
||||
#close, #prefs {
|
||||
|
|
|
|||
|
|
@ -21,37 +21,46 @@
|
|||
<title>Woozle Scoreboard</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="scoreboard.css">
|
||||
<script type="text/javascript" src="kitty.js"></script>
|
||||
<script type="text/javascript" src="scoreboard.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="scoreboard">
|
||||
<p class="left">
|
||||
<img class="logo" id="logo-a" src="" alt="A">
|
||||
<span class="logo" id="logo-a">
|
||||
<canvas class="kitty" id="kitty-a"></canvas>
|
||||
<input type="button" class="setup" id="load-a" value="Load...">
|
||||
<img class="img" id="img-a" src="" alt="A">
|
||||
</span>
|
||||
<span class="timeouts" id="timeouts-a">3</span>
|
||||
<span class="jammer" id="jammer-a">★</span>
|
||||
<span class="score" id="score-a">-</span>
|
||||
</p>
|
||||
|
||||
<p class="center">
|
||||
<input id="period" value="--:--">
|
||||
<span id="periodtext"></span>
|
||||
<span id="preset">-</span>
|
||||
<input id="jam" value="-:--">
|
||||
<span id="jamtext"></span>
|
||||
</p>
|
||||
|
||||
<p class="right">
|
||||
<img class="logo" id="logo-b" src="" alt="B">
|
||||
<span class="logo" id="logo-b">
|
||||
<canvas class="kitty" id="kitty-b"></canvas>
|
||||
<input type="button" class="setup" id="load-b" value="Load...">
|
||||
<img class="img" id="img-b" src="" alt="B">
|
||||
</span>
|
||||
<span class="timeouts" id="timeouts-b">3</span>
|
||||
<span class="jammer" id="jammer-b">★</span>
|
||||
<span class="score" id="score-b">-</span>
|
||||
</p>
|
||||
|
||||
<p class="center">
|
||||
<input id="period" value="--:--">
|
||||
<span id="periodtext"></span>
|
||||
<span class="setup" id="preset">-</span>
|
||||
<input id="jam" value="-:--">
|
||||
<span id="jamtext"></span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="notice">
|
||||
</div>
|
||||
|
||||
<img id="close" src="res/close-icon-white.png" title="Close Scoreboard">
|
||||
<img id="close" src="close-icon-white.png" title="Close Scoreboard">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -58,6 +58,8 @@ var jamtext = [
|
|||
var period = 0;
|
||||
var jamno = 0;
|
||||
|
||||
var colors = ["#666", "#ffffff"];
|
||||
|
||||
var state = SETUP;
|
||||
|
||||
var timer_updates = [];
|
||||
|
|
@ -288,17 +290,9 @@ function leadJammer(team) {
|
|||
if (on) tgt.className = "lead";
|
||||
}
|
||||
|
||||
|
||||
function merf(fo) {
|
||||
var la = e("logo-a");
|
||||
fo.file(function(file){la.src = URL.createObjectURL(file);})
|
||||
window.woo = woo;
|
||||
console.log(woo);
|
||||
e.src = woo.toURL();
|
||||
}
|
||||
|
||||
function changeLogo(element) {
|
||||
function changeLogo(team) {
|
||||
// Holy cow, asynchronous events galore here
|
||||
var element = e("img-" + team)
|
||||
|
||||
function setURL(file) {
|
||||
element.src = URL.createObjectURL(file);
|
||||
|
|
@ -306,6 +300,8 @@ function changeLogo(element) {
|
|||
|
||||
function loaded(entry) {
|
||||
entry.file(setURL);
|
||||
e("kitty-" + team).style.display = "none"
|
||||
element.style.display = "block"
|
||||
}
|
||||
|
||||
chrome.fileSystem.chooseEntry(
|
||||
|
|
@ -324,15 +320,18 @@ function handle(event) {
|
|||
var adj = event.shiftKey?-1:1;
|
||||
var mod = (event.ctrlKey || event.altKey);
|
||||
var newstate;
|
||||
console.log(tgt.id)
|
||||
|
||||
switch (tgt.id) {
|
||||
case "logo-a":
|
||||
case "logo-b":
|
||||
if (state == SETUP) {
|
||||
changeLogo(tgt);
|
||||
} else {
|
||||
score(team, -adj);
|
||||
}
|
||||
case "load-a":
|
||||
case "load-b":
|
||||
changeLogo(team)
|
||||
break
|
||||
case "img-a":
|
||||
case "img-b":
|
||||
case "kitty-a":
|
||||
case "kitty-b":
|
||||
score(team, -adj);
|
||||
break;
|
||||
case "jammer-a":
|
||||
case "jammer-b":
|
||||
|
|
@ -508,8 +507,6 @@ function save() {
|
|||
{
|
||||
"preset": e("preset").innerHTML,
|
||||
|
||||
"logo_a": e("logo-a").src,
|
||||
"logo_b": e("logo-b").src,
|
||||
"score_a": e("score-a").innerHTML,
|
||||
"score_b": e("score-b").innerHTML,
|
||||
"timeouts_a": e("timeouts-a").innerHTML,
|
||||
|
|
@ -558,8 +555,6 @@ function load() {
|
|||
|
||||
e("period").set((state.period_clock >= 0) ? state.period_clock : period_time);
|
||||
|
||||
e("logo-a").src = state.logo_a;
|
||||
e("logo-b").src = state.logo_b;
|
||||
e("score-a").innerHTML = state.score_a;
|
||||
e("score-b").innerHTML = state.score_b;
|
||||
|
||||
|
|
@ -573,8 +568,6 @@ function load() {
|
|||
"period_clock": -1,
|
||||
"score_a": 0,
|
||||
"score_b": 0,
|
||||
"logo_a": "kitty.png",
|
||||
"logo_b": "kitty.png",
|
||||
"timeouts_a": -1,
|
||||
"timeouts_b": -1
|
||||
}, load_cb);
|
||||
|
|
@ -611,6 +604,8 @@ function start() {
|
|||
ei("jamtext").innerHTML = jamtext[3];
|
||||
transition();
|
||||
|
||||
|
||||
|
||||
var p = e("period");
|
||||
startTimer(p);
|
||||
p.readOnly = false;
|
||||
|
|
@ -623,12 +618,23 @@ function start() {
|
|||
}
|
||||
|
||||
function resize() {
|
||||
var w, h;
|
||||
|
||||
w = window.innerWidth / 7;
|
||||
h = window.innerHeight / 5;
|
||||
var w = window.innerWidth / 7
|
||||
var h = window.innerHeight / 5
|
||||
var fs = Math.min(w, h)
|
||||
|
||||
document.body.style.fontSize = Math.min(w, h) + 'px';
|
||||
document.body.style.fontSize = Math.min(w, h) + 'px'
|
||||
|
||||
// Now do kitty canvases
|
||||
var kw = fs * 2
|
||||
var kh = fs * 1.8
|
||||
|
||||
var kitties = document.getElementsByClassName("kitty")
|
||||
for (var i = 0; i < kitties.length; i += 1) {
|
||||
k = kitties[i]
|
||||
k.width = kw
|
||||
k.height = kh
|
||||
kitty(k.getContext("2d"), colors[i])
|
||||
}
|
||||
}
|
||||
|
||||
window.onload = start;
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'PermanentMarker';
|
||||
src: url('PermanentMarker.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #222 url(bg.jpg);
|
||||
background-size: 100% auto;
|
||||
color: #eee;
|
||||
max-width: 40em;
|
||||
margin: auto auto;
|
||||
}
|
||||
h1 {
|
||||
color: #fd8;
|
||||
font-family: PermanentMarker, fantasy, sans-serif;
|
||||
font-size-adjust: 1.0;
|
||||
}
|
||||
h2 {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
dt {
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
}
|
||||
a {
|
||||
color: yellow;
|
||||
}
|
||||
caption {
|
||||
font-size: 33%;
|
||||
font-family: default;
|
||||
}
|
||||
|
||||
#screenshot {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#screenshot img {
|
||||
border: solid black 4px;
|
||||
}
|
||||
Loading…
Reference in New Issue