Kelder/planet-wars
32
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

grids

Browse source
This commit is contained in:
ajuvercr 2019-10-20 15:53:23 +02:00
parent dbd32194a1
commit fd06dceeb2
4 changed files with 125 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
mapbuilder/index.html
View file

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Planetwars Mapbuilder</title> <title>Planetwars Mapbuilder</title>
<link rel="stylesheet" type="text/css" href="./static/res/style.css"> <!-- <link rel="stylesheet" type="text/css" href="./static/res/style.css"> -->
<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" /> <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
</head> </head>
@ -18,9 +18,11 @@
<a href="#">Contact</a> <a href="#">Contact</a>
</div> </div>
<div id="canvasWrapper" class="wrapper">
<canvas id="canvas" class="canvas"></canvas>
</div>
<button class="openbtn" onclick="toggleNav()">&#9776;</button> <button class="openbtn" onclick="toggleNav()">&#9776;</button>
<h2>Collapsed Sidepanel</h2>
<p>Content...</p>
</body> </body>
@ -36,6 +38,7 @@
nav_open = !nav_open; nav_open = !nav_open;
} }
</script> </script>
<script src="dist/bundle.js"></script> <script src="dist/bundle.js"></script>
</html> </html>

60
mapbuilder/src/index.ts
View file

@ -1,6 +1,64 @@
function main() { function main() {
const canvas = <HTMLCanvasElement>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"); 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);

105
mapbuilder/src/style/style.scss
View file

@ -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 { .sidepanel {
height: 100vh;
/* Specify a height */
width: 0;
/* 0 width - change this with JavaScript */ /* 0 width - change this with JavaScript */
height: 100vh;
width: 0;
/* sizing */
position: fixed; position: fixed;
/* Stay in place */
z-index: 1; z-index: 1;
/* Stay on top */
top: 0; top: 0;
right: 0; right: 0;
background-color: #111; background-color: $grey;
/* Black*/
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll;
/* Disable horizontal scroll */
padding-top: 60px; padding-top: 60px;
/* Place content 60px from the top */
transition: 0.5s; 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 { .openbtn {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
background-color: #111; background-color: $lightgrey;
color: white; color: white;
padding: 10px 15px; padding: 10px 15px;
border: none; 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%;
} }

4
mapbuilder/webpack.config.js
View file

@ -1,7 +1,7 @@
module.exports = { module.exports = {
mode: "development", mode: "development",
watch: true, watch: true,
entry: "./src/index.ts", entry: ["./src/index.ts", "./src/style/style.scss"],
output: { output: {
filename: "bundle.js", filename: "bundle.js",
path: __dirname + "/dist" path: __dirname + "/dist"
@ -16,4 +16,4 @@ module.exports = {
{ test: /\.ts?$/, loader: "ts-loader" } { test: /\.ts?$/, loader: "ts-loader" }
] ]
} }
}; };