diff --git a/birb.js b/birb.js
index 316c5f1..b09c98d 100644
--- a/birb.js
+++ b/birb.js
@@ -461,6 +461,41 @@ if (window === window.top) {
canvas.width = sharedFrames.base.pixels[0].length * CANVAS_PIXEL_SIZE;
canvas.height = MAX_HEIGHT * CANVAS_PIXEL_SIZE;
document.body.appendChild(canvas);
+
+ // Make window elements draggable
+ // Get every .window-header element
+ // Get its parent element
+ const windowHeaders = document.querySelectorAll(".window-header");
+ // Make each window draggable
+ windowHeaders.forEach((window) => {
+ makeDraggable(window);
+ });
+}
+
+function makeDraggable(windowHeader) {
+ let isMouseDown = false;
+ let offsetX = 0;
+ let offsetY = 0;
+
+ // Get the parent window element
+ const windowElement = windowHeader.parentElement;
+
+ windowHeader.addEventListener("mousedown", (e) => {
+ isMouseDown = true;
+ offsetX = e.clientX - windowElement.offsetLeft;
+ offsetY = e.clientY - windowElement.offsetTop;
+ });
+
+ document.addEventListener("mouseup", () => {
+ isMouseDown = false;
+ });
+
+ document.addEventListener("mousemove", (e) => {
+ if (isMouseDown) {
+ windowElement.style.left = `${e.clientX - offsetX}px`;
+ windowElement.style.top = `${e.clientY - offsetY}px`;
+ }
+ });
}
/** @type {CanvasRenderingContext2D} */
diff --git a/index.html b/index.html
index 1311888..cff2e2e 100644
--- a/index.html
+++ b/index.html
@@ -16,31 +16,34 @@
}
:root {
- --border-size: 3px;
+ --border-size: 2px;
--neg-border-size: calc(var(--border-size) * -1);
--double-border-size: calc(var(--border-size) * 2);
--neg-double-border-size: calc(var(--neg-border-size) * 2);
+ --border-color: #000000;
}
.window {
+ font-family: "Monocraft";
+ z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
- /* transform: scale(3); */
- width: 200px;
- height: 200px;
+ /* transform: scale(0.8); */
+ /* width: 200px; */
+ /* height: 200px; */
background-color: #ffecda;
box-shadow:
- var(--border-size) 0 black,
- var(--neg-border-size) 0 black,
- 0 var(--neg-border-size) black,
- 0 var(--border-size) black,
- var(--double-border-size) 0 black,
- var(--neg-double-border-size) 0 black,
- 0 var(--neg-double-border-size) black,
- 0 var(--double-border-size) black,
- 0 0 0 var(--border-size) black,
+ var(--border-size) 0 var(--border-color),
+ var(--neg-border-size) 0 var(--border-color),
+ 0 var(--neg-border-size) var(--border-color),
+ 0 var(--border-size) var(--border-color),
+ var(--double-border-size) 0 var(--border-color),
+ var(--neg-double-border-size) 0 var(--border-color),
+ 0 var(--neg-double-border-size) var(--border-color),
+ 0 var(--double-border-size) var(--border-color),
+ 0 0 0 var(--border-size) var(--border-color),
0 0 0 var(--double-border-size) white,
var(--double-border-size) 0 0 var(--border-size) white,
var(--neg-double-border-size) 0 0 var(--border-size) white,
@@ -52,14 +55,13 @@
}
.window-header {
- font-family: "Monocraft";
box-sizing: border-box;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 7px;
- padding-top: 1px;
+ padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
@@ -68,9 +70,9 @@
var(--border-size) 0 #ffa3cb,
var(--neg-border-size) 0 #ffa3cb,
0 var(--neg-border-size) #ffa3cb,
- var(--neg-border-size) var(--border-size) black,
- var(--border-size) var(--border-size) black;
- color: black;
+ var(--neg-border-size) var(--border-size) var(--border-color),
+ var(--border-size) var(--border-size) var(--border-color);
+ color: var(--border-color);
}
.window-title {
@@ -78,6 +80,7 @@
flex-grow: 1;
user-select: none;
color: #ffecda;
+ font-size: 16px;
}
.window-close {
@@ -102,8 +105,14 @@
var(--border-size) 0 #ffecda,
var(--neg-border-size) 0 #ffecda,
0 var(--border-size) #ffecda,
- 0 var(--neg-border-size) black,
- 0 var(--border-size) black;
+ 0 var(--neg-border-size) var(--border-color),
+ 0 var(--border-size) var(--border-color);
+ display: flex;
+ flex-direction: column;
+ padding-left: 15px;
+ padding-right: 15px;
+ padding-top: 8px;
+ padding-bottom: 8px;
}
.window-close {
@@ -111,6 +120,26 @@
padding: none;
}
+ .window-list-item {
+ font-size: 14px;
+ padding-top: 5px;
+ padding-bottom: 5px;
+ opacity: 0.6;
+ }
+
+ .window-list-item:hover {
+ opacity: 1;
+ cursor: pointer;
+ }
+
+ .window-separator {
+ width: 100%;
+ height: 1px;
+ background-color: #000000;
+ box-sizing: border-box;
+ margin-top: 6px;
+ margin-bottom: 6px;
+ }
@@ -121,7 +150,7 @@
-
+
+
+
+
+
Field Guide
+
Decorations
+
Programs
+
+
+
Settings
+