Add antialiasing support, refactor preferences a little bit (#2807)

- Add antialiasing preference
  - Change styles accordingly
- Add `PokemonPortrait` component to DRY up some images
- Refactor preferences a bit
  - Add subscriptions and React hooks so components can update in
    response to preferences changing
  - Freeze object and remove export to prevent accidental writes to
    preferences without going through `savePreferences` (and notifying
    subscribers, etc)
  - Move volume update logic to `playMusic` so options modals etc don't
    have to concerns themselves with it
  - Remove extrenuous instances of `loadPreferences` and don't export it
    since they're loaded initially anyway
- Clean up keybind modal a little bit
  - Rename `keyRemapped` -> `currentlyRemapping` for clarity
  - Memoize

app/public/dist/client/locales/de/translation.json

@@ -2919,6 +2919,7 @@
   "show_details_on_hover": "Die Details werden angezeigt, wenn du mit der Maus darüber fährst, anstatt mit der rechten Maustaste zu klicken",
   "show_damage_numbers": "Zeige Schadens Nummern an",
   "disable_animated_tilemap": "Deaktiviere Hintergrund Animationen",
+  "antialiasing": "Aktiviere anti-aliasing",
   "save": "Speichern",
   "passive": "Passiv",
   "pick_additional_pokemon_hint": "Wähle ein zusätzliches Pokémon. Es wird für alle verfügbar sein.",

app/public/dist/client/locales/en/translation.json

@@ -2996,6 +2996,7 @@
   "show_details_on_hover": "Show details on hover instead of right click",
   "show_damage_numbers": "Show damage numbers",
   "disable_animated_tilemap": "Disable background animations",
+  "antialiasing": "Enable anti-aliasing",
   "save": "Save",
   "reset": "Reset",
   "snapshot": "Snapshot",

app/public/dist/client/locales/es/translation.json

@@ -2950,6 +2950,7 @@
   "show_details_on_hover": "Mostrar detalles al pasar el mouse en lugar de hacer clic con el botón derecho",
   "show_damage_numbers": "Mostrar números de daños",
   "disable_animated_tilemap": "Deshabilitar la animación para el mapa de mosaicos (fondo)",
+  "antialiasing": "Activar anti-aliasing",
   "save": "Ahorrar",
   "reset": "Reiniciar",
   "snapshot": "Snapshot",

app/public/dist/client/locales/fr/translation.json

@@ -2989,6 +2989,7 @@
   "show_details_on_hover": "Afficher les détails au survol au lieu du clic droit",
   "show_damage_numbers": "Afficher les nombres de dégâts des coups",
   "disable_animated_tilemap": "Désactiver les animations en arrière-plan",
+  "antialiasing": "Afficher l'anticrénelage",
   "save": "Sauvegarder",
   "reset": "Réinitialiser",
   "snapshot": "Copier l'équipe actuelle",

app/public/dist/client/locales/it/translation.json

@@ -2857,6 +2857,7 @@
   "show_details_on_hover": "Mostra i dettagli al passaggio del mouse invece che con il clic destro",
   "show_damage_numbers": "Mostra valore dei danni",
   "disable_animated_tilemap": "Disabilita animazioni in background",
+  "antialiasing": "Attiva l'antialiasing",
   "save": "Salva",
   "reset": "Reset",
   "snapshot": "Snapshot",

app/public/src/game/components/emote-menu.css

@@ -15,7 +15,6 @@
 .emote-menu li img {
   width: 80px;
   height: 80px;
-  image-rendering: pixelated;
   border: 1px solid #000000;
   border-radius: 4px;
   box-shadow: 2px 2px #00000060;

app/public/src/game/components/emote-menu.tsx

@@ -11,13 +11,15 @@ import store from "../../stores"
 import { getPortraitSrc } from "../../../../utils/avatar"
 import GameScene from "../scenes/game-scene"
 import "./emote-menu.css"
+import { usePreference } from "../../preferences"
 
 export function EmoteMenuComponent(props: {
   player: IPlayer
   index: string
   shiny: boolean
   sendEmote: (emotion: Emotion) => void
 }) {
+  const [antialiasing] = usePreference('antialiasing')
   const { t } = useTranslation()
   const emotions: Emotion[] = AvatarEmotions.filter((emotion) => {
     const indexEmotion = Object.values(Emotion).indexOf(emotion)
@@ -44,7 +46,10 @@ export function EmoteMenuComponent(props: {
             <img
               src={getPortraitSrc(props.index, props.shiny, emotion)}
               title={emotion + (!unlocked ? " (locked)" : "")}
-              className={cc({ locked: !unlocked })}
+              className={cc({
+                locked: !unlocked,
+                pixelated: !antialiasing
+              })}
               onClick={() => unlocked && props.sendEmote(emotion)}
             />
             <span className="counter">{i + 1}</span>

app/public/src/game/components/item-container.ts

@@ -10,7 +10,7 @@ import {
   WeatherRocks
 } from "../../../../types/enum/Item"
 import { getGameScene } from "../../pages/game"
-import { preferences } from "../../preferences"
+import { preference } from "../../preferences"
 import DraggableObject from "./draggable-object"
 import ItemDetail from "./item-detail"
 import ItemsContainer from "./items-container"
@@ -90,7 +90,7 @@ export default class ItemContainer extends DraggableObject {
 
   onPointerOver(pointer) {
     super.onPointerOver(pointer)
-    if (preferences.showDetailsOnHover && !this.detail?.visible) {
+    if (preference("showDetailsOnHover") && !this.detail?.visible) {
       this.mouseoutTimeout && clearTimeout(this.mouseoutTimeout)
       this.openDetail()
     }
@@ -108,7 +108,7 @@ export default class ItemContainer extends DraggableObject {
     if (this.draggable) {
       this.circle?.setFrame(this.cellIndex * 3)
     }
-    if (preferences.showDetailsOnHover) {
+    if (preference("showDetailsOnHover")) {
       this.mouseoutTimeout = setTimeout(
         () => {
           if (this.detail?.visible) {
@@ -123,7 +123,7 @@ export default class ItemContainer extends DraggableObject {
   onPointerDown(pointer: Phaser.Input.Pointer) {
     super.onPointerDown(pointer)
     this.parentContainer.bringToTop(this)
-    if (pointer.rightButtonDown() && !preferences.showDetailsOnHover) {
+    if (pointer.rightButtonDown() && !preference("showDetailsOnHover")) {
       if (!this.detail?.visible) {
         this.openDetail()
         this.updateDropZone(false)
@@ -155,7 +155,7 @@ export default class ItemContainer extends DraggableObject {
           this.mouseoutTimeout && clearTimeout(this.mouseoutTimeout)
         })
         this.detail.dom.addEventListener("mouseleave", () => {
-          if (preferences.showDetailsOnHover) {
+          if (preference("showDetailsOnHover")) {
             this.mouseoutTimeout = setTimeout(
               () => {
                 if (this.detail?.visible) {

app/public/src/game/components/item-detail.css

@@ -20,7 +20,6 @@
   width: 45px;
   height: 45px;
   align-self: center;
-  image-rendering: pixelated;
   object-fit: contain;
   grid-area: icon;
 }
@@ -39,7 +38,6 @@
 .game-item-recipe img {
   width: 22.5px;
   height: 22.5px;
-  image-rendering: pixelated;
   object-fit: contain;
 }
 

app/public/src/game/components/item-detail.tsx

@@ -8,6 +8,8 @@ import { Stat } from "../../../../types/enum/Game"
 import { HMs, Item, ItemRecipe, TMs } from "../../../../types/enum/Item"
 import { addIconsToDescription } from "../../pages/utils/descriptions"
 import "./item-detail.css"
+import { cc } from "../../pages/utils/jsx"
+import { usePreferences } from "../../preferences"
 
 export function ItemDetailTooltip({
   item,
@@ -16,6 +18,7 @@ export function ItemDetailTooltip({
   item: Item
   depth?: number
 }) {
+  const [preferences] = usePreferences()
   const { t } = useTranslation()
   const recipes = useMemo(
     () =>
@@ -42,11 +45,29 @@ export function ItemDetailTooltip({
 
   return (
     <div className="game-item-detail">
-      <img className="game-item-detail-icon" src={`assets/item/${getImageFilename()}.png`} />
+      <img
+        className={cc("game-item-detail-icon", {
+          pixelated: !preferences.antialiasing
+        })}
+        src={`assets/item/${getImageFilename()}.png`}
+      />
       <div className="game-item-detail-name">
-        {ItemRecipe[item] && (<div className="game-item-recipe">
-          {ItemRecipe[item]?.map((item, i) => <React.Fragment key={`component_${i}_${item}`}><img className="game-item-detail-icon" src={`assets/item/${item}.png`} key={item} />{i === 0 && ' + '}</React.Fragment>)}
-        </div>)}
+        {ItemRecipe[item] && (
+          <div className="game-item-recipe">
+            {ItemRecipe[item]?.map((item, i) => (
+              <React.Fragment key={`component_${i}_${item}`}>
+                <img
+                  className={cc("game-item-detail-icon", {
+                    pixelated: !preferences.antialiasing
+                  })}
+                  src={`assets/item/${item}.png`}
+                  key={item}
+                />
+                {i === 0 && " + "}
+              </React.Fragment>
+            ))}
+          </div>
+        )}
         {t(`item.${item}`)}
       </div>
       <div className="game-item-detail-stats">

app/public/src/game/components/pokemon-avatar.ts

@@ -11,6 +11,8 @@ import GameScene from "../scenes/game-scene"
 import EmoteMenu from "./emote-menu"
 import LifeBar from "./life-bar"
 import PokemonSprite from "./pokemon"
+import { preference } from "../../preferences"
+import { cc } from "../../pages/utils/jsx"
 
 export default class PokemonAvatar extends PokemonSprite {
   scene: GameScene
@@ -278,6 +280,7 @@ export class EmoteBubble extends GameObjects.DOMElement {
 
     const emoteImg = document.createElement("img")
     emoteImg.src = getAvatarSrc(emoteAvatar)
+    emoteImg.className = cc({ pixelated: !preference('antialiasing') })
 
     this.dom.appendChild(emoteImg)
     this.setElement(this.dom)

app/public/src/game/components/pokemon-detail.tsx

@@ -12,6 +12,8 @@ import { Synergy } from "../../../../types/enum/Synergy"
 import { AbilityTooltip } from "../../pages/component/ability/ability-tooltip"
 import { addIconsToDescription } from "../../pages/utils/descriptions"
 import { getPortraitSrc } from "../../../../utils/avatar"
+import { cc } from "../../pages/utils/jsx"
+import { preference } from "../../preferences"
 
 export default class PokemonDetail extends GameObjects.DOMElement {
   dom: HTMLDivElement
@@ -102,7 +104,9 @@ export default class PokemonDetail extends GameObjects.DOMElement {
 
     if (index === PkmIndex[Pkm.EGG]) {
       const eggHint = document.createElement("img")
-      eggHint.className = "game-pokemon-detail-portrait-hint"
+      eggHint.className = cc("game-pokemon-detail-portrait-hint", {
+        pixelated: !preference("antialiasing")
+      })
       eggHint.src = getPortraitSrc(PkmIndex[evolution])
       wrap.appendChild(eggHint)
     }

app/public/src/game/components/pokemon-special.tsx

@@ -3,7 +3,7 @@ import PokemonFactory from "../../../../models/pokemon-factory"
 import { PokemonActionState } from "../../../../types/enum/Game"
 import { Pkm } from "../../../../types/enum/Pokemon"
 import { clamp, min } from "../../../../utils/number"
-import { preferences } from "../../preferences"
+import { preference } from "../../preferences"
 import AnimationManager from "../animation-manager"
 import GameScene from "../scenes/game-scene"
 import PokemonSprite from "./pokemon"
@@ -72,7 +72,7 @@ export default class PokemonSpecial extends PokemonSprite {
 
   updateTooltipPosition() {
     if (this.detail) {
-      if (this.input && preferences.showDetailsOnHover) {
+      if (this.input && preference("showDetailsOnHover")) {
         this.detail.setPosition(this.input.localX, this.input.localY)
         return
       }

app/public/src/game/components/pokemon.ts

@@ -33,7 +33,7 @@ import { clamp, min } from "../../../../utils/number"
 import { chance } from "../../../../utils/random"
 import { values } from "../../../../utils/schemas"
 import { transformAttackCoordinate } from "../../pages/utils/utils"
-import { preferences } from "../../preferences"
+import { preference } from "../../preferences"
 import type { DebugScene } from "../scenes/debug-scene"
 import type GameScene from "../scenes/game-scene"
 import { displayAbility } from "./abilities-animations"
@@ -274,7 +274,7 @@ export default class PokemonSprite extends DraggableObject {
 
   updateTooltipPosition() {
     if (this.detail) {
-      if (this.input && preferences.showDetailsOnHover) {
+      if (this.input && preference("showDetailsOnHover")) {
         this.detail.setPosition(
           this.input.localX + 200,
           min(0)(this.input.localY - 175)
@@ -356,7 +356,7 @@ export default class PokemonSprite extends DraggableObject {
     super.onPointerDown(pointer)
     if (
       this.shouldShowTooltip &&
-      !preferences.showDetailsOnHover &&
+      !preference("showDetailsOnHover") &&
       pointer.rightButtonDown() &&
       this.scene &&
       !this.detail
@@ -371,7 +371,7 @@ export default class PokemonSprite extends DraggableObject {
     super.onPointerUp()
     if (
       this.shouldShowTooltip &&
-      preferences.showDetailsOnHover &&
+      preference("showDetailsOnHover") &&
       !this.detail
     ) {
       this.openDetail()
@@ -380,7 +380,7 @@ export default class PokemonSprite extends DraggableObject {
 
   onPointerOut(): void {
     super.onPointerOut()
-    if (this.shouldShowTooltip && preferences.showDetailsOnHover) {
+    if (this.shouldShowTooltip && preference("showDetailsOnHover")) {
       this.closeDetail()
     }
   }
@@ -389,7 +389,7 @@ export default class PokemonSprite extends DraggableObject {
     super.onPointerOver(pointer)
 
     if (
-      preferences.showDetailsOnHover &&
+      preference("showDetailsOnHover") &&
       this.shouldShowTooltip &&
       this.detail == null &&
       !pointer.leftButtonDown() // we're dragging another pokemon

app/public/src/game/game-container.ts

@@ -39,12 +39,13 @@ import { logger } from "../../../utils/logger"
 import { clamp, max } from "../../../utils/number"
 import { SOUNDS, playSound } from "../pages/utils/audio"
 import { transformCoordinate } from "../pages/utils/utils"
-import { loadPreferences, preferences } from "../preferences"
+import { preference, subscribeToPreferences } from "../preferences"
 import store from "../stores"
 import { changePlayer, setPlayer, setSimulation } from "../stores/GameStore"
 import { getPortraitSrc } from "../../../utils/avatar"
 import { BoardMode } from "./components/board-manager"
 import GameScene from "./scenes/game-scene"
+import { cc } from "../pages/utils/jsx"
 
 class GameContainer {
   room: Room<GameState>
@@ -226,7 +227,7 @@ class GameContainer {
   initializeGame() {
     if (this.game != null) return // prevent initializing twice
     // Create Phaser game
-    const renderer = Number(loadPreferences().renderer ?? Phaser.AUTO)
+    const renderer = Number(preference("renderer") ?? Phaser.AUTO)
     const config = {
       type: renderer,
       width: 1950,
@@ -258,6 +259,14 @@ class GameContainer {
     if (this.game.renderer.type === Phaser.WEBGL) {
       this.game.plugins.install("rexOutline", OutlinePlugin, true)
     }
+    const unsubscribeToPreferences = subscribeToPreferences(
+      ({ antialiasing }) => {
+        if (!this.game?.canvas) return
+        this.game.canvas.style.imageRendering = antialiasing ? "" : "pixelated"
+      },
+      true
+    )
+    this.game.events.on("destroy", unsubscribeToPreferences)
   }
 
   resize() {
@@ -406,7 +415,8 @@ class GameContainer {
               pokemon.index,
               config?.selectedShiny,
               config?.selectedEmotion
-            )
+            ),
+            className: cc({ pixelated: !preference("antialiasing") })
           },
           null
         )
@@ -533,7 +543,7 @@ class GameContainer {
     index: string
     amount: number
   }) {
-    if (preferences.showDamageNumbers) {
+    if (preference("showDamageNumbers")) {
       this.gameScene?.battle?.displayDamage(
         message.x,
         message.y,