All files / web/src/components/toys/coordinate-plane/challenge quadrantPlacement.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import type { CoordinatePlaneState } from '../types'
import type { CardPlacement } from './types'
import { worldToScreen2D } from '../../shared/coordinateConversions'

const CARD_MARGIN = 16

/**
 * Place the card in the opposite quadrant from the solution point,
 * so it doesn't cover the area the student needs to work in.
 */
export function computeCardPlacement(
  solutionX: number,
  solutionY: number,
  state: CoordinatePlaneState,
  canvasWidth: number,
  canvasHeight: number
): CardPlacement {
  const screen = worldToScreen2D(
    solutionX,
    solutionY,
    state.center.x,
    state.center.y,
    state.pixelsPerUnit.x,
    state.pixelsPerUnit.y,
    canvasWidth,
    canvasHeight
  )

  // Determine which half of the screen the solution is in
  const solutionOnRight = screen.x > canvasWidth / 2
  const solutionOnBottom = screen.y > canvasHeight / 2

  // Place card in opposite quadrant
  if (solutionOnRight && solutionOnBottom) {
    return {
      position: 'top-left',
      style: { top: CARD_MARGIN, left: CARD_MARGIN },
    }
  } else if (solutionOnRight && !solutionOnBottom) {
    return {
      position: 'bottom-left',
      style: { bottom: CARD_MARGIN, left: CARD_MARGIN },
    }
  } else if (!solutionOnRight && solutionOnBottom) {
    return {
      position: 'top-right',
      style: { top: CARD_MARGIN, right: CARD_MARGIN },
    }
  } else {
    return {
      position: 'bottom-right',
      style: { bottom: CARD_MARGIN, right: CARD_MARGIN },
    }
  }
}