Skip to content
This repository was archived by the owner on Sep 11, 2023. It is now read-only.

Commit 77df958

Browse files
csouchetcsouchet
authored
[FEAT] Update Javascript challenge (#14)
Update based on what we now have in the TypeScript project.
1 parent b806be7 commit 77df958

File tree

6 files changed

+298
-40
lines changed

6 files changed

+298
-40
lines changed

‎library/es-webpack/README.md‎

Lines changed: 58 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,59 @@
1-
# ♻️ Usage
1+
# Environment with vanilla Javascript and Webpack
2+
3+
## ♻️ Usage
4+
5+
The production bundle is available in [./dist/main.bundle.js](./dist/main.bundle.js).
6+
7+
### Initialize the library
8+
```javascript
9+
import { Bingo } from 'main.bundle.js';
10+
11+
// Initialize bingo-generator
12+
// 'bingo-container' is the id of the HTMLElement that renders the Bingo
13+
const bingo = new Bingo('bingo-container');
14+
```
15+
16+
### Generate a new grid with random numbers on each square
17+
```javascript
18+
bingo.resetGrid();
19+
```
20+
The result should be something like this:
21+
<p align="center">
22+
<img title="Grid" src="../../images/grid.png">
23+
</p>
24+
25+
### Update the background color of a square, without redrawing all the grid
26+
```javascript
27+
bingo.updateBackgroundColor('36', 'Pink');
28+
```
29+
The result should be something like this:
30+
<p align="center">
31+
<img title="Grid" src="../../images/background-color.png">
32+
</p>
33+
34+
### Register a handler on the grid
35+
```javascript
36+
bingo.registerHandler(cell => {
37+
alert(`You click on square ${cell.value}`);
38+
});
39+
```
40+
41+
This API could be useful for the implementation of the demonstrators. \
42+
The current handler parameter may not be enough or the wrong one. You are free to adapt it.
43+
44+
## Technical part
245

346
The project is configured with Jest for the tests, Playwright & Jest-image-snapshot for the visual tests, ESLint for the code formatting.
447

5-
## IDE Configuration Tips
48+
### IDE Configuration Tips
649

7-
### IntelliJ/WebStorm
50+
#### IntelliJ/WebStorm
851
If you have a problem with IntelliJ, try to change the configuration of ESLint in the IntelliJ preferences, like:
952
![eslint-config.png](../../images/es-webpack-eslint-config.png)
1053

11-
## Commands
54+
### Commands
1255

13-
### Build and start a development server
56+
#### Build and start a development server
1457
`npm run start`
1558

1659
A server is launched with an HTML page to test the library manually. \
@@ -19,33 +62,32 @@ A new tab is automatically open in the browser with the url http://localhost:808
1962

2063
![Grid](../../images/start_library_rendering.png)
2164

22-
23-
### Format the code
65+
#### Format the code
2466
`npm run lint`
2567

26-
### Clean the built directories
68+
#### Clean the built directories
2769
`npm run clean`
2870

29-
### Launch tests
30-
#### All tests
71+
#### Launch tests
72+
##### All tests
3173
`npm run test`
3274

33-
#### Unit tests
75+
##### Unit tests
3476
`npm run test:unit`
3577

36-
#### Unit tests + Coverage
78+
##### Unit tests + Coverage
3779
`npm run test:unit:coverage`
3880

39-
#### E2E tests
81+
##### E2E tests
4082
`npm run test:e2e`
4183

42-
#### E2E tests + Coverage
84+
##### E2E tests + Coverage
4385
`npm run test:e2e:coverage`
4486

45-
### Build the _production_ bundle
87+
#### Build the _production_ bundle
4688
`npm run build`
4789

48-
### All commands
90+
#### All commands
4991
Run a clean production build with lint and test
5092

5193
`npm run all`

‎library/es-webpack/dev/index.html‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,28 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>BINGO challenge</title>
6-
</head>
7-
<body>
8-
<header class="info-centered">
9-
<h2>Fun starts here</h2>
10-
</header>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>BINGO challenge</title>
6+
</head>
7+
<body>
8+
<header class="info-centered">
9+
<h2>Fun starts here</h2>
10+
</header>
1111

12-
<section>
13-
<!-- container used to display the BINGO -->
14-
<div id="bingo-container"></div>
15-
</section>
16-
</body>
17-
</html>
12+
<section class="flex-column-container">
13+
<div>
14+
<div id="controls-panel" class="flex-row-container">
15+
<input id="btn-new-grid" type="button" title="Generate new Grid" value="New Grid" class="button"/>
16+
17+
<div class="flex-column-container">
18+
<label id="background" for="field-update-bckgd">Update the background of this square</label>
19+
<input id="field-update-bckgd" type="text" maxLength="3" placeholder="put square number"/>
20+
</div>
21+
</div>
22+
23+
<!-- container used to display the BINGO -->
24+
<div id="bingo-container"></div>
25+
</div>
26+
</section>
27+
</body>
28+
</html>

‎library/es-webpack/dev/index.js‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,27 @@ import { Bingo } from '../src';
44
function startBingoApp() {
55
const container = document.getElementById('bingo-container');
66
if (container) {
7-
new Bingo().initializeGrid(container);
7+
return new Bingo('bingo-container');
88
} else {
99
alert('Container must be provided');
1010
}
1111
}
1212

13-
startBingoApp();
13+
const bingo = startBingoApp();
14+
15+
// reset grid
16+
document.getElementById('btn-new-grid').addEventListener('click', () => {
17+
bingo.resetGrid();
18+
});
19+
20+
// update background
21+
const updateBackground = document.getElementById('field-update-bckgd');
22+
updateBackground.onchange = () => {
23+
bingo.updateBackgroundColor(updateBackground.value, 'Pink');
24+
updateBackground.value = ''; // reset
25+
};
26+
27+
// register handler on grid
28+
bingo.registerHandler(cell => {
29+
alert(`You click on square ${cell.value}`);
30+
});

‎library/es-webpack/dev/static/css/main.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,49 @@
1+
.flex-column-container {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-around;
5+
}
6+
7+
.flex-column-container > div {
8+
margin-top: 75px;
9+
}
10+
11+
.flex-row-container {
12+
display: flex;
13+
flex-direction: row;
14+
justify-content: space-around;
15+
}
16+
117
.info-centered {
218
margin: 0 auto;
319
width: 100%;
420
text-align: center;
21+
}
22+
23+
#controls-panel {
24+
margin-left: 50px;
25+
}
26+
27+
#bingo-container {
28+
margin-top: 20px;
29+
margin-left: 50px;
30+
width: calc(100% - 100px);
31+
overflow: hidden;
32+
}
33+
34+
.button {
35+
border-radius: 4px;
36+
padding: 5px;
37+
background-color: LightGreen;
38+
color: #121e12;
39+
font-size: small;
40+
font-family: monospace;
41+
}
42+
43+
body {
544
font-family: monospace;
645
}
46+
47+
label {
48+
font-size: small;
49+
}

‎library/es-webpack/src/graph.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { mxgraph } from './initializer';
2+
3+
export class BingoGraph extends mxgraph.mxGraph {
4+
constructor(container) {
5+
super(container);
6+
this.configure();
7+
this.generateWelcomeGrid();
8+
}
9+
10+
configure() {
11+
this.setCellsLocked(true);
12+
this.setCellsSelectable(false);
13+
14+
// Disable folding for container mxCell because we don't need it.
15+
// This also prevents requesting unavailable images (see #185) as we don't override MxGraph folding default images.
16+
// like http 404 http://localhost:8080/images/expanded.gif (mxgraph default)
17+
this.foldingEnabled = false;
18+
19+
const defaultVertexStyle = this.getStylesheet().getDefaultVertexStyle();
20+
// defaultVertexStyle[mxgraph.mxConstants.STYLE_FONTFAMILY] = '';
21+
defaultVertexStyle[mxgraph.mxConstants.STYLE_FONTSIZE] = 15;
22+
defaultVertexStyle[mxgraph.mxConstants.STYLE_FONTCOLOR] = 'MidnightBlue';
23+
defaultVertexStyle[mxgraph.mxConstants.STYLE_FILLCOLOR] = 'White';
24+
defaultVertexStyle[mxgraph.mxConstants.STYLE_STROKECOLOR] = 'Black';
25+
}
26+
27+
generateWelcomeGrid() {
28+
// Gets the default parent for inserting new cells.
29+
// This is normally the first child of the root (ie. layer 0).
30+
const parent = this.getDefaultParent();
31+
32+
// Adds cell to the model in a single step
33+
this.getModel().beginUpdate();
34+
try {
35+
this.insertVertex(
36+
parent,
37+
null,
38+
'Welcome to the BINGO!',
39+
0,
40+
0,
41+
this.container.clientWidth,
42+
this.container.clientHeight,
43+
'strokeOpacity=0',
44+
);
45+
} finally {
46+
// Updates the display
47+
this.getModel().endUpdate();
48+
}
49+
}
50+
}

0 commit comments

Comments
 (0)