@useaward/embed-predictions 0.1.0

package/src/components/GameLayout.tsx

@@ -0,0 +1,29 @@
+import type { JSX } from "solid-js";
+import { Show } from "solid-js";
+
+import { useGameContext } from "../context/GameContext";
+
+interface GameLayoutProps {
+  children: JSX.Element;
+}
+
+export const GameLayout = (props: GameLayoutProps) => {
+  const { gameData } = useGameContext();
+
+  return (
+    <>
+      <Show when={gameData.image?.publicUrl}>
+        {(publicUrl) => (
+          <div class="flex justify-center">
+            <img
+              src={publicUrl()}
+              alt={gameData.name}
+              class="h-12 w-auto object-contain"
+            />
+          </div>
+        )}
+      </Show>
+      {props.children}
+    </>
+  );
+};

package/src/components/GamePlay.tsx

@@ -0,0 +1,77 @@
+import { format } from "date-fns";
+import { Show } from "solid-js";
+
+import { useGameContext } from "../context/GameContext";
+import { ButtonBar } from "./ButtonBar";
+import { StepRenderer } from "./StepRenderer";
+
+export const GamePlay = () => {
+  const {
+    gameData,
+    store,
+    currentStep,
+    handleScorePredictionChange,
+    handleCorrectValueChange,
+  } = useGameContext();
+  return (
+    <div class="flex w-full flex-col justify-start gap-4">
+      <Show when={currentStep()} keyed>
+        {(step) => (
+          <h3
+            class="text-left text-2xl font-semibold"
+            style={{
+              color: gameData.settings?.questionTextColor || "#000000",
+            }}
+          >
+            {step.title}
+          </h3>
+        )}
+      </Show>
+
+      <div class="rounded-lg border border-solid border-gray-200 bg-white p-6">
+        <Show when={currentStep()} keyed>
+          {(step) => (
+            <div class="mb-2 flex items-center justify-between">
+              <Show when={step.leagueIndicator}>
+                <span class="rounded-lg bg-gray-100 px-2 py-1 text-lg font-medium">
+                  {step.leagueIndicator}
+                </span>
+              </Show>
+
+              <Show when={step.dateTime}>
+                {step.dateTime ? (
+                  <span class="text-xl text-gray-600">
+                    {format(step.dateTime, "dd.LL.yyyy  '·' k:mm")}
+                  </span>
+                ) : undefined}
+              </Show>
+            </div>
+          )}
+        </Show>
+
+        <Show when={currentStep()} keyed>
+          {(step) => (
+            <StepRenderer
+              step={step}
+              prediction={store.state.predictions[step.id] || {}}
+              onScorePredictionChange={(stepValueId, score) =>
+                handleScorePredictionChange(step.id, stepValueId, score)
+              }
+              onCorrectValueChange={(stepValueId) =>
+                handleCorrectValueChange(step.id, stepValueId)
+              }
+            />
+          )}
+        </Show>
+
+        <Show when={store.state.submitError}>
+          <div class="mt-4 rounded border border-red-200 bg-red-50 p-3">
+            <p class="text-sm text-red-700">{store.state.submitError}</p>
+          </div>
+        </Show>
+      </div>
+
+      <ButtonBar />
+    </div>
+  );
+};

package/src/components/LanguageSwitcher.tsx

@@ -0,0 +1,40 @@
+import { useLocaleContext } from "@/context/locale-context";
+import { For } from "solid-js";
+
+import type { Locale } from "../types/translations";
+
+const LOCALE_LABELS: Record<Locale, string> = {
+  lv: "LV",
+  en: "EN",
+};
+
+const AVAILABLE_LOCALES: Locale[] = ["lv", "en"];
+
+export const LanguageSwitcher = () => {
+  const { locale, setLocale } = useLocaleContext();
+
+  return (
+    <div class="flex items-center gap-1">
+      <For each={AVAILABLE_LOCALES}>
+        {(loc, index) => (
+          <>
+            <button
+              type="button"
+              class={`cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium transition-colors ${
+                locale() === loc
+                  ? "bg-gray-200 text-gray-900"
+                  : "text-gray-400 hover:text-gray-600"
+              }`}
+              onClick={() => setLocale(loc)}
+            >
+              {LOCALE_LABELS[loc]}
+            </button>
+            {index() < AVAILABLE_LOCALES.length - 1 && (
+              <span class="text-xs text-gray-300">|</span>
+            )}
+          </>
+        )}
+      </For>
+    </div>
+  );
+};

package/src/components/ScoreGameStep.tsx

@@ -0,0 +1,113 @@
+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 = {
+  [stepValueId: string]: number;
+};
+
+type ScoreGameStepProps = {
+  step: Step;
+  prediction: Prediction;
+  onPredictionChange: (stepValueId: string, score: number) => void;
+  questionTextColor?: string;
+};
+
+export const ScoreGameStep = (props: ScoreGameStepProps) => {
+  const incrementScore = (stepValueId: string) => {
+    const currentScore = props.prediction[stepValueId] || 0;
+    props.onPredictionChange(stepValueId, currentScore + 1);
+  };
+
+  const decrementScore = (stepValueId: string) => {
+    const currentScore = props.prediction[stepValueId] || 0;
+    if (currentScore > 0) {
+      props.onPredictionChange(stepValueId, currentScore - 1);
+    }
+  };
+
+  const sortedValues = () =>
+    [...props.step.stepValues].sort((a, b) => a.order - b.order);
+
+  return (
+    <>
+      <div class="flex items-start justify-center gap-2">
+        {sortedValues().map((stepValue, index) => {
+          return (
+            <>
+              <div
+                class={`flex items-center gap-6 ${index === 1 ? "flex-row-reverse" : "flex-row"}`}
+              >
+                <div class="flex flex-col items-center">
+                  {/* Team Logo or Fallback Circle */}
+                  {stepValue.value.image?.publicUrl ? (
+                    <img
+                      src={stepValue.value.image.publicUrl}
+                      alt={stepValue.value.name}
+                      class="mb-3 h-20 w-20 object-contain"
+                    />
+                  ) : (
+                    <div class="mb-3 flex h-20 w-20 items-center justify-center rounded-full bg-gray-300 text-2xl font-bold text-gray-600">
+                      {stepValue.value.name.charAt(0).toUpperCase()}
+                    </div>
+                  )}
+
+                  {/* Team Name */}
+                  <div
+                    class="mb-3 max-w-[120px] text-center text-sm leading-tight font-semibold"
+                    style={{
+                      color: props.questionTextColor || "#000000",
+                    }}
+                  >
+                    {stepValue.value.name}
+                  </div>
+                </div>
+
+                {/* Score Controls */}
+                <div class="flex flex-col items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => incrementScore(stepValue.id)}
+                    class="flex h-10 w-10 items-center justify-center rounded-md bg-gray-100 text-2xl leading-none font-bold hover:bg-gray-200 active:bg-gray-300"
+                  >
+                    +
+                  </button>
+                  <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-100 text-2xl font-bold">
+                    {props.prediction[stepValue.id] || 0}
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => decrementScore(stepValue.id)}
+                    class="flex h-10 w-10 items-center justify-center rounded-md bg-gray-100 text-2xl leading-none font-bold hover:bg-gray-200 active:bg-gray-300 disabled:cursor-not-allowed disabled:opacity-30"
+                    disabled={(props.prediction[stepValue.id] || 0) === 0}
+                  >
+                    −
+                  </button>
+                </div>
+              </div>
+            </>
+          );
+        })}
+      </div>
+    </>
+  );
+};

package/src/components/StepRenderer.tsx

@@ -0,0 +1,41 @@
+import type { Step } from "../api/client";
+import { useGameContext } from "../context/GameContext";
+import { CorrectValueStep } from "./CorrectValueStep";
+import { ScoreGameStep } from "./ScoreGameStep";
+
+interface StepRendererProps {
+  step: Step;
+  prediction: Record<string, any>;
+  onScorePredictionChange: (stepValueId: string, score: number) => void;
+  onCorrectValueChange: (stepValueId: string) => void;
+}
+
+export const StepRenderer = (props: StepRendererProps) => {
+  const { gameData } = useGameContext();
+
+  return (
+    <>
+      {props.step.type === "scoreGame" ? (
+        <ScoreGameStep
+          step={props.step}
+          prediction={props.prediction}
+          onPredictionChange={(stepValueId, score) =>
+            props.onScorePredictionChange(stepValueId, score)
+          }
+          questionTextColor={gameData.settings?.questionTextColor}
+        />
+      ) : (
+        <CorrectValueStep
+          step={props.step}
+          prediction={props.prediction}
+          onPredictionChange={(stepValueId) =>
+            props.onCorrectValueChange(stepValueId)
+          }
+          questionTextColor={gameData.settings?.questionTextColor}
+          selectionBackgroundColor={gameData.settings?.selectionBackground}
+          selectionTextColor={gameData.settings?.selectionTextColor}
+        />
+      )}
+    </>
+  );
+};

package/src/components/SuccessScreen.tsx

@@ -0,0 +1,24 @@
+import { useGameContext } from "../context/GameContext";
+
+export const SuccessScreen = () => {
+  const { gameData } = useGameContext();
+
+  return (
+    <div class="flex flex-col p-4">
+      <div class="p-8 text-center text-white">
+        <h3 class="mb-4 text-2xl font-bold uppercase">
+          {gameData.endDescription || "Thank you for playing!"}
+        </h3>
+        <p class="mb-6 text-sm opacity-90">
+          Points will be added to your profile after the game ends
+        </p>
+        <button
+          type="button"
+          class="rounded-lg bg-white px-8 py-3 font-medium text-gray-900 uppercase hover:bg-gray-100"
+        >
+          View Profile
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/WelcomeScreen.tsx

@@ -0,0 +1,43 @@
+import { useLocaleContext } from "@/context/locale-context";
+import { Show } from "solid-js";
+
+import { useGameContext } from "../context/GameContext";
+import { Button } from "./ui/button";
+
+export const WelcomeScreen = () => {
+  const { gameData, store } = useGameContext();
+  const { t } = useLocaleContext();
+
+  return (
+    <>
+      <div class="flex w-full flex-col justify-start">
+        <h2 class="text-left text-2xl font-bold uppercase">
+          {gameData.name ?? t("predictionGame.predictionGame")}
+        </h2>
+
+        <p class="text-base text-gray-400">
+          {gameData.description ?? t("predictionGame.welcomeText")}
+        </p>
+      </div>
+      <Button class="w-full" onClick={() => store.setHasStarted(true)}>
+        {t("predictionGame.playNow")}
+      </Button>
+
+      <Show when={gameData.settings?.termsUrl}>
+        {(termsUrl) => (
+          <a
+            href={termsUrl()}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-xs underline opacity-75 hover:opacity-100"
+            style={{
+              color: gameData.settings?.questionTextColor || "#666666",
+            }}
+          >
+            {t("predictionGame.contestRules")}
+          </a>
+        )}
+      </Show>
+    </>
+  );
+};

package/src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import type { VariantProps } from "class-variance-authority";
+import type { JSX } from "solid-js";
+import { cn } from "@/utils/cn";
+import { cva } from "class-variance-authority";
+import { Show, splitProps } from "solid-js";
+
+import { Spinner } from "./spinner";
+
+const buttonVariants = cva(
+  "group/button z-button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg bg-black font-bold whitespace-nowrap uppercase transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-(--useaward-button-color) text-(--useaward-button-text-color)",
+      },
+      size: {
+        default: "px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+interface ButtonProps
+  extends
+    JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  fullWidth?: boolean;
+  loading?: boolean;
+}
+
+const Button = (props: ButtonProps) => {
+  const [local, others] = splitProps(props, [
+    "variant",
+    "size",
+    "class",
+    "fullWidth",
+    "loading",
+    "children",
+  ]);
+
+  return (
+    <button
+      class={cn(
+        buttonVariants({ variant: local.variant, size: local.size }),
+        local.class,
+        local.fullWidth && "w-full",
+      )}
+      data-slot="button"
+      {...others}
+      disabled={local.loading || others.disabled}
+    >
+      <Show when={local.loading} fallback={local.children}>
+        <Spinner />
+      </Show>
+    </button>
+  );
+};
+
+export { Button, type ButtonProps, buttonVariants };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "solid-js";
+import { cn } from "@/utils/cn";
+import { LoaderCircle } from "lucide-solid";
+
+function Spinner({
+  class: className,
+  ...props
+}: ComponentProps<typeof LoaderCircle>) {
+  return (
+    <LoaderCircle
+      role="status"
+      aria-label="Loading"
+      class={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+export { Spinner };

package/src/constants.ts

@@ -0,0 +1,27 @@
+import type { GameProps } from "./components/Game";
+import * as en from "./locale/en";
+import * as lv from "./locale/lv";
+
+export const defaultGameProps: GameProps = {
+  predictionGameId: undefined,
+  apiBaseUrl: "http://localhost:3000",
+  email: undefined,
+};
+
+export const defaultFontFamily = "Inter";
+
+export const locales = { en, lv };
+
+export const embedCssVariableNames = {
+  general: {
+    fontFamily: "--useaward-font-family",
+    backgroundColor: "--useaward-background-color",
+  },
+  embed: {
+    questionTextColor: "--useaward-question-color",
+    buttonBackground: "--useaward-button-color",
+    buttonTextColor: "--useaward-button-text-color",
+    selectionBackground: "--useaward-selection-background-color",
+    selectionTextColor: "--useaward-selection-text-color",
+  },
+};

package/src/context/GameContext.tsx

@@ -0,0 +1,43 @@
+import type { JSX } from "solid-js";
+import { createContext, useContext } from "solid-js";
+
+import type { GameData, Step } from "../api/client";
+import type { GameStore } from "../stores/gameStore";
+
+export interface GameContextType {
+  gameData: GameData;
+  store: GameStore;
+  sortedSteps: () => Step[];
+  currentStep: () => Step | undefined;
+  totalSteps: () => number;
+  useStepByStep: () => boolean;
+  handleNext: () => void;
+  handleSubmit: () => void;
+  handleScorePredictionChange: (
+    stepId: string,
+    stepValueId: string,
+    score: number,
+  ) => void;
+  handleCorrectValueChange: (stepId: string, stepValueId: string) => void;
+}
+
+const GameContext = createContext<GameContextType>();
+
+export function GameProvider(props: {
+  value: GameContextType;
+  children: JSX.Element;
+}) {
+  return (
+    <GameContext.Provider value={props.value}>
+      {props.children}
+    </GameContext.Provider>
+  );
+}
+
+export function useGameContext(): GameContextType {
+  const context = useContext(GameContext);
+  if (!context) {
+    throw new Error("useGameContext must be used within a GameProvider");
+  }
+  return context;
+}

package/src/context/locale-context.tsx

@@ -0,0 +1,32 @@
+import type { Accessor, Setter } from "solid-js";
+import * as i18n from "@solid-primitives/i18n";
+import { createContext, useContext } from "solid-js";
+
+import type { Dictionary, Locale } from "../types/translations";
+
+export interface LocaleContextType {
+  t: i18n.Translator<Dictionary, string>;
+  locale: Accessor<Locale>;
+  setLocale: Setter<Locale>;
+}
+
+const LocaleContext = createContext<LocaleContextType>();
+
+export function LocaleProvider(props: {
+  value: LocaleContextType;
+  children: any;
+}) {
+  return (
+    <LocaleContext.Provider value={props.value}>
+      {props.children}
+    </LocaleContext.Provider>
+  );
+}
+
+export function useLocaleContext(): LocaleContextType {
+  const context = useContext(LocaleContext);
+  if (!context) {
+    throw new Error("useLocaleContext must be used within a LocaleProvider");
+  }
+  return context;
+}

package/src/features/standard/StandardGameEmbed.tsx

@@ -0,0 +1,57 @@
+import { EnvironmentProvider } from "@ark-ui/solid";
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+
+import type { GameProps } from "../../components/Game";
+import styles from "../../assets/index.css";
+import { Game } from "../../components/Game";
+
+const hostElementCss = `
+    :host {
+        display: inline-block;
+        max-width: 100%;
+        width: 100%;
+        min-height: 220px;
+        overflow-y: hidden;
+        border: 2px solid black;
+        border-radius: 1rem;
+    }
+`;
+
+export const StandardGameEmbed = (
+  props: GameProps,
+  { element }: { element: any },
+) => {
+  const [isEmbedDisplayed, setIsEmbedDisplayed] = createSignal(false);
+  const launchEmbed = () => {
+    setIsEmbedDisplayed(true);
+  };
+
+  const embedLauncherObserver = new IntersectionObserver((intersections) => {
+    if (intersections.some((intersection) => intersection.isIntersecting))
+      launchEmbed();
+  });
+
+  onMount(() => {
+    embedLauncherObserver.observe(element);
+  });
+
+  onCleanup(() => {
+    embedLauncherObserver.disconnect();
+  });
+
+  return (
+    <EnvironmentProvider
+      value={
+        document.querySelector("useaward-prediction-game")?.shadowRoot as Node
+      }
+    >
+      <style>
+        {styles}
+        {hostElementCss}
+      </style>
+      <Show when={isEmbedDisplayed()}>
+        <Game {...props} />
+      </Show>
+    </EnvironmentProvider>
+  );
+};

package/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/src/locale/en.ts

@@ -0,0 +1,24 @@
+export const dict = {
+  predictionGame: {
+    predictionGame: "Prediction Game",
+    welcomeText: "Predict and win prizes",
+    playNow: "Play now",
+    confirmResult: "Confirm result",
+    submit: "Submit prediction",
+    predictionsSubmitted: "Thank you for playing!",
+    predictionsSubmittedDescription:
+      "Points will be credited to your profile immediately after the game ends.",
+    contestRules: "Contest rules",
+    predictionsNotOpenYet: "Prediction game is not open yet",
+    predictionsNotOpenYetDescription:
+      "This prediction game will open soon. Please check back later.",
+    predictionsClosed: "Prediction game is closed",
+    predictionsClosedDescription:
+      "This prediction game is no longer accepting submissions. Please check back later.",
+    error: {
+      prediction: {
+        required: "Please select a prediction",
+      },
+    },
+  },
+};

package/src/locale/lv.ts

@@ -0,0 +1,24 @@
+export const dict = {
+  predictionGame: {
+    predictionGame: "Prognožu spēle",
+    welcomeText: "Prognozē un laimē balvas",
+    playNow: "Spēlēt tagad",
+    confirmResult: "Apstiprināt rezultātu",
+    submit: "Iesniegt prognozi",
+    predictionsSubmitted: "Paldies par spēli!",
+    predictionsSubmittedDescription:
+      "Punkti tiks ieskaitīti Jūsu profilā uzreiz pēc spēles beigām.",
+    contestRules: "Konkursa noteikumi",
+    predictionsNotOpenYet: "Prognožu spēle vēl nav pieejama",
+    predictionsNotOpenYetDescription:
+      "Šī spēle būs pieejama drīzumā. Lūdzu, pārbaudiet vēlāk.",
+    predictionsClosed: "Prognožu spēle ir slēgta",
+    predictionsClosedDescription:
+      "Šī prognožu spēle ir beigusies un vairs nepieņem jaunas prognozes.",
+    error: {
+      prediction: {
+        required: "Lūdzu, izvēlieties prognozi",
+      },
+    },
+  },
+};

package/src/register.ts

@@ -0,0 +1,13 @@
+import { customElement } from "solid-element";
+
+import { defaultGameProps } from "./constants";
+import { StandardGameEmbed } from "./features/standard/StandardGameEmbed";
+
+export const registerWebComponents = () => {
+  if (typeof window === "undefined") return;
+  customElement(
+    "useaward-prediction-game",
+    defaultGameProps,
+    StandardGameEmbed,
+  );
+};