---
title: What the F...ooter? ...game! | Footer Games for YOOtheme Pro
description: Turn your YOOtheme Pro footer into an arcade with 9 games, highscores, rewards, leaderboards and shareable challenges.
url: https://www.yoozecase.com/what-the-footer-game
---

# What the F...ooter? ...game!

What the F...ooter? ...game!

**Latest Version**

**Release date**

**Made for**

Joomla

**Price**

€25.00 (incl. 6 months of updates)

[🛒 Get it for Joomla 👍](https://shop.yoozecase.com/checkout/buy/d6b1e35e-c12f-427d-a85d-6a16ce7e69c8)

[Demo page](https://www.yoozecase.com/what-the-footer-game-demo)

Hide a tiny game in your footer. Nobody scrolls that far .... until now!Turn your Joomla footer into a playable arcade. What the F...ooter? ...game! adds a YOOtheme Pro element with 9 built-in games, live highscores, unlockable rewards and an opt-in global leaderboard, a fun, sticky reason for visitors to stay a little longer.

![What The Footer Game](https://www.yoozecase.com/files/what-the-footer-game.png)

---

## Description

Give your footer a reason to be scrolled to.*What the F...ooter? ...game!* is a YOOtheme Pro element for Joomla 5 &amp, 6 that hides a full arcade inside your footer. A play button slides your footer content aside and drops the visitor straight into a game, then slides back when they're done. It's built to be genuinely fun, on-brand, and impossible to resist a "one more try."

Nine games, one element.
Pick from Space Shooter, Endless Runner, Pong, Brick Breaker, Snake, Footer Flyer, Meteor Dodge, Whack-a-Mole and 2048, each with its own highscore board.

Highscores that keep people coming back.
Live per-game leaderboards with all-time / monthly / weekly / daily views, plus an optional ****seeded Daily Challenge
where everyone plays the exact same layout that day. Turn on the **global, cross-site leaderboard
and scores from every site running the plugin compete on one board with a separate, drop-anywhere **Global Highscores
element (retro-pixel, neon, podium and terminal themes included).********

********Reward your champions.
Automatically unlock a code, a message and/or a downloadable file when a player beats the top score with optional, consent-based email capture so you can follow up with your best players.********

********Make it yours.
Use your logo as the player, choose colour presets or a picker, enable seasonal colours, retro CRT and arcade sound effects, floating power-ups, and a hidden Konami easter egg. It's fully responsive (the scene drops below the text on mobile), theme-neutral, privacy-conscious, and translated into six languages.********

********Built-in virality.
Players can share their score, download a score-card image with a QR code, and hand their phone a scan-to-play QR. Every game becomes a tiny invitation to the next player.********

Plus an admin dashboard with moderation, a profanity filter, analytics and a control-panel quick-icon. It's the friendliest way to turn dead footer space into engagement.

---

#### Top voted

';
 }
 html += '

';
 if (oc.title) {
 html += '

##### ' + escapeHtml(oc.title) + '

';
 }
 if (oc.text) {
 html += '

' + escapeHtml(oc.text).replace(/\n/g, '
') + '

';
 }
 html += '

';
 }

 // Auto winner(s) - top N from the already vote-sorted features
 if (mode === 'auto_winner' || mode === 'both') {
 var n = oc.winnerCount | 0;
 if (n ';
 for (var i = 0; i ' +
 (w.image_url ? '

![](https://www.yoozecase.com/' + escapeHtml(w.image_url) + ')

' : '') +
 '' + (i + 1) + '' +
 '' + escapeHtml(w.title) + '' +
 '' + getIcon(this.cfg.voteIcon) + ' ' + (w.votes | 0) + '' +
 '';
 }
 html += '';
 }
 }

 if (html === '') {
 this.elOutcome.hidden = true;
 return;
 }
 this.elOutcome.innerHTML = html;
 this.elOutcome.hidden = false;
 };

 /**
 * Roadmap view (v3.2.0): renders the items as status columns, in the
 * canonical status order from cfg.statuses. Each column is an  inside
 * the existing .yc-fb-list ';
 }
 return html;
 };

 Board.prototype.renderItem = function (f, index) {
 var disabled = this.cfg.isClosed ? 'disabled' : '';
 var voted = f.voted ? ' yc-voted' : '';
 var descHtml = f.description
 ? '

' + escapeHtml(f.description).replace(/\n/g, '
') + '

'
 : '';
 var thumbHtml = f.image_url
 ? '

![](https://www.yoozecase.com/' + escapeHtml(f.image_url) + ')

'
 : '';

 // Status workflow (v3.0.0): badge for any non-default status. The
 // roadmap view (v3.2.0) skips the badge - the column already
 // communicates the status, a badge would be redundant noise.
 var st = (f.status || 'open');
 var labels = this.cfg.statusLabels || {};
 var statusBadge = (!this.isRoadmap && st && st !== 'open' && labels[st])
 ? '' + escapeHtml(labels[st]) + ''
 : '';

 // Design themes (v3.1.0): arena / neon / pixel render extra per-item
 // furniture - rank number, avatar (image or initials), a "leader" pill
 // on rank 1, and a "votes" label. Classic/colour themes are untouched.
 var t = this.cfg.theme || 'light';
 var themed = (t === 'arena' || t === 'neon' || t === 'pixel');
 var rank = (typeof index === 'number') ? (index + 1) : 0;
 var rankHtml = '', leaderHtml = '', avatarHtml = '', votesLabel = '';
 if (themed) {
 rankHtml = '' + pad2(rank) + '';
 if (rank === 1) {
 leaderHtml = '' + escapeHtml(this.cfg.leaderLabel || 'Leader') + '';
 }
 if (f.image_url) {
 avatarHtml = '

![](https://www.yoozecase.com/' + escapeHtml(f.image_url) + ')

';
 } else {
 avatarHtml = '

' + escapeHtml(initialsOf(f.title)) + '

';
 }
 votesLabel = '' + escapeHtml(this.cfg.votesLabel || 'votes') + '';
 }

 // Moderation overlay: subtle corner buttons, only when canModerate.
 // Buttons appear on hover/focus (styled in CSS). Even in customizer
 // preview we render them when canModerate is true so the moderator
 // can see what visitors with moderation rights will see.
 var modHtml = '';
 if (this.cfg.canModerate) {
 var parts = [];
 var hideTitle = escapeHtml(this.t('hideTitle', 'Hide this feature'));
 var deleteTitle = escapeHtml(this.t('deleteTitle', 'Delete this feature'));
 if (this.cfg.allowSoftHide) {
 parts.push(
 ''
 );
 }
 if (this.cfg.allowHardDelete) {
 parts.push(
 ''
 );
 }
 if (parts.length || (this.cfg.statuses && this.cfg.statuses.length)) {
 var sParts = parts.slice();
 if (this.cfg.statuses && this.cfg.statuses.length) {
 var opts = '';
 for (var si = 0; si ' + escapeHtml(sl) + '';
 }
 var setStatus = escapeHtml(this.t('setStatus', 'Set status'));
 sParts.push(
 ''
 );
 }
 modHtml = '';
 }
 }

 var mediaHtml = themed ? avatarHtml : thumbHtml;
 return (
 '' +
 leaderHtml +
 rankHtml +
 '' +
 mediaHtml +
 '

' +
 '

##### ' + escapeHtml(f.title) + '

' +
 statusBadge +
 descHtml +
 '

' +
 modHtml +
 ''
 );
 };

 /**
 * Detects whether a JSON response looks like a CSRF/token rejection.
 * Two cases:
 * 1. com_ajax-level rejection (Joomla's auto-token-check on POST): top
 * level message contains the JINVALID_TOKEN_NOTICE text and HTTP
 * status is typically 403.
 * 2. Plugin-level rejection from requireToken(): payload.error === "Invalid token".
 */
 Board.prototype.isTokenError = function (status, raw, payload) {
 if (status === 403) return true;
 var hay = '';
 try { hay = JSON.stringify(raw || {}) + '|' + JSON.stringify(payload || {}); } catch (e) {}
 return /invalid (security )?token/i.test(hay);
 };

 /**
 * Fetch a fresh CSRF token from the server. Updates this.cfg.csrfToken so
 * the next call (and any future calls in this Board's lifetime) use the
 * correct one. Cache-bust with a timestamp so no upstream CDN caches the
 * response.
 */
 Board.prototype.fetchFreshToken = function () {
 var self = this;
 var url = this.cfg.ajaxUrl + '&task=token&_=' + Date.now();
 return fetch(url, {
 method: 'GET',
 credentials: 'same-origin',
 headers: { 'Accept': 'application/json', 'Cache-Control': 'no-cache' }
 })
 .then(function (r) { return r.json(); })
 .then(function (data) {
 var p = self.unwrapAjax(data);
 if (p && p.ok === true && typeof p.token === 'string' && p.token.length >= 16) {
 self.cfg.csrfToken = p.token;
 return p.token;
 }
 throw new Error('No fresh token in response');
 });
 };

 /**
 * Generic POST-with-token helper. Builds FormData from a plain object,
 * adds the current token, posts. On 403 / token-error response, fetches a
 * fresh token and retries exactly once.
 *
 * @param {string} task The task name (appended to URL and body)
 * @param {object} fields Key-value form fields (no token)
 * @return {Promise

## Changelog

---

v0.3.1
 24/06/2026

Fixed

- `content.php`: AI-waarschuwingsheader toegevoegd (ontbrak; pre-release-grep-check FAIL).
- `script.php`: `Factory::getDbo()` vervangen door `Factory::getContainer()->get('DatabaseDriver')`
- `script.php`: hardcoded versiestring in postflight-melding vervangen door
- `template.php`: asset cache-buster gekoppeld aan `ArcadeFooter::VERSION` i.p.v.
- `NOTICE.txt`: security-e-mailadres bijgewerkt van `This email address is being protected from spambots. You need JavaScript enabled to view it.` naar

v0.3.0
 09/06/2026

Added

- Game library: the element now offers FOUR games via the new Game option.
- Each game has its own attract background scene in the footer, its own
- HUD middle slot is game-specific: wave / distance / CPU points / level;

Changed

- game.js refactored into a controller + pluggable game modules (shooter

v0.2.0
 09/06/2026

Added

- Scene height option: minimum height of the non-playing footer with the
- Game title shown in the footer, on top of the background scene (toggle).
- Live highscore board in the footer: compact top-5 next to the play
- Vertical position option for the title/scores/button block: top, middle
- Button style option: Pulse ring (default), Solid accent, Ghost outline,
- Button size option: small, medium, large.

Changed

- The title, mini board and play button now float as one block over the

v0.1.3
 09/06/2026

Added

- Left mouse button fires (hold to keep shooting). Steering stays on the

Changed

- When the game starts, the playfield scrolls itself fully into view
- The play button is now a clear call-to-action: larger, full opacity,

v0.1.2
 09/06/2026

Changed

- The attract scene is now the BACKGROUND of the whole footer: a borderless
- The play row shows only the button again (left / center / right), styled
- Background scene hides while the real game runs and pauses on hidden

v0.1.1
 09/06/2026

Added

- Attract-mode preview behind the play button: a small live canvas scene

Changed

- Pressing play now starts the game immediately (no separate start screen);
- Desktop steering is keyboard only (arrows or A/D + Space); mouse clicks
- Game overlays (game over / pause) now sit on a dark translucent panel

Fixed

- Score saving and the highscore list: com_ajax wraps plugin results in an

v0.1.0
 09/06/2026

Added

- First working alpha of the Arcade Footer YOOtheme Pro element
- Footer content as a real YOOtheme sublayout (content-items -> fragment),
- Infinite-wave canvas arcade shooter (Galaga-inspired, original artwork):
- Slide transition footer <-> game; Esc/quit button returns to the footer.
- Keyboard (arrows/A-D + Space) and touch (drag to steer, auto-fire).
- Site-wide highscore board in #__yc_arcade_footer_scores with per-element
- CSRF-tokened score submission (X-CSRF-Token header, hash_equals server
- Self-healing scores table (CREATE TABLE IF NOT EXISTS on every AJAX call).
- Installer: PHP gate, auto-enable, update-sites self-heal, YOOtheme cache
- Six languages with full key parity (en-GB, nl-NL, de-DE, fr-FR, es-ES,
- Accessibility: 44px tap targets, focus-visible styles, aria-live save