-
diff --git a/package.json b/package.json
index 20e98b82..f243c6dd 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b93e455..15fb588d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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'}
diff --git a/src/index.ts b/src/index.ts
index 050cc2bc..03264612 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -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')
diff --git a/src/react/AppStatus.tsx b/src/react/AppStatus.tsx
index cadb094f..6dfe098c 100644
--- a/src/react/AppStatus.tsx
+++ b/src/react/AppStatus.tsx
@@ -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])
diff --git a/src/react/MainMenu.tsx b/src/react/MainMenu.tsx
index 808ad7b5..8647f45e 100644
--- a/src/react/MainMenu.tsx
+++ b/src/react/MainMenu.tsx
@@ -38,7 +38,7 @@ export default ({ connectToServerAction, singleplayerAction, optionsAction, gith
return (
-
+
diff --git a/src/react/button.module.css b/src/react/button.module.css
index c7caebef..6b509d12 100644
--- a/src/react/button.module.css
+++ b/src/react/button.module.css
@@ -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;
+ }
}
diff --git a/src/react/mainMenu.module.css b/src/react/mainMenu.module.css
index b2f05a43..aa42ef62 100644
--- a/src/react/mainMenu.module.css
+++ b/src/react/mainMenu.module.css
@@ -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
+ }
+}
diff --git a/src/styles.css b/src/styles.css
index 37612888..36eca866 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -56,8 +56,6 @@ body {
-ms-user-select: none;
user-select: none;
font-family: minecraft, mojangles, monospace;
- /* for canvas transition */
- perspective: 1200px;
}
#react-root {
diff --git a/src/utils.ts b/src/utils.ts
index 272b407e..a6c23f75 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -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