Skip to content

Commit 02fc20b

Browse files
author
Stefano Demichelis
committed
including pre-existing folders and files: src and test.
1 parent 997bcf0 commit 02fc20b

File tree

8 files changed

+213
-0
lines changed

8 files changed

+213
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
yarn.lock
2+
node_modules/

‎package.json

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "a-maze-ing",
3+
"version": "1.0.0",
4+
"description": "a maze like experience",
5+
"main": "index.js",
6+
"repository": "https://github.com/Steppico/a-maze-ing.git",
7+
"author": "Stefano Demichelis <[email protected]>",
8+
"license": "MIT",
9+
"private": false,
10+
"scripts": {
11+
"tests": "mocha"
12+
},
13+
"type": "module",
14+
"dependencies": {
15+
"chai": "^4.2.0",
16+
"mocha": "^7.1.1"
17+
}
18+
}

‎src/arrow.png

3.7 KB
Loading

‎src/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>A Maze-ing!</title>
9+
<link rel="stylesheet" type='text/css' href=style.css />
10+
</head>
11+
12+
<body>
13+
<button class="moveForward">⬇️</button>
14+
<button class="rotate">↩️</button>
15+
<button class="execute">✅</button>
16+
<p class="pattern"></p>
17+
<button class='clear'>clear canvas</button>
18+
</body>
19+
<script type="text/javascript" src="script.js"></script>
20+
21+
</html>

‎src/script.js

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
window.onload = () => {
2+
const arrow = "./arrow.png";
3+
const moveForward = document.getElementsByClassName('moveForward')[0];
4+
const rotate = document.getElementsByClassName('rotate')[0];
5+
const executeCommands = document.getElementsByClassName('execute')[0];
6+
const element = document.createElement('canvas');
7+
const pattern = document.getElementsByClassName('pattern')[0];
8+
const movements = [];
9+
10+
element.id = "canvas"
11+
element.width = 500;
12+
element.height = 500;
13+
element.tabIndex = '1';
14+
15+
document.body.insertBefore(element, moveForward);
16+
17+
const canvas = element;
18+
const ctx = canvas.getContext('2d');
19+
let x = (canvas.width / 2) - 50;
20+
let y = 0;
21+
let pointing = "down";
22+
const theArrow = canvas.getContext('2d');
23+
24+
image = new Image();
25+
image.src = arrow;
26+
27+
image.onload = function () {
28+
theArrow.drawImage(image, x, y, 100, 100);
29+
}
30+
31+
const directions = move => {
32+
switch (move) {
33+
case 'forward': {
34+
if (y < element.height) {
35+
switch (pointing) {
36+
case "down": {
37+
y += 100;
38+
break;
39+
};
40+
case "top": {
41+
y -= 100;
42+
break;
43+
};
44+
case "left": {
45+
x -= 100;
46+
break;
47+
};
48+
default: {
49+
x += 100;
50+
}
51+
}
52+
console.log("x: ", x, "y: ", y);
53+
theArrow.drawImage(image, x, y, 100, 100);
54+
};
55+
break;
56+
};
57+
case 'rotate': {
58+
switch (pointing) {
59+
case "down": {
60+
pointing = "left";
61+
break;
62+
};
63+
case "left": {
64+
pointing = "top";
65+
break;
66+
};
67+
case "top": {
68+
pointing = "right";
69+
break;
70+
};
71+
default: {
72+
pointing = "down";
73+
break;
74+
}
75+
}
76+
console.log(pointing);
77+
ctx.save();
78+
theArrow.translate(x + 50, y + 50);
79+
theArrow.rotate(90 * Math.PI / 180);
80+
theArrow.translate(-(x + 50), -(y + 50));
81+
theArrow.save();
82+
theArrow.drawImage(image, x, y, 100, 100);
83+
theArrow.restore();
84+
ctx.restore();
85+
break;
86+
}
87+
}
88+
}
89+
90+
const addMovement = direction => {
91+
movements.push(direction);
92+
pattern.append(movements.length + ". " + direction + " ");
93+
}
94+
const executeAll = (moves) => {
95+
let i = 0;
96+
let intervalId = setInterval(() => {
97+
if (i > moves.length - 1) {
98+
clearInterval(intervalId);
99+
movements.length = 0;
100+
} else {
101+
theArrow.clearRect(0, 0, 500, 500)
102+
directions(moves[i]);
103+
}
104+
i++;
105+
}, 1000);
106+
}
107+
108+
moveForward.addEventListener('click', () => { addMovement('forward') });
109+
rotate.addEventListener('click', () => { addMovement('rotate') });
110+
executeCommands.addEventListener('click', () => { executeAll(movements) })
111+
112+
};

‎src/style.css

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
body {
2+
display: block;
3+
}
4+
5+
#canvas {
6+
background-color: turquoise;
7+
border: 1px solid black;
8+
}
9+
10+
button {
11+
font-size: 20px;
12+
}
13+
14+
.pattern {
15+
display: block;
16+
}

‎test/test.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// import expect from 'mocha';
2+
mocha.setup('bdd');
3+
4+
const expect = chai.expect;
5+
6+
const { JSDOM } = jsdom;
7+
8+
describe("canvas", () => {
9+
let dom = new JSDOM(`<!DOCTYPE html><html><body><p>Hello world</p></body></html>`)
10+
before(() => {
11+
const canvas = dom.window.document.createElement('canvas');
12+
canvas.id = 'canvas';
13+
dom.window.document.body.append(canvas);
14+
});
15+
16+
it("should exists", () => {
17+
const canvas = dom.window.document.getElementById('canvas');
18+
expect(canvas).to.exist;
19+
});
20+
21+
after(() => {
22+
console.log(dom.window.document.getElementsByTagName('canvas').length);
23+
})
24+
})

‎test/testrunner.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<title>Test runner</title>
9+
</head>
10+
11+
<body>
12+
<div id="mocha"></div>
13+
<script src="../node_modules/mocha/mocha.js"> </script>
14+
<script src="../node_modules/chai/chai.js"> </script>
15+
<script src="../node_modules/jsdom/lib/jsdom/"></script>
16+
<script src="test.js"></script>
17+
<script>mocha.run()</script>
18+
</body>
19+
20+
</html>

0 commit comments

Comments
 (0)