@@ -437,7 +422,7 @@ async function revert() {
isChanged.value = false;
}
-async function reload() {
+async function refresh() {
await controller.reset(null, {
graphicsQuality: graphicsQuality.value,
fps: fps.value,
@@ -474,6 +459,46 @@ function impor() {
inputElem.click();
}
+function showOtherMenu(ev: PointerEvent) {
+ os.popupMenu([{
+ type: 'radio',
+ text: 'Graphics quality',
+ caption: graphicsQualityRaw.value == null ? i18n.ts.auto : graphicsQualityRaw.value === GRAPHICS_QUALITY_HIGH ? 'High' : graphicsQualityRaw.value === GRAPHICS_QUALITY_MEDIUM ? 'Medium' : 'Low',
+ options: {
+ [`Auto (${graphicsQualityAutoValue.value})`]: null,
+ 'High': GRAPHICS_QUALITY_HIGH,
+ 'Medium': GRAPHICS_QUALITY_MEDIUM,
+ 'Low': GRAPHICS_QUALITY_LOW,
+ },
+ ref: graphicsQualityRaw,
+ }, {
+ type: 'radio',
+ text: 'Framerate',
+ caption: fpsRaw.value == null ? i18n.ts.auto : fpsRaw.value === 'max' ? 'Max' : `~${fpsRaw.value}fps`,
+ options: {
+ [`Auto (${fpsAutoValue.value})`]: null,
+ 'Max': 'max',
+ '~120fps': '120',
+ '~60fps': '60',
+ '~30fps': '30',
+ },
+ ref: fpsRaw,
+ }, {
+ type: 'divider',
+ }, {
+ text: 'Export',
+ action: expor,
+ }, {
+ text: 'Import',
+ action: impor,
+ }, {
+ type: 'divider',
+ }, {
+ text: 'Refresh',
+ action: refresh,
+ }], ev.currentTarget ?? ev.target);
+}
+
definePage(() => ({
title: 'Room',
icon: 'ti ti-door',
@@ -553,6 +578,14 @@ definePage(() => ({
pointer-events: none;
}
+.overlayTop {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+}
+
.overlayBottom {
position: absolute;
bottom: 0;
@@ -561,6 +594,23 @@ definePage(() => ({
width: 100%;
}
+.topMenu {
+ margin: 16px;
+ display: flex;
+ box-sizing: border-box;
+ width: max-content;
+}
+
+.topMenuButton {
+ padding: 8px;
+}
+.topMenuButton:first-child {
+ padding-left: 16px;
+}
+.topMenuButton:last-child {
+ padding-right: 16px;
+}
+
.overlayControls {
}