# Widżet gry na stronę WWW w jednej linijce

> Trzy sposoby osadzenia gry w pikselach na stronie: element pixel-gra, jedna linijka embed.js albo iframe. Wynik gry wraca do strony przez postMessage.

Strona: https://pixel.tukamil.com/widzety/

Widżety wstawiają grę w pikselach na dowolną stronę. Działają też na stronie z ostrym CSP bez inline skryptów i stylów.

## Trzy sposoby
1. Element <pixel-gra>: `<script src="https://pixel.tukamil.com/widzety/pixel-gra.js" defer></script>` i `<pixel-gra src="https://pixel.tukamil.com/foto-do-gry/" tytul="Świetliki" proporcje="4/3"></pixel-gra>`. Ładuje się leniwie, pauzuje poza ekranem.
2. Jedna linijka: `<div data-gra="pixel-kamil"></div>` i `<script src="https://pixel.tukamil.com/widzety/embed.js" async></script>`.
3. Zwykły iframe z `loading="lazy"`.

## Wynik gry
Gra wysyła wiadomości gotowa i wynik, strona wysyła start i pauza. Format: `{ pa: 1, typ, dane }`. Opis API: [API.md](https://pixel.tukamil.com/widzety/API.md).

## Przykłady
HTML, Astro, Next.js, WordPress i Webflow w folderze widzety/przyklady.

## Pytania
### Czy widżet działa z WordPressem?
Tak. Wystarczy blok HTML z jedną linijką embed.js albo iframe.
### Skąd strona wie, że ktoś wygrał?
Z wiadomości wynik (postMessage) albo zdarzenia pixel-gra:wynik.

## Inne aplikacje tuKamil
- [pixelkamil](https://pixel.tukamil.com/galeria/): gry, studio, syntezator i widżety w pikselach
- [tuKamil](https://tukamil.com): wprowadzanie AI w firmach, aplikacje i gry tuKamil w jednym miejscu
- [thePolacy](https://thepolacy.com): muzeum kolekcji 2137 pikselowych Polaków i gra Pieczątka Narodu
- [Dwie Strony](https://dwiestrony.wezmezadarmo.com): dwie strony przy jednej umowie na dwóch telefonach: budowa, samochód, mieszkanie
- [Należy się](https://nalezysie.wezmezadarmo.com): po wpisaniu NIP-u pokazuje, co czeka firmę, kto zalega z płatnościami i ile należy się odsetek
- [Przegląd 2027](https://jpk.wezmezadarmo.com): sprawdzenie pliku JPK_V7 przed 2027 w przeglądarce, wersja pokazowa DogInvoice
- [Claude Start](https://start.cyfrowypomocnik.com): przewodnik krok po kroku: Claude na komputerze w firmie
- [Asystent Firmy](https://asystent24.com): asystent AI, który odpowiada klientom na stronie firmy o każdej porze
- [Brand Agent](https://brand.cyfrowypomocnik.com): agent AI zbudowany z materiałów marki
- [Cyfrowy Pomocnik](https://www.cyfrowypomocnik.com): zespół agentów AI na Claude w firmie: wdrożenie i opieka
- [YESNO](https://yesno.events): co świat przewiduje: pytania z rynków predykcyjnych
- [WezmeZaDarmo](https://www.wezmezadarmo.com): świadczenia i ulgi, które się należą, z kalkulatorem