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

iphone ui improvements

Browse source
This commit is contained in:
Vitaly Turovsky 2023-10-13 20:07:11 +03:00
commit 4202a39857
10 changed files with 107 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

1
index.html
View file

@ -41,7 +41,6 @@
<div id="ui-root">
<pmui-hud id="hud" style="display: none;"></pmui-hud>
<pmui-pausescreen id="pause-screen" style="display: none;"></pmui-pausescreen>
<pmui-loading-error-screen id="loading-error-screen" style="display: none;"></pmui-loading-error-screen>
<pmui-playscreen id="play-screen" style="display: none;"></pmui-playscreen>
<pmui-keybindsscreen id="keybinds-screen" style="display: none;"></pmui-keybindsscreen>
<pmui-notification></pmui-notification>

3
package.json
View file

@ -53,8 +53,10 @@
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-transition-group": "^4.4.5",
"stats-gl": "^1.0.5",
"stats.js": "^0.17.0",
"tippy.js": "^6.3.7",
"title-case": "3.x",
"valtio": "^1.11.1",
"workbox-build": "^7.0.0"
@ -68,6 +70,7 @@
"@storybook/web-components": "^7.4.6",
"@storybook/web-components-vite": "^7.4.6",
"@types/lodash-es": "^4.17.9",
"@types/react-transition-group": "^4.4.7",
"@types/stats.js": "^0.17.1",
"@types/three": "0.128.0",
"@xmcl/installer": "^5.1.0",

48
pnpm-lock.yaml generated
View file

@ -63,7 +63,7 @@ importers:
version: 4.18.2
flying-squid:
specifier: github:zardoy/space-squid#everything
version: github.com/zardoy/space-squid/458eee79e4ff20fccdff8027d3aae16161b9fb1c
version: github.com/zardoy/space-squid/acf7b6f8cbcc204007eed767eb52a527a85b3ab0
fs-extra:
specifier: ^11.1.1
version: 11.1.1
@ -103,12 +103,18 @@ importers:
react-dom:
specifier: ^18.2.0
version: 18.2.0(react@18.2.0)
react-transition-group:
specifier: ^4.4.5
version: 4.4.5(react-dom@18.2.0)(react@18.2.0)
stats-gl:
specifier: ^1.0.5
version: 1.0.5
stats.js:
specifier: ^0.17.0
version: 0.17.0
tippy.js:
specifier: ^6.3.7
version: 6.3.7
title-case:
specifier: 3.x
version: 3.0.3
@ -143,6 +149,9 @@ importers:
'@types/lodash-es':
specifier: ^4.17.9
version: 4.17.9
'@types/react-transition-group':
specifier: ^4.4.7
version: 4.4.7
'@types/stats.js':
specifier: ^0.17.1
version: 0.17.1
@ -4770,6 +4779,12 @@ packages:
dependencies:
'@types/react': 18.2.20
/@types/react-transition-group@4.4.7:
resolution: {integrity: sha512-ICCyBl5mvyqYp8Qeq9B5G/fyBSRC0zx3XM3sCC6KkcMsNeAHqXBKkmat4GqdJET5jtYUpZXrxI5flve5qhi2Eg==}
dependencies:
'@types/react': 18.2.20
dev: true
/@types/react@18.2.20:
resolution: {integrity: sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==}
dependencies:
@ -6997,6 +7012,13 @@ packages:
esutils: 2.0.3
dev: true
/dom-helpers@5.2.1:
resolution: {integrity: sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==}
dependencies:
'@babel/runtime': 7.22.11
csstype: 3.1.2
dev: false
/dom-serializer@2.0.0:
resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
dependencies:
@ -11719,6 +11741,20 @@ packages:
tslib: 2.6.2
dev: true
/react-transition-group@4.4.5(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==}
peerDependencies:
react: ^18.2.0
react-dom: '>=16.6.0'
dependencies:
'@babel/runtime': 7.22.11
dom-helpers: 5.2.1
loose-envify: 1.4.0
prop-types: 15.8.1
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.2):
resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
peerDependencies:
@ -13070,6 +13106,12 @@ packages:
engines: {node: '>=14.0.0'}
dev: true
/tippy.js@6.3.7:
resolution: {integrity: sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==}
dependencies:
'@popperjs/core': 2.11.8
dev: false
/title-case@3.0.3:
resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==}
dependencies:
@ -14425,8 +14467,8 @@ packages:
- utf-8-validate
dev: false
github.com/zardoy/space-squid/458eee79e4ff20fccdff8027d3aae16161b9fb1c:
resolution: {tarball: https://codeload.github.com/zardoy/space-squid/tar.gz/458eee79e4ff20fccdff8027d3aae16161b9fb1c}
github.com/zardoy/space-squid/acf7b6f8cbcc204007eed767eb52a527a85b3ab0:
resolution: {tarball: https://codeload.github.com/zardoy/space-squid/tar.gz/acf7b6f8cbcc204007eed767eb52a527a85b3ab0}
name: flying-squid
version: 1.5.0
engines: {node: '>=8'}

11
src/index.ts
View file

@ -144,10 +144,17 @@ const renderFrame = (time: DOMHighResTimeStamp) => {
renderFrame(performance.now())
window.addEventListener('resize', () => {
viewer.camera.aspect = window.innerWidth / window.innerHeight
const width = window.outerWidth
const height = window.outerHeight
viewer.camera.aspect = width / height
viewer.camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setSize(width, height)
})
// window.addEventListener('load', (e) => {
// console.log(window.innerWidth, outerWidth, document.documentElement.offsetWidth)
// window.dispatchEvent(new Event('resize'))
// })
const hud = document.getElementById('hud')
const pauseMenu = document.getElementById('pause-screen')

8
src/react/AppStatus.tsx
View file

@ -51,7 +51,13 @@ export default () => {
useDidUpdateEffect(() => {
// todo play effect only when world successfully loaded
if (!isOpen) {
document.querySelector('#viewer-canvas')['style'].animationName = 'dive-animation'
const divingElem: HTMLElement = document.querySelector('#viewer-canvas')
divingElem.style.animationName = 'dive-animation'
divingElem.parentElement.style.perspective = '1200px'
divingElem.onanimationend = () => {
divingElem.parentElement.style.perspective = ''
divingElem.onanimationend = null
}
}
}, [isOpen])

2
src/react/MainMenu.tsx
View file

@ -38,7 +38,7 @@ export default ({ connectToServerAction, singleplayerAction, optionsAction, gith
return (
<div>
<div className={styles.root}>
<div className={styles['game-title']}>
<div className={styles.minec}></div>
<div className={styles.raft}></div>

52
src/react/button.module.css
View file

@ -1,30 +1,30 @@
.button {
--scale: 1;
--txrV: 66px;
position: relative;
width: 200px;
height: calc(20px * var(--scale));
font-family: minecraft, mojangles, monospace;
font-size: 10px;
color: white;
text-shadow: 1px 1px #222;
border: none;
z-index: 1;
outline: none;
display: inline-flex;
justify-content: center;
align-items: center;
--scale: 1;
--txrV: 66px;
position: relative;
width: 200px;
height: calc(20px * var(--scale));
font-family: minecraft, mojangles, monospace;
font-size: 10px;
color: white;
text-shadow: 1px 1px #222;
border: none;
z-index: 1;
outline: none;
display: inline-flex;
justify-content: center;
align-items: center;
}
.button:hover,
.button:focus-visible {
--txrV: 86px;
--txrV: 86px;
}
.button:disabled {
--txrV: 46px;
color: #A0A0A0;
text-shadow: 1px 1px #111;
--txrV: 46px;
color: #A0A0A0;
text-shadow: 1px 1px #111;
}
.button::before,
@ -53,14 +53,14 @@
.icon {
position: absolute;
top: 3px;
left: 3px;
font-size: 14px;
position: absolute;
top: 3px;
left: 3px;
font-size: 14px;
}
@media (pointer: coarse) {
.button {
--scale: 1.3;
}
.button {
--scale: 1.1;
}
}

18
src/react/mainMenu.module.css
View file

@ -1,6 +1,10 @@
.root {
--top-offset: 30px;
}
.game-title {
position: absolute;
top: 30px;
position: fixed;
top: var(--top-offset);
left: calc(50% - 137px);
}
@ -60,8 +64,8 @@
display: flex;
flex-direction: column;
gap: 4px 0;
position: absolute;
top: calc(25% + 48px);
position: fixed;
top: calc(25% + var(--top-offset) + 18px);
left: 50%;
width: 200px;
transform: translate(-50%);
@ -94,3 +98,9 @@
.product-description {
padding-right: calc(env(safe-area-inset-right) / 2);
}
@media only screen and (max-height: 313px) {
.root {
--top-offset: 10px
}
}

2
src/styles.css
View file

@ -56,8 +56,6 @@ body {
-ms-user-select: none;
user-select: none;
font-family: minecraft, mojangles, monospace;
/* for canvas transition */
perspective: 1200px;
}
#react-root {

5
src/utils.ts
View file

@ -166,7 +166,6 @@ let prevRenderDistance = options.renderDistance
export const setRenderDistance = () => {
worldView.viewDistance = options.renderDistance
if (localServer) {
localServer.options['view-distance'] = options.renderDistance
localServer.players[0].emit('playerChangeRenderDistance', options.renderDistance)
}
prevRenderDistance = options.renderDistance
@ -194,9 +193,9 @@ export const openFilePicker = (specificCase?: 'resourcepack') => {
if (!doContinue) return
}
if (specificCase === 'resourcepack') {
installTexturePack(file)
void installTexturePack(file)
} else {
openWorldZip(file)
void openWorldZip(file)
}
})
picker.hidden = true