@useaward/embed-predictions 0.1.0

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@useaward/embed-predictions",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "./dist",
+    "./src"
+  ],
+  "exports": {
+    "./web": "./dist/web.js"
+  },
+  "author": "Useaward",
+  "license": "ISC",
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "clean": "git clean -xdf .cache .turbo dist node_modules",
+    "format": "prettier --check . --ignore-path ../../.gitignore",
+    "lint": "eslint",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "catalog:",
+    "@useaward/eslint-config": "workspace:*",
+    "@useaward/prettier-config": "workspace:*",
+    "@useaward/tsconfig": "workspace:*",
+    "esbuild-plugin-solid": "^0.6.0",
+    "eslint": "catalog:",
+    "postcss": "^8.5.6",
+    "prettier": "catalog:",
+    "tailwindcss": "catalog:",
+    "tsup": "^8.5.1",
+    "typescript": "catalog:"
+  },
+  "prettier": "@useaward/prettier-config",
+  "dependencies": {
+    "@ark-ui/solid": "^5.30.0",
+    "@kobalte/core": "^0.13.11",
+    "@solid-primitives/destructure": "^0.2.2",
+    "@solid-primitives/i18n": "^2.2.1",
+    "@solid-primitives/utils": "^6.3.2",
+    "clsx": "^2.1.1",
+    "date-fns": "catalog:",
+    "lucide-solid": "^0.563.0",
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.11",
+    "tailwind-merge": "^3.4.0"
+  }
+}

package/src/api/client.ts

@@ -0,0 +1,107 @@
+export type StepValue = {
+  id: string;
+  order: number;
+  value: {
+    id: string;
+    name: string;
+    shortName: string | null;
+    image: {
+      publicUrl: string;
+    } | null;
+  };
+};
+
+export type Step = {
+  id: string;
+  type: "scoreGame" | "correctValue";
+  title: string;
+  dateTime: Date | null;
+  order: number;
+  leagueIndicator: string | null;
+  stepValues: Array<StepValue>;
+};
+
+export type GameData = {
+  id: string;
+  name: string;
+  description: string | null;
+  image: {
+    publicUrl: string;
+  } | null;
+  settings: {
+    openAt?: Date;
+    closesAt?: Date;
+    requiresEmail: boolean;
+    allowEmailFromParams: boolean;
+    termsUrl?: string;
+    endDescription?: string;
+    fontFamily?: string;
+    questionTextColor?: string;
+    buttonBackground?: string;
+    buttonTextColor?: string;
+    backgroundColor?: string;
+    selectionBackground?: string;
+    selectionTextColor?: string;
+  };
+  steps: Step[];
+};
+
+export type SubmissionValue = {
+  stepValueId: string;
+  predictedScore?: number;
+  isSelected?: boolean;
+};
+
+export type Submission = {
+  stepId: string;
+  values: SubmissionValue[];
+};
+
+export type SubmissionResult = {
+  success: boolean;
+  message?: string;
+};
+
+export class EmbedAPIClient {
+  constructor(private baseUrl: string) {}
+
+  async getGame(predictionGameId: string): Promise<GameData> {
+    const response = await fetch(
+      `${this.baseUrl}/api/embed/prediction-game/${predictionGameId}`,
+    );
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || "Failed to fetch game");
+    }
+
+    return response.json();
+  }
+
+  async submitPrediction(
+    predictionGameId: string,
+    email: string,
+    submissions: Submission[],
+  ): Promise<SubmissionResult> {
+    const response = await fetch(
+      `${this.baseUrl}/api/embed/prediction-game/${predictionGameId}/submit`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          email,
+          submissions,
+        }),
+      },
+    );
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({}));
+      throw new Error(error.error || "Failed to submit prediction");
+    }
+
+    return response.json();
+  }
+}

package/src/assets/index.css

@@ -0,0 +1,15 @@
+@import "tailwindcss";
+
+:host {
+}
+
+@theme inline {
+}
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollable-container::-webkit-scrollbar {
+  display: none;
+}
+
+@layer base {
+}

package/src/components/ButtonBar.tsx

@@ -0,0 +1,52 @@
+import { useLocaleContext } from "@/context/locale-context";
+import { Show } from "solid-js";
+
+import { useGameContext } from "../context/GameContext";
+import { Button } from "./ui/button";
+
+export const ButtonBar = () => {
+  const { gameData, store, totalSteps, handleNext, handleSubmit } =
+    useGameContext();
+  const { t } = useLocaleContext();
+  const isLastStep = () => store.state.currentStepIndex === totalSteps() - 1;
+
+  const onButtonClick = () => {
+    if (isLastStep()) {
+      handleSubmit();
+    } else {
+      handleNext();
+    }
+  };
+
+  return (
+    <div class="rounded-lg">
+      <div class="flex gap-3">
+        <Button
+          fullWidth
+          onClick={onButtonClick}
+          loading={store.state.submitting}
+        >
+          <Show
+            when={isLastStep()}
+            fallback={t("predictionGame.confirmResult")}
+          >
+            {t("predictionGame.submit")}
+          </Show>
+        </Button>
+      </div>
+
+      <Show when={gameData.settings.termsUrl}>
+        <div class="mt-3 text-center">
+          <a
+            href={gameData.settings.termsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-sm text-gray-600 underline hover:text-gray-800"
+          >
+            Terms and Conditions
+          </a>
+        </div>
+      </Show>
+    </div>
+  );
+};

package/src/components/CorrectValueStep.tsx

@@ -0,0 +1,80 @@
+import { Show } from "solid-js";
+
+type StepValue = {
+  id: string;
+  order: number;
+  value: {
+    id: string;
+    name: string;
+    shortName: string | null;
+    image: {
+      publicUrl: string;
+    } | null;
+  };
+};
+
+type Step = {
+  id: string;
+  type: "scoreGame" | "correctValue";
+  title: string;
+  dateTime: Date | null;
+  order: number;
+  leagueIndicator: string | null;
+  stepValues: StepValue[];
+};
+
+type Prediction = {
+  selectedStepValueId?: string;
+};
+
+type CorrectValueStepProps = {
+  step: Step;
+  prediction: Prediction;
+  onPredictionChange: (stepValueId: string) => void;
+  questionTextColor?: string;
+  selectionBackgroundColor?: string;
+  selectionTextColor?: string;
+};
+
+export const CorrectValueStep = (props: CorrectValueStepProps) => {
+  const sortedValues = () =>
+    [...props.step.stepValues].sort((a, b) => a.order - b.order);
+
+  return (
+    <>
+      <div class="space-y-3">
+        {sortedValues().map((stepValue) => {
+          const isSelected = () =>
+            props.prediction.selectedStepValueId === stepValue.id;
+
+          return (
+            <button
+              type="button"
+              onClick={() => props.onPredictionChange(stepValue.id)}
+              class="flex w-full items-center justify-start rounded-lg border-2 px-4 py-3 text-left transition-all"
+              style={{
+                "background-color": isSelected()
+                  ? props.selectionBackgroundColor || "#f97316"
+                  : "#ffffff",
+                "border-color": isSelected()
+                  ? props.selectionBackgroundColor || "#f97316"
+                  : "#e5e7eb",
+              }}
+            >
+              <span
+                class="font-medium"
+                style={{
+                  color: isSelected()
+                    ? props.selectionTextColor || "#000000"
+                    : props.questionTextColor || "#111827",
+                }}
+              >
+                {stepValue.value.name}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+    </>
+  );
+};

package/src/components/EmailInput.tsx

@@ -0,0 +1,38 @@
+import { Show } from "solid-js";
+
+type EmailInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  error?: string;
+  disabled?: boolean;
+};
+
+export const EmailInput = (props: EmailInputProps) => {
+  const handleInput = (e: InputEvent) => {
+    const target = e.currentTarget as HTMLInputElement;
+    props.onChange(target.value);
+  };
+
+  return (
+    <>
+      <label for="email" class="mb-1 block text-sm font-medium">
+        Email Address
+      </label>
+      <input
+        id="email"
+        type="email"
+        value={props.value}
+        onInput={handleInput}
+        disabled={props.disabled}
+        placeholder="Enter your email"
+        class="w-full rounded border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100"
+        classList={{
+          "border-red-500": !!props.error,
+        }}
+      />
+      <Show when={props.error}>
+        <p class="mt-1 text-sm text-red-600">{props.error}</p>
+      </Show>
+    </>
+  );
+};

package/src/components/Game.tsx

@@ -0,0 +1,365 @@
+import { LocaleProvider } from "@/context/locale-context";
+import { dict as lvDict } from "@/locale/lv";
+import { Locale } from "@/types/translations";
+import { fetchLocale } from "@/utils/fetch-locale";
+import { injectFont } from "@/utils/inject-font";
+import { setCssVariablesValue } from "@/utils/set-css-variables";
+import * as i18n from "@solid-primitives/i18n";
+import {
+  createEffect,
+  createResource,
+  createSignal,
+  onCleanup,
+  Show,
+  Suspense,
+} from "solid-js";
+
+import type { GameData, Submission } from "../api/client";
+import type { GameContextType } from "../context/GameContext";
+import { EmbedAPIClient } from "../api/client";
+import { GameProvider } from "../context/GameContext";
+import { createGameStore } from "../stores/gameStore";
+import { GameLayout } from "./GameLayout";
+import { GamePlay } from "./GamePlay";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+import { SuccessScreen } from "./SuccessScreen";
+import { WelcomeScreen } from "./WelcomeScreen";
+
+export type GameProps = {
+  predictionGameId?: string;
+  apiBaseUrl?: string;
+  email?: string;
+};
+
+export const Game = (props: GameProps) => {
+  const [isInitialized, setIsInitialized] = createSignal(false);
+
+  const store = createGameStore(props.email);
+
+  const initializeGame = async () => {
+    if (!props.predictionGameId) {
+      store.setError("Prediction game ID is required");
+      store.setLoading(false);
+      return;
+    }
+
+    try {
+      const apiUrl = props.apiBaseUrl || "http://localhost:3000";
+      const apiClient = new EmbedAPIClient(apiUrl);
+      const data = await apiClient.getGame(props.predictionGameId);
+
+      store.setGameData(data);
+
+      // Initialize predictions
+      const initialPredictions: Record<string, any> = {};
+      data.steps
+        .sort((a, b) => a.order - b.order)
+        .forEach((step) => {
+          if (step.type === "scoreGame") {
+            const scores: Record<string, number> = {};
+            step.stepValues.forEach((sv) => {
+              scores[sv.id] = 0;
+            });
+            initialPredictions[step.id] = scores;
+          }
+        });
+      store.setPredictions(initialPredictions);
+      store.setLoading(false);
+      setIsInitialized(true);
+    } catch (err) {
+      console.error("[Embed] Failed to load game:", err);
+      store.setError(
+        err instanceof Error ? err.message : "Failed to load prediction game",
+      );
+      store.setLoading(false);
+    }
+  };
+
+  createEffect(() => {
+    if (isInitialized()) return;
+    initializeGame();
+  });
+
+  onCleanup(() => {
+    setIsInitialized(false);
+  });
+
+  return (
+    <Suspense>
+      <Show when={store.state.customCss}>
+        {(css) => <style>{css()}</style>}
+      </Show>
+      <Show when={store.state.loading}>
+        <div class="flex items-center justify-center p-8">
+          <div class="text-center">
+            <div class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
+          </div>
+        </div>
+      </Show>
+      <Show when={store.state.error}>
+        <div class="rounded border border-red-200 bg-red-50 p-4">
+          <p class="text-red-700">{store.state.error}</p>
+        </div>
+      </Show>
+      <Show
+        when={
+          !store.state.loading &&
+          !store.state.error &&
+          store.state.gameData &&
+          (props.email || !store.state.gameData.settings.requiresEmail)
+        }
+      >
+        <GameContent gameData={store.state.gameData!} store={store} />
+      </Show>
+    </Suspense>
+  );
+};
+
+interface GameContentProps {
+  gameData: GameData;
+  store: ReturnType<typeof createGameStore>;
+}
+
+const GameContent = (props: GameContentProps) => {
+  let gameContainer: HTMLDivElement | undefined;
+  const [locale, setLocale] = createSignal<Locale>("lv");
+  const [dict] = createResource(locale, fetchLocale, {
+    initialValue: i18n.flatten(lvDict),
+  });
+  const sortedSteps = () =>
+    [...props.gameData.steps].sort((a, b) => a.order - b.order);
+
+  const useStepByStep = () => sortedSteps().length >= 2;
+  const totalSteps = () => (useStepByStep() ? sortedSteps().length : 0);
+  const currentGameStep = () =>
+    sortedSteps()[props.store.state.currentStepIndex];
+
+  const handleScorePredictionChange = (
+    stepId: string,
+    stepValueId: string,
+    score: number,
+  ) => {
+    props.store.updatePrediction(stepId, {
+      ...props.store.state.predictions[stepId],
+      [stepValueId]: score,
+    });
+  };
+
+  const handleCorrectValueChange = (stepId: string, stepValueId: string) => {
+    props.store.updatePrediction(stepId, { selectedStepValueId: stepValueId });
+  };
+
+  const validateCurrentStep = (): boolean => {
+    const step = currentGameStep();
+    if (!step) return false;
+
+    const prediction = props.store.state.predictions[step.id];
+
+    if (step.type === "scoreGame") {
+      const stepValueIds = step.stepValues.map((sv) => sv.id);
+      if (!prediction) {
+        props.store.setSubmitError(`Please complete your prediction`);
+        return false;
+      }
+      const hasAllScores = stepValueIds.every(
+        (id) =>
+          prediction[id] !== undefined && typeof prediction[id] === "number",
+      );
+      if (!hasAllScores) {
+        props.store.setSubmitError(`Please enter all scores`);
+        return false;
+      }
+    } else if (step.type === "correctValue") {
+      if (!prediction || !prediction.selectedStepValueId) {
+        props.store.setSubmitError(`Please select an option`);
+        return false;
+      }
+    }
+
+    props.store.setSubmitError("");
+    return true;
+  };
+
+  const validateAllPredictions = (): boolean => {
+    const steps = sortedSteps();
+    for (const step of steps) {
+      const prediction = props.store.state.predictions[step.id];
+
+      if (step.type === "scoreGame") {
+        const stepValueIds = step.stepValues.map((sv) => sv.id);
+        if (stepValueIds.length !== 2) {
+          props.store.setSubmitError("Invalid game configuration");
+          return false;
+        }
+
+        if (!prediction) {
+          props.store.setSubmitError(
+            `Please complete prediction for: ${step.title}`,
+          );
+          return false;
+        }
+
+        const hasAllScores = stepValueIds.every(
+          (id) =>
+            prediction[id] !== undefined && typeof prediction[id] === "number",
+        );
+        if (!hasAllScores) {
+          props.store.setSubmitError(`Please enter scores for: ${step.title}`);
+          return false;
+        }
+      } else if (step.type === "correctValue") {
+        if (!prediction || !prediction.selectedStepValueId) {
+          props.store.setSubmitError(
+            `Please select an option for: ${step.title}`,
+          );
+          return false;
+        }
+      }
+    }
+
+    props.store.setSubmitError("");
+    return true;
+  };
+
+  const handleNext = () => {
+    if (!validateCurrentStep()) return;
+    props.store.setSubmitError("");
+    if (props.store.state.currentStepIndex < totalSteps() - 1) {
+      props.store.setCurrentStepIndex(props.store.state.currentStepIndex + 1);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!useStepByStep()) {
+      if (!validateAllPredictions()) return;
+    } else {
+      if (!validateCurrentStep()) return;
+    }
+
+    props.store.setSubmitting(true);
+    props.store.setSubmitError("");
+
+    try {
+      const apiUrl = props.gameData.id.includes("localhost")
+        ? "http://localhost:3000"
+        : "https://play.useaward.com";
+
+      const apiClient = new EmbedAPIClient(apiUrl);
+
+      const submissions: Submission[] = props.gameData.steps.map((step) => {
+        const prediction = props.store.state.predictions[step.id];
+
+        if (step.type === "scoreGame") {
+          return {
+            stepId: step.id,
+            values: step.stepValues.map((sv) => ({
+              stepValueId: sv.id,
+              predictedScore: prediction[sv.id] || 0,
+            })),
+          };
+        } else {
+          return {
+            stepId: step.id,
+            values: [
+              {
+                stepValueId: prediction.selectedStepValueId,
+                isSelected: true,
+              },
+            ],
+          };
+        }
+      });
+
+      await apiClient.submitPrediction(
+        props.gameData.id,
+        props.store.state.email,
+        submissions,
+      );
+
+      props.store.setSubmitted(true);
+    } catch (err: any) {
+      console.error("Submission error:", err);
+      props.store.setSubmitError(
+        err?.message || "Failed to submit predictions. Please try again.",
+      );
+    } finally {
+      props.store.setSubmitting(false);
+    }
+  };
+
+  const contextValue: GameContextType = {
+    gameData: props.gameData,
+    store: props.store,
+    sortedSteps,
+    currentStep: currentGameStep,
+    totalSteps,
+    useStepByStep,
+    handleNext,
+    handleSubmit,
+    handleScorePredictionChange,
+    handleCorrectValueChange,
+  };
+
+  createEffect(() => {
+    injectFont(props.gameData.settings.fontFamily);
+    if (!gameContainer) return;
+
+    setCssVariablesValue({
+      theme: {
+        questionTextColor: props.gameData.settings.questionTextColor,
+        buttonBackground: props.gameData.settings.buttonBackground,
+        buttonTextColor: props.gameData.settings.buttonTextColor,
+        backgroundColor: props.gameData.settings.backgroundColor,
+        selectionBackground: props.gameData.settings.selectionBackground,
+        selectionTextColor: props.gameData.settings.selectionTextColor,
+      },
+      container: gameContainer,
+    });
+  });
+
+  return (
+    <Show when={dict()}>
+      {(dict) => {
+        const t = i18n.translator(dict, i18n.resolveTemplate);
+
+        return (
+          <LocaleProvider value={{ t, locale, setLocale }}>
+            <GameProvider value={contextValue}>
+              <div ref={gameContainer} class="w-full antialiased">
+                <div class="flex flex-col items-center justify-center gap-4 rounded-lg bg-white p-4">
+                  <div class="flex w-full items-center justify-end">
+                    <LanguageSwitcher />
+                  </div>
+
+                  <GameLayout>
+                    <Show
+                      when={
+                        !props.store.state.hasStarted &&
+                        !props.store.state.submitted
+                      }
+                    >
+                      <WelcomeScreen />
+                    </Show>
+
+                    <Show
+                      when={
+                        props.store.state.hasStarted &&
+                        !props.store.state.submitted
+                      }
+                    >
+                      <GamePlay />
+                    </Show>
+
+                    <Show when={props.store.state.submitted}>
+                      <SuccessScreen />
+                    </Show>
+                  </GameLayout>
+                </div>
+              </div>
+            </GameProvider>
+          </LocaleProvider>
+        );
+      }}
+    </Show>
+  );
+};