s452639/psi
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: Shelves

Browse Source
This commit is contained in:
Marcin Czerniak 2021-05-19 23:37:58 +02:00
parent d2180ac7d2
commit 20615a427c
6 changed files with 90 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/img/shelves/FRIDGE.svg Normal file
View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<g id="FRIDGE" transform="translate(330)">
<g id="Rectangle_1" data-name="Rectangle 1" transform="translate(-330)" fill="#00f8ff" stroke="#fff" stroke-width="3" opacity="0.05">
<rect width="100" height="100" stroke="none"/>
<rect x="1.5" y="1.5" width="97" height="97" fill="none"/>
</g>
<g id="Group_1" data-name="Group 1" opacity="0.26">
<path id="Path_1" data-name="Path 1" d="M-291.832,0l-30.122,97.125h35.735L-254.952,0Z" transform="translate(0 1.489)" fill="#fff"/>
<path id="Path_2" data-name="Path 2" d="M-291.832,0l-30.122,97.125h12.5L-278.191,0Z" transform="translate(45 1.489)" fill="#fff"/>
</g>
<g id="Rectangle_2" data-name="Rectangle 2" transform="translate(-330)" fill="none" stroke="#fff" stroke-width="4">
<rect width="100" height="100" stroke="none"/>
<rect x="2" y="2" width="96" height="96" fill="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 995 B

16
src/img/shelves/SHELF_FRIDGE.svg Normal file
View File

@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<g id="SHELF_FRIDGE" transform="translate(330)">
<g id="Rectangle_1" data-name="Rectangle 1" transform="translate(-330)" fill="#cef4f5" stroke="#fff" stroke-width="3" opacity="0.2">
<rect width="100" height="100" stroke="none"/>
<rect x="1.5" y="1.5" width="97" height="97" fill="none"/>
</g>
<g id="Group_1" data-name="Group 1" opacity="0">
<path id="Path_1" data-name="Path 1" d="M-291.832,0l-30.122,97.125h35.735L-254.952,0Z" transform="translate(0 1.489)" fill="#fff"/>
<path id="Path_2" data-name="Path 2" d="M-291.832,0l-30.122,97.125h12.5L-278.191,0Z" transform="translate(45 1.489)" fill="#fff"/>
</g>
<g id="Rectangle_2" data-name="Rectangle 2" transform="translate(-330)" fill="none" stroke="#fff" stroke-width="4">
<rect width="100" height="100" stroke="none"/>
<rect x="2" y="2" width="96" height="96" fill="none"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 997 B

1
src/index.html
View File

@ -19,6 +19,7 @@
<script src="utilities.js"></script>
<script src="logic/product.js"></script>
<script src="logic/time.js"></script>
<script src="logic/shelf.js"></script>
<script src="view/floor.js"></script>
<script src="view/grid.js"></script>

28
src/logic/shelf.js Normal file
View File

@ -0,0 +1,28 @@
const SHELF_TYPE = Object.freeze({
FRIDGE: 'FRIDGE',
BREAD_SHELF: 'BREAD_SHELF',
FURNITURE_SHELF: 'FURNITURE_SHELF',
SEASONAL_SHELF: 'SEASONAL_SHELF',
MEDICINE_SHELF: 'MEDICINE_SHELF',
BASKET_FOR_BALLS: 'BASKET_FOR_BALLS',
SPORT_CLOTHES_SHELF: 'SPORT_CLOTHES_SHELF',
UNIVERSAL_SHELF: 'UNIVERSAL_SHELF',
UNIVERSAL_FOOD_SHELF: 'UNIVERSAL_FOOD_SHELF',
});
class Shelf {
/**
*
* @param {SHELF_TYPE} type
* @param {string} icon
*/
constructor(type) {
this.type = type;
}
static random() {
return new Shelf(
SHELF_TYPE[Object.keys(SHELF_TYPE)[Math.floor(Object.keys(SHELF_TYPE).length * Math.random())]]
)
}
}

2
src/view/agentController.js
View File

@ -236,8 +236,6 @@ class AgentController {
this.roundRect(-(w / 2), -(h / 2), w, h);
// Eyes
// this.roundRect(10 - (w / 2), 10 - (h / 2), w / 4, h / 4);
// this.roundRect(80 - (3 * w / 4), 10 - (h / 2), w / 4, h / 4);
this.ctx.fillStyle = 'red';
this.ctx.fillRect(-(w/2) + 20, (-h/2) - 10, w - 40, 10);

35
src/view/grid.js
View File

@ -1,7 +1,7 @@
const GRID_FIELD_TYPE = Object.freeze({
PATH: 0,
SHELF: 1,
STORAGE: 2
PATH: 'PATH',
SHELF: 'SHELF',
STORAGE: 'STORAGE'
});
class Grid {
@ -9,6 +9,7 @@ class Grid {
constructor(canvas) {
this.grid = [[]];
this.shelves = [[]];
this.ctx;
this.ctx = canvas.getContext('2d');
@ -26,6 +27,10 @@ class Grid {
return this.grid;
}
getShelves () {
return this.shelves;
}
setCanvasSize (canvas) {
canvas.width = 2000;
canvas.height = 900;
@ -33,7 +38,7 @@ class Grid {
processGrid () {
const fact = (a, value = GRID_FIELD_TYPE.SHELF) => Array(a).fill(value, 0, a);
const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
const cartesian = (arr1, arr2) => arr1.map(a => (a != GRID_FIELD_TYPE.PATH && arr2) || fact(arr2.length, GRID_FIELD_TYPE.PATH));
this.grid = cartesian(
[...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6)],
@ -44,13 +49,22 @@ class Grid {
for (let i = 0; i < 20; i++) {
this.grid[i] = [...this.grid[i], lastLine[i]];
}
this.shelves = new Array(20).fill(0).map(e => new Array(9));
for (let [x, line] of this.grid.entries()) {
for (let [y, type] of line.entries()) {
if (type === GRID_FIELD_TYPE.SHELF) {
this.shelves[x][y] = Shelf.random();
}
}
}
}
drawShelfs () {
for (let [x, line] of this.grid.entries()) {
for (let [y, type] of line.entries()) {
if (type === GRID_FIELD_TYPE.SHELF) {
this.shelf(x * 100, y * 100, 100, 100);
this.shelf(this.shelves[x][y], x * 100, y * 100, 100, 100);
}
}
}
@ -115,11 +129,20 @@ class Grid {
this.ctx.fillText("STORE", x + (w/2), y + (h/2) + 15);
}
shelf (x, y, w, h) {
shelf (shelf, x, y, w, h) {
this.ctx.strokeStyle = '#ffffff';
this.ctx.lineWidth = 5;
this.ctx.strokeRect(x, y, w, h);
this.drawFixIfOnEdge(x, y, w, h);
if (shelf.type == SHELF_TYPE.FRIDGE) {
var img = new Image();
img.src = "img/shelves/FRIDGE.svg";
img.onload = () => {
this.ctx.drawImage(img, x, y, w, h);
}
}
}
storage (x, y, w, h, hasTop, hasRight, hasBottom, hasLeft) {