codePugHacKEr/pages235
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate to new options backend

Browse source 
this cleanups code alot
This commit is contained in:
Vitaly 2023-09-22 23:06:52 +03:00
commit 07262c4549
7 changed files with 61 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/index.ts
View file

@ -78,7 +78,7 @@ import { startLocalServer, unsupportedLocalServerFeatures } from './createLocalS
import serverOptions from './defaultLocalServerOptions'
import { customCommunication } from './customServer'
import updateTime from './updateTime'
import { options } from './optionsStorage'
import { options, watchValue } from './optionsStorage'
import { subscribeKey } from 'valtio/utils'
import _ from 'lodash'
import { contro } from './controls'
@ -146,10 +146,9 @@ const viewer: import('../prismarine-viewer/viewer/lib/viewer').Viewer = new View
initPanoramaOptions(viewer)
watchTexturepackInViewer(viewer)
const frameLimit = toNumber(localStorage.frameLimit)
let interval = frameLimit && 1000 / frameLimit
window.addEventListener('option-change', ({ detail }: any) => {
if (detail.name === 'frameLimit') interval = toNumber(detail.value) && 1000 / toNumber(detail.value)
let renderInterval: number
watchValue(options, (o) => {
renderInterval = o.frameLimit && 1000 / o.frameLimit
})
let nextFrameFn = []
@ -160,11 +159,11 @@ const renderFrame = (time: DOMHighResTimeStamp) => {
if (window.stopLoop) return
window.requestAnimationFrame(renderFrame)
if (window.stopRender) return
if (interval) {
if (renderInterval) {
delta += time - lastTime
lastTime = time
if (delta > interval) {
delta = delta % interval
if (delta > renderInterval) {
delta = delta % renderInterval
// continue rendering
} else {
return
@ -195,7 +194,6 @@ window.addEventListener('resize', () => {
const loadingScreen = document.getElementById('loading-error-screen')
const hud = document.getElementById('hud')
const optionsScrn = document.getElementById('options-screen')
const pauseMenu = document.getElementById('pause-screen')
let mouseMovePostHandle = (e) => { }
@ -214,7 +212,7 @@ function onCameraMove(e) {
// todo: limit camera movement for now to avoid unexpected jumps
if (now - lastMouseMove < 4) return
lastMouseMove = now
let { mouseSensX, mouseSensY } = optionsScrn
let { mouseSensX, mouseSensY } = options
if (mouseSensY === true) mouseSensY = mouseSensX
// debugPitch.innerText = +debugPitch.innerText + e.movementX
mouseMovePostHandle({
@ -539,9 +537,8 @@ async function connect(connectOptions: {
window.worldView = worldView
setRenderDistance()
let fovSetting = optionsScrn.fov
const updateFov = () => {
fovSetting = optionsScrn.fov
let fovSetting = options.fov
// todo check values and add transition
if (bot.controlState.sprint && !bot.controlState.sneak) {
fovSetting += 5
@ -553,6 +550,7 @@ async function connect(connectOptions: {
viewer.camera.updateProjectionMatrix()
}
updateFov()
subscribeKey(options, 'fov', updateFov)
subscribeKey(gameAdditionalState, 'isFlying', updateFov)
subscribeKey(gameAdditionalState, 'isSprinting', updateFov)
const defaultPlayerHeight = viewer.playerHeight
@ -560,7 +558,6 @@ async function connect(connectOptions: {
viewer.playerHeight = gameAdditionalState.isSneaking ? defaultPlayerHeight - 0.3 : defaultPlayerHeight
viewer.setFirstPersonCamera(bot.entity.position, bot.entity.yaw, bot.entity.pitch)
})
optionsScrn.addEventListener('fov_changed', updateFov)
bot.on('physicsTick', () => updateCursor())
viewer.setVersion(version)

14
src/menus/advanced_options_screen.js
View file

@ -1,21 +1,17 @@
//@ts-check
const { html, css } = require('lit')
const { CommonOptionsScreen } = require('./options_store')
const { html, css, LitElement } = require('lit')
const { commonCss, openURL } = require('./components/common')
const { hideCurrentModal } = require('../globalState')
const { toNumber, getScreenRefreshRate } = require('../utils')
const { subscribe } = require('valtio')
const { options } = require('../optionsStorage')
class AdvancedOptionsScreen extends CommonOptionsScreen {
class AdvancedOptionsScreen extends LitElement {
/** @type {null | number} */
frameLimitMax = null
constructor () {
super()
this.defineOptions({
frameLimit: { defaultValue: false, convertFn: (v) => toNumber(v) ?? false },
})
subscribe(options, () => {
this.requestUpdate()
})
@ -66,10 +62,10 @@ class AdvancedOptionsScreen extends CommonOptionsScreen {
<pmui-button pmui-width="150px" pmui-label="Guide: Disable VSync" @click=${() => openURL('https://gist.github.com/zardoy/6e5ce377d2b4c1e322e660973da069cd')}></pmui-button>
</div>
<div class="wrapper">
<pmui-slider .disabled=${!this.frameLimitMax} pmui-label="Frame Limit" .valueDisplay=${this.options.frameLimit || 'VSync'} pmui-value="${this.options.frameLimit || this.frameLimitMax + 1}"
pmui-type="${this.options.frameLimit ? 'fps' : ''}" pmui-min="20" pmui-max="${this.frameLimitMax + 1}" @input=${(e) => {
<pmui-slider .disabled=${!this.frameLimitMax} pmui-label="Frame Limit" .valueDisplay=${options.frameLimit || 'VSync'} pmui-value="${options.frameLimit || this.frameLimitMax + 1}"
pmui-type="${options.frameLimit ? 'fps' : ''}" pmui-min="20" pmui-max="${this.frameLimitMax + 1}" @input=${(e) => {
const newVal = e.target.value
this.changeOption('frameLimit', newVal > this.frameLimitMax ? false : newVal)
options.frameLimit = newVal > this.frameLimitMax ? false : newVal
this.requestUpdate()
}}></pmui-slider>
<pmui-button pmui-width="20px" pmui-icon="pixelarticons:lock-open" @click=${async () => {

12
src/menus/components/button.js
View file

@ -1,6 +1,6 @@
//@ts-check
const widgetsGui = require('minecraft-assets/minecraft-assets/data/1.17.1/gui/widgets.png')
const { LitElement, html, css, unsafeCSS } = require('lit')
const { options } = require('../../optionsStorage')
const audioContext = new window.AudioContext()
const sounds = {}
@ -16,12 +16,8 @@ async function loadSound (path) {
loadingSounds.splice(loadingSounds.indexOf(path), 1)
}
async function playSound (path) {
let volume = 1
const options = document.getElementById('options-screen')
if (options) {
volume = options.sound / 100
}
export async function playSound (path) {
const volume = options.volume / 100
// todo?
if (loadingSounds.includes(path)) return
@ -167,5 +163,3 @@ class Button extends LitElement {
loadSound('click_stereo.mp3')
window.customElements.define('pmui-button', Button)
const _playSound = playSound
export { _playSound as playSound }

77
src/menus/options_screen.js
View file

@ -1,15 +1,14 @@
const { LitElement, html, css } = require('lit')
const { commonCss, isMobile } = require('./components/common')
const { showModal, hideCurrentModal, isGameActive, miscUiState } = require('../globalState')
const { CommonOptionsScreen } = require('./options_store')
const { toNumber, openFilePicker, setLoadingScreenStatus } = require('../utils')
const { options } = require('../optionsStorage')
const { options, watchValue } = require('../optionsStorage')
const { subscribe } = require('valtio')
const { subscribeKey } = require('valtio/utils')
const { getResourcePackName, uninstallTexturePack } = require('../texturePack')
const { fsState } = require('../loadSave')
class OptionsScreen extends CommonOptionsScreen {
class OptionsScreen extends LitElement {
static get styles () {
return css`
${commonCss}
@ -40,38 +39,16 @@ class OptionsScreen extends CommonOptionsScreen {
`
}
static get properties () {
return {
mouseSensX: { type: Number },
mouseSensY: { type: Number },
chatWidth: { type: Number },
chatHeight: { type: Number },
chatScale: { type: Number },
sound: { type: Number },
fov: { type: Number },
guiScale: { type: Number }
}
}
constructor () {
super()
this.defineOptions({
mouseSensX: { defaultValue: 50, convertFn: (v) => Math.floor(toNumber(v)) },
mouseSensY: { defaultValue: 50, convertFn: (v) => Math.floor(toNumber(v)) },
chatWidth: { defaultValue: 320, convertFn: (v) => toNumber(v) },
chatHeight: { defaultValue: 180, convertFn: (v) => toNumber(v) },
chatScale: { defaultValue: 100, convertFn: (v) => toNumber(v) },
sound: { defaultValue: 50, convertFn: (v) => toNumber(v) },
fov: { defaultValue: 75, convertFn: (v) => toNumber(v) },
guiScale: { defaultValue: 3, convertFn: (v) => toNumber(v) },
watchValue(options, o => {
document.documentElement.style.setProperty('--chatScale', `${o.chatScale / 100}`)
document.documentElement.style.setProperty('--chatWidth', `${o.chatWidth}px`)
document.documentElement.style.setProperty('--chatHeight', `${o.chatHeight}px`)
document.documentElement.style.setProperty('--guiScale', `${o.guiScale}`)
})
document.documentElement.style.setProperty('--chatScale', `${this.chatScale / 100}`)
document.documentElement.style.setProperty('--chatWidth', `${this.chatWidth}px`)
document.documentElement.style.setProperty('--chatHeight', `${this.chatHeight}px`)
document.documentElement.style.setProperty('--guiScale', `${this.guiScale}`)
subscribe(options, () => {
this.requestUpdate()
})
@ -85,53 +62,47 @@ class OptionsScreen extends CommonOptionsScreen {
render () {
return html`
<div class="${isGameActive() ? 'bg' : 'dirt-bg'}"></div>
<div class="${isGameActive(false) ? 'bg' : 'dirt-bg'}"></div>
<p class="title">Options</p>
<main>
<div class="wrapper">
<pmui-slider pmui-label="Mouse Sensitivity X" pmui-value="${this.mouseSensX}" pmui-min="1" pmui-max="100" @input=${(e) => {
this.changeOption('mouseSensX', e.target.value)
<pmui-slider pmui-label="Mouse Sensitivity X" pmui-value="${options.mouseSensX}" pmui-min="1" pmui-max="100" @input=${(e) => {
options.mouseSensX = +e.target.value
}}></pmui-slider>
<pmui-slider pmui-label="Mouse Sensitivity Y" pmui-value="${this.mouseSensY}" pmui-min="1" pmui-max="100" @input=${(e) => {
this.changeOption('mouseSensY', e.target.value)
<pmui-slider pmui-label="Mouse Sensitivity Y" pmui-value="${options.mouseSensY}" pmui-min="1" pmui-max="100" @input=${(e) => {
options.mouseSensY = +e.target.value
}}></pmui-slider>
</div>
<div class="wrapper">
<pmui-slider pmui-label="Chat Width" pmui-value="${this.chatWidth}" pmui-min="0" pmui-max="320" pmui-type="px" @input=${(e) => {
this.changeOption('chatWidth', e.target.value)
document.documentElement.style.setProperty('--chatWidth', `${this.chatWidth}px`)
<pmui-slider pmui-label="Chat Width" pmui-value="${options.chatWidth}" pmui-min="0" pmui-max="320" pmui-type="px" @input=${(e) => {
options.chatWidth = +e.target.value
}}></pmui-slider>
<pmui-slider pmui-label="Chat Height" pmui-value="${this.chatHeight}" pmui-min="0" pmui-max="180" pmui-type="px" @input=${(e) => {
this.changeOption('chatHeight', e.target.value)
document.documentElement.style.setProperty('--chatHeight', `${this.chatHeight}px`)
<pmui-slider pmui-label="Chat Height" pmui-value="${options.chatHeight}" pmui-min="0" pmui-max="180" pmui-type="px" @input=${(e) => {
options.chatHeight = +e.target.value
}}></pmui-slider>
</div>
<div class="wrapper">
<pmui-slider pmui-label="Chat Scale" pmui-value="${this.chatScale}" pmui-min="0" pmui-max="100" @input=${(e) => {
this.changeOption('chatScale', e.target.value)
document.documentElement.style.setProperty('--chatScale', `${this.chatScale / 100}`)
<pmui-slider pmui-label="Chat Scale" pmui-value="${options.chatScale}" pmui-min="0" pmui-max="100" @input=${(e) => {
options.chatScale = +e.target.value
}}></pmui-slider>
<pmui-slider pmui-label="Sound Volume" pmui-value="${this.sound}" pmui-min="0" pmui-max="100" @input=${(e) => {
this.changeOption('sound', e.target.value)
<pmui-slider pmui-label="Sound Volume" pmui-value="${options.volume}" pmui-min="0" pmui-max="100" @input=${(e) => {
options.volume = +e.target.value
}}></pmui-slider>
</div>
<div class="wrapper">
<pmui-button .disabled=${true} pmui-width="150px" pmui-label="Key Binds" @pmui-click=${() => showModal(document.getElementById('keybinds-screen'))}></pmui-button>
<pmui-slider pmui-label="Gui Scale" pmui-value="${this.guiScale}" pmui-min="1" pmui-max="4" pmui-type="" @change=${(e) => {
this.changeOption('guiScale', e.target.value)
document.documentElement.style.setProperty('--guiScale', `${this.guiScale}`)
<pmui-slider pmui-label="Gui Scale" pmui-value="${options.guiScale}" pmui-min="1" pmui-max="4" pmui-type="" @change=${(e) => {
options.guiScale = +e.target.value
}}></pmui-slider>
</div>
<div class="wrapper">
<pmui-slider pmui-label="Render Distance" pmui-value="${options.renderDistance}" .disabled="${isGameActive(false) && !miscUiState.singleplayer ? 'Can be changed only from main menu for now' : undefined}" pmui-min="2" pmui-max="${miscUiState.singleplayer ? 16 : 6}" pmui-type=" chunks" @change=${(e) => {
options.renderDistance = +e.target.value
}}></pmui-slider>
<pmui-slider pmui-label="Field of View" pmui-value="${this.fov}" pmui-min="30" pmui-max="110" pmui-type="" @input=${(e) => {
this.changeOption('fov', e.target.value)
this.dispatchEvent(new window.CustomEvent('fov_changed', { detail: { fov: this.fov }, }))
<pmui-slider pmui-label="Field of View" pmui-value="${options.fov}" pmui-min="30" pmui-max="110" pmui-type="" @input=${(e) => {
options.fov = +e.target.value
}}></pmui-slider>
</div>

33
src/menus/options_store.js
View file

@ -1,33 +0,0 @@
//@ts-check
import { LitElement } from 'lit'
export class CommonOptionsScreen extends LitElement {
options = {}
defineOptions (props) {
for (const [name, { defaultValue, convertValue = (v) => v, convertFn = convertValue }] 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, `${convertValue(value)}`)
}
})
this[name] = this.options[name]
}
}
/**
* @param {string} name
* @param {any} value
*/
changeOption (name, value) {
this.options[name] = value
this[name] = this.options[name]
// todo migrate to it
window.dispatchEvent(new CustomEvent('option-change', { detail: { name, value } }))
}
}

22
src/optionsStorage.ts
View file

@ -8,18 +8,30 @@ const mergeAny: <T>(arg1: T, arg2: any) => T = Object.assign
const defaultOptions = {
renderDistance: 4,
closeConfirmation: true,
autoFullScreen: false,
mouseRawInput: false,
autoExitFullscreen: false,
localUsername: 'wanderer',
mouseSensX: 50,
mouseSensY: 50 as number | true,
// mouseInvertX: false,
chatWidth: 320,
chatHeight: 180,
chatScale: 100,
volume: 50,
// fov: 70,
fov: 75,
guiScale: 3,
frameLimit: false as number | false,
alwaysBackupWorldBeforeLoading: undefined as boolean | undefined | null,
alwaysShowMobileControls: false,
maxMultiplayerRenderDistance: 6,
excludeCommunicationDebugEvents: [],
preventDevReloadWhilePlaying: false,
closeConfirmation: true,
autoFullScreen: false,
mouseRawInput: false,
autoExitFullscreen: false,
numWorkers: 4,
localServerOptions: {},
localUsername: 'wanderer',
preferLoadReadonly: false,
disableLoadPrompts: false,
guestUsername: 'guest',

3
src/panorama.js
View file

@ -5,6 +5,7 @@ import { miscUiState } from './globalState'
import { fromTexturePackPath } from './texturePack'
import fs from 'fs'
import { subscribeKey } from 'valtio/utils'
import { options } from './optionsStorage'
let panoramaCubeMap
let panoramaUsesResourePack = false
@ -107,7 +108,7 @@ export async function addPanoramaCubeMap () {
export function removePanorama () {
if (!panoramaCubeMap) return
viewer.camera = new THREE.PerspectiveCamera(document.getElementById('options-screen').fov, window.innerWidth / window.innerHeight, 0.1, 1000)
viewer.camera = new THREE.PerspectiveCamera(options.fov, window.innerWidth / window.innerHeight, 0.1, 1000)
viewer.camera.updateProjectionMatrix()
viewer.scene.remove(panoramaCubeMap)
}