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

chore: redesign

Browse Source
This commit is contained in:
Marcin Czerniak 2021-03-16 11:15:58 +01:00
parent 621bad76fc
commit 61e0f458df
8 changed files with 333 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
nowy
View File

@ -1 +0,0 @@
witam

48
src/grid.js
View File

@ -1,48 +0,0 @@
const Grid = function(canvas) {
let grid = [[]];
let ctx;
let storages = []
this.setCanvasSize = (canvas) => {
canvas.width = 2000;
canvas.height = 900;
}
this.processGrid = () => {
const fact = (a, value = 1) => Array(a).fill(value, 0, a);
const cartesian = (arr1, arr2) => arr1.map(a => (a && arr2) || fact(arr2.length, 0));
this.grid = cartesian(
[...fact(6), 0, ...fact(6), 0, ...fact(6)],
[...fact(1), 0, ...fact(2), 0, ...fact(2), 0, ...fact(1)]
);
}
this.drawGrid = () => {
for (let [x, line] of this.grid.entries()) {
for (let [y, shouldRender] of line.entries()) {
if (shouldRender) {
this.neonRect(x * 100, y * 100, 100, 100);
}
}
}
}
this.neonRect = (x, y, w, h) => {
this.ctx.strokeStyle= "#fff";
this.ctx.lineWidth = 7;
this.ctx.strokeRect(x, y, w, h);
}
this.addStorageCenter = (x, y) => {
this.neonRect(x * 100, y * 100, 100, 100, '#ff0000', 10);
}
this.getStorageCenters = () => storages
this.ctx = canvas.getContext('2d');
this.setCanvasSize(canvas);
this.processGrid();
this.drawGrid();
}

BIN
src/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

41
src/index.html
View File

@ -4,16 +4,51 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<script src="grid.js"></script>
<!-- Modules -->
<script src="modules/floor.js"></script>
<script src="modules/grid.js"></script>
<!-- Main script file -->
<script src="main.js"></script>
<title>Document</title>
<title>NEOSHOP Agent</title>
</head>
<body>
<canvas id="canvas-grid"></canvas>
<main>
<div class="header">
<img src="img/logo.png" alt="logo">
</div>
<div class="logs-label">
<span>LOGS</span>
</div>
<div class="content">
<div class="boards">
<canvas id="canvas-floor"></canvas>
<canvas id="canvas-grid"></canvas>
<canvas id="canvas-agent"></canvas>
<canvas id="canvas-products"></canvas>
</div>
<div class="logs-wrapper">
<div class="logs-content">
<!-- All logs should go here -->
</div>
</div>
</div>
</main>
</body>
</html>

6
src/main.js
View File

@ -1,5 +1,9 @@
window.addEventListener('DOMContentLoaded', () => {
const floorCanvas = document.getElementById('canvas-floor');
const gridCanvas = document.getElementById('canvas-grid');
const agentCanvas = document.getElementById('canvas-agent');
const productsCanvas = document.getElementById('canvas-products');
const floor = new Floor(floorCanvas);
const grid = new Grid(gridCanvas);
grid.addStorageCenter(9, 0);
});

45
src/modules/floor.js Normal file
View File

@ -0,0 +1,45 @@
class Floor {
constructor(canvas) {
this.ctx = canvas.getContext('2d');
this.setCanvasSize(canvas);
this.drawFloor();
}
setCanvasSize (canvas) {
canvas.width = 2000;
canvas.height = 900;
}
drawFloor() {
let tileWidth = 50;
let tileHeight = 50;
for (let x = 0; x < 2000; x += tileWidth) {
for (let y = 0; y < 900; y += tileHeight) {
this.tile(x, y, tileWidth, tileHeight);
}
}
}
tile(x, y, w, h) {
this.ctx.strokeStyle = '#202020';
this.ctx.strokeRect(x, y, w, h);
this.roundRect(x, y, w, h);
}
roundRect( x, y, w, h, r = 20) {
this.ctx.strokeStyle = '#202020';
this.ctx.beginPath();
this.ctx.moveTo(x + r, y);
this.ctx.lineTo(x + w - r, y);
this.ctx.quadraticCurveTo(x + w, y, x + w, y + r);
this.ctx.lineTo(x + w, y + h - r);
this.ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
this.ctx.lineTo(x + r, y + h);
this.ctx.quadraticCurveTo(x, y + h, x, y + h - r);
this.ctx.lineTo(x, y + r);
this.ctx.quadraticCurveTo(x, y, x + r, y);
this.ctx.closePath();
this.ctx.stroke();
}
}

158
src/modules/grid.js Normal file
View File

@ -0,0 +1,158 @@
const GRID_FIELD_TYPE = Object.freeze({
PATH: 0,
SHELF: 1,
STORAGE: 2
});
class Grid {
constructor(canvas) {
this.grid = [[]];
this.ctx;
this.ctx = canvas.getContext('2d');
this.setCanvasSize(canvas);
this.processGrid();
this.drawShelfs();
this.drawStorages();
}
getGrid () {
return this.grid;
}
setCanvasSize (canvas) {
canvas.width = 2000;
canvas.height = 900;
}
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));
this.grid = cartesian(
[...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6)],
[...fact(1), GRID_FIELD_TYPE.PATH, ...fact(2), GRID_FIELD_TYPE.PATH, ...fact(2), GRID_FIELD_TYPE.PATH]
);
const lastLine = [...fact(6), GRID_FIELD_TYPE.PATH, ...fact(6, GRID_FIELD_TYPE.STORAGE), GRID_FIELD_TYPE.PATH, ...fact(6)];
for (let i = 0; i < 20; i++) {
this.grid[i] = [...this.grid[i], lastLine[i]];
}
console.log(this.grid);
}
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);
}
}
}
}
drawStorages () {
let isFirstOfType = true;
let isLastOfType = false;
let firstX;
for (let [x, line] of this.grid.entries()) {
for (let [y, type] of line.entries()) {
if (type === GRID_FIELD_TYPE.STORAGE) {
if (this.grid[x + 1] && this.grid[x + 1][y] !== GRID_FIELD_TYPE.STORAGE) {
isLastOfType = true;
}
if (isFirstOfType) {
isFirstOfType = false;
firstX = x;
this.storage(x * 100, y * 100, 100, 100, true, false, true, true);
} else if (isLastOfType) {
isLastOfType = false;
isFirstOfType = true;
this.storage(x * 100, y * 100, 100, 100, true, true, true, false);
this.storeLabel(firstX * 100, y * 100, (x - firstX + 1) * 100, 100);
} else {
this.storage(x * 100, y * 100, 100, 100, true, false, true, false);
}
}
}
}
}
storeLabel(x, y, w, h) {
let fontSize = 40;
this.ctx.font = `${fontSize}px Montserrat`;
this.ctx.textAlign = "center";
this.ctx.fillStyle = 'yellow';
this.ctx.fillText("STORE", x + (w/2), y + (h/2) + 15);
}
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);
}
storage (x, y, w, h, hasTop, hasRight, hasBottom, hasLeft) {
this.ctx.strokeStyle = '#ffff00';
this.ctx.lineWidth = 5;
if (hasTop) {
this.ctx.beginPath();
this.ctx.moveTo(x, y);
this.ctx.lineTo(x + w, y);
this.ctx.stroke();
}
if (hasRight) {
this.ctx.beginPath();
this.ctx.moveTo(x + w, y);
this.ctx.lineTo(x + w, y + h);
this.ctx.stroke();
}
if (hasBottom) {
this.ctx.beginPath();
this.ctx.moveTo(x, y + h);
this.ctx.lineTo(x + w, y + h);
this.ctx.stroke();
}
if (hasLeft) {
this.ctx.beginPath();
this.ctx.moveTo(x, y);
this.ctx.lineTo(x, y + h);
this.ctx.stroke();
}
this.drawFixIfOnEdge(x, y, w, h);
}
drawFixIfOnEdge(x, y, w, h) {
const offsetFix = 2;
if (x === 0) {
this.ctx.beginPath();
this.ctx.moveTo(x + offsetFix, y);
this.ctx.lineTo(x + offsetFix, y + h);
this.ctx.stroke();
} else if (x + w === 2000) {
this.ctx.beginPath();
this.ctx.moveTo(x + w - offsetFix, y);
this.ctx.lineTo(x + w - offsetFix, y + h);
this.ctx.stroke();
}
if (y === 0) {
this.ctx.beginPath();
this.ctx.moveTo(x, y + offsetFix);
this.ctx.lineTo(x + w, y + offsetFix);
this.ctx.stroke();
} else if (y + h === 900) {
this.ctx.beginPath();
this.ctx.moveTo(x, y + h - offsetFix);
this.ctx.lineTo(x + w, y + h - offsetFix);
this.ctx.stroke();
}
}
}

93
src/styles.css
View File

@ -1,16 +1,97 @@
/* ######################################## */
/* # Main styling # */
/* ######################################## */
html, body {
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
position: relative;
background-color: #141414;
font-family: 'Montserrat', sans-serif;
color: white;
}
canvas {
width: 70%;
main {
display: grid;
grid-template-columns: 3fr 1fr;
grid-template-rows: 1fr auto;
position: absolute;
left: 50%;
width: 100%;
top: 50%;
transform: translate(-50%, -50%);
}
transform: translateY(-50%);
}
/* ######################################## */
/* # Header styling # */
/* ######################################## */
.header, .logs-label {
display: flex;
justify-content: center;
color: yellow;
align-items: flex-end;
}
.logs-label {
margin: 0 20px 30px 10px;
}
/* ######################################## */
/* # Logs styling # */
/* ######################################## */
.logs-wrapper {
border: 2px solid white;
height: 100%;
width: 20vw;
margin-left: 4.5vw;
position: relative;
}
.logs-content {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: auto;
}
.logs-content::-webkit-scrollbar {
width: 10px;
}
.logs-content::-webkit-scrollbar-track {
background: #222;
}
.logs-content::-webkit-scrollbar-thumb {
background: #ddd;
}
/* ######################################## */
/* # Boards styling # */
/* ######################################## */
.content {
width: 100%;
display: flex;
justify-content: center;
grid-column: 1 / span 2
}
.boards {
width: 70vw;
height: 0;
padding-top: 31.5%;
position: relative;
}
.content canvas {
top: 0;
left: 50%;
transform: translateX(-50%);
position: absolute;
width: 70vw;
}