@useaward/embed-predictions 0.1.0

package/src/stores/gameStore.ts

@@ -0,0 +1,101 @@
+import { createStore } from "solid-js/store";
+
+import type { GameData, Submission } from "../api/client";
+
+export interface GameStoreState {
+  // Game data
+  gameData: GameData | null;
+  loading: boolean;
+  error: string | null;
+  customCss: string;
+
+  // Content state
+  hasStarted: boolean;
+  submitted: boolean;
+
+  // Email state
+  email: string;
+  emailError: string;
+
+  // Step navigation
+  currentStepIndex: number;
+
+  // Predictions
+  predictions: Record<string, any>;
+
+  // Submission state
+  submitting: boolean;
+  submitError: string;
+}
+
+const initialState: GameStoreState = {
+  gameData: null,
+  loading: true,
+  error: null,
+  customCss: "",
+  hasStarted: false,
+  submitted: false,
+  email: "",
+  emailError: "",
+  currentStepIndex: 0,
+  predictions: {},
+  submitting: false,
+  submitError: "",
+};
+
+export function createGameStore(initialEmail?: string) {
+  const [state, setState] = createStore<GameStoreState>({
+    ...initialState,
+    email: initialEmail || "",
+  });
+
+  const setGameData = (data: GameData) => setState("gameData", data);
+  const setLoading = (value: boolean) => setState("loading", value);
+  const setError = (value: string | null) => setState("error", value);
+  const setCustomCss = (value: string) => setState("customCss", value);
+
+  const setHasStarted = (value: boolean) => setState("hasStarted", value);
+  const setSubmitted = (value: boolean) => setState("submitted", value);
+
+  const setEmail = (value: string) => setState("email", value);
+  const setEmailError = (value: string) => setState("emailError", value);
+
+  const setCurrentStepIndex = (value: number) =>
+    setState("currentStepIndex", value);
+
+  const setPredictions = (value: Record<string, any>) =>
+    setState("predictions", value);
+
+  const updatePrediction = (stepId: string, value: any) => {
+    setState("predictions", stepId, value);
+  };
+
+  const setSubmitting = (value: boolean) => setState("submitting", value);
+  const setSubmitError = (value: string) => setState("submitError", value);
+
+  // Reset for new game
+  const reset = () => {
+    setState(initialState);
+    setState("email", initialEmail || "");
+  };
+
+  return {
+    state,
+    setGameData,
+    setLoading,
+    setError,
+    setCustomCss,
+    setHasStarted,
+    setSubmitted,
+    setEmail,
+    setEmailError,
+    setCurrentStepIndex,
+    setPredictions,
+    updatePrediction,
+    setSubmitting,
+    setSubmitError,
+    reset,
+  };
+}
+
+export type GameStore = ReturnType<typeof createGameStore>;

package/src/types/style.ts

@@ -0,0 +1,9 @@
+export type Theme = {
+  fontFamily?: string;
+  backgroundColor?: string;
+  questionTextColor?: string;
+  buttonBackground?: string;
+  buttonTextColor?: string;
+  selectionBackground?: string;
+  selectionTextColor?: string;
+};

package/src/types/translations.ts

@@ -0,0 +1,8 @@
+import * as i18n from "@solid-primitives/i18n";
+
+import * as en from "../locale/en";
+
+export type Locale = "en" | "lv";
+
+export type RawDictionary = typeof en.dict;
+export type Dictionary = i18n.Flatten<RawDictionary>;

package/src/utils/cn.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/utils/fetch-locale.ts

@@ -0,0 +1,8 @@
+import { locales } from "@/constants";
+import { Dictionary, Locale, RawDictionary } from "@/types/translations";
+import * as i18n from "@solid-primitives/i18n";
+
+export async function fetchLocale(locale: Locale): Promise<Dictionary> {
+  const dict: RawDictionary = locales[locale].dict;
+  return i18n.flatten(dict);
+}

package/src/utils/inject-font.ts

@@ -0,0 +1,23 @@
+import { defaultFontFamily } from "@/constants";
+
+const googleFontCdnBaseUrl = "https://fonts.bunny.net/css2";
+const elementId = "useaward-font";
+
+export const injectFont = (font?: string | undefined) => {
+  const existingFont = document.getElementById(elementId);
+  const fontFamily = font || defaultFontFamily;
+
+  if (existingFont?.getAttribute("href")?.includes(fontFamily)) return;
+
+  existingFont?.remove();
+
+  const fontElement = document.createElement("link");
+
+  fontElement.href = `${googleFontCdnBaseUrl}?family=${fontFamily}:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap`;
+  fontElement.rel = "stylesheet";
+  fontElement.id = elementId;
+
+  document.head.appendChild(fontElement);
+
+  return;
+};

package/src/utils/set-css-variables.ts

@@ -0,0 +1,83 @@
+import { defaultFontFamily, embedCssVariableNames } from "@/constants";
+import { Theme } from "@/types/style";
+
+type CommonProps = {
+  documentStyle: CSSStyleDeclaration;
+};
+
+export const setCssVariablesValue = ({
+  theme,
+  container,
+}: {
+  theme: Theme | undefined;
+  container: HTMLDivElement;
+} & Omit<CommonProps, "documentStyle">) => {
+  if (!theme) return;
+  const documentStyle = container?.style;
+  if (!documentStyle) return;
+  setFontFamily({
+    fontFamily: theme.fontFamily ?? defaultFontFamily,
+    documentStyle,
+  });
+  setGeneralTheme({
+    theme,
+    documentStyle,
+  });
+  setEmbedTheme({
+    theme,
+    documentStyle,
+  });
+};
+
+const setFontFamily = ({
+  fontFamily,
+  documentStyle,
+}: {
+  fontFamily: string;
+  documentStyle: CSSStyleDeclaration;
+}) => {
+  documentStyle.setProperty(
+    embedCssVariableNames.general.fontFamily,
+    fontFamily,
+  );
+};
+
+const setGeneralTheme = ({
+  theme,
+  documentStyle,
+}: {
+  theme: Theme | undefined;
+} & CommonProps) => {
+  documentStyle.setProperty(
+    embedCssVariableNames.general.backgroundColor,
+    theme?.backgroundColor ?? "#fff",
+  );
+};
+
+const setEmbedTheme = ({
+  theme,
+  documentStyle,
+}: {
+  theme: Theme | undefined;
+} & CommonProps) => {
+  documentStyle.setProperty(
+    embedCssVariableNames.embed.questionTextColor,
+    theme?.questionTextColor ?? "#000",
+  );
+  documentStyle.setProperty(
+    embedCssVariableNames.embed.buttonBackground,
+    theme?.buttonBackground ?? "#000",
+  );
+  documentStyle.setProperty(
+    embedCssVariableNames.embed.buttonTextColor,
+    theme?.buttonTextColor ?? "#fff",
+  );
+  documentStyle.setProperty(
+    embedCssVariableNames.embed.selectionBackground,
+    theme?.selectionBackground ?? "#000",
+  );
+  documentStyle.setProperty(
+    embedCssVariableNames.embed.selectionTextColor,
+    theme?.selectionTextColor ?? "#fff",
+  );
+};

package/src/web.ts

@@ -0,0 +1,12 @@
+import { registerWebComponents } from "./register";
+import {
+  injectPredictionGameEmbedInWindow,
+  parsePredictionGameEmbed,
+} from "./window";
+
+// Register web components on load
+registerWebComponents();
+
+// Expose global API for programmatic initialization (optional)
+const useawardPredictionGame = parsePredictionGameEmbed();
+injectPredictionGameEmbedInWindow(useawardPredictionGame);

package/src/window.ts

@@ -0,0 +1,33 @@
+import type { GameProps } from "./components/Game";
+
+// Optional: Programmatic initialization API
+// Allows customers to initialize elements via JavaScript if needed
+export const initStandard = (props: GameProps & { id?: string }) => {
+  const standardElement = props.id
+    ? document.getElementById(props.id)
+    : document.querySelector("useaward-prediction-game");
+
+  if (!standardElement)
+    throw new Error("<useaward-prediction-game> element not found.");
+
+  Object.assign(standardElement, props);
+};
+
+export const parsePredictionGameEmbed = () => ({
+  initStandard,
+});
+
+type PredictionGameEmbed = ReturnType<typeof parsePredictionGameEmbed>;
+
+declare const window:
+  | {
+      UseawardPredictionGame: PredictionGameEmbed;
+    }
+  | undefined;
+
+export const injectPredictionGameEmbedInWindow = (
+  predictionGameEmbed: PredictionGameEmbed,
+) => {
+  if (typeof window === "undefined") return;
+  window.UseawardPredictionGame = { ...predictionGameEmbed };
+};