refactor: move getComputedStyleWithCache() to utils.ts

igrep · Feb 25, 2024 · cc6fec5 · cc6fec5
1 parent 3a37a9d
commit cc6fec5
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 23 deletions.
diff --git a/src/game/getBlockElements.ts b/src/game/getBlockElements.ts
@@ -1,5 +1,9 @@
-import { getComputedStyleWithCache } from "./getComputedStyleWithCache"
-import { isBBAElement, isFrameElement, isPenetrableFrame } from "./utils"
+import {
+  getComputedStyleWithCache,
+  isBBAElement,
+  isFrameElement,
+  isPenetrableFrame
+} from "./utils"
 
 export function getBlockElements(): Element[] {
   const blockElements: Element[] = []

diff --git a/src/game/getComputedStyleWithCache.ts b/src/game/getComputedStyleWithCache.ts
diff --git a/src/game/updateBlocks.ts b/src/game/updateBlocks.ts
@@ -1,8 +1,8 @@
 import { getRectOfBlock, type Block } from "./blocks"
-import { getComputedStyleWithCache } from "./getComputedStyleWithCache"
 import type { Scoreboard } from "./scoreboard"
 import {
   assert,
+  getComputedStyleWithCache,
   isFrameElement,
   isPenetrableFrame,
   isSVGElement,

diff --git a/src/game/utils.ts b/src/game/utils.ts
@@ -111,3 +111,24 @@ export function isBBAElement(element: Element): boolean {
     element.classList.contains(collisionPointOnBallClass)
   )
 }
+
+// getComputedStyle() is expensive, so we should cache the result.
+// We can assume that the style of an element doesn't change, because the page is frozen.
+// Please note that DOMRect-related settings can't be used in this function,
+// because they can change by removing blocks. Use getBoundingClientRect() instead.
+const styleCache = new Map<Element, CSSStyleDeclaration>()
+export function getComputedStyleWithCache(
+  element: Element
+): Omit<
+  CSSStyleDeclaration,
+  keyof ReturnType<typeof Element.prototype.getBoundingClientRect>
+> {
+  const cache = styleCache.get(element)
+  if (cache) {
+    return cache
+  } else {
+    const style = getComputedStyle(element)
+    styleCache.set(element, style)
+    return style
+  }
+}