momente şi schiţe de informatică

Modelarea tablei şi jocului de şah (II)

Creat: 2012/may       Comentarii

CSS | gadget | HTML | javaScript | jQuery | plugin | șah | widget

În partea I am definit funcţia setChessTable() şi anumite proprietăţi CSS, care -împreună- creează tabla de şah (vidă). Continuând, ar fi de văzut cum înscriem o poziţie de şah pe tabla deja constituită; dar întâi evidenţiem necesitatea unor anumite reformulări, finalizând cadrul de dezvoltare ulterioară.

Recapitulare şi reformulare elementară

setChessTable() constituia tabla de şah - într-un <div> cu proprietatea "position: relative", servind drept container - ca o succesiune de 64 elemente

    <div class="field Row-1 Col-1 WhiteField"></div>

unde .field defineşte dimensiunile câmpului şi marchează diviziunea respectivă cu "position: absolute", iar Col-n şi Row-n (cu n = 1..8) definesc valorile "left" şi respectiv "top" pentru câmpul respectiv (proprietăţile CSS implicate astfel asigură alinierea câmpurilor în raport cu marginea stângă şi cu cea de sus a containerului).

Iniţial, toate aceste 64 de <div> sunt vide. Procedeul prin care vom înscrie o anumită piesă într-un anumit câmp al tablei este evident: identificăm acel <div> dintre cele 64 existente care corespunde câmpului şi îi înscriem drept conţinut un <div> care să conţină piesa.

Având de modelat termeni ca "piesă" şi însuşi procedeul tocmai descris, vor fi de conceput noi funcţii şi proprietăţi, astfel că este firesc să reformulăm codul precedent - mai întâi separând lucrurile:

<!DOCTYPE html>
<head>
    <link href="brw-sah.css" rel="stylesheet" />
    <script src="brw-sah.js"></script>
</head>
<body>
    <div class="container" id="tabla"></div>

    <script>
        document.getElementById("tabla")
                .innerHTML = setChessTable();
    </script>
</body>

La încărcarea acestui fişier, browserul va căuta fişierele indicate în <head> ("brw-sah.css" ar conţine definiţiile .field, .Col-n, etc. iar "brw-sah.js" ar conţine funcţia setChessTable()) şi le va încărca şi pe acestea, apoi va crea elementul indicat în <body> şi va încheia procesul prin execuţia instrucţiunii din <script>-ul final (rezultatul fiind exact cel redat deja în partea I).

Iar pentru a ne uşura dezvoltarea aplicaţiei, alegem să folosim framework-ul jQuery şi adăugăm (în <head>, de obicei) <script>-ul necesar pentru includerea şi a acestei biblioteci.

Dar pentru "dezvoltarea aplicaţiei", trebuie mai întâi să ne lămurim: care aplicaţie? Încărcând într-un browser HTML-ul de mai sus obţii o tablă de şah şi atât… unde-i "aplicaţia"?

Să observăm însă o întrebare intermediară simplă: cine va "încărca într-un browser HTML-ul de mai sus"… Ca să putem vorbi de "aplicaţie" trebuie să mai avem în vedere un utilizator, imaginându-ne cât mai bine interesele acestuia - spre a le satisface prin aplicaţia respectivă.

De obicei, "utilizatorul" este considerat a fi o persoană; dar trebuie să avem în vedere şi browserul prin intermediul căruia persoana accesează aplicaţia - şi deja apare necesitatea unor precauţii, fiindcă există diferenţe de interpretare (pentru CSS, DOM, javaScript) între browsere (şi iată un avantaj important al folosirii unui framework; jQuery rezolvă "în spate" diversele probleme de compatibilitate între browserele moderne). Deasemenea, "utilizator" poate fi considerat şi vreun alt program, care poate şi el să acceseze o componentă sau alta din aplicaţia respectivă.

Conturarea aplicaţiei; schema de dezvoltare

Ne propunem deocamdată acest scenariu: utilizatorul va transmite (sub o anumită formă) o poziţie de şah, aşteptând din partea aplicaţiei noastre să-i redea diagrama corespunzătoare. Aşadar, dorim să modelăm acest mecanism: "transmite poziţia - iată diagrama ei"; repetând după fiecare mutare - utilizatorul va putea urmări desfăşurarea întregii partide.

În prealabil, n-ar trebui să ratăm observaţia simplă că tabla ca atare - vidă - ar trebui creată o singură dată, la început; ulterior, fiecare poziţie transmisă trebuie eventual verificată (să fie o "poziţie de şah", nu altceva) şi înscrisă pe tabla deja existentă.

jQuery ne oferă posibilitatea de a dezvolta aplicaţia sub forma unui widget - o componentă Web independentă (reutilizabilă) care poate fi integrată (printr-o declaraţie foarte simplă) unuia sau mai multor elemente existente într-un document HTML.

Pentru aceasta, trebuie întâi să descărcăm componenta "Widget" de la jqueryui.com, obţinând fişierele "jquery.ui.core.min.js" şi "jquery.ui.widget.min.js". Constituim subdirectoare /js/ şi /css/ şi reformulăm fişierul HTML astfel:

<!DOCTYPE html>
<head>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.ui.core.min.js"></script>
    <script src="js/jquery.ui.widget.min.js"></script>

    <link href="css/brw-sah.css" rel="stylesheet" />
    <script src="js/brw-sah.js"></script>
</head>

<body>
    <div class="container"></div>
    <p class="container"></p>

    <script>
        $(function() { 
            // instanţiază widget-ul pe fiecare "container"
            $('.container').fenBrowser();
        });
    </script>

unde widgetul "fenBrowser()" conţine metodele standard _create() şi _init(), precum şi metoda _setChessTable() (cu exact acelaşi conţinut ca şi funcţia "setChessTable()" scrisă anterior):

/* js/brw-sah.js */
(function ($) {
    $.widget("brw.fenBrowser", {
        
        // this.element reprezintă "containerul" pe care se instanţiază widget-ul
        _create: function() {
            this.element.html( this._setChessTable() );
        },
        
        _init: function() {
            /* înscrie pe tablă poziţia transmisă */
        },
        
        _setChessTable: function() {
            /* mutăm aici conţinutul funcţiei setChessTable() anterioare */
            // var html = []; ...; return html.join('');
        }

    });
})(jQuery);

_create() - care apelează setChessTable() - va fi executată o singură dată, anume în momentul instanţierii widget-ului; deci avem deja (chiar gratis, datorită jQuery.widget()) ceea ce doream: tabla de şah vidă este creată o singură dată (şi nu după fiecare nouă transmitere de poziţie).

Rămâne să implicăm în _create() un element HTML - un <input> de exemplu - în care utilizatorul (presupunând că este o persoană) să poată furniza o poziţie de şah şi să completăm _init() cu un cod corespunzător pentru "citirea" acestei poziţii şi pentru înscrierea ei pe tabla creată.

Media Dinamică

Articolul 50

Drumuri

ŞahStartTemp

25
32
17
4
19
34
14
3
26
33
16
5
31
24
15
18
35
20
2
13
27
6
9
23
30
11
8
21
28
12
22
29
10
7

Ambiţiile Cavalerului

Localităţi

Judeţ:

Constituirea unei baze de date colectând cu Python de pe web

Bliţuri

Load another random Bliţ

//slightchess

Decoraţiuni hiperbolice

SALARII 2017, 2018

//bacMath
variante BAC matematică

Bacalaureat 2015 -
de la forma microsoftizată, la R

modelare ŞAH, I-XX
construcţia unui PGN-browser()

Linux şi aplicaţii Web
în 24 de ore

Orar şcolar - exemplu
după un orar generat de "aSc Orare"

Orar Adjust
ajustează orarul şcolar