bump browser deps

vojty · Oct 7, 2024 · 5d2a1b8 · 5d2a1b8
1 parent db27030
commit 5d2a1b8
Show file tree

Hide file tree

Showing 29 changed files with 4,197 additions and 4,486 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/biome.json b/biome.json
@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.3/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "include": ["browser/**/*"],
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": true,
+    "indentWidth": 2,
+    "indentStyle": "space"
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "noForEach": "off"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "semicolons": "asNeeded",
+      "quoteStyle": "single"
+    }
+  }
+}
diff --git a/browser/assets/styles/main.css b/browser/assets/styles/main.css
@@ -3,47 +3,50 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: 'GillSans';
-  src: url('../fonts/GillSansMediumItalic.otf');
+  font-family: "GillSans";
+  src: url("../fonts/GillSansMediumItalic.otf");
   font-style: italic;
   font-weight: 500;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'GillSans';
-  src: url('../fonts/GillSansBoldItalic.otf');
+  font-family: "GillSans";
+  src: url("../fonts/GillSansBoldItalic.otf");
   font-style: italic;
   font-weight: 700;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'Pretendo';
-  src: url('../fonts/Pretendo.ttf');
+  font-family: "Pretendo";
+  src: url("../fonts/Pretendo.ttf");
   font-style: normal;
   font-weight: 400;
   font-display: swap;
 }
 
 @font-face {
-  font-family: 'NESController';
-  src: url('../fonts/NES_Controller.ttf');
+  font-family: "NESController";
+  src: url("../fonts/NES_Controller.ttf");
   font-style: normal;
   font-weight: 400;
   font-display: swap;
 }
 
 .font-nes {
-  font-family: 'NESController';
+  /* biome-ignore lint/a11y/useGenericFontNames: <explanation> */
+  font-family: "NESController";
 }
 
 .font-pretendo {
-  font-family: 'Pretendo';
+  /* biome-ignore lint/a11y/useGenericFontNames: <explanation> */
+  font-family: "Pretendo";
 }
 
 .font-gills-sans {
-  font-family: 'GillSans';
+  /* biome-ignore lint/a11y/useGenericFontNames: <explanation> */
+  font-family: "GillSans";
 }
 
 html,

diff --git a/browser/components/gameboy/Display.tsx b/browser/components/gameboy/Display.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 
 import { Styled } from './GameBoy.styled'
 
@@ -12,13 +12,15 @@ export function Display(props: Props) {
     <Styled.Display>
       <Styled.DisplayTop>
         <Styled.DisplayLine width="25%" />
-        <Styled.DisplayHeaderText>DOT MATRIX WITH STEREO SOUND</Styled.DisplayHeaderText>
+        <Styled.DisplayHeaderText>
+          DOT MATRIX WITH STEREO SOUND
+        </Styled.DisplayHeaderText>
         <Styled.DisplayLine width="12%" />
       </Styled.DisplayTop>
 
       <Styled.DisplayContent>
         <Styled.Battery>
-          <Styled.BatteryIndicator enabled={props.enabled} />
+          <Styled.BatteryIndicator $enabled={props.enabled} />
           BATTERY
         </Styled.Battery>
 

diff --git a/browser/components/gameboy/GameBoy.styled.ts b/browser/components/gameboy/GameBoy.styled.ts
@@ -1,6 +1,4 @@
-import styled, { css, ThemedStyledProps } from 'styled-components'
-
-import { Theme } from '../../types'
+import styled, { css, type ExecutionContext } from 'styled-components'
 
 const SCREEN_PADDING_LEFT = 45
 const SCREEN_PADDING_TOP = 23
@@ -16,8 +14,8 @@ const ARROW_SIZE = 26
 const TEXT_COLOR = '#393C81'
 const AB_COLOR = '#8A205E'
 
-function zoom<P, T extends Theme>(value: number) {
-  return (props: ThemedStyledProps<P, T>) => `${props.theme.zoom * value}px`
+function zoom(value: number) {
+  return (props: ExecutionContext) => `${props.theme.zoom * value}px`
 }
 
 function activeButtonEffect() {
@@ -93,8 +91,8 @@ const ScreenOverlay = styled.div`
   bottom: 0;
 `
 
-const BatteryIndicator = styled.div<{ enabled?: boolean }>`
-  background-color: ${(props) => (props.enabled ? `#f00` : '#000')};
+const BatteryIndicator = styled.div<{ $enabled?: boolean }>`
+  background-color: ${(props) => (props.$enabled ? '#f00' : '#000')};
   box-shadow: 0 0 3px 1px #ef5350;
   height: ${zoom(INDICATOR_SIZE)};
   width: ${zoom(INDICATOR_SIZE)};
@@ -210,8 +208,8 @@ const ButtonsStartSelect = styled.div`
 const Arrows = styled.div``
 
 export enum ArrowOrientation {
-  HORIZONTAL,
-  VERTICAL
+  HORIZONTAL = 0,
+  VERTICAL = 1,
 }
 
 const ArrowsLine = styled.div`
@@ -347,5 +345,5 @@ export const Styled = {
   ArrowCenter,
   ArrowStripe,
   Speakers,
-  Speaker
+  Speaker,
 }
diff --git a/browser/components/gameboy/GameBoy.tsx b/browser/components/gameboy/GameBoy.tsx
@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react'
+import { type ForwardedRef, forwardRef } from 'react'
 
 import { JsKeys } from '../../../gb-web/pkg'
 import { useInput } from '../../hooks/useInput'
@@ -11,7 +11,7 @@ export const DISPLAY_HEIGHT = 144
 
 function GameBoyComponent(
   { running }: { running: boolean },
-  ref: ForwardedRef<HTMLCanvasElement | null>
+  ref: ForwardedRef<HTMLCanvasElement | null>,
 ) {
   const { zoom } = useTheme()
   const { input, onKeyDown, onKeyUp } = useInput()
@@ -35,15 +35,17 @@ function GameBoyComponent(
             style={{
               display: 'block', // prevents wierd margin
               imageRendering: 'pixelated',
-              zoom
+              zoom,
             }}
             height={DISPLAY_HEIGHT}
             width={DISPLAY_WIDTH}
           />
         </Display>
 
         <div className="flex items-baseline">
-          <Styled.NintendoText className="font-pretendo">Nintendo</Styled.NintendoText>
+          <Styled.NintendoText className="font-pretendo">
+            Nintendo
+          </Styled.NintendoText>
           <Styled.GameBoyText className="font-gills-sans font-medium italic">
             GAME&nbsp;BOY
           </Styled.GameBoyText>
@@ -58,7 +60,8 @@ function GameBoyComponent(
                 onPointerDown={() => onKeyDown(JsKeys.ArrowUp)}
                 onPointerUp={() => onKeyUp(JsKeys.ArrowUp)}
                 $orientation={ArrowOrientation.HORIZONTAL}
-                $pressed={pressedUp}>
+                $pressed={pressedUp}
+              >
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
@@ -69,7 +72,8 @@ function GameBoyComponent(
                 onPointerDown={() => onKeyDown(JsKeys.ArrowLeft)}
                 onPointerUp={() => onKeyUp(JsKeys.ArrowLeft)}
                 $orientation={ArrowOrientation.VERTICAL}
-                $pressed={pressedLeft}>
+                $pressed={pressedLeft}
+              >
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
@@ -79,7 +83,8 @@ function GameBoyComponent(
                 onPointerDown={() => onKeyDown(JsKeys.ArrowRight)}
                 onPointerUp={() => onKeyUp(JsKeys.ArrowRight)}
                 $orientation={ArrowOrientation.VERTICAL}
-                $pressed={pressedRight}>
+                $pressed={pressedRight}
+              >
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
@@ -90,7 +95,8 @@ function GameBoyComponent(
                 onPointerDown={() => onKeyDown(JsKeys.ArrowDown)}
                 onPointerUp={() => onKeyUp(JsKeys.ArrowDown)}
                 $orientation={ArrowOrientation.HORIZONTAL}
-                $pressed={pressedDown}>
+                $pressed={pressedDown}
+              >
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />
                 <Styled.ArrowStripe />

diff --git a/browser/components/gameboy/Zoom.tsx b/browser/components/gameboy/Zoom.tsx
@@ -22,7 +22,7 @@ const Styled = {
   `,
   Value: styled.div`
     margin: 0 5px;
-  `
+  `,
 }
 
 export function Zoom(props: Props) {

diff --git a/browser/components/pages/Debugger.tsx b/browser/components/pages/Debugger.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 import styled, { createGlobalStyle } from 'styled-components'
 
-import { WebHandle } from '../../../debugger-web/pkg'
+import type { WebHandle } from '../../../debugger-web/pkg'
 import { roms } from '../../romsList'
 
 const CANVAS_ID = 'debugger'
@@ -49,7 +49,6 @@ export function Debugger() {
         }
         appHandler = await app.start(canvas, roms)
       } catch (error) {
-        // eslint-disable-next-line no-console
         console.error(error)
       }
     }

diff --git a/browser/components/pages/Landing.tsx b/browser/components/pages/Landing.tsx
@@ -1,8 +1,8 @@
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { ReactComponent as Feather } from '../../assets/images/feather.svg'
-import { ReactComponent as GameboyLogo } from '../../assets/images/gameboy.svg'
+import Feather from '../../assets/images/feather.svg?react'
+import GameboyLogo from '../../assets/images/gameboy.svg?react'
 
 const Nintendo = styled.span`
   font-size: 30px;
@@ -28,7 +28,9 @@ export function Landing() {
         <span className="text-xl mr-3">Just another</span>
         <div className="flex items-baseline justify-center flex-wrap">
           <Nintendo className="font-pretendo mr-2">Nintendo</Nintendo>
-          <GameBoy className="font-gills-sans font-bold italic">GAME&nbsp;BOY</GameBoy>
+          <GameBoy className="font-gills-sans font-bold italic">
+            GAME&nbsp;BOY
+          </GameBoy>
         </div>
         <span className="text-xl ml-3">emulator</span>
       </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,7 +22,7 @@ const Styled = { @@
       `,
       Value: styled.div`
         margin: 0 5px;
-      `
+      `,
     }
     export function Zoom(props: Props) {
@@ Expand Down @@