Commit ec2e92e4 authored by Tobias Liese's avatar Tobias Liese

frontend work drag and drop for states now possible

parent 80a39efa
Pipeline #92952 failed with stages
in 31 seconds
......@@ -4,7 +4,8 @@
<meta charset="UTF-8">
<title>Aut0m4t0n // Alpha</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Tomorrow&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Tomorrow&display=swap"
rel="stylesheet">
</head>
<body>
<ul>
......@@ -19,6 +20,16 @@
<canvas id="canvas" width="1" height="1"></canvas>
</div>
<div class="contextMenu">
<ul class="options">
<li class="menu-option">Back</li>
<li class="menu-option">Reload</li>
<li class="menu-option">Save</li>
<li class="menu-option">Save As</li>
<li class="menu-option">Inspect</li>
</ul>
</div>
<script src="main.js"></script>
</body>
</html>
\ No newline at end of file
/*@media (prefers-color-scheme: dark) {*/
/* :root {*/
/* --main-bg-color: black;*/
/* --main-ac-color: #212121;*/
/* --main-color: whitesmoke;*/
/* --toolbar-height: 2vh;*/
/* }*/
/*}*/
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: black;
--main-ac-color: #212121;
--main-color: whitesmoke;
--toolbar-height: 2vh;
}
}
@media (prefers-color-scheme: no-preference), (prefers-color-scheme: light) {
:root {
--main-bg-color: whitesmoke;
--main-ac-color: #0d47a1;
--main-color: whitesmoke;
--toolbar-height: 2vh;
}
:root {
--main-bg-color: whitesmoke;
--main-ac-color: #0d47a1;
--main-color: whitesmoke;
--toolbar-height: 2vh;
}
* {
margin: 0;
padding: 0;
background-color: var(--main-bg-color);
font-family: 'Tomorrow', sans-serif;
color: var(--main-color);
}
ul {
......@@ -39,7 +41,6 @@ li {
li a {
display: block;
color: var(--main-color);
text-align: center;
padding: var(--toolbar-height);
text-decoration: none;
......@@ -61,3 +62,28 @@ li a:hover {
border-radius: 15px;
background-color: var(--main-ac-color);
}
.contextMenu {
width: 120px;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: relative;
display: none;
}
.contextMenu.options {
list-style: none;
padding: 10px 0;
}
.contextMenu.options.menu-option {
font-weight: 500;
font-size: 14px;
padding: 10px 40px 10px 20px;
cursor: pointer;
}
.contextMenu.options.menu-option:hover {
background: rgba(0, 0, 0, 0.2);
}
class Field {
private canvas: HTMLCanvasElement = document.getElementsByTagName('canvas')[0];
private context = this.canvas.getContext("2d");
private states: State[] = new Array<State>()
readonly states: State[] = new Array<State>()
readonly xOrigin: number = this.canvas.getBoundingClientRect().left
readonly yOrigin: number = this.canvas.getBoundingClientRect().top
constructor() {
this.rePaint()
this.addState(1, 1, "stonks")
console.log(this.canvas.getBoundingClientRect().top)
}
addState(x: number, y: number, name: String) {
this.states.push(new State(x, y, name))
addState(x: number, y: number, name: string) {
this.context.font = "40px Dancing Script"
let textSize: TextMetrics = field.context.measureText(name)
this.states.push(new State(x, y, name, textSize.width * 0.8, textSize.actualBoundingBoxDescent))
this.drawState(this.states[this.states.length - 1])
}
getStateByIndex(i: number): State {
return this.states[i]
}
updateState(i: number, x, y, name) {
this.clearState(this.states[i])
this.states[i].x = x
this.states[i].y = y
if (name != null) {
this.states[i].name = name
}
this.drawState(this.states[i])
}
rePaint() {
this.canvas.height = 1000
this.canvas.width = document.getElementsByClassName("menu").item(0).clientWidth
for (let state of this.states) {
console.log("test")
this.drawState(state)
}
}
private drawState(state: State) {
this.context.font = "40px Dancing Script"
this.context.fillStyle = "#212121"
this.context.textAlign = "center"
this.context.beginPath()
this.context.arc(state.x, state.y, 10, 0, 2 * Math.PI)
this.context.stroke()
this.context.arc(
state.x,
state.y,
state.radius, 0, 2 * Math.PI)
this.context.fill()
this.context.fillStyle = "white"
this.context.fillText(
state.name,
state.x, state.y + state.height,
)
}
private clearState(state: State) {
this.context.fillStyle = "black"
this.context.arc(
state.x,
state.y,
state.radius + 1, 0, 2 * Math.PI)
this.context.fill()
}
getStateIndex(x: number, y: number): number {
let i: number = 0;
for (let state of this.states) {
let yy = y + state.radius / 2
if (Math.sqrt(Math.pow(x - state.x, 2) + Math.pow(yy - state.y, 2)) <= state.radius) {
return i
}
i++
}
}
}
const field: Field = new Field();
let selected: number
let dragMode: boolean = false
class State {
x: number
y: number
name: string
radius: number
height: number
constructor(x, y, name) {
constructor(x, y, name, radius, height) {
this.x = x
this.y = y
this.name = name
this.radius = radius
this.height = height
}
}
let field: Field = new Field();
window.onresize = field.rePaint
field.addState(100, 50, "q0")
onmousemove = (event: MouseEvent) => {
if (dragMode) {
field.updateState(selected, event.x - field.xOrigin, event.y - field.yOrigin, null)
} else {
selected = field.getStateIndex(event.clientX - field.xOrigin, event.clientY - field.yOrigin)
if (selected != null) {
document.body.style.cursor = "move"
} else {
document.body.style.cursor = "default"
}
}
}
onmousedown = () => {
if (selected != null) {
dragMode = true
}
}
onmouseup = () => {
dragMode = false
}
onresize = () => {
field.rePaint()
}
window.addEventListener("contextmenu", e => {
e.preventDefault();
});
// let webSocket = new WebSocket(
// 'ws://' + window.location.host + "/websocket");
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment