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 0000000..a96489d Binary files /dev/null and b/src/img/logo.png differ 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; +}