feat: Screenshot on F2 and hide/show UI on F1 (#136)

Co-authored-by: gguio <nikvish150@gmail.com>

src/controls.ts

@@ -651,6 +651,24 @@ window.addEventListener('keydown', (e) => {
   }
 })
 
+window.addEventListener('keydown', (e) => {
+  if (e.code !== 'F2' || e.repeat || !isGameActive(true)) return
+  e.preventDefault()
+  const canvas = document.getElementById('viewer-canvas') as HTMLCanvasElement
+  if (!canvas) return
+  const link = document.createElement('a')
+  link.href = canvas.toDataURL('image/png')
+  const date = new Date()
+  link.download = `screenshot ${date.toLocaleString().replaceAll('.', '-').replace(',', '')}.png`
+  link.click()
+})
+
+window.addEventListener('keydown', (e) => {
+  if (e.code !== 'F1' || e.repeat || !isGameActive(true)) return
+  e.preventDefault()
+  miscUiState.showUI = !miscUiState.showUI
+})
+
 // #region experimental debug things
 window.addEventListener('keydown', (e) => {
   if (e.code === 'F11') {

src/globalState.ts

@@ -138,6 +138,7 @@ export const miscUiState = proxy({
   wanOpened: false,
   /** wether game hud is shown (in playing state) */
   gameLoaded: false,
+  showUI: true,
   loadedServerIndex: '',
   /** currently trying to load or loaded mc version, after all data is loaded */
   loadedDataVersion: null as string | null,

src/index.ts

@@ -108,6 +108,8 @@ let renderer: THREE.WebGLRenderer
 try {
   renderer = new THREE.WebGLRenderer({
     powerPreference: options.gpuPreference,
+    preserveDrawingBuffer: true,
+    logarithmicDepthBuffer: true,
   })
 } catch (err) {
   console.error(err)

src/reactUi.tsx

@@ -143,6 +143,8 @@ const WidgetDisplay = ({ name, Component }) => {
 }
 
 const App = () => {
+  const { showUI } = useSnapshot(miscUiState)
+
   return <div>
     <ButtonAppProvider>
       <RobustPortal to={document.body}>
@@ -154,7 +156,7 @@ const App = () => {
         <div></div>
       </RobustPortal>
       <EnterFullscreenButton />
-      <InGameUi />
+      {showUI && <InGameUi />}
       <RobustPortal to={document.querySelector('#ui-root')}>
         <AllWidgets />
         <SingleplayerProvider />