diff --git a/src/index.html b/src/index.html index 0d0be2c..5e2a61d 100644 --- a/src/index.html +++ b/src/index.html @@ -7,13 +7,7 @@ Virtual Gamepad -
-
-
- - -
-
+

Virtual Gamepad

@@ -52,6 +46,13 @@

References

+
+
+
+ + +
+
diff --git a/src/main.js b/src/main.js index b2f0605..1b5241a 100644 --- a/src/main.js +++ b/src/main.js @@ -2,18 +2,32 @@ import nipplejs from "nipplejs"; import "./style.css"; const elms = { - body: document.querySelector("body"), - main: { - joystickZone: document.querySelector("#joystick-zone"), - buttonsZone: document.querySelector("#buttons-zone"), - }, + hamburgers: [...document.querySelectorAll(".hamburger")], + burgerIcons: [...document.querySelectorAll(".hamburger > span")], + articles: [...document.querySelectorAll("article")], settings: { host: document.querySelector("#settings-host"), interval: document.querySelector("#settings-interval"), buttons: document.querySelector("#settings-buttons"), }, + body: document.querySelector("body"), + main: { + joystickZone: document.querySelector("#joystick-zone"), + buttonsZone: document.querySelector("#buttons-zone"), + }, }; +/// hamburgers + +for (const burger of elms.hamburgers) { + burger.onclick = () => { + for (const article of elms.articles) article.classList.toggle("hide-left"); + for (const icon of elms.burgerIcons) icon.classList.toggle("erase"); + }; +} + +/// poster + let host = "http://localhost"; let interval = 125; let showButtons = true; diff --git a/src/style.css b/src/style.css index fc13a4b..af42780 100644 --- a/src/style.css +++ b/src/style.css @@ -16,6 +16,67 @@ opacity: 0; } +/* hamburger */ + +.hamburger { + position: absolute; + padding: 0; + height: 4rem; + width: 4rem; + z-index: 1; + font-size: 3rem; + box-shadow: 0 0 0.5em 0.25em #5555; +} + +/* article */ + +article { + position: relative; + left: 0; + padding: 1em; + height: 100dvh; + width: 50dvw; + overflow: auto; + background-color: #5559; + box-shadow: 0 0 0.5rem 0.25rem #5553; + transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +article.hide-left { + left: -50dvw; + pointer-events: none; + cursor: not-allowed; +} + +article * { + margin: 0; +} + +article a { + color: #fcc; +} + +article h1 { + margin: 0.2em 0; + margin-left: 4rem; +} + +article h2 { + margin: 0.1em 0; +} + +article input[type="checkbox"] { + height: 1.5em; + width: 1.5em; +} + +article code { + padding: 0.25em; + background: #335; +} + +/* gamepad */ + main { position: absolute; display: flex; @@ -53,44 +114,10 @@ main { .button-a { background-color: #f33; + box-shadow: 0 0 0.5rem 0.25rem #f335; } .button-b { background-color: #3f3; -} - -article { - margin: 0.5em; - padding: 0.5em; - max-height: min(24em, calc(100dvh - 240px)); - width: 50dvw; - overflow: scroll; - font-size: max(0.75rem, 2dvmin); - background-color: #5559; -} - -article * { - margin: 0; -} - -article a { - color: #fcc; -} - -article h1 { - margin: 0.2em 0.1em; -} - -article h2 { - margin: 0.1em 0; -} - -article input[type="checkbox"] { - height: 1.5em; - width: 1.5em; -} - -article code { - padding: 0.25em; - background: #335; + box-shadow: 0 0 0.5rem 0.25rem #3f35; }