Update prettier width to 120

tswaters · Jul 6, 2020 · 2a25c1c · 2a25c1c
1 parent 94f7ca6
commit 2a25c1c
Show file tree

Hide file tree

Showing 20 changed files with 117 additions and 359 deletions.
diff --git a/package.json b/package.json
@@ -125,7 +125,8 @@
   "prettier": {
     "semi": false,
     "singleQuote": true,
-    "trailingComma": "all"
+    "trailingComma": "all",
+    "printWidth": 120
   },
   "stylelint": {
     "extends": [

diff --git a/src/ts/components/Container.tsx b/src/ts/components/Container.tsx
@@ -2,25 +2,15 @@ import * as React from 'react'
 import { hot } from 'react-hot-loader/root'
 import { useDispatch, useSelector } from 'react-redux'
 import FireworksComponent from './Fireworks'
-import {
-  newGame,
-  score,
-  version,
-  switchScoreType,
-} from '../../styles/cards.css'
+import { newGame, score, version, switchScoreType } from '../../styles/cards.css'
 import { initialize } from '../redux/actions'
 import { getScore } from '../redux/selectors'
 import { undo, redo } from '../redux/undoable'
 import { ScoringType } from '../redux/globals'
 import GameCanvas from './GameCanvas'
 import StackElement from './StackElement'
 
-import {
-  getStock,
-  getFoundation,
-  getTableau,
-  getWaste,
-} from '../redux/selectors'
+import { getStock, getFoundation, getTableau, getWaste } from '../redux/selectors'
 
 const Container: React.FC = () => {
   const dispatch = useDispatch()
@@ -31,10 +21,7 @@ const Container: React.FC = () => {
   const { stacks: foundation } = useSelector(getFoundation)
 
   const otherGameType = React.useMemo(
-    () =>
-      scoringType === ScoringType.vegas
-        ? ScoringType.regular
-        : ScoringType.vegas,
+    () => (scoringType === ScoringType.vegas ? ScoringType.regular : ScoringType.vegas),
     [scoringType],
   )
 
@@ -70,11 +57,7 @@ const Container: React.FC = () => {
         <button id="new-game" className={newGame} onClick={handleNewGameClick}>
           {'New Game'}
         </button>
-        <button
-          id="change-type"
-          className={switchScoreType}
-          onClick={handleSwitchGameTypeClick}
-        >
+        <button id="change-type" className={switchScoreType} onClick={handleSwitchGameTypeClick}>
           {' Switch to '}
           {ScoringType[otherGameType]}
         </button>

diff --git a/src/ts/components/GameCanvas.tsx b/src/ts/components/GameCanvas.tsx
@@ -1,10 +1,6 @@
 import * as React from 'react'
 import { Point, Drawable, DrawingContext } from '../drawing/Common'
-import {
-  ColorSchemeType,
-  ColorScheme,
-  colorSchemes,
-} from '../drawing/ColorScheme'
+import { ColorSchemeType, ColorScheme, colorSchemes } from '../drawing/ColorScheme'
 import { initialize } from '../drawing/Common'
 import { game } from '../../styles/cards.css'
 
@@ -47,14 +43,8 @@ const useCanvasSize = (canvas: HTMLCanvasElement | null) => {
     return {
       canvasWidth: canvas?.width ?? 0,
       canvasHeight: canvas?.height ?? 0,
-      cardWidth: Math.max(
-        100,
-        Math.floor((window.innerWidth - gutterWidth * 8) / 7),
-      ),
-      cardHeight: Math.max(
-        200,
-        Math.floor((window.innerHeight - gutterHeight * (19 + 3)) / 2),
-      ),
+      cardWidth: Math.max(100, Math.floor((window.innerWidth - gutterWidth * 8) / 7)),
+      cardHeight: Math.max(200, Math.floor((window.innerHeight - gutterHeight * (19 + 3)) / 2)),
       gutterWidth,
       gutterHeight,
     }
@@ -79,10 +69,7 @@ const useCanvasSize = (canvas: HTMLCanvasElement | null) => {
   return size
 }
 
-const intersect = (
-  evt: React.MouseEvent<HTMLCanvasElement>,
-  pointsRef: Map<Path2D, Drawable>,
-) => {
+const intersect = (evt: React.MouseEvent<HTMLCanvasElement>, pointsRef: Map<Path2D, Drawable>) => {
   const { nativeEvent: e } = evt
   const canvas = e.target as HTMLCanvasElement
   const point = { x: e.offsetX, y: e.offsetY }
@@ -98,13 +85,9 @@ const intersect = (
 const GameCanvas: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const pointsRef = React.useRef<Map<Path2D, Drawable>>(new Map())
   const clickHandlers = React.useRef<Map<Path2D, Handler<Drawable>>>(new Map())
-  const doubleClickHandlers = React.useRef<Map<Path2D, Handler<Drawable>>>(
-    new Map(),
-  )
+  const doubleClickHandlers = React.useRef<Map<Path2D, Handler<Drawable>>>(new Map())
 
-  const [colorScheme] = React.useState<ColorScheme>(
-    colorSchemes[ColorSchemeType.light],
-  )
+  const [colorScheme] = React.useState<ColorScheme>(colorSchemes[ColorSchemeType.light])
   const [canvas, setContext] = React.useState<HTMLCanvasElement | null>(null)
   const canvasSize = useCanvasSize(canvas)
 
@@ -147,34 +130,25 @@ const GameCanvas: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     doubleClickHandlers.current.delete(path)
   }, [])
 
-  const handleCanvasDoubleClick = React.useCallback(
-    (evt: React.MouseEvent<HTMLCanvasElement>) => {
-      const selection = intersect(evt, pointsRef.current)
-      if (selection) {
-        const { thing, point } = selection
-        const event = doubleClickHandlers.current.get(thing.path)
-        if (event) event(thing, point)
-      }
-    },
-    [],
-  )
+  const handleCanvasDoubleClick = React.useCallback((evt: React.MouseEvent<HTMLCanvasElement>) => {
+    const selection = intersect(evt, pointsRef.current)
+    if (selection) {
+      const { thing, point } = selection
+      const event = doubleClickHandlers.current.get(thing.path)
+      if (event) event(thing, point)
+    }
+  }, [])
 
-  const handleCanvasClick = React.useCallback(
-    (evt: React.MouseEvent<HTMLCanvasElement>) => {
-      const selection = intersect(evt, pointsRef.current)
-      if (selection) {
-        const { thing, point } = selection
-        const event = clickHandlers.current.get(thing.path)
-        if (event) event(thing, point)
-      }
-    },
-    [],
-  )
+  const handleCanvasClick = React.useCallback((evt: React.MouseEvent<HTMLCanvasElement>) => {
+    const selection = intersect(evt, pointsRef.current)
+    if (selection) {
+      const { thing, point } = selection
+      const event = clickHandlers.current.get(thing.path)
+      if (event) event(thing, point)
+    }
+  }, [])
 
-  const value = React.useMemo(
-    () => gameContext && { context: gameContext, add, remove },
-    [gameContext, add, remove],
-  )
+  const value = React.useMemo(() => gameContext && { context: gameContext, add, remove }, [gameContext, add, remove])
 
   return (
     <>

diff --git a/src/ts/components/StackElement.tsx b/src/ts/components/StackElement.tsx
@@ -28,11 +28,8 @@ const StackElement: React.FC<{
       if (gameContext == null || gameContext.context == null) return
       const { stack, cards, box, direction } = thing
       const prop = direction === StackDirection.horizontal ? 'x' : 'y'
-      const spaceProp =
-        direction === StackDirection.horizontal ? 'gutterWidth' : 'gutterHeight'
-      const guess = Math.floor(
-        (point[prop] - box[prop]) / gameContext.context[spaceProp] ?? 20,
-      )
+      const spaceProp = direction === StackDirection.horizontal ? 'gutterWidth' : 'gutterHeight'
+      const guess = Math.floor((point[prop] - box[prop]) / gameContext.context[spaceProp] ?? 20)
       const index = Math.min(cards.length - 1, guess)
       dispatch(doubleClickCard(stack, cards[index]))
     },
@@ -44,11 +41,8 @@ const StackElement: React.FC<{
       if (gameContext == null || gameContext.context == null) return
       const { stack, cards, box, direction } = thing
       const prop = direction === StackDirection.horizontal ? 'x' : 'y'
-      const spaceProp =
-        direction === StackDirection.horizontal ? 'gutterWidth' : 'gutterHeight'
-      const guess = Math.floor(
-        (point[prop] - box[prop]) / gameContext.context[spaceProp] ?? 20,
-      )
+      const spaceProp = direction === StackDirection.horizontal ? 'gutterWidth' : 'gutterHeight'
+      const guess = Math.floor((point[prop] - box[prop]) / gameContext.context[spaceProp] ?? 20)
       const index = Math.min(cards.length - 1, guess)
       dispatch(clickCard(stack, cards[index]))
     },

diff --git a/src/ts/drawing/Card.ts b/src/ts/drawing/Card.ts
@@ -15,25 +15,16 @@ interface GetCard {
   (context: DrawingContext, card?: StackCard): ImageData
 }
 
-export const isRed = ({ card: { suit } }: StackCard) =>
-  [SuitType.diamond, SuitType.heart].includes(suit)
+export const isRed = ({ card: { suit } }: StackCard) => [SuitType.diamond, SuitType.heart].includes(suit)
 
 interface CalculateFontSizes {
   (context: DrawingContext, card: StackCard, type: FontSizeType): string
 }
 
 export const isBig = ({ card: { value } }: StackCard) =>
-  [ValueType.ace, ValueType.jack, ValueType.queen, ValueType.king].includes(
-    value,
-  )
-    ? true
-    : false
-
-export const getBoxPath = (
-  { x, y, width, height }: Box,
-  radius = 10,
-  smaller = 0,
-) => {
+  [ValueType.ace, ValueType.jack, ValueType.queen, ValueType.king].includes(value) ? true : false
+
+export const getBoxPath = ({ x, y, width, height }: Box, radius = 10, smaller = 0) => {
   const path = new Path2D()
 
   const dx = x + smaller
@@ -71,39 +62,24 @@ export const getGlyphLocations = (
   const minCellWidth = Math.floor(cardWidth / 5)
   const minCellHeight = Math.floor(cardHeight / 10)
 
-  const searchFontSize = (
-    type: FontSizeType,
-    min: number,
-    max: number,
-  ): string => {
+  const searchFontSize = (type: FontSizeType, min: number, max: number): string => {
     const isBigEnough = (width: number, height: number) => {
-      if (type === FontSizeType.Corner)
-        return width > minCellWidth && height > minCellHeight / 2
+      if (type === FontSizeType.Corner) return width > minCellWidth && height > minCellHeight / 2
       else if (isBig(stackCard)) return width > cardWidth - minCellWidth * 2
       else return width > minCellWidth && height > minCellHeight
     }
     const index = Math.floor((max + min) / 2)
     ctx.font = `${allFontSizes[index]}px sans-serif`
-    const { width } = ctx.measureText(
-      type === FontSizeType.Corner ? '10' : '\u2665',
-    )
+    const { width } = ctx.measureText(type === FontSizeType.Corner ? '10' : '\u2665')
     const { width: height } = ctx.measureText('M') // approx
     if (min > max) return `${allFontSizes[index]}px sans-serif`
     if (isBigEnough(width, height)) return searchFontSize(type, min, index - 1)
     return searchFontSize(type, index + 1, max)
   }
 
   const fontSizes: { [key in FontSizeType]: string } = {
-    [FontSizeType.Corner]: searchFontSize(
-      FontSizeType.Corner,
-      0,
-      allFontSizes.length - 1,
-    ),
-    [FontSizeType.Regular]: searchFontSize(
-      FontSizeType.Regular,
-      0,
-      allFontSizes.length - 1,
-    ),
+    [FontSizeType.Corner]: searchFontSize(FontSizeType.Corner, 0, allFontSizes.length - 1),
+    [FontSizeType.Regular]: searchFontSize(FontSizeType.Regular, 0, allFontSizes.length - 1),
   }
 
   const { suit, value } = card
@@ -269,10 +245,7 @@ export const getHiddenImageData: GetCard = ({
   return ctx.getImageData(box.x, box.y, box.width, box.height)
 }
 
-export const getCardImageData: GetCard = (
-  context: DrawingContext,
-  card: StackCard,
-) => {
+export const getCardImageData: GetCard = (context: DrawingContext, card: StackCard) => {
   const { ctx, cardWidth: width, cardHeight: height, colorScheme } = context
   const box = { x: 0, y: 0, width, height }
 
@@ -294,11 +267,7 @@ export const getCardImageData: GetCard = (
       ctx.translate(width, height)
       ctx.rotate(Math.PI)
     }
-    ctx.fillText(
-      glyph.glyph,
-      glyph.x + box.x * (glyph.rotated ? -1 : 1),
-      glyph.y + box.y * (glyph.rotated ? -1 : 1),
-    )
+    ctx.fillText(glyph.glyph, glyph.x + box.x * (glyph.rotated ? -1 : 1), glyph.y + box.y * (glyph.rotated ? -1 : 1))
     if (glyph.rotated) ctx.restore()
   }
   return ctx.getImageData(box.x, box.y, box.width, box.height)

diff --git a/src/ts/drawing/Common.ts b/src/ts/drawing/Common.ts
@@ -1,11 +1,6 @@
 import { Cards, StackCard } from '../lib/Card'
-import { ColorSchemeType, ColorScheme, colorSchemes } from './ColorScheme'
-import {
-  getErrorImageData,
-  getEmptyImageData,
-  getHiddenImageData,
-  getCardImageData,
-} from './Card'
+import { ColorScheme } from './ColorScheme'
+import { getErrorImageData, getEmptyImageData, getHiddenImageData, getCardImageData } from './Card'
 
 export type Box = {
   x: number
@@ -48,14 +43,8 @@ export const initialize = (context: DrawingContext) => {
   cardCache.set('error', getErrorImageData(context))
   Cards.forEach((card) => {
     cardCache
-      .set(
-        getKey({ card, selected: true }),
-        getCardImageData(context, { card, selected: true }),
-      )
-      .set(
-        getKey({ card, selected: false }),
-        getCardImageData(context, { card, selected: false }),
-      )
+      .set(getKey({ card, selected: true }), getCardImageData(context, { card, selected: true }))
+      .set(getKey({ card, selected: false }), getCardImageData(context, { card, selected: false }))
   })
 
   c2 = document.createElement('canvas')
@@ -64,12 +53,7 @@ export const initialize = (context: DrawingContext) => {
   context.ctx.clearRect(0, 0, context.cardWidth + 2, context.cardHeight + 2)
 }
 
-export const writeDataToCanvas = (
-  context: DrawingContext,
-  data: ImageData,
-  x: number,
-  y: number,
-) => {
+export const writeDataToCanvas = (context: DrawingContext, data: ImageData, x: number, y: number) => {
   const ctx2 = c2.getContext('2d')
   ctx2?.putImageData(data, 0, 0)
   context.ctx.drawImage(c2, x, y)

diff --git a/src/ts/drawing/Stack.ts b/src/ts/drawing/Stack.ts
@@ -1,12 +1,5 @@
 import { Stack, StackCard, StackDirection, StackType } from '../lib/Card'
-import {
-  Box,
-  Point,
-  writeDataToCanvas,
-  cardCache,
-  getKey,
-  DrawingContext,
-} from './Common'
+import { Box, Point, writeDataToCanvas, cardCache, getKey, DrawingContext } from './Common'
 
 type StackDrawingOptions = {
   direction: StackDirection | null
@@ -77,8 +70,7 @@ export const drawStack: DrawStack = (context, { stack, draws, showing }) => {
   })
   if (max) cards = cards.slice(-max)
 
-  const space =
-    direction === StackDirection.horizontal ? 'gutterWidth' : 'gutterHeight'
+  const space = direction === StackDirection.horizontal ? 'gutterWidth' : 'gutterHeight'
   const box = {
     x: offset.x,
     y: offset.y,
@@ -105,24 +97,18 @@ export const drawStack: DrawStack = (context, { stack, draws, showing }) => {
   const elements = []
 
   if (error) elements.push({ data: cardCache.get('error'), x: box.x, y: box.y })
-  else if (empty)
-    elements.push({ data: cardCache.get('empty'), x: box.x, y: box.y })
+  else if (empty) elements.push({ data: cardCache.get('empty'), x: box.x, y: box.y })
   else
     cards.forEach((card, i) => {
-      const drawing = card.hidden
-        ? cardCache.get('hidden')
-        : cardCache.get(getKey(card))
+      const drawing = card.hidden ? cardCache.get('hidden') : cardCache.get(getKey(card))
       if (drawing) {
-        const x =
-          direction === StackDirection.horizontal ? i * context[space] : 0
-        const y =
-          direction === StackDirection.horizontal ? 0 : i * context[space]
+        const x = direction === StackDirection.horizontal ? i * context[space] : 0
+        const y = direction === StackDirection.horizontal ? 0 : i * context[space]
         elements.push({ data: drawing, x: box.x + x, y: box.y + y })
       }
     })
 
-  for (const { data, x, y } of elements)
-    data && writeDataToCanvas(context, data, x, y)
+  for (const { data, x, y } of elements) data && writeDataToCanvas(context, data, x, y)
 
   return { path, box, direction, space, stack, cards }
 }