From 23fddbe799e0a20c9a7ce3fce1ae6b6f8d23899b Mon Sep 17 00:00:00 2001 From: Alexander Bass Date: Wed, 22 Jun 2022 20:16:57 -0400 Subject: [PATCH] ah crap I now see why people use fontend frameworks this is hell. --- scripts/game.mjs | 2 +- www/index.html | 18 +- www/scripts/display/html.js | 30 ++- www/scripts/game/game.js | 4 +- www/scripts/interface/game/mouse.js | 11 +- www/scripts/interface/scene.js | 8 +- www/style.css | 281 +++++----------------------- www/styleold.css | 213 +++++++++++++++++++++ 8 files changed, 309 insertions(+), 258 deletions(-) create mode 100644 www/styleold.css diff --git a/scripts/game.mjs b/scripts/game.mjs index 29383df..3ae6c39 100644 --- a/scripts/game.mjs +++ b/scripts/game.mjs @@ -7,7 +7,7 @@ export class Game { constructor(name) { this.name = name; this.players = []; - this.world = new World([32,32]) + this.world = new World([16,9]) } addPlayer(id, name) { diff --git a/www/index.html b/www/index.html index d036da3..a76fa7e 100644 --- a/www/index.html +++ b/www/index.html @@ -8,24 +8,17 @@ -

Connection Status

+ -

left

 -
-
- - - -
-
+
- +

Connection Status

 -
- +
+
@@ -35,6 +28,7 @@
+
diff --git a/www/scripts/display/html.js b/www/scripts/display/html.js index 299dabe..f6332a2 100644 --- a/www/scripts/display/html.js +++ b/www/scripts/display/html.js @@ -2,9 +2,29 @@ import {game} from "../game/game.js" export var canvas = document.getElementById('canvas'); export var ctx = canvas.getContext('2d'); -export var wrapper = document.getElementById('wrapper'); +export var wrapper = document.getElementById('game'); +export var rightBar = document.getElementById('rightBar'); +export var leftBar = document.getElementById('leftBar'); +canvas.width = game.tileSize*game.gridSize[0]; +canvas.height = game.tileSize*game.gridSize[1]; +scaleEverythingGood() -canvas.width = game.tileSize*game.gridSize[0] * 1; -canvas.height = game.tileSize*game.gridSize[1] * 1; -// wrapper.style.height = `${canvas.height}px` -// wrapper.style.width = `${canvas.height * 2}px` +window.addEventListener('resize', scaleEverythingGood); + +function scaleEverythingGood() { + const width = window.innerWidth-2; + const height = window.innerHeight-2; + let canvasWidth + if (canvas.width > canvas.height) { + canvasWidth = Math.max(width, height) + } else { + canvasWidth = width + } + canvasWidth = canvasWidth/4 + canvas.style.width = `${canvasWidth}px`; + rightBar.style.width = `${canvasWidth}px` + leftBar.style.width = `${canvasWidth/2}px` + const wrapperWidth = rightBar.style.width + leftBar.style.width; + wrapper.style.width = `${wrapperWidth}px` + wrapper.style.height = `${height}px` +} diff --git a/www/scripts/game/game.js b/www/scripts/game/game.js index 3468419..7c15010 100644 --- a/www/scripts/game/game.js +++ b/www/scripts/game/game.js @@ -6,8 +6,8 @@ class Game { this.status = status; } reset() { - game = new Game(16, [32, 32], null, false); + game = new Game(16, [16, 9], null, false); } } -export var game = new Game(16, [32, 32]) +export var game = new Game(16, [16, 9]) diff --git a/www/scripts/interface/game/mouse.js b/www/scripts/interface/game/mouse.js index 8cb87af..70d24a3 100644 --- a/www/scripts/interface/game/mouse.js +++ b/www/scripts/interface/game/mouse.js @@ -1,6 +1,7 @@ import {game} from "../../game/game.js"; import { clickCanvas } from "/scripts/net/netcode.js"; import { getButton } from "/scripts/interface/game/picker.js"; +import { canvas } from "../../display/html.js" class Cursor { constructor(){ @@ -36,12 +37,14 @@ function mouseMoved(event) { } function getMousePosition(canvas, event) { + const tileSize = game.tileSize // Get mouse position on canvas const rect = canvas.getBoundingClientRect(); - const x = event.clientX - rect.left; - const y = event.clientY - rect.top; - const xu = cursor.x - const yu = cursor.y + const mouseX = event.clientX - rect.left; + const mouseY = event.clientY - rect.top; + // scale mouse coordinates to canvas coordinates + const xu = Math.floor((mouseX * canvas.width / canvas.clientWidth)/tileSize); + const yu = Math.floor((mouseY * canvas.height / canvas.clientHeight)/tileSize); const button = event.button console.log("Click!") diff --git a/www/scripts/interface/scene.js b/www/scripts/interface/scene.js index 87a8182..ed1b76f 100644 --- a/www/scripts/interface/scene.js +++ b/www/scripts/interface/scene.js @@ -2,13 +2,13 @@ import * as picker from "/scripts/interface/game/picker.js" export function changeScene(scene) { if (scene == "game") { - document.getElementById('menu').style = "display: none;" - document.getElementById('container').style = "" + // document.getElementById('menu').style = "display: none;" + // document.getElementById('container').style = "" // picker.create(); } if (scene == "mainmenu") { - document.getElementById('menu').style = "" - document.getElementById('container').style = "display: none;" + // document.getElementById('menu').style = "" + // document.getElementById('container').style = "display: none;" // picker.destroy(); } }; diff --git a/www/style.css b/www/style.css index 0f19786..f8dd09e 100644 --- a/www/style.css +++ b/www/style.css @@ -1,230 +1,51 @@ -/* - - - - - - - - - - - - - - - - - -/* #mydiv { - position: absolute; - cursor: move; - z-index: 10; - background: coral; - width: 30px; - height: 30px; - border: 1px solid #d3d3d3; -} */ - - - -span.button > img { - pointer-events: none; - image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */ - image-rendering: -moz-crisp-edges; /* Firefox */ - image-rendering: -o-crisp-edges; /* Opera */ - image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ - image-rendering: pixelated; /* Chrome */ - -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ - width: 70px; - height: 70px; - transform: translate(0, 8px); - border: 2px solid darkgray; - border-radius: 4px; - background: lightgray; -} - -span.button { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - display: inline-block; - background: tan; - width:90px; - height:90px; - margin: 5px 5px 5px 5px; - vertical-align: middle; - border-radius: 3px; - white-space: normal; - align-items: center; - cursor: pointer; - -} - -span.button:hover { - background: gray; -} - -.canvas1{ - z-index: 0; -} - -.canvas3 { - z-index: 2; -} - -.canvasStack { - - /* top: 50px; */ - - background: darkslategray; - -} - -#wrapper { - - /* display: flex; */ - /* justify-content: right; */ - /* left: 50%; */ - /* transform: translate(-50%, 0); */ - /* position: absolute; */ - background: khaki; - width: 750px; - height: 750px; -} - -#wrapwrap { - display: block; - margin: 0 auto; - margin-left: auto; - margin-right: auto; -} - -main { - - margin-left: auto; - margin-right: auto; -} - -canvas { - -webkit-user-select: none; /* Chrome all / Safari all */ - -moz-user-select: none; /* Firefox all */ - -ms-user-select: none; /* IE 10+ */ - -o-user-select: none; - user-select: none; - image-rendering: -moz-crisp-edges; - image-rendering: -webkit-crisp-edges; - image-rendering: pixelated; - image-rendering: crisp-edges; -} - - -.hidden { - display: none; -} - -body { -text-align: center; -background-color: #2c2f33; -color: white; -font-variant: normal; -font-family: verdana; -} - -h1 { - font-size: 25pt; - -} -h2 { - font-size: 20pt; -} -p{ - /* font-size: 12pt; */ - /* text-align: left; */ - margin: 0; -} - -h4 { - font-size: 12pt; - padding: 0; - margin: 0; -} - -.startButton { -width: 100.5%; -background-color: #4CAF50; -color: white; -padding-top: 14px; -padding-bottom: 14px; -margin-top: 4px; -margin-bottom: 4px; -border: none; -border-radius: 4px; -cursor: pointer; -} - -.subSection { - width: 100%; - text-align: center; - font-size: 12pt; - color: white; - padding: 0; - background-color: #4d5259; - border-style: solid; - border: solid white; - border-radius: 6px; - padding-bottom: 2px; - padding-top: 2px; - margin-top: 3px; - margin-bottom: 3px; -} - -.slider { - -webkit-appearance: none; - width: 98%; - background: none; - outline: none; - margin-top: 10px; - margin-bottom: 10px; - height: 1px; - border: 2px solid #white; - background-color: #fff; -} - -.slider::-webkit-slider-thumb { - -webkit-appearance: none; - border: 1px solid #bdc3c7; - width: 20px; - height: 20px; - background: #4CAF50; - border-radius: 3px; - cursor: pointer; -} - -.slider::-moz-range-thumb { - border: 1px solid #bdc3c7; - width: 20px; - height: 20px; - background: #4CAF50; - border-radius: 3px; - cursor: pointer; -} - -.slider::-moz-range-track { - width: 100%; - height: 5px; - background-color: #fff; -} - -span.spacer{ - display:inline-block; - width: 1px; - height: 25px; - color: #fff; - background-color: #fff; - border: 1px solid #fff; - border-radius: 6px; - - -} +canvas { + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + -o-user-select: none; + user-select: none; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-crisp-edges; + image-rendering: pixelated; + image-rendering: crisp-edges; + cursor: pointer; + width: inherit; + height: inherit; +} + +body { + margin: 0px; +} + +#status { + position: absolute; + display: block; +} +#game { + margin: 0px; + padding: 0px; + background: tan; + width: 100%; + height: 100px; + display: flex; +} + +#leftBar { + margin: 0px; + padding: 0px; + display: inline-flex; + background: red; + height: inherit; +} +#rightBar { + margin: 0px; + padding: 0px; + display: inline-flex; + background: orange; + height: inherit; + align-items: center; + +} +.canvasContainer { + +} diff --git a/www/styleold.css b/www/styleold.css new file mode 100644 index 0000000..a39e754 --- /dev/null +++ b/www/styleold.css @@ -0,0 +1,213 @@ + +/* #mydiv { + position: absolute; + cursor: move; + z-index: 10; + background: coral; + width: 30px; + height: 30px; + border: 1px solid #d3d3d3; +} */ + + + +span.button > img { + pointer-events: none; + image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */ + image-rendering: -moz-crisp-edges; /* Firefox */ + image-rendering: -o-crisp-edges; /* Opera */ + image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ + image-rendering: pixelated; /* Chrome */ + -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ + width: 70px; + height: 70px; + transform: translate(0, 8px); + border: 2px solid darkgray; + border-radius: 4px; + background: lightgray; +} + +span.button { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + display: inline-block; + background: tan; + width:90px; + height:90px; + margin: 5px 5px 5px 5px; + vertical-align: middle; + border-radius: 3px; + white-space: normal; + align-items: center; + cursor: pointer; + +} + +span.button:hover { + background: gray; +} + +.canvas1{ + z-index: 0; +} + +.canvas3 { + z-index: 2; +} + +.canvasStack { + + /* top: 50px; */ + + background: darkslategray; + +} + +#wrapper { + + /* display: flex; */ + /* justify-content: right; */ + /* left: 50%; */ + /* transform: translate(-50%, 0); */ + /* position: absolute; */ + background: khaki; + width: 750px; + height: 750px; +} + +#wrapwrap { + display: block; + margin: 0 auto; + margin-left: auto; + margin-right: auto; +} + +main { + + margin-left: auto; + margin-right: auto; +} + +canvas { + -webkit-user-select: none; /* Chrome all / Safari all */ + -moz-user-select: none; /* Firefox all */ + -ms-user-select: none; /* IE 10+ */ + -o-user-select: none; + user-select: none; + image-rendering: -moz-crisp-edges; + image-rendering: -webkit-crisp-edges; + image-rendering: pixelated; + image-rendering: crisp-edges; +} + + +.hidden { + display: none; +} + +body { +text-align: center; +background-color: #2c2f33; +color: white; +font-variant: normal; +font-family: verdana; +} + +h1 { + font-size: 25pt; + +} +h2 { + font-size: 20pt; +} +p{ + /* font-size: 12pt; */ + /* text-align: left; */ + margin: 0; +} + +h4 { + font-size: 12pt; + padding: 0; + margin: 0; +} + +.startButton { +width: 100.5%; +background-color: #4CAF50; +color: white; +padding-top: 14px; +padding-bottom: 14px; +margin-top: 4px; +margin-bottom: 4px; +border: none; +border-radius: 4px; +cursor: pointer; +} + +.subSection { + width: 100%; + text-align: center; + font-size: 12pt; + color: white; + padding: 0; + background-color: #4d5259; + border-style: solid; + border: solid white; + border-radius: 6px; + padding-bottom: 2px; + padding-top: 2px; + margin-top: 3px; + margin-bottom: 3px; +} + +.slider { + -webkit-appearance: none; + width: 98%; + background: none; + outline: none; + margin-top: 10px; + margin-bottom: 10px; + height: 1px; + border: 2px solid #white; + background-color: #fff; +} + +.slider::-webkit-slider-thumb { + -webkit-appearance: none; + border: 1px solid #bdc3c7; + width: 20px; + height: 20px; + background: #4CAF50; + border-radius: 3px; + cursor: pointer; +} + +.slider::-moz-range-thumb { + border: 1px solid #bdc3c7; + width: 20px; + height: 20px; + background: #4CAF50; + border-radius: 3px; + cursor: pointer; +} + +.slider::-moz-range-track { + width: 100%; + height: 5px; + background-color: #fff; +} + +span.spacer{ + display:inline-block; + width: 1px; + height: 25px; + color: #fff; + background-color: #fff; + border: 1px solid #fff; + border-radius: 6px; + + +}