Seasonal events

Halloween and the rest: what the SDK does on its own, and how to give your theme its own touch.

On their dates, ejGames dresses for the occasion. The first is ejGames Scream (Halloween, from October 3 to November 2). The user chooses it in Settings → Appearance → Halloween mode: On its dates, Always or Never. The host decides whether an event is active and sends that to your theme.

​

What the SDK does without you doing anything

While the event lasts:

• It sets data-season="halloween" on <html> and the variables --ejg-season-accent (pumpkin orange), --ejg-season-green, --ejg-season-violet, --ejg-season-bg, --ejg-season-panel and --ejg-season-text.
• It changes your accent, bg, panel and play color options, turns dark on, and puts its background in the wallpaper image option (ejg.settings already has them). When it ends, the user’s values come back.
• It loads an atmosphere layer over everything (#ejg-season): fog along the floor, embers and the occasional bat. It does not receive clicks, and it stays still with “reduce motion”.

For what does not come from your options (fixed colors, logos, decoration), use the selector in your CSS:

:root[data-season="halloween"] .topbar {
  background: linear-gradient(90deg, #1d1330, #120c1c);
  box-shadow: inset 0 -1px 0 var(--ejg-season-accent);
}

​

In JavaScript

ejg.season.id	"halloween" or null
ejg.season.event	the event: name, dates, banner, video, wallpaper, wallpaperVideo, wallpaperAlt, palette, genre, title, subtitle
ejg.season.mode	the user’s setting: "auto", "on" or "off"
ejg.season.onChange(fn)	an event starts or ends, or the setting changes (fn({ mode, season }))

When it changes, the settings event also arrives (with the palette already applied, or removed).

​

The store: banner and picks

/_sdk/kit/events.js has the pieces for your store’s front page:

import { seasonOf, seasonBanner, seasonPicks } from "/_sdk/kit/events.js";

const ev = seasonOf(ejg);   // null when there is no event
if (ev) {
  front.prepend(seasonBanner(ev));   // the looping animated banner (2000×297)
  const { items, loading } = seasonPicks(ejg, ev, home.sections, repaint);
  // items: the ones in its genre (Horror), popular first; with `loading`, repaint() fires when the rest arrive
  front.append(myRow(ev.title, items, () => openCatalog({ genres: [ev.genre] })));
}
ejg.season.onChange(repaint);

The art is in /_sdk/events/<id>/: banner.webp and banner.mp4, hero.webp and hero.mp4 (the large header, with seasonBanner(ev, cls, { hero: true })), wallpaper-street.jpg (and its animated .mp4) and wallpaper-graveyard.jpg. The built-in themes use it. Look at Steam’s (themes/steam/store.js, eventFront) as an example.