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",