diff --git a/demo/index.html b/demo/index.html index 1cfe629..833b82d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -15,7 +15,6 @@ - diff --git a/examples/svg.js b/examples/svg.js index 80a6d8c..e035314 100644 --- a/examples/svg.js +++ b/examples/svg.js @@ -33,43 +33,44 @@ Example.svg = function() { Runner.run(runner, engine); // add bodies - var svgs = [ - 'iconmonstr-check-mark-8-icon', - 'iconmonstr-paperclip-2-icon', - 'iconmonstr-puzzle-icon', - 'iconmonstr-user-icon' - ]; + if (typeof fetch !== 'undefined') { + var select = function(root, selector) { + return Array.prototype.slice.call(root.querySelectorAll(selector)); + }; - if (typeof $ !== 'undefined') { - for (var i = 0; i < svgs.length; i += 1) { - (function(i) { - $.get('./svg/' + svgs[i] + '.svg').done(function(data) { - var vertexSets = [], - color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); + var loadSvg = function(url) { + return fetch(url) + .then(function(response) { return response.text(); }) + .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); }); + }; - $(data).find('path').each(function(i, path) { - var points = Svg.pathToVertices(path, 30); - vertexSets.push(Vertices.scale(points, 0.4, 0.4)); - }); + ([ + './svg/iconmonstr-check-mark-8-icon.svg', + './svg/iconmonstr-paperclip-2-icon.svg', + './svg/iconmonstr-puzzle-icon.svg', + './svg/iconmonstr-user-icon.svg' + ]).forEach(function(path, i) { + loadSvg(path).then(function(root) { + var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); - World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, { - render: { - fillStyle: color, - strokeStyle: color, - lineWidth: 1 - } - }, true)); - }); - })(i); - } + var vertexSets = select(root, 'path') + .map(function(path) { return Vertices.scale(Svg.pathToVertices(path, 30), 0.4, 0.4); }); - $.get('./svg/svg.svg').done(function(data) { - var vertexSets = [], - color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); - - $(data).find('path').each(function(i, path) { - vertexSets.push(Svg.pathToVertices(path, 30)); + World.add(world, Bodies.fromVertices(100 + i * 150, 200 + i * 50, vertexSets, { + render: { + fillStyle: color, + strokeStyle: color, + lineWidth: 1 + } + }, true)); }); + }); + + loadSvg('./svg/svg.svg').then(function(root) { + var color = Common.choose(['#f19648', '#f5d259', '#f55a3c', '#063e7b', '#ececd1']); + + var vertexSets = select(root, 'path') + .map(function(path) { return Svg.pathToVertices(path, 30); }); World.add(world, Bodies.fromVertices(400, 80, vertexSets, { render: { @@ -79,6 +80,8 @@ Example.svg = function() { } }, true)); }); + } else { + Common.warn('Fetch is not available. Could not load SVG.'); } World.add(world, [ diff --git a/examples/terrain.js b/examples/terrain.js index 4235967..49bea7e 100644 --- a/examples/terrain.js +++ b/examples/terrain.js @@ -34,39 +34,48 @@ Example.terrain = function() { Runner.run(runner, engine); // add bodies - var terrain; + if (typeof fetch !== 'undefined') { + var select = function(root, selector) { + return Array.prototype.slice.call(root.querySelectorAll(selector)); + }; - if (typeof $ !== 'undefined') { - $.get('./svg/terrain.svg').done(function(data) { - var vertexSets = []; + var loadSvg = function(url) { + return fetch(url) + .then(function(response) { return response.text(); }) + .then(function(raw) { return (new window.DOMParser()).parseFromString(raw, 'image/svg+xml'); }); + }; - $(data).find('path').each(function(i, path) { - vertexSets.push(Svg.pathToVertices(path, 30)); + loadSvg('./svg/terrain.svg') + .then(function(root) { + var paths = select(root, 'path'); + + var vertexSets = paths.map(function(path) { return Svg.pathToVertices(path, 30); }); + + var terrain = Bodies.fromVertices(400, 350, vertexSets, { + isStatic: true, + render: { + fillStyle: '#060a19', + strokeStyle: '#060a19', + lineWidth: 1 + } + }, true); + + World.add(world, terrain); + + var bodyOptions = { + frictionAir: 0, + friction: 0.0001, + restitution: 0.6 + }; + + World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) { + if (Query.point([terrain], { x: x, y: y }).length === 0) { + return Bodies.polygon(x, y, 5, 12, bodyOptions); + } + })); }); - - terrain = Bodies.fromVertices(400, 350, vertexSets, { - isStatic: true, - render: { - fillStyle: '#060a19', - strokeStyle: '#060a19', - lineWidth: 1 - } - }, true); - - World.add(world, terrain); - - var bodyOptions = { - frictionAir: 0, - friction: 0.0001, - restitution: 0.6 - }; - - World.add(world, Composites.stack(80, 100, 20, 20, 10, 10, function(x, y) { - if (Query.point([terrain], { x: x, y: y }).length === 0) { - return Bodies.polygon(x, y, 5, 12, bodyOptions); - } - })); - }); + } else { + Common.warn('Fetch is not available. Could not load SVG.'); } // add mouse control