From 68e94fa602aae454ab676b1e85fb77eebf1e270b Mon Sep 17 00:00:00 2001 From: droak Date: Wed, 22 May 2024 10:52:34 +0100 Subject: [PATCH] add windows layout --- public/index.html | 1 - src/components/window.ts | 55 ++++++++++++++++++++++------------------ src/index.ts | 40 ++++++++++++++--------------- src/windows/about_us.ts | 8 ++++++ src/windows/mission.ts | 8 ++++++ 5 files changed, 66 insertions(+), 46 deletions(-) create mode 100644 src/windows/about_us.ts create mode 100644 src/windows/mission.ts diff --git a/public/index.html b/public/index.html index bc1facc..63ae0d3 100644 --- a/public/index.html +++ b/public/index.html @@ -21,7 +21,6 @@
-
diff --git a/src/components/window.ts b/src/components/window.ts index 877ed64..1795965 100644 --- a/src/components/window.ts +++ b/src/components/window.ts @@ -1,4 +1,8 @@ -export const window = (dimensions: string, content: HTMLElement) => { +export const window = ( + dimensions: string, + title: String, + content: HTMLElement, +) => { const canvas = document.getElementById("canvas"); const base = document.createElement("div"); @@ -8,19 +12,29 @@ export const window = (dimensions: string, content: HTMLElement) => { // Header const header = document.createElement("div"); - header.className = - "absolute top-0 left-0 w-full h-6 bg-pastel-blue border-b-2 border-pastel-grey rounded-t-2xl"; + header.className = `absolute top-0 left-0 w-full h-10 bg-topology-bg border-b-2 border-topology-border rounded-t-2xl`; // Header buttons const genericBtnStyle = - "absolute top-1/2 h-4 w-4 border-2 border-pastel-grey rounded-full -translate-y-1/2 cursor-pointer"; + "absolute top-1/2 h-6 w-6 border-2 border-topology-border rounded-full -translate-y-1/2 cursor-pointer"; const genericBtnImgStyle = - "absolute h-3 w-3 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"; + "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"; + + const close = document.createElement("button"); + close.className = + genericBtnStyle + " bg-topology-red left-4 !border-topology-border"; + close.innerHTML = + "X"; + close.onclick = () => { + canvas.removeChild(base); + }; const maximize = document.createElement("button"); - maximize.className = genericBtnStyle + " bg-pastel-green right-10"; + maximize.className = genericBtnStyle + " bg-topology-green left-12"; maximize.innerHTML = - ""; + "+"; maximize.onclick = () => { base.className = "w-full h-full"; header.className = header.className.replace(" rounded-t-2xl", ""); @@ -30,11 +44,8 @@ export const window = (dimensions: string, content: HTMLElement) => { }; const minimize = document.createElement("button"); - minimize.className = genericBtnStyle + " bg-pastel-green right-10"; - minimize.innerHTML = - ""; + minimize.className = genericBtnStyle + " bg-pastel-green left-12"; + minimize.innerHTML = "-"; minimize.onclick = () => { base.className = "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 border-2 border-pastel-grey rounded-2xl " + @@ -45,24 +56,18 @@ export const window = (dimensions: string, content: HTMLElement) => { header.appendChild(maximize); }; - const close = document.createElement("button"); - close.className = - genericBtnStyle + " bg-pastel-red right-4 !border-pastel-dark-grey"; - close.innerHTML = - ""; - close.onclick = () => { - canvas.removeChild(base); - }; + const window_title = document.createElement("p"); + window_title.className = `absolute inset-0 my-auto h-fit !left-28 text-topology-border font-medium tracking-widest`; + window_title.textContent = title.toUpperCase(); - header.appendChild(maximize); header.appendChild(close); + header.appendChild(maximize); + header.appendChild(window_title); // Content area const contentArea = document.createElement("div"); - contentArea.className = - "absolute top-6 left-0 w-full h-[calc(100%-1.5rem)] overflow-y-auto overflow-x-hidden bg-pastel-yellow rounded-b-2xl font-['dynapuff'] text-pastel-dark-grey"; + contentArea.className = `absolute top-10 left-0 w-full h-[calc(100%-1.5rem)] + overflow-y-auto overflow-x-hidden bg-topology-bg rounded-b-2xl`; contentArea.appendChild(content); base.appendChild(header); diff --git a/src/index.ts b/src/index.ts index 39d19b3..624bd87 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,6 @@ +import { open_about_us } from "./windows/about_us"; +import { open_mission } from "./windows/mission"; + const background = (canvas: HTMLSpanElement) => { canvas.className += ` bg-cover bg-bottom bg-no-repeat h-screen`; canvas.style.backgroundImage = "url('assets/images/background.svg')"; @@ -76,28 +79,37 @@ const menu: () => HTMLDivElement = () => { { icon: "assets/images/icons/mock_icon.svg", name: "Mission", + onclick: () => { + open_mission(); + }, }, { icon: "assets/images/icons/mock_icon.svg", name: "About Us", + onclick: () => { + open_about_us(); + }, }, { icon: "assets/images/icons/mock_icon.svg", name: "Blog", + onclick: () => { + window.open("https://www.guiltygyoza.xyz/", "_blank")?.focus(); + }, }, ]; for (const item of items) { - const divEl = document.createElement("div"); - const btnEl = document.createElement("button"); - btnEl.innerHTML = ` + const wrapper = document.createElement("div"); + const button = document.createElement("button"); + button.innerHTML = ` ${item.name}`; - //divEl.className = item.position; - btnEl.className = "align-middle focus-visible:outline-none"; - //btnEl.onclick = btn.onclick; - divEl.appendChild(btnEl); - div.appendChild(divEl); + + button.className = "align-middle focus-visible:outline-none"; + button.onclick = item.onclick; + wrapper.appendChild(button); + div.appendChild(wrapper); } return div; @@ -105,22 +117,10 @@ const menu: () => HTMLDivElement = () => { const render = () => { const canvas = document.getElementById("canvas"); - //canvas.className = "hidden md:block"; background(canvas); canvas.appendChild(animated_person()); canvas.appendChild(topology_text()); canvas.appendChild(menu()); - - // TODO maybe useless to have this - /* - const mobile_canvas = ( - document.getElementById("mobile_canvas") - ); - mobile_canvas.className = "md:hidden"; - background(mobile_canvas); - mobile_canvas.appendChild(topology_text()); - mobile_canvas.appendChild(menu()); - */ }; render(); diff --git a/src/windows/about_us.ts b/src/windows/about_us.ts new file mode 100644 index 0000000..c7bcbbb --- /dev/null +++ b/src/windows/about_us.ts @@ -0,0 +1,8 @@ +import { window } from "../components/window"; + +export const open_about_us: () => HTMLDivElement = () => { + const div = document.createElement("div"); + + window("w-72 h-80 md:w-96 md:h-96", "About Us", div); + return div; +}; diff --git a/src/windows/mission.ts b/src/windows/mission.ts new file mode 100644 index 0000000..b9c8073 --- /dev/null +++ b/src/windows/mission.ts @@ -0,0 +1,8 @@ +import { window } from "../components/window"; + +export const open_mission: () => HTMLDivElement = () => { + const div = document.createElement("div"); + + window("w-72 h-80 md:w-96 md:h-96", "Mission", div); + return div; +};