@nayan-ui/games 1.18.0 → 1.20.0

package/src/helpers/GamePatternData.ts

@@ -0,0 +1,120 @@
+// The game background pattern as plain data, with no renderer: three translucent rainbow gradients,
+// floating shapes, large decorations and a faint 40pt grid, in window points and drawing order.
+// Shared seeded geometry and colors keep the engine scenes and website pattern consistent.
+
+export const PATTERN_RAINBOW = [
+  '#E91E63',
+  '#F44336',
+  '#FF5722',
+  '#FF9800',
+  '#FFC107',
+  '#8E24AA',
+  '#CDDC39',
+  '#8BC34A',
+  '#4CAF50',
+  '#009688',
+  '#00BCD4',
+  '#03A9F4',
+  '#2196F3',
+  '#3F51B5',
+  '#9C27B0'
+] as const;
+
+const R = PATTERN_RAINBOW;
+
+/** A linear gradient across the whole pattern: evenly spaced CSS color stops from `start` to `end`. */
+export type PatternGradient = { start: [number, number]; end: [number, number]; colors: readonly string[] };
+
+export type PatternShape =
+  | { kind: 'circle'; cx: number; cy: number; r: number; color: string }
+  | { kind: 'rrect'; x: number; y: number; w: number; h: number; r: number; color: string }
+  | { kind: 'diamond'; cx: number; cy: number; size: number; color: string };
+
+export type PatternLine = { x: number; y: number; w: number; h: number };
+
+export type GamePattern = {
+  width: number;
+  height: number;
+  gradients: PatternGradient[];
+  /** Floating shapes, then the large decorations, in drawing order. */
+  shapes: PatternShape[];
+  /** The faint grid, drawn last in `GRID_COLOR`. */
+  grid: PatternLine[];
+};
+
+export const PATTERN_GRID_COLOR = 'rgba(0, 0, 0, 0.02)';
+
+const seededRandom = (seed: number) => {
+  const x = Math.sin(seed * 12.9898 + seed * 78.233) * 43758.5453;
+  return x - Math.floor(x);
+};
+
+const hexAlpha = (opacity: number) =>
+  Math.floor(opacity * 255)
+    .toString(16)
+    .padStart(2, '0');
+
+/** The pattern for a window `width` x `height` points. */
+export function gamePattern(width: number, height: number): GamePattern {
+  const gradients: PatternGradient[] = [
+    {
+      start: [0, 0],
+      end: [width, height],
+      colors: [`${R[0]}40`, `${R[2]}35`, `${R[4]}40`, `${R[6]}35`, `${R[8]}40`, `${R[10]}35`, `${R[12]}40`, `${R[14]}35`]
+    },
+    {
+      start: [0, 0],
+      end: [width / 2, height / 2],
+      colors: [`${R[1]}25`, 'transparent', `${R[5]}25`, 'transparent', `${R[9]}25`, 'transparent', `${R[13]}25`, 'transparent']
+    },
+    { start: [width, 0], end: [0, height], colors: [`${R[3]}20`, 'transparent', `${R[7]}20`, 'transparent', `${R[11]}20`, 'transparent'] }
+  ];
+
+  const shapes: PatternShape[] = [];
+  // Floating shapes: circle, square, tall rect, wide rect, diamond, in turn
+  const count = 20;
+  for (let i = 0; i < count; i++) {
+    const x = (width / count) * i + Math.sin(i * 0.5) * 40 + seededRandom(i * 3 + 1) * 80;
+    const y = (height / count) * i + Math.cos(i * 0.7) * 50 + seededRandom(i * 3 + 2) * 100;
+    const size = 24 + seededRandom(i * 3 + 3) * 24;
+    const color = `${R[i % R.length]}${hexAlpha(0.2 + Math.sin(i) * 0.1)}`;
+    const px = Math.max(size, Math.min(width - size, x));
+    const py = Math.max(size, Math.min(height - size, y));
+    switch (i % 5) {
+      case 0:
+        shapes.push({ kind: 'circle', cx: px + size / 2, cy: py + size / 2, r: size / 2, color });
+        break;
+      case 1:
+        shapes.push({ kind: 'rrect', x: px, y: py, w: size, h: size, r: size * 0.2, color });
+        break;
+      case 2:
+        shapes.push({ kind: 'rrect', x: px, y: py, w: size * 0.55, h: size * 1.3, r: size * 0.12, color });
+        break;
+      case 3:
+        shapes.push({ kind: 'rrect', x: px, y: py, w: size * 1.3, h: size * 0.55, r: size * 0.12, color });
+        break;
+      default:
+        shapes.push({ kind: 'diamond', cx: px + size / 2, cy: py + size / 2, size, color });
+    }
+  }
+  // Large decorations
+  const deco = (i: number) => `${R[i]}30`;
+  shapes.push(
+    { kind: 'circle', cx: width * 0.1, cy: height * 0.15, r: 40, color: deco(0) },
+    { kind: 'rrect', x: width * 0.85, y: height * 0.82, w: 70, h: 70, r: 14, color: deco(3) },
+    { kind: 'diamond', cx: width * 0.85, cy: height * 0.2, size: 60, color: deco(8) },
+    { kind: 'rrect', x: width * 0.1, y: height * 0.77, w: 90, h: 40, r: 8, color: deco(12) },
+    { kind: 'circle', cx: width * 0.5, cy: height * 0.1, r: 25, color: deco(14) },
+    { kind: 'rrect', x: width * 0.17, y: height * 0.47, w: 36, h: 64, r: 8, color: deco(6) },
+    { kind: 'diamond', cx: width * 0.8, cy: height * 0.6, size: 56, color: deco(10) },
+    { kind: 'rrect', x: width * 0.56, y: height * 0.87, w: 50, h: 50, r: 10, color: deco(1) },
+    { kind: 'circle', cx: width * 0.3, cy: height * 0.25, r: 24, color: deco(4) },
+    { kind: 'rrect', x: width * 0.66, y: height * 0.32, w: 56, h: 30, r: 6, color: deco(9) }
+  );
+
+  const grid: PatternLine[] = [];
+  for (let i = 0; i < Math.floor(width / 40); i++) grid.push({ x: i * 40, y: 0, w: 1, h: height });
+  for (let i = 0; i < Math.floor(height / 40); i++) grid.push({ x: 0, y: i * 40, w: width, h: 1 });
+
+  return { width, height, gradients, shapes, grid };
+}

package/src/helpers/GameSettingsModal.tsx

@@ -0,0 +1,384 @@
+import React from 'react';
+import { Modal, Platform, Pressable, ScrollView, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View } from 'react-native';
+import { BackdropCard as CardBackground } from '../games/shared/BackdropCard';
+import { getGameTitle } from '../services/GamesConstants';
+import { GAMES_METADATA } from '../services/GamesMetadata';
+import type { GameTheme } from '../services/ThemeService';
+import { isThemedGame } from '../services/ThemeService';
+import { type GAME_IDS, type GameSettings, isTablet } from '../services/UtilsService';
+import { createThemedStyles, useGameTheme } from './GameTheme';
+
+export interface GameSettingsProps {
+  gameId: string;
+  settings: GameSettings;
+  onSettingsChange?: (settings: GameSettings) => void;
+}
+
+interface CustomSwitchProps {
+  label: string;
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+}
+
+const CustomSwitch: React.FC<CustomSwitchProps> = React.memo(({ label, value, onValueChange }) => {
+  const theme = useGameTheme();
+  const styles = getStyles(theme);
+  return (
+    <Pressable
+      accessibilityRole="switch"
+      accessibilityLabel={label}
+      accessibilityState={{ checked: value }}
+      aria-checked={value}
+      onPress={() => onValueChange(!value)}>
+      <View style={[styles.switchTrack, { backgroundColor: value ? theme.SWITCH_TRACK_ON : theme.SWITCH_TRACK_OFF }]}>
+        <View style={[styles.switchThumb, { left: value ? 25 : 3 }]} />
+      </View>
+    </Pressable>
+  );
+});
+
+// Module-level so an omitted handler doesn't mint a new default function every render
+const noopSettingsChange = (_settings: GameSettings) => undefined;
+
+const GameSettingsModalComponent: React.FC<GameSettingsProps> = ({ gameId, settings, onSettingsChange = noopSettingsChange }) => {
+  const theme = useGameTheme();
+  const styles = getStyles(theme);
+  const title = `${getGameTitle(gameId)} Settings`;
+  const game = GAMES_METADATA[gameId as keyof typeof GAMES_METADATA];
+
+  const { isVisible, enableSounds, enableHaptics } = settings;
+  const viewport = useWindowDimensions();
+  const popover = Platform.OS === 'web';
+  const width = Math.max(0, Math.min(360, viewport.width - 32));
+  const top = Math.max(16, Math.min(settings.anchor?.top ?? 80, viewport.height - 160));
+  const maxRight = Math.max(16, viewport.width - width - 16);
+  const right = Math.min(maxRight, Math.max(16, settings.anchor?.right ?? 16));
+  // Only games that follow the light / dark theme get the toggle (the rest keep their own classic look)
+  const themed = isThemedGame(gameId as GAME_IDS);
+  const darkMode = settings.theme === 'dark';
+
+  const handleSoundToggle = (enabled: boolean) => {
+    onSettingsChange({
+      ...settings,
+      enableSounds: enabled
+    });
+  };
+
+  const handleHapticToggle = (enabled: boolean) => {
+    onSettingsChange({
+      ...settings,
+      enableHaptics: enabled
+    });
+  };
+
+  const handleThemeToggle = (dark: boolean) => {
+    onSettingsChange({
+      ...settings,
+      theme: dark ? 'dark' : 'light'
+    });
+  };
+
+  const handleOnClose = () => {
+    onSettingsChange({
+      ...settings,
+      isVisible: false
+    });
+  };
+
+  return (
+    <Modal visible={isVisible} transparent={true} onRequestClose={handleOnClose}>
+      <View style={[styles.overlay, popover && { backgroundColor: 'transparent' }]}>
+        {popover && (
+          <Pressable accessibilityRole="button" accessibilityLabel="Dismiss game settings" style={StyleSheet.absoluteFill} onPress={handleOnClose} />
+        )}
+        <View
+          testID={popover ? 'game-settings-popover' : undefined}
+          role={popover ? 'dialog' : undefined}
+          accessibilityLabel={popover ? title : undefined}
+          style={[
+            styles.container,
+            popover && {
+              position: 'absolute',
+              top,
+              right,
+              width,
+              maxHeight: Math.max(0, viewport.height - top - 16),
+              backgroundColor: theme.SURFACE,
+              borderRadius: 16,
+              borderWidth: 1,
+              borderColor: theme.SURFACE,
+              padding: 20,
+              boxShadow: '0 12px 40px #0004'
+            }
+          ]}>
+          {!popover && <CardBackground />}
+          <View style={[styles.header, popover && styles.popoverHeader]}>
+            <Text accessibilityRole="header" style={[styles.headerTitle, popover && styles.popoverHeaderTitle]}>
+              {popover ? 'Settings' : title}
+            </Text>
+            <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel="Close settings"
+              onPress={handleOnClose}
+              style={[styles.closeButton, popover && styles.popoverCloseButton]}>
+              <Text style={[styles.closeButtonText, popover && styles.popoverCloseButtonText]}>✕</Text>
+            </TouchableOpacity>
+          </View>
+
+          <ScrollView
+            style={[styles.scrollView, popover && styles.popoverScrollView]}
+            contentContainerStyle={styles.scrollContent}
+            showsVerticalScrollIndicator={false}>
+            {/* Preferences */}
+            <View style={[styles.section, popover && styles.popoverSection]}>
+              <View style={styles.toggleContainer}>
+                <View style={styles.toggleLeft}>
+                  <View>
+                    <Text style={[styles.toggleTitle, popover && styles.popoverText]}>Sound Effects</Text>
+                    <Text style={[styles.toggleSubtitle, popover && styles.popoverText]}>Play sounds during gameplay</Text>
+                  </View>
+                </View>
+                <CustomSwitch label="Sound Effects" value={enableSounds} onValueChange={handleSoundToggle} />
+              </View>
+              <View style={[styles.divider, popover && styles.popoverDivider]} />
+              <View style={styles.toggleContainer}>
+                <View style={styles.toggleLeft}>
+                  <View>
+                    <Text style={[styles.toggleTitle, popover && styles.popoverText]}>Haptic Feedback</Text>
+                    <Text style={[styles.toggleSubtitle, popover && styles.popoverText]}>Vibration on interactions</Text>
+                  </View>
+                </View>
+                <CustomSwitch label="Haptic Feedback" value={enableHaptics} onValueChange={handleHapticToggle} />
+              </View>
+              {themed && (
+                <>
+                  <View style={[styles.divider, popover && styles.popoverDivider]} />
+                  <View style={styles.toggleContainer}>
+                    <View style={styles.toggleLeft}>
+                      <View>
+                        <Text style={[styles.toggleTitle, popover && styles.popoverText]}>Dark Mode</Text>
+                        <Text style={[styles.toggleSubtitle, popover && styles.popoverText]}>Play with the dark theme</Text>
+                      </View>
+                    </View>
+                    <CustomSwitch label="Dark Mode" value={darkMode} onValueChange={handleThemeToggle} />
+                  </View>
+                </>
+              )}
+            </View>
+
+            {/* How to Play */}
+            {!popover && game && (
+              <View style={[styles.section]}>
+                <View style={styles.sectionLabelRow}>
+                  <Text style={styles.sectionLabel}>How to Play</Text>
+                </View>
+                <Text style={styles.gameDescription}>{game.description}</Text>
+                {game.instructions.map((instruction, index) => (
+                  <View key={index} style={styles.instructionRow}>
+                    <View style={styles.instructionBadge}>
+                      <Text style={styles.instructionNumber}>{index + 1}</Text>
+                    </View>
+                    <Text style={styles.instructionText}>{instruction}</Text>
+                  </View>
+                ))}
+              </View>
+            )}
+          </ScrollView>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+// Games already memoize these props, which only pays off if the modal itself is memoized
+export const GameSettingsModal = React.memo(GameSettingsModalComponent);
+GameSettingsModal.displayName = 'GameSettingsModal';
+
+const getStyles = createThemedStyles((theme: GameTheme) => ({
+  overlay: {
+    flex: 1,
+    backgroundColor: theme.OVERLAY,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  container: {
+    width: '95%',
+    maxWidth: isTablet ? 500 : 360,
+    maxHeight: '70%',
+    borderRadius: 10,
+    overflow: 'hidden',
+    backgroundColor: theme.BACKGROUND
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 10,
+    paddingHorizontal: 16,
+    backgroundColor: theme.SURFACE,
+    borderBottomWidth: 1,
+    borderBottomColor: theme.DIVIDER
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'semibold',
+    color: theme.TEXT
+  },
+  closeButton: {
+    padding: 8
+  },
+  closeButtonText: {
+    fontSize: 18,
+    fontWeight: 'semibold',
+    color: theme.TEXT
+  },
+  popoverHeader: {
+    padding: 0,
+    paddingHorizontal: 0,
+    marginBottom: 16,
+    backgroundColor: 'transparent',
+    borderBottomWidth: 0
+  },
+  popoverText: {
+    fontFamily: 'inherit',
+    color: theme.TEXT
+  },
+  popoverHeaderTitle: {
+    fontFamily: 'inherit',
+    fontSize: 16,
+    fontWeight: '700'
+  },
+  popoverCloseButton: {
+    width: 40,
+    height: 40,
+    padding: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: theme.SURFACE,
+    backgroundColor: theme.SURFACE
+  },
+  popoverCloseButtonText: {
+    fontSize: 18,
+    fontWeight: '400',
+    lineHeight: 18
+  },
+  popoverScrollView: {
+    padding: 0,
+    paddingBottom: 0
+  },
+  popoverSection: {
+    padding: 0,
+    marginBottom: 0,
+    borderWidth: 0,
+    backgroundColor: 'transparent'
+  },
+  popoverDivider: {
+    backgroundColor: theme.SURFACE
+  },
+  scrollView: {
+    flexShrink: 1,
+    padding: 10,
+    paddingBottom: 0
+  },
+  scrollContent: {
+    paddingBottom: 0
+  },
+  section: {
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 10,
+    backgroundColor: theme.SURFACE,
+    borderWidth: theme.BORDER_WIDTH,
+    borderColor: theme.BORDER
+  },
+  toggleContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  toggleLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    gap: 12,
+    marginRight: 12
+  },
+  toggleTitle: {
+    fontSize: 15,
+    fontWeight: '600' as const,
+    color: theme.TEXT
+  },
+  toggleSubtitle: {
+    fontSize: 13,
+    marginTop: 2,
+    color: theme.TEXT_MUTED
+  },
+  divider: {
+    height: 1,
+    backgroundColor: theme.DIVIDER,
+    marginVertical: 12
+  },
+  sectionLabelRow: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: 8,
+    marginBottom: 8
+  },
+  sectionLabel: {
+    fontSize: 15,
+    fontWeight: '600' as const,
+    color: theme.TEXT
+  },
+  gameDescription: {
+    fontSize: 13,
+    color: theme.TEXT,
+    lineHeight: 19,
+    marginBottom: 12
+  },
+  instructionRow: {
+    flexDirection: 'row' as const,
+    alignItems: 'flex-start' as const,
+    marginBottom: 8
+  },
+  instructionBadge: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    backgroundColor: theme.CHIP,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+    marginRight: 10,
+    marginTop: 1
+  },
+  instructionNumber: {
+    fontSize: 12,
+    fontWeight: '700' as const,
+    color: theme.TEXT
+  },
+  instructionText: {
+    fontSize: 14,
+    color: theme.TEXT,
+    flex: 1,
+    lineHeight: 20
+  },
+  switchTrack: {
+    width: 52,
+    height: 30,
+    borderRadius: 15,
+    justifyContent: 'center'
+  },
+  switchThumb: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    position: 'absolute',
+    backgroundColor: theme.SWITCH_THUMB,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 4
+  }
+}));

package/src/helpers/GameTheme.tsx

@@ -0,0 +1,37 @@
+import React, { createContext, useContext } from 'react';
+import { StyleSheet } from 'react-native';
+import { GAME_THEMES, type GameTheme, resolveGameTheme } from '../services/ThemeService';
+import type { GameThemeMode } from '../services/UtilsService';
+
+// Same constraint StyleSheet.create uses (RN does not export it by name)
+type NamedStyles = Parameters<typeof StyleSheet.create>[0];
+
+// Default is classic, so helpers rendered outside a provider look exactly as they always have
+const GameThemeContext = createContext<GameTheme>(GAME_THEMES.classic);
+
+interface GameThemeProviderProps {
+  theme?: GameThemeMode;
+  children: React.ReactNode;
+}
+
+/** Wrap a game in this to render its shared chrome (background, scoreboard, controls, modals) in the host's theme. */
+export const GameThemeProvider: React.FC<GameThemeProviderProps> = ({ theme, children }) => (
+  <GameThemeContext.Provider value={resolveGameTheme(theme)}>{children}</GameThemeContext.Provider>
+);
+
+export const useGameTheme = (): GameTheme => useContext(GameThemeContext);
+
+/**
+ * Build a StyleSheet per theme, once. There are only three theme objects, so the cache stays tiny
+ * and every render after the first is a Map lookup.
+ */
+export const createThemedStyles = <S extends NamedStyles>(factory: (theme: GameTheme) => S & NamedStyles) => {
+  const cache = new Map<GameTheme, Readonly<S>>();
+  return (theme: GameTheme): Readonly<S> => {
+    const cached = cache.get(theme);
+    if (cached) return cached;
+    const styles = StyleSheet.create<S>(factory(theme));
+    cache.set(theme, styles);
+    return styles;
+  };
+};

package/src/helpers/IconPaths.ts

@@ -0,0 +1,6 @@
+/** Icon outlines (512 x 512), shared with the engine-drawn HUD. */
+export const TROPHY_PATH =
+  'M134.7 33.8Q138.7 32.8 256.7 32.3Q374.7 31.8 378.7 33.8Q391.7 38.8 396.7 51.8Q399.7 57.8 399.7 68.8V79.8H434.7L469.7 80.8L472.7 82.8Q477.7 86.8 479.7 94.8Q482.7 112.8 476.7 143.8Q468.7 178.8 450.2 203.3Q431.7 227.8 406.7 235.8L398.7 238.8L396.7 246.8Q384.7 293.8 329.7 327.8Q303.7 343.8 277.7 348.8L272.7 349.8L271.7 398.8V447.8H305.7Q338.7 447.8 342.7 449.8Q348.7 452.8 350.7 459.8Q352.7 465.8 349.7 471.8Q346.7 477.8 340.7 478.8Q337.7 479.8 255.7 479.8Q173.7 479.8 170.7 478.8Q164.7 477.8 161.7 471.8Q158.7 465.8 160.7 459.8Q162.7 452.8 168.7 449.8Q172.7 447.8 205.7 447.8H239.7V398.8V350.8L236.7 349.8Q192.7 339.8 158.2 310.8Q123.7 281.8 114.7 245.8L112.7 238.8L104.7 235.8Q67.7 223.8 46.7 179.8Q33.7 151.8 31.7 116.8Q30.7 98.8 32.2 92.8Q33.7 86.8 38.7 82.8L41.7 80.8L76.7 79.8H111.7V68.8Q111.7 57.8 113.7 52.8Q119.7 37.8 134.7 33.8ZM367.7 146.8V63.8H255.7H143.7V149.8Q144.7 221.8 145.2 231.8Q145.7 241.8 150.7 252.8Q164.7 280.8 198.7 300.8Q230.7 319.8 255.7 319.8Q283.7 319.8 317.7 297.8Q352.7 274.8 363.7 245.8Q366.7 237.8 367.2 225.3Q367.7 212.8 367.7 146.8ZM111.7 157.8V111.8H87.7H63.7V118.8Q66.7 159.8 89.7 187.8Q97.7 197.8 107.7 202.8L111.7 204.8ZM447.7 118.8Q447.7 118.8 447.7 118.8V111.8H423.7H399.7V157.8V204.8L403.7 202.8Q413.7 197.8 421.7 187.8Q444.7 159.8 447.7 118.8Z';
+export const SHARE_PATH =
+  'M376.2 48.8Q406.2 44.8 427.2 64.8Q439.2 75.8 444.2 87.8Q453.2 113.8 441.7 138.8Q430.2 163.8 404.2 172.8Q397.2 174.8 384.2 174.8Q371.2 174.8 364.2 172.8Q353.2 168.8 343.2 160.8L338.2 156.8L264.2 197.8L190.2 238.8L191.2 243.8Q192.2 247.8 192.2 255.8Q192.2 263.8 191.2 267.8L190.2 272.8L264.2 313.8L337.2 355.8L343.2 350.8Q358.2 338.8 376.7 336.3Q395.2 333.8 412.2 342.8Q446.2 358.8 448.2 395.8Q449.2 425.8 428.2 445.8Q417.2 455.8 404.2 460.8Q396.2 463.8 384.2 463.8Q372.2 463.8 364.2 460.8Q356.2 457.8 351.2 454.8Q332.2 442.8 324.2 423.8Q319.2 410.8 320.2 395.8Q321.2 387.8 321.2 385.8L316.2 380.8Q309.2 375.8 251.2 342.8Q180.2 302.8 177.2 301.8L174.2 299.8L169.2 304.8Q159.2 312.8 146.2 317.8Q140.2 319.8 128.2 319.8Q116.2 319.8 110.2 317.8Q77.2 306.8 66.2 273.8Q61.2 255.8 66.2 237.8Q77.2 204.8 110.2 194.8Q116.2 192.8 128.2 192.8Q140.2 192.8 146.2 194.8Q159.2 198.8 169.2 206.8Q174.2 211.8 176.7 210.3Q179.2 208.8 250.2 168.8Q321.2 128.8 321.2 126.3Q321.2 123.8 320.2 115.8Q318.2 85.8 341.2 64.8Q356.2 50.8 376.2 48.8ZM398.2 82.8Q392.2 80.8 385.2 80.3Q378.2 79.8 375.2 80.8Q362.2 85.8 355.2 98.8Q353.2 102.8 353.2 111.8Q353.2 120.8 355.2 124.8Q360.2 134.8 369.7 139.8Q379.2 144.8 389.2 142.8Q406.2 139.8 413.2 124.8Q415.2 120.8 415.2 111.8Q415.2 102.8 413.2 98.8Q408.2 87.8 398.2 82.8ZM142.2 226.8Q137.2 224.8 129.2 224.3Q121.2 223.8 118.2 225.8Q105.2 229.8 99.2 242.8Q97.2 246.8 97.2 255.8Q97.2 264.8 99.2 269.8Q110.2 290.8 133.2 287.8Q149.2 284.8 157.2 269.8Q159.2 264.8 159.2 255.8Q159.2 246.8 157.2 242.8Q152.2 231.8 142.2 226.8ZM389.2 368.8Q389.2 368.8 389.2 368.8Q384.2 367.8 383.7 367.8Q383.2 367.8 378.2 368.8Q362.2 370.8 355.2 386.8Q353.2 390.8 353.2 399.8Q353.2 408.8 355.2 412.8Q360.2 423.8 370.2 428.8Q376.2 430.8 384.2 430.8Q392.2 430.8 398.2 428.8Q408.2 423.8 413.2 412.8Q415.2 408.8 415.2 399.8Q415.2 390.8 413.2 386.8Q408.2 376.8 398.2 371.8Q394.2 369.8 389.2 368.8Z';
+export const PLAY_PATH = 'M112 111v290c0 17.44 17 28.52 31 20.16l247.9-148.37c12.12-7.25 12.12-26.33 0-33.58L143 90.84c-14-8.36-31 2.72-31 20.16z';

package/src/helpers/index.ts

@@ -0,0 +1,2 @@
+export { GameSettingsModal } from './GameSettingsModal';
+export { GameThemeProvider, useGameTheme, createThemedStyles } from './GameTheme';

package/src/index.tsx

@@ -0,0 +1,60 @@
+// Games
+export * from './games/play-with-tua/PlayWithTua';
+export * from './games/treasure-hunt/TreasureHunt';
+export * from './games/arrows/Arrows';
+export * from './games/balloon-blaster/BalloonBlaster';
+export * from './games/bike-racing/BikeRacing';
+export * from './games/bluk/Bluk';
+export * from './games/chameleon-run/ChameleonRun';
+export * from './games/mob-control/MobControl';
+export * from './games/paper-io/PaperIo';
+export * from './games/crossy-road/CrossyRoad';
+export * from './games/block-blast/BlockBlast';
+export * from './games/block-breaker/BlockBreaker';
+export * from './games/bubble-shooter/BubbleShooter';
+export * from './games/candy-crush/CandyCrush';
+export * from './games/car-racing/CarRacing';
+export * from './games/color-switch/ColorSwitch';
+export * from './games/colors-sort/ColorsSort';
+export * from './games/connect-em-all/ConnectEmAll';
+export * from './games/dino-jump/DinoJump';
+export * from './games/dots-and-boxes/DotsAndBoxes';
+export * from './games/flappy-bird/FlappyBird';
+export * from './games/fruit-merger/FruitMerger';
+export * from './games/fruit-ninja/FruitNinja';
+export * from './games/game-2048/Game2048';
+export * from './games/knife-hit/KnifeHit';
+export * from './games/ludo-king/LudoKing';
+export * from './games/maze-runner/MazeRunner';
+export * from './games/mine-sweeper/MineSweeper';
+export * from './games/number-search/NumberSearch';
+export * from './games/nuts-and-bolts/NutsAndBolts';
+export * from './games/pac-man/PacMan';
+export * from './games/perfect-circle/PerfectCircle';
+export * from './games/pipe-connect/PipeConnect';
+export * from './games/popit-fidget/PopitFidget';
+export * from './games/sliding-numbers/SlidingNumbers';
+export * from './games/snake-3d/Snake3D';
+export * from './games/space-fighter/SpaceFighter';
+export * from './games/sudoku/Sudoku';
+export * from './games/stack-tower/StackTower';
+export * from './games/spider-solitaire/SpiderSolitaire';
+export * from './games/tank-1990/Tank1990';
+export * from './games/tic-tac-toe/TicTacToe';
+export * from './games/tile-home/TileHome';
+export * from './games/whack-a-mole/WhackAMole';
+export * from './games/word-search/WordSearch';
+export * from './games/find-different-number/FindDifferentNumber';
+export * from './games/snakes-and-ladders/SnakesAndLadders';
+export * from './games/tangram/Tangram';
+export * from './games/checkers/Checkers';
+export * from './games/memory-match/MemoryMatch';
+export * from './games/falling-sticks/FallingSticks';
+export * from './games/reversi/Reversi';
+export * from './games/penguin-run/PenguinRun';
+
+// Services
+export * from './services/GamesService';
+export * from './services/GamesMetadata';
+export * from './services/SoundsService';
+export * from './services/UtilsService';