diff --git a/views/projects/hex/scripts/index.js b/views/projects/hex/scripts/index.js
index 52aabec..7ae5958 100755
--- a/views/projects/hex/scripts/index.js
+++ b/views/projects/hex/scripts/index.js
@@ -55,7 +55,7 @@ function initDocument(hx, w, h, t) {
Result
-
+
`,
@@ -81,6 +81,7 @@ function createFlag(hex, w, h, type, canvas) {
const ctx = canvas.getContext("2d");
canvas.width = w;
canvas.height = h;
+ canvas.style.aspectRatio = `${w / h}`;
// Initialize stuff
diff --git a/views/projects/woz/scripts/index.js b/views/projects/woz/scripts/index.js
index 9d65817..197bbf6 100755
--- a/views/projects/woz/scripts/index.js
+++ b/views/projects/woz/scripts/index.js
@@ -24,7 +24,7 @@ function initDocument(hx, w, h, t) {
Result
-
+
`,
diff --git a/views/scripts/windows.js b/views/scripts/windows.js
index 4314672..65be3e8 100755
--- a/views/scripts/windows.js
+++ b/views/scripts/windows.js
@@ -55,6 +55,9 @@ class WindowObject {
this.windowManager.addEventListener("touchend", (e) =>
this.event__dragMouseUp(e, true)
);
+ this.windowObject.addEventListener("keydown", (e) =>
+ this.event__responseKeyDown(e)
+ );
this.windowObject.addEventListener("mousedown", (e) =>
WindowObject.raiseWindow(this.windowObject)
@@ -167,6 +170,49 @@ class WindowObject {
}
}
+ event__responseKeyDown(e) {
+ e.preventDefault();
+
+ switch (e.code) {
+ case "Backspace":
+ this.destroy();
+ break;
+ case "Space":
+ this.maximizeWindow();
+ break;
+ case "ArrowUp":
+ if (e.shiftKey)
+ this.windowObject.style.height =
+ this.windowObject.offsetHeight - 10 + "px";
+ else
+ this.windowObject.style.top = this.windowObject.offsetTop - 10 + "px";
+ break;
+ case "ArrowDown":
+ if (e.shiftKey)
+ this.windowObject.style.height =
+ this.windowObject.offsetHeight + 10 + "px";
+ else
+ this.windowObject.style.top = this.windowObject.offsetTop + 10 + "px";
+ break;
+ case "ArrowLeft":
+ if (e.shiftKey)
+ this.windowObject.style.width =
+ this.windowObject.offsetWidth - 10 + "px";
+ else
+ this.windowObject.style.left =
+ this.windowObject.offsetLeft - 10 + "px";
+ break;
+ case "ArrowRight":
+ if (e.shiftKey)
+ this.windowObject.style.width =
+ this.windowObject.offsetWidth + 10 + "px";
+ else
+ this.windowObject.style.left =
+ this.windowObject.offsetLeft + 10 + "px";
+ break;
+ }
+ }
+
static raiseWindow(windowObj) {
windowObj.parentElement.querySelectorAll(".window-object").forEach((x) => {
if (x.style.zIndex > 50) x.style.zIndex -= 1;
@@ -180,8 +226,11 @@ class WindowObject {
static createWindow(windowRef, content, srcdoc, w, h) {
const windowObject = document.createElement("div");
windowObject.classList.add("window-object");
- windowObject.style.width = `calc(${w}px + 1.5em)`;
- windowObject.style.height = `calc(${h}px + 3.5em)`;
+ windowObject.style.width = `calc(${w}px + 2.75em)`;
+ windowObject.style.height = `calc(${h}px + 4.5em)`;
+ windowObject.style.left = `calc(50vw - ${w / 2}px)`;
+ windowObject.style.top = `calc(50vh - ${h / 2}px)`;
+ windowObject.tabIndex = "0";
{
const windowManager = document.createElement("div");
diff --git a/views/styles/windows.css b/views/styles/windows.css
index d73b7c7..907d9de 100755
--- a/views/styles/windows.css
+++ b/views/styles/windows.css
@@ -16,10 +16,10 @@ div.window-object {
grid-template-rows: max-content auto;
grid-gap: 0.25em;
position: fixed;
- top: calc(50vh - 150px);
- left: calc(50vw - 200px);
- width: 400px;
- height: 300px;
+ width: 600px;
+ height: 500px;
+ left: calc(50vw - 300px);
+ top: calc(50vh - 250px);
min-width: 10em;
min-height: 2em;
@@ -145,4 +145,6 @@ div.window-object > iframe.window-content {
height: 100%;
width: 100%;
border: var(--border-style);
+ min-height: 0;
+ min-width: 0;
}