Hra pexeso VI

Algortimy Obsah lekce:

Zobrazení pexesa v prohlížeči
Zápis do souboru
Aktualizace informací v prohlížeči

Zobrazení pexesa v prohlížeči

Hodnoty obrázků pexesa jsme si zatím zobrazovali pouze v textovém režimu v konzoli. Vhodnější však bude grafické zobrazení pexesa. To budeme realizovat v okně internetového prohlížeče. Potřebujeme tedy doplnit program o proceduru, která nám vytvoří HTML soubor, který bude obsahovat jednotlivé kartičky pexesa, jména hráčů a počty bodů.

Pro kartičky pexesa použijeme obrázky ve formátu JPG o velikosti 100x100px. Tyto obrázky budou pojmenované 1.jpg až 18.jpg. Navíc bude potřeba jeden obrázek pro rubovou stranu kartiček. Tento obrázek bude mít stejné rozměry a bude pojmenován 0.jpg. Tyto soubory již máme připravené z úkolu z jedné z minulých lekcí.

Výstup pexesa bude tvořit HTML soubor, který bude obsahovat tabulku o šesti řádcích a šesti sloupcích a bude zobrazovat jednotlivé kartičky pexesa. Do tohoto souboru si poté postupně doplníme i zobrazení hráčů, počtu bodů a další potřebné informace.

Potřebujeme získat HTML soubor v následující podobě:

Struktura HTML souboru

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>PEXESO</title>

    </head>
    <body>
        <table>
           <tr>
               <td><img src="obrazkypexeso/11.jpg" alt="11" /></td>
               <td><img src="obrazkypexeso/7.jpg" alt="7" /></td>
               <td><img src="obrazkypexeso/3.jpg" alt="3" /></td>
               <td><img src="obrazkypexeso/4.jpg" alt="4" /></td>
               <td><img src="obrazkypexeso/16.jpg" alt="16" /></td>
               <td><img src="obrazkypexeso/2.jpg" alt="2" /></td>
           </tr>
           <tr>
               <td><img src="obrazkypexeso/6.jpg" alt="6" /></td>
               <td><img src="obrazkypexeso/16.jpg" alt="16" /></td>

               ...

        </table>
    </body>
</html>

Zápis do souboru

Než si vytvoříme proceduru, jejímž výsledkem bude HTML soubor, se nejprve podíváme na zápis do textového souboru obecněji.

Zápis do textového souboru můžeme rozdělit do tří částí:

Otevření souboru
Vlastní zápis dat
Uzavření souboru

Otevření souboru

Před otevřením souboru budeme potřebovat proměnnou, pomocí které se na soubor budeme odkazovat při další práci s tímto souborem. V případě textového souboru se bude jednat o datový typ text.

Datový typ text

var f : text;

Dalším krokem je přiřazení názvu souboru k proměnné. Pro tento účel slouží funkce Assign, která má dva parametry. Prvním parametrem je proměnná pro práci se souborem, druhým parametrem je název souboru.

Přiřazení názvu souboru

Assign(f, 'pexeso.html');

Poslední krok otevření souboru záleží na způsobu práce se souborem. Buď můžeme ze souboru pouze číst, přidávat data na konec souboru nebo můžeme chtít soubor přepsat (vytvořit nový soubor).

Pro jednotlivé způsoby otevření souboru slouží následující funkce:

Reset(soubor) - otevření souboru pro čtení
Append(soubor) - otevření souboru pro přidání dat na konec souboru
Rewrite(soubor) - otevření souboru pro přepis / vytvoření nového souboru

V našem případě využijeme poslední z nabízených možností, která slouží pro přepsání souboru nebo pro vytvoření nového souboru.

Otevření souboru pro přepis

Rewrite(f);

Vlastní zápis dat

Zápis dat do souboru bude probíhat velmi podobně výpisu dat do konzole. Pro zápis dat totiž slouží funkce write (zápis dat bez zalomení řádku) a writeln (zápis celého řádku) s tím rozdílem, že jako první parametr těchto funkcí použijeme proměnnou pro práci se souborem.

Zápis do souboru

Write(f, data);
Write(f, 'text', hodnota);
Write(f, hodnota1, hodnota2);

Writeln(f, data);
Writeln(f, 'text', hodnota);
Writeln(f, hodnota1, hodnota2);

Uzavření souboru

Po dokončení práce se souborem je třeba soubor uzavřít. Pro tento účel slouží funkce Close.

Uzavření souboru

Close(f);

Procedura pro vytvoření HTML souboru

Vytvoření HTML souboru budeme opět realizivat pomocí samostatné procedury. Procedura se bude jmenovat html a budeme ji volat při každé změně hodnot v našem programu tak, aby se aktualizoval výstup v prohlížeči.

Dle výše uvedeného postupu pro zápis do textového souboru můžeme vytvořit základní kostru HTML souboru, do kterého postupně doplníme všechny potřebné údaje.

Procedura pro vytvoření HTML souboru - 1. část

procedure html;
    var f : text;
begin
    Assign(f, 'pexeso.html');
    Rewrite(f);
    
    Writeln(f, '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
    Writeln(f, '<html xmlns="http://www.w3.org/1999/xhtml">');
    Writeln(f, '<head>');
    Writeln(f, '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
    Writeln(f, '<title>Pexeso</title>');
    Writeln(f, '</head>');
    Writeln(f, '<body>');
    Writeln(f, '<h1>Pexeso</h1>');
    Writeln(f, '<table>');
    
    
    Writeln(f, '</table>');
    Writeln(f, '</body>');
    Writeln(f, '</html>');
    
    Close(f);
end;

Nejprve vytvoříme proměnnou typu text a přiřadíme do ní název souboru (var f : text; a Assign(f, 'pexeso.html');), následně soubor otevřeme pro přepis (Rewrite(f);) a zapíšeme do něj jednotlivé HTML tagy (Writeln(f, '<html>');, ...). Po dokončení práce se souborem tento soubor uzavřeme (Close(f);).

V dalším kroku již můžeme doplnit konstrukci tabulky, která bude sloužit pro zobrazení pexesa. Zápis bude velmi podobný zápisu, který jsme již použili pro zobrazení pexesa v konzoli. Výpis do konzole však nahradíme zápisem HTML tagu IMG do souboru.

Procedura pro vytvoření HTML souboru - 2. část

procedure html;
    var f : text;
    radek, sloupec : byte;
begin
    Assign(f, 'pexeso.html');
    Rewrite(f);

    Writeln(f, '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
    Writeln(f, '<html xmlns="http://www.w3.org/1999/xhtml">');    
    Writeln(f, '<head>');
    Writeln(f, '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
    Writeln(f, '<title>Pexeso</title>');
    Writeln(f, '</head>');
    Writeln(f, '<body>');
    Writeln(f, '<h1>Pexeso</h1>');
    
    Writeln(f, '<table>');

    
    for radek := 1 to n do
    begin
        Writeln(f, '<tr>');
        for sloupec := 1 to n do
        begin

        IF p[radek, sloupec].odebrana THEN
            Writeln(f, '<td>   </td>')
        ELSE
            IF p[radek, sloupec].viditelna THEN

                Writeln(f, '<td><img src="',p[radek, sloupec].obrazek,'.jpg" /></td>')
            ELSE
                Writeln(f, '<td><img src="0.jpg" /></td>');

        end;
        Writeln(f, '</tr>');
    end;
    
    Writeln(f, '</table>');
    
    Writeln(f, '</body>');
    Writeln(f, '</html>');
    
    Close(f);
end;

Do procedury HTML jsme nyní přidali konstrukci pro vykreslení tabulky (zvýrazněna tučně). Stejně jako při zobrazení pexesa v terminálu zde větvíme program pomocí dvojice příkazů IF do tří situací:

Pokud je kartička odebrána, vykreslí se prázdná buňka (Writeln(f, '<td> </td>')).
Pokud je kartička viditelná, vykreslí se buňka tabulky s orázkem, který představuje danou kartičku (Writeln(f, '<td><img src="0.jpg" /></td>');).
Pokud kartička viditelná není, zobrazí se obrázek představující rub kartičky - soubor 0.jpg (Writeln(f, '<td><img src="',p[radek, sloupec].obrazek,'.jpg" /></td>')).

Do HTML souboru dále můžeme doplnit i jména hráču a počty bodů.

Procedura pro vytvoření HTML souboru - 3. část

procedure html;
    var f : text;
    radek, sloupec, i : byte;

begin
    Assign(f, 'pexeso.html');
    Rewrite(f);
    
    Writeln(f, '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">');
    Writeln(f, '<html xmlns="http://www.w3.org/1999/xhtml">');
    Writeln(f, '<html>');
    Writeln(f, '<head>');
    Writeln(f, '<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />');
    Writeln(f, '<title>Pexeso</title>');
    Writeln(f, '</head>');
    Writeln(f, '<body>');
    Writeln(f, '<h1>Pexeso</h1>');
    
    Writeln(f, '<table>');
    
    for radek := 1 to n do
    begin
        Writeln(f, '<tr>');
        for sloupec := 1 to n do
        begin
        IF p[radek, sloupec].odebrana THEN
            Writeln(f, '<td>   </td>')
        ELSE
            IF p[radek, sloupec].viditelna THEN

                Writeln(f, '<td><img src="',p[radek, sloupec].obrazek,'.jpg" /></td>')
            ELSE
                Writeln(f, '<td><img src="0.jpg" /></td>');
        end;
        Writeln(f, '</tr>');
    end;
    
    Writeln(f, '</table>');
    
    Writeln(f,'<ol>');

    for i := 1 to pocethracu do
    begin
        Writeln(f,'<li>',ph[i].jmeno ,': ',ph[i].skore,'</li>');
    end;
    Writeln(f,'</ol>');   
    
    Writeln(f, '</body>');
    Writeln(f, '</html>');
    
    Close(f);
end;

V této části jsme si přidali číslovaný seznam hráčů (pomocí HTML tagu <ol>). Pro potřeby cyklu, který vypisuje jednotlivé hráče, bylo třeba v proceduře html vytvořit celočíselnou proměnnou i, pomocí které jsme prošli pole hráčů a u každého hráče bylo vypsáno jméno a skóre.

Automatická aktualizace stránky

Posledním problémem, který je třeba vyřešit, je automatická aktualizace stránky, aby se projevily změny v průběhu hry. Pro tento účel slouží meta tag s následujícím zápisem:

Meta tag pro automatické obnovení stránky

<meta http-equiv="refresh" content="časvsekundách">

Do procedury pro vytvoření HTML souboru (konkrétně do hlavičky stránky - head) tedy přidáme následující řádek:

Meta tag pro automatické obnovení stránky

Writeln(f, '<meta http-equiv="refresh" content="1">');

Procedura html by následně měla být volána na všech místech programu, kde dochází ke změně hodnot, které jsou v HTML souboru zobrazeny. Volání procedury tedy doplníme na všechna místa v proceduře hra, kde voláme proceduru zobrazpexeso.

Domácí úkol

Program je téměř kompletní, zbývá pouze dokončit formátování výstupu do HTML. Za použití CSS vhodně naformátujte výstup do HTML.

Kompletní program ke stažení

Kompletní verze programu, který máme vytvořený je k dispozici v souboru pexeso_full.pas

webdesign, xhtml, css, php - Mgr. Michal Mikláš