All files / web/src/arcade-games/know-your-world/utils responsiveStyles.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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Responsive style utilities for consistent breakpoint handling.
 * Centralizes responsive patterns used across Know Your World components.
 */

/**
 * Breakpoint keys matching Panda CSS convention.
 * - base: 0px+ (mobile)
 * - sm: 640px+ (small tablets)
 * - md: 768px+ (tablets/small desktop)
 * - lg: 1024px+ (desktop)
 * - xl: 1280px+ (large desktop)
 */
export const BREAKPOINTS = {
  mobile: 'base',
  tablet: 'sm',
  desktop: 'md',
  wide: 'lg',
} as const

/**
 * Creates responsive display styles for showing/hiding elements.
 *
 * @example
 * // Show only on desktop
 * className={css(responsiveDisplay({ showOn: 'desktop' }))}
 *
 * // Show only on mobile
 * className={css(responsiveDisplay({ hideOn: 'desktop' }))}
 */
export function responsiveDisplay(options: {
  showOn?: 'mobile' | 'desktop'
  hideOn?: 'mobile' | 'desktop'
}): { display: Record<string, string> } {
  if (options.showOn === 'desktop') {
    return { display: { base: 'none', md: 'flex' } }
  }
  if (options.showOn === 'mobile') {
    return { display: { base: 'flex', md: 'none' } }
  }
  if (options.hideOn === 'desktop') {
    return { display: { base: 'flex', md: 'none' } }
  }
  if (options.hideOn === 'mobile') {
    return { display: { base: 'none', md: 'flex' } }
  }
  return { display: { base: 'flex' } }
}

/**
 * Creates responsive transform scale styles.
 * Commonly used for shrinking controls on mobile.
 *
 * @example
 * // 75% on mobile, 100% on tablet+
 * className={css(responsiveScale(0.75, 1))}
 */
export function responsiveScale(
  mobileScale: number,
  desktopScale: number = 1,
  origin: string = 'top right'
): {
  transform: Record<string, string>
  transformOrigin: string
} {
  return {
    transform: {
      base: `scale(${mobileScale})`,
      sm: `scale(${desktopScale})`,
    },
    transformOrigin: origin,
  }
}

/**
 * Creates responsive spacing/gap styles.
 *
 * @example
 * className={css(responsiveGap(1, 2))}
 */
export function responsiveGap(
  mobileGap: number | string,
  desktopGap: number | string
): { gap: Record<string, number | string> } {
  return {
    gap: {
      base: mobileGap,
      sm: desktopGap,
    },
  }
}

/**
 * Creates responsive flex direction styles.
 * Useful for stacking elements vertically on mobile.
 *
 * @example
 * // Stack on mobile, row on desktop
 * className={css(responsiveFlexDirection('column', 'row'))}
 */
export function responsiveFlexDirection(
  mobileDirection: 'row' | 'column',
  desktopDirection: 'row' | 'column'
): { flexDirection: Record<string, 'row' | 'column'> } {
  return {
    flexDirection: {
      base: mobileDirection,
      sm: desktopDirection,
    },
  }
}

/**
 * Creates responsive font size styles.
 *
 * @example
 * className={css(responsiveFontSize('sm', 'md'))}
 */
export function responsiveFontSize(
  mobileSize: string,
  desktopSize: string
): { fontSize: Record<string, string> } {
  return {
    fontSize: {
      base: mobileSize,
      sm: desktopSize,
    },
  }
}

/**
 * CSS trick to prevent a flex child from expanding its parent.
 * Sets width to 0 but min-width to 100% so it fills available space
 * without contributing to parent's width calculation.
 */
export const preventFlexExpansion = {
  width: 0,
  minWidth: '100%',
} as const