diff --git a/.vscode/launch.json b/.vscode/launch.json index cd96259c..85e26869 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -2,9 +2,9 @@ "configurations": [ { "type": "msedge", - "name": "https://localhost:8080/", + "name": "http://localhost:8080/", "request": "launch", - "url": "https://localhost:8080/", + "url": "http://localhost:8080/", "outFiles": [ "${workspaceFolder}/public/**/*.js", "!${workspaceFolder}/public/**/*vendors*", diff --git a/lib/menus/advanced_options_screen.js b/lib/menus/advanced_options_screen.js new file mode 100644 index 00000000..ba8530d5 --- /dev/null +++ b/lib/menus/advanced_options_screen.js @@ -0,0 +1,71 @@ +//@ts-check +const { LitElement, html, css } = require('lit') +const { CommonOptionsScreen } = require('./options_store') +const { commonCss, isMobile, openURL } = require('./components/common') +const { hideCurrentModal } = require('../globalState') + +class AdvancedOptionsScreen extends CommonOptionsScreen { + constructor () { + super() + this.defineOptions({ + forceMobileControls: { defaultValue: false, convertFn: (v) => v === 'true' } + }) + } + + static get styles () { + return css` + ${commonCss} + .title { + top: 4px; + } + + main { + display: flex; + flex-direction: column; + position: absolute; + top: calc(100% / 6 - 6px); + left: 50%; + width: 310px; + gap: 4px 0; + place-items: center; + place-content: center; + transform: translate(-50%); + } + + .wrapper { + display: flex; + flex-direction: row; + width: 100%; + gap: 0 10px; + height: 20px; + } + ` + } + + render () { + return html` +
+ +

Advanced Options

+
+
+ { + this.forceMobileControls = !this.forceMobileControls + if (this.forceMobileControls || isMobile()) { + document.getElementById('hud').showMobileControls(true) + } else { + document.getElementById('hud').showMobileControls(false) + } + this.requestUpdate() + } + }> + openURL('https://gist.github.com/zardoy/6e5ce377d2b4c1e322e660973da069cd')}> +
+ + hideCurrentModal()}> +
+ ` + } +} + +window.customElements.define('pmui-advanced-optionsscreen', AdvancedOptionsScreen) diff --git a/lib/menus/notification.js b/lib/menus/notification.js new file mode 100644 index 00000000..f256a54d --- /dev/null +++ b/lib/menus/notification.js @@ -0,0 +1,72 @@ +//@ts-check + +// create lit element +const { LitElement, html, css } = require('lit') +const { proxy, subscribe } = require('valtio/vanilla') + +// move to globalState? +export const notification = proxy({ + show: false, + autoHide: true, + message: '', + type: 'info', +}) + +window.notification = notification + +class Notification extends LitElement { + render () { + const show = notification.show && notification.message + return html` +
+ ${notification.message} +
+ ` + } + + constructor () { + super() + let timeout + subscribe(notification, () => { + if (timeout) clearTimeout(timeout) + this.requestUpdate() + if (!notification.autoHide) return + timeout = setTimeout(() => { + notification.show = false + }, 3000) + }) + } + + static get styles () { + return css` + .notification { + position: absolute; + bottom: 0; + right: 0; + min-width: 200px; + padding: 10px; + white-space: nowrap; + font-size: 12px; + color: #fff; + text-align: center; + background: #000; + opacity: 0; + transition: opacity 0.3s ease-in-out; + } + + .notification-info { + background: #000; + } + + .notification-error { + background: #d00; + } + + .notification-show { + opacity: 1; + } + ` + } +} + +window.customElements.define('pmui-notification', Notification) diff --git a/lib/menus/options_store.js b/lib/menus/options_store.js new file mode 100644 index 00000000..356958b3 --- /dev/null +++ b/lib/menus/options_store.js @@ -0,0 +1,31 @@ +//@ts-check + +import { LitElement } from 'lit' + +export class CommonOptionsScreen extends LitElement { + options = {} + + defineOptions (props) { + for (const [name, { defaultValue, convertFn }] of Object.entries(props)) { + Object.defineProperty(this.options, name, { + get () { + let value = window.localStorage.getItem(name) ? convertFn(window.localStorage.getItem(name)) : defaultValue + if (isNaN(value)) value = defaultValue + return value + }, + set (value) { + window.localStorage.setItem(name, `${convertFn(value)}`) + } + }) + this[name] = this.options[name] + } + } + /** + * @param {string} name + * @param {any} value + */ + changeOption (name, value) { + this.options[name] = value + this[name] = this.options[name] + } +} diff --git a/package.json b/package.json index 504e2774..66fca1b9 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,7 @@ "url": "^0.11.1" }, "devDependencies": { + "@types/three": "0.128.0", "assert": "^2.0.0", "browserify-zlib": "^0.2.0", "buffer": "^6.0.3", @@ -67,7 +68,6 @@ "prismarine-viewer": "github:PrismarineJS/prismarine-viewer", "process": "github:PrismarineJS/node-process", "stream-browserify": "^3.0.0", - "@types/three": "0.128.0", "three": "0.128.0", "timers-browserify": "^2.0.12", "vite": "^4.4.9",