ah crap I now see why people use fontend frameworks this is hell.
This commit is contained in:
parent
d14305cbca
commit
23fddbe799
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -8,24 +8,17 @@
|
|||
</head>
|
||||
<body>
|
||||
<!-- Canvas used to generate individual sprites off one sprite atlas -->
|
||||
<h4 id="status">Connection Status</h4>
|
||||
|
||||
<canvas class="hidden" id="spriteJank" width=24 height=24></canvas>
|
||||
<span class="left" id="left"><p>left</p></span>
|
||||
<div id="wrapwrap">
|
||||
<div class="wrapper" id="wrapper">
|
||||
<span class="canvasStack">
|
||||
<canvas oncontextmenu="return false;" class="canvas1" id="canvas" width=0 height=0></canvas>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
|
||||
<div id="game">
|
||||
<span id="leftBar">
|
||||
|
||||
<p id="status">Connection Status</p>
|
||||
</span>
|
||||
<span id="rightBar">
|
||||
<div id="canvas">
|
||||
|
||||
<div class="canvasContainer">
|
||||
<canvas oncontextmenu="return false;" id="canvas" width=0 height=0></canvas>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -35,6 +28,7 @@
|
|||
<input type="text" id="name" value="bob">
|
||||
<input type="submit" id="submit" value="join">
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<script src='scripts/script.js' type="module"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -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`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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])
|
||||
|
|
|
|||
|
|
@ -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!")
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
281
www/style.css
281
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 {
|
||||
|
||||
}
|
||||
|
|
|
|||
213
www/styleold.css
Normal file
213
www/styleold.css
Normal file
|
|
@ -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;
|
||||
|
||||
|
||||
}
|
||||
Loading…
Reference in a new issue