v1.11.0

A new post-game screen, and a layout that finally sizes itself to wherever you put it.

👍
Nothing breaks by default
If you change nothing, the game keeps working and looks the way it did. Every new piece of text ships with built-in English wording, and every new colour setting falls back to a colour you already have. The new screen appears on its own.
Read on if you want to customise the wording and colours, or if you have written your own CSS against the game.

New: the Highlights screen

Players can now look back at the puzzle they just finished.

Once someone completes the day's puzzle, a Highlights button appears on the end screen. Tapping it reopens the finished puzzle so they can look at it properly: the revealed picture, and the grid exactly as they left it. If they won, the keyboard is shown with their letter colours still on it. If they lost, the correct answer is spelled out under the grid instead.

It is read-only. Typing does nothing and nothing is re-submitted. A back arrow in the top-left returns them to the end screen.

Wording you can change

Setting	Default	Where it appears
`end_screen.highlights_button_label`	Highlights	The button on the end screen
`game_screen.correct_word_label`	Correct word	Above the answer, shown only after a loss
`game_screen.back_label`	Back	Read aloud by screen readers for the back arrow. Never visible.

"screens": {
  "end_screen":  { "highlights_button_label": "Highlights" },
  "game_screen": { "correct_word_label": "Correct word" }
}

Colours you can change

Setting	If you leave it out
`end_screen.admire_btn`	The Highlights button matches your existing Stats button, field by field
`game_screen.correct_word_label_color`	Uses your welcome-screen title colour

📘
One difference worth knowing
On the Highlights button, the width you set acts as a minimum rather than a fixed size. The button grows if a translated label is longer, so nothing gets cut off. Your Stats button still uses width exactly as before.

It now fits the space you give it

The biggest change is invisible until you embed the game somewhere narrow.

The game used to decide its layout by looking at the size of the whole browser window. That worked when it had the screen to itself, and went wrong when it sat in a side panel, a card, or an iframe, because it would lay out for the window rather than for the space it actually had.

It now measures its own container instead. Put it in a 360-pixel panel on a wide desktop and it lays out for 360 pixels.

The keyboard sits inside the game now. It used to be pinned to the bottom of the browser window, which meant it could float over your page. It is part of the layout like everything else.
Letter tiles are square and size themselves to fit the space and the length of the word, instead of switching between a few fixed sizes.
The game sits in a centred column up to 500 pixels wide. Your background image still fills the full width behind it.
The picture scales with the container and keeps a small margin from the edges.

If you have written your own CSS

🚧
Only relevant if you style the game from your own stylesheet
If you use the game as-is, or theme it through the CMS settings above, you can skip this section entirely.

Your overrides should work better

Nine !important rules were removed from the game's stylesheet. Those were the main reason custom styling used to get ignored. If you added !important to your own rules just to win that fight, you can probably take it back out.

Names that no longer exist

These were left over from older layouts. If you styled any of them, that styling now has no effect, and in most cases it already had none.

Removed	Why
`ll-gti-board.zoomed`, `ll-gti-board.zoomout`	Existed only to make room for the floating keyboard, which is gone
`.message`, `.space-header`, `.container`	Unused. Nothing in the game had these.
`.invalid-word.show`	The "not enough letters" message now always holds its space, so the board no longer jumps when it appears

Tile size is calculated now

If you set a width or height on .tile, remove it. The game works out the tile size from the space available, and a fixed size will fight that and give you rectangles instead of squares.

Values you can read

The game publishes the sizes it calculates, so you can match them:

Variable	Holds
`--gti-tile-font`	The letter size inside the tiles
`--gti-reveal-size`	The tile size used by the answer on the Highlights screen
`--gti-image-zoom`	How far the picture is currently zoomed in

New class names

All new class names start with ll-gti-board- so they cannot collide with another game on the same page: ll-gti-board-clip, ll-gti-board-admire, and ll-gti-board-admire-reveal with its parts.

What to check after upgrading

Finish a puzzle and open Highlights, once after winning and once after losing.
Try it with a two-word answer, so you can see the answer wrap the same way the grid does.
View it at the narrowest size you support, and on a tablet.
If you embed the game in a panel or iframe, check that width specifically. That is the case this release changes most.

Version details


Version	Guess the Image 1.11.0
Requires	No backend or API changes. Configuration is optional throughout.
Questions	Ask the Arcade team.