From fd06dceeb2a1bdc2eb364baed8ee622b666f1ada Mon Sep 17 00:00:00 2001 From: ajuvercr Date: Sun, 20 Oct 2019 15:53:23 +0200 Subject: [PATCH] grids --- mapbuilder/index.html | 9 ++- mapbuilder/src/index.ts | 60 +++++++++++++++++- mapbuilder/src/style/style.scss | 105 ++++++++++++++++++-------------- mapbuilder/webpack.config.js | 4 +- 4 files changed, 125 insertions(+), 53 deletions(-) diff --git a/mapbuilder/index.html b/mapbuilder/index.html index e8e4ff7..988d2c9 100644 --- a/mapbuilder/index.html +++ b/mapbuilder/index.html @@ -4,7 +4,7 @@ Planetwars Mapbuilder - + @@ -18,9 +18,11 @@ Contact +
+ +
+ -

Collapsed Sidepanel

-

Content...

@@ -36,6 +38,7 @@ nav_open = !nav_open; } + \ No newline at end of file diff --git a/mapbuilder/src/index.ts b/mapbuilder/src/index.ts index 3318eee..c823fa6 100644 --- a/mapbuilder/src/index.ts +++ b/mapbuilder/src/index.ts @@ -1,6 +1,64 @@ function main() { + const canvas = document.getElementById("canvas"); + const ctx = canvas.getContext('2d'); + + const width = canvas.clientWidth; + const height = canvas.clientHeight; + + canvas.width = width; + canvas.height = height; + + ctx.translate(width / 2, height / 2); + + + ctx.strokeStyle = "#333" + draw_grid( + ctx, [width, 100, 20], [width / 2, height / 2], [width, height], + 4, 0.30 + ); + ctx.fillStyle = "#ff5f00"; + + ctx.fillRect(0, 0, 100, 100); + console.log("hallo"); } -main(); +function draw_grid( + ctx: CanvasRenderingContext2D, + lines: number[], // number of pixels between lines, with smaller gettings lines + transform: [number, number], + size: [number, number], + init_width = 2, factor = 0.5) { + + ctx.save(); + + ctx.translate(-transform[0], -transform[1]); + + + for (let delta of lines) { + ctx.lineWidth = init_width; + + let xoff = transform[0] % delta; + let yoff = transform[1] % delta; + + ctx.beginPath(); + + for (let i = xoff; i < size[0]; i += delta) { + ctx.moveTo(i, 0); + ctx.lineTo(i, size[1]); + } + for (let j = yoff; j < size[1]; j += delta) { + ctx.moveTo(0, j); + ctx.lineTo(size[0], j); + } + + ctx.stroke(); + + init_width *= factor; + } + + ctx.restore(); +} + +setTimeout(main, 200); diff --git a/mapbuilder/src/style/style.scss b/mapbuilder/src/style/style.scss index 84d8a10..777415e 100644 --- a/mapbuilder/src/style/style.scss +++ b/mapbuilder/src/style/style.scss @@ -1,71 +1,82 @@ -/* The sidepanel menu */ +$grey: #333; +$orange: #ff5f00; +$lightgrey: lighten($grey, 20); +$darkgrey: darken($grey, 20); + +/* Remove defaults */ + +* { + padding: 0; + margin: 0; + border: none; + box-sizing: border-box; +} + + +/* Side panel styling */ .sidepanel { - height: 100vh; - /* Specify a height */ - width: 0; /* 0 width - change this with JavaScript */ + height: 100vh; + width: 0; + /* sizing */ position: fixed; - /* Stay in place */ z-index: 1; - /* Stay on top */ top: 0; right: 0; - background-color: #111; - /* Black*/ + background-color: $grey; overflow-x: hidden; - overflow-y: scroll; - /* Disable horizontal scroll */ padding-top: 60px; - /* Place content 60px from the top */ transition: 0.5s; - /* 0.5 second transition effect to slide in the sidepanel */ + a { + padding: 8px 8px 8px 32px; + text-decoration: none; + font-size: 25px; + color: white; + display: block; + transition: 0.3s; + } + a:hover { + color: $orange; + } + .closebtn { + position: absolute; + top: 0; + left: 0; + font-size: 36px; + } } - -/* The sidepanel links */ - -.sidepanel a { - padding: 8px 8px 8px 32px; - text-decoration: none; - font-size: 25px; - color: #818181; - display: block; - transition: 0.3s; -} - - -/* When you mouse over the navigation links, change their color */ - -.sidepanel a:hover { - color: #f1f1f1; -} - - -/* Position and style the close button (top right corner) */ - -.sidepanel .closebtn { - position: absolute; - top: 0; - left: 0; - font-size: 36px; -} - - -/* Style the button that is used to open the sidepanel */ - .openbtn { position: absolute; right: 5px; top: 5px; font-size: 20px; cursor: pointer; - background-color: #111; + background-color: $lightgrey; color: white; padding: 10px 15px; border: none; + &:hover { + background-color: $orange; + color: darken($color: $grey, $amount: 10); + } + &:focus { + outline: none; + } } -.openbtn:hover { - background-color: #444; + +/* Main body styling */ + +.wrapper { + background-color: darken($color: $grey, $amount: 20); + width: 100vw; + height: 100vh; + overflow: hidden; +} + +.canvas { + width: 100%; + height: 100%; } \ No newline at end of file diff --git a/mapbuilder/webpack.config.js b/mapbuilder/webpack.config.js index b8fbfc0..8f35160 100644 --- a/mapbuilder/webpack.config.js +++ b/mapbuilder/webpack.config.js @@ -1,7 +1,7 @@ module.exports = { mode: "development", watch: true, - entry: "./src/index.ts", + entry: ["./src/index.ts", "./src/style/style.scss"], output: { filename: "bundle.js", path: __dirname + "/dist" @@ -16,4 +16,4 @@ module.exports = { { test: /\.ts?$/, loader: "ts-loader" } ] } -}; \ No newline at end of file +};