From 61e0f458df9acaced13cfa3f8b62b84f874b3b0f Mon Sep 17 00:00:00 2001 From: Marcin Czerniak Date: Tue, 16 Mar 2021 11:15:58 +0100 Subject: [PATCH] chore: redesign --- nowy | 1 - src/grid.js | 48 ------------- src/img/logo.png | Bin 0 -> 6362 bytes src/index.html | 41 ++++++++++- src/main.js | 6 +- src/modules/floor.js | 45 ++++++++++++ src/modules/grid.js | 158 +++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 93 +++++++++++++++++++++++-- 8 files changed, 333 insertions(+), 59 deletions(-) delete mode 100644 nowy delete mode 100644 src/grid.js create mode 100644 src/img/logo.png create mode 100644 src/modules/floor.js create mode 100644 src/modules/grid.js diff --git a/nowy b/nowy deleted file mode 100644 index c32bed5..0000000 --- a/nowy +++ /dev/null @@ -1 +0,0 @@ -witam diff --git a/src/grid.js b/src/grid.js deleted file mode 100644 index 296a011..0000000 --- a/src/grid.js +++ /dev/null @@ -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(); -} - diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..a96489ddce4b1b13cef991117036bc0ca811713d GIT binary patch literal 6362 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 literal 0 HcmV?d00001 diff --git a/src/index.html b/src/index.html index f727066..2742d86 100644 --- a/src/index.html +++ b/src/index.html @@ -4,16 +4,51 @@ + + + + - + + + + + - Document + NEOSHOP Agent - +

+ +
+ logo +
+ +
+ LOGS +
+ +
+ +
+ + + + +
+ +
+
+ +
+
+ +
+ +
\ No newline at end of file diff --git a/src/main.js b/src/main.js index d869846..532bfa5 100644 --- a/src/main.js +++ b/src/main.js @@ -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); }); \ No newline at end of file diff --git a/src/modules/floor.js b/src/modules/floor.js new file mode 100644 index 0000000..2c965c9 --- /dev/null +++ b/src/modules/floor.js @@ -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(); + } +} diff --git a/src/modules/grid.js b/src/modules/grid.js new file mode 100644 index 0000000..f08dfdb --- /dev/null +++ b/src/modules/grid.js @@ -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(); + } + } + +} + diff --git a/src/styles.css b/src/styles.css index cf649e0..2e2aae3 100644 --- a/src/styles.css +++ b/src/styles.css @@ -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%); -} \ No newline at end of file + 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; +}