diff --git a/index.html b/index.html index 941579f..9acbd86 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,13 @@ - + Inventory Manager + - + - + diff --git a/src/canvas.js b/src/canvas.js new file mode 100644 index 0000000..6aa7b8d --- /dev/null +++ b/src/canvas.js @@ -0,0 +1,108 @@ +var canvas = document.querySelector('canvas'); + +canvas.width = window.innerWidth; +canvas.height = window.innerHeight; + + + +var c = canvas.getContext('2d'); + +// Rect +//c.fillStyle = 'rgba(255,0,255,0.5)'; +//c.fillRect(100,200,100,100,0.5); +//c.fillStyle = 'rgba(0,0,255,0.5)'; +//c.fillRect(300,400,100,100); +//c.fillStyle = 'rgba(0,255,0,0.5)'; +//c.fillRect(400,100,100,100); + +// Line +//c.beginPath(); +//c.moveTo(50,300); +//c.lineTo(300,100); +//c.lineTo(400,200); +//c.strokeStyle = "fe3477"; +//c.stroke(); + +// Arc +//c.beginPath(); +//c.arc(300, 300, 30, 0.0, Math.PI, true); +//c.strokeStyle = 'blue'; +//c.stroke(); + +// Circles +//for(var i = 100; i < (window.innerWidth - 100); i=i+40) { +// var y = Math.random() * window.innerHeight; +// c.beginPath(); +// c.arc(i, y, 5, 0.0, Math.PI * 2, true); +// c.strokeStyle = 'red'; +// c.stroke(); +//} + +// Coil +function coil(x,y, width,od){ + var radius = od / 2; + + // bottom line + c.beginPath(); + c.moveTo(x+width, y+od); + c.lineTo(x,y+od); + + // left curve + c.ellipse(x,y+radius, radius/4, radius, 0, 0.5 * Math.PI, 1.5 * Math.PI); + + // top line + c.lineTo(x+width,y); + c.strokeStyle = 'black'; + c.stroke(); + + // right outer circle + c.beginPath(); + c.ellipse(x+width,y+radius, radius/4, radius, 0, 0.5 * Math.PI, 3.5 * Math.PI); + c.strokeStyle = 'black'; + c.stroke(); + + // right inner circle + c.beginPath(); + c.ellipse(x+width,y+radius, radius/8, radius/2, 0, 0.5 * Math.PI, 3.5 * Math.PI); + c.strokeStyle = 'black'; + c.stroke(); +} + +for (var i=40; i < (12*40); i=i+40) { + for (var j=50; j < (12*50); j=j+50) { + coil(j,i, 20 + (5 * Math.random()),30 + (5 * Math.random())); + } +} + +const coils = { + xs: [50,50,50,5], + ys: [50,150,250,35], + widths: [68,75,68,75], + ods: [80,80,100,100] +}; + + +//window.addEventListener('load', () => { +// const canvas = document.querySelector('#canvas'); +// const ctx = canvas.getContext("2d"); +// +// reloadEvent(canvas, ctx); +//}); +// +//function reloadEvent(x, y){ +// window.addEventListener('resize', () => { +// resize(x, y); +// }); +//} +// +//function draw(x) { +// x.strokeStyle = 'blue'; +// x.lineWidth = '5'; +// x.strokeRect(0, 0, window.innerWidth, window.innerHeight); +//} +// +//function resize(x, y){ +// x.height = window.innerHeight; +// x.width = window.innerWidth; +// draw(y); +//} diff --git a/src/inventory.js b/src/inventory.js deleted file mode 100644 index 9cfdb66..0000000 --- a/src/inventory.js +++ /dev/null @@ -1,24 +0,0 @@ -window.addEventListener('load', () => { - const canvas = document.querySelector('#inventory'); - const ctx = canvas.getContext("2d"); - - reloadEvent(canvas, ctx); -}); - -function reloadEvent(x, y){ - window.addEventListener('resize', () => { - resize(x, y); - }); -} - -function draw(x) { - x.strokeStyle = 'blue'; - x.lineWidth = '5'; - x.strokeRect(0, 0, window.innerWidth, window.innerHeight); -} - -function resize(x, y){ - x.height = window.innerHeight; - x.width = window.innerWidth; - draw(y); -} diff --git a/styles/style.css b/styles/style.css index 9480d7c..07edd52 100644 --- a/styles/style.css +++ b/styles/style.css @@ -1,8 +1,14 @@ +/* * { margin: 0; padding: 0; box-sizing: border-box; } -#inventory { +*/ +canvas { border: 1px solid #000000; } + +body { + margin: 0; +}