From ea0c1a1ff68750195967f7f5ec5dae90dba405b1 Mon Sep 17 00:00:00 2001 From: ElnuDev Date: Sun, 7 Jan 2024 17:05:50 -0800 Subject: [PATCH] Initial commit --- .gitignore | 3 ++- index.html | 17 +++++++++++++++++ main.nim | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 104 insertions(+), 4 deletions(-) create mode 100644 index.html create mode 100644 style.css diff --git a/.gitignore b/.gitignore index fd1ba5d..3b45e7d 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ .direnv /result -main \ No newline at end of file +main +main.js \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..be2b0cf --- /dev/null +++ b/index.html @@ -0,0 +1,17 @@ + + + + + + Document + + + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/main.nim b/main.nim index 383aae9..6031432 100644 --- a/main.nim +++ b/main.nim @@ -1,3 +1,51 @@ -echo "Hello world!" -var name: string = readLine(stdin) -echo "Hi, ", name, "!" \ No newline at end of file +import std/dom +import std/strutils +import std/strformat +let canvas = document.getElementById("canvas") +canvas.addEventListener("mousedown", proc(e: Event) = + let e = cast[MouseEvent](e) + + if e.button != 1: + return + + canvas.style.cursor = "move" + canvas.onmousemove = proc(e: Event) = + let e = cast[MouseEvent](e) + canvas.scrollTop = e.clientY +) +canvas.addEventListener("mouseup", proc(e: Event) = + canvas.style.cursor = "auto" + canvas.onmousemove = nil +) +document.getElementById("button-add-card").onclick = proc(e: Event) = + var card = document.createElement("div") + card.className = "card" + card.innerText = "New card" + var x_offset, y_offset = 0.0 + let drag = proc(e: Event) = + let e = cast[MouseEvent](e) + + card.style.left = fmt"{cast[float](e.clientX) - x_offset}px" + + card.style.top = fmt"{cast[float](e.clientY) - y_offset}px" + + echo e.clientX + card.addEventListener("mousedown", proc(e: Event) = + let e = cast[MouseEvent](e) + + if e.button != 0: + return + + let left = if card.style.left != "": parseInt(($(card.style.left))[0..^3]) else: 0 + x_offset = cast[float](e.clientX - left) + + let top = if card.style.top != "": parseInt(($(card.style.top))[0..^3]) else: 0 + y_offset = cast[float](e.clientY - top) + + document.onmousemove = drag + document.onmouseup = proc(e: Event) = document.onmousemove = nil + ) + canvas.appendChild(card) +proc example(e: Event) = + echo "Document is ready" +document.addEventListener("DOMContentLoaded", example) \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..2bdc46a --- /dev/null +++ b/style.css @@ -0,0 +1,34 @@ +body { + font-family: sans-serif; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + background: darkgrey; +} + +#canvas { + background: gray; + width: 800px; + height: 600px; + border-radius: 4px; + overflow: hidden; + position: relative; +} + +.card { + background: white; + position: absolute; + font-size: 1.25em; + width: 8em; + padding: 0.5em; + box-shadow: 0.25em 0.25em black; + cursor: pointer; + user-select: none; + + &:active { + background: lightgrey; + z-index: 1; + } +} \ No newline at end of file