Full SVG Application

Refined and Distilled File to download: Kakaranet-Scene.svg

Please make sure your Vector Editor correctly opens this file!

Gosterge: 1 5
Albert Einstein Marie Curie Ilya Prigogine Asena Simsek

Refined Object Names


        Mustafa-Persona        Facebook-Login         Have-8-Tashes
        Gabrielo-Persona       Online-Users           Settings
        Alina-Person           Kakaranet-Logo         Pause
        Gabrielo-Deck                                 Point-Table
        Alina-Deck             Table                  Create
        Mustafa-Deck           Gosterge               Play
        Gabrielo-Discard       Slot-1,1..15           Promos
        You-Discard            Slot-2,1..15           Tournaments
        Alina-Discard          Place-Card             Okey
        Mustafa-Discard        Center-Cards
                               You-Deck               Detailed-Houses
                               Stupid-Cards           Sky
        Mustafa-+-Timer        Deck-Cards             Sun
        You-+-Timer                                   City
        Gabrielo
        Alina

        Right-Menu
        Left-Menu

SVG Templates and DOM Manipulation

Here we using Simple Template Engine in 12 LOC.
SVG loader with localStorage caching in 9 LOC.
SVG DOM storing in 3 LOC



function template_engine(html, data) {
    var re = /{([^}]+)?}/g, code = 'var r=[];', cursor = 0;
    var add = function(line,js) {
        js? (code += 'r.push(' + line + ');') :
            (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");' : '');
        return add; }
    while(match = re.exec(html)) {
        add(html.slice(cursor, match.index))(match[1],true);
        cursor = match.index + match[0].length; }
    add(html.substr(cursor, html.length - cursor));
    code += 'return r.join("");';
    return new Function(code.replace(/[\r\t\n]/g, '')).apply(data); }

function reload_cont(cont,name,element) { if (null != cont) (cont)() else reload(name,element); }
function reload(file, name) { var slot = document.getElementById(name);
         slot.parentNode.replaceChild(svg(localStorage.getItem(file)),slot);}

function loadFile(name,cont,element) {
    if (localStorage.getItem(name) == null) {
        var client = new XMLHttpRequest();
        client.open('GET', name, true);
        client.onload = function() {
            localStorage.setItem(name,client.responseText); 
            reload_cont(cont,name,element); }
        client.send(); }
    else reload_cont(cont,name,element); }

function svg(html) { return new DOMParser().parseFromString(html, "text/xml").firstChild; }

The Card


templates/Card.svg:

<g  xmlns="http://www.w3.org/2000/svg" id="{this.name}"
    transform="translate({this.x},{this.y})">mbership,
    <rect fill="#FFFFFF" x="0" y="0" width="40" height="60" rx="4"/>
    <circle fill="{this.suit}" cx="20" cy="43" r="7">
          <animate begin="0" fill="freeze" attributeName="r"
                   values="4;5;6;7;8;6;5;4" dur="1s"
                   calcMode="linear" repeatCount="indefinite"/></circle>
    <text dx="20" x="0" y="26.4873125"
          font-family="Lucida Grande" font-size="24"
          font-weight="bold" letter-spacing="-2" text-anchor="middle"
          fill="{this.suit}">{this.value}</text>
                 </g>

function card(line,pos,col,v) {
    return template_engine(
        localStorage.getItem("templates/Card.svg"),
            {   name: slotName(pos,line),
                suit: color[col-1],
                value: v,
                y: (line-1)*69,
                x: (pos-1)*42 }); }

Draw Deck



var color = ['#CE290F','#3B5998','#48AF5E','#FFEC00'];
var slotName = slotNameDef;

function slotNameDef(x,y) { return "Slot-"+y+","+x; }

function place_card(x,y,c,v) { 
    var slot = document.getElementById(slotName(x,y));
    slot.parentNode.replaceChild(svg(card(y,x,c,v)),slot); }

function rand(lo,hi) { return Math.floor((Math.random()*hi)+lo); }
function slotName1(x,y) { return "1Slot-"+y+","+x; }
function drawSampleCards() {
    slotName = slotName1;
    for (var i=1;i<15;i++) { place_card(i,rand(1,2),rand(1,4),rand(1,13)); }
    slotName = slotNameDef; }

loadFile('templates/Card.svg', drawSampleCards);

Mustafa


> document.getElementById("Mustafa-Persona");

> document.getElementById("Mustafa-Selection").style.display = "none";



<g id="Mustafa-Persona" sketch:type="MSLayerGroup" transform="translate(467.000000, 150.000000)">
<path d="M135.729,120.296 C118.005,95.269 108.839,85.517 85.519,85.517 L45.641,85.517 C22.321,85.517 11.022,103.055 0.272,120.296
         L135.729,120.296 L135.729,120.296 Z" id="Mustafa-Body" fill="#8DCED7"></path>
<path d="M52.283,65.674 L48.134,81.099 L62.961,92.715 C62.961,92.715 68.155,92.749 68.329,92.691 C68.505,92.63 82.401,82.215
         82.401,82.215 L78.093,65.59 L52.283,65.674 L52.283,65.674 Z" id="Mestafa-Neck" fill="#FFD191"></path>
<path d="M56.035,1.351 C55.251,1.787 55.519,2.374 56.04,2.389 C57.252,2.419 58.102,2.639 58.81,3.7 C59.027,4.136 60.433,8.259 53.572,9.985
         C44.985,11.985 31.101,25.204 40.796,45.629 C41.402,46.905 42.03,48.031 42.676,49.019 C65.907,47.218 68.327,47.042
         89.399,45.259 C106.855,15.955 69.488,-5.38 56.035,1.351 L56.035,1.351 Z" id="Mustafa-Hair" fill="#3F372E"></path>
<path d="M88.417,44.449 C88.417,44.312 88.394,44.178 88.365,44.053 C88.288,43.666 88.116,43.387 87.864,43.196 C87.553,42.909 87.148,42.73 86.69,42.73
         L85.381,42.73 C85.263,42.73 85.152,42.752 85.039,42.764 L85.039,40.178 C85.039,29.368 76.272,20.604 65.456,20.604 C54.639,20.604 45.871,29.369
         45.871,40.178 L45.871,42.739 C45.838,42.739 45.808,42.73 45.772,42.73 C44.099,42.73 42.742,42.844 42.742,44.518 L42.742,53.114 C42.742,54.788
         44.099,56.141 45.772,56.141 C45.807,56.141 45.837,56.132 45.871,56.132 L45.871,62.719 C45.871,72.543 52.695,79.145 61.763,82.679 C62.161,84.207
         63.533,85.34 65.189,85.34 C66.759,85.34 68.081,84.313 68.547,82.897 C78.753,79.063 85.038,72.831 85.038,62.719 L85.038,56.108 C85.15,56.118
         85.262,56.141 85.38,56.141 C87.054,56.141 88.415,54.787 88.415,53.114 L88.415,44.518 C88.415,44.502 88.408,44.498 88.408,44.488 C88.41,44.474
         88.417,44.462 88.417,44.449 L88.417,44.449 Z" id="Mustafa-Face" fill="#FFE0A5"></path>
<path d="M62.358,88.807 C62.251,88.775 51.594,85.661 47.004,79.336 C46.652,78.854 46.035,78.639 45.46,78.799 C42.924,79.506 42.006,84.223 42.402,86.014
         C44.687,96.295 58.986,102.323 59.593,102.574 C59.772,102.644 59.957,102.686 60.144,102.686 C60.384,102.686 60.624,102.624 60.839,102.503 C61.22,102.289
         61.486,101.916 61.557,101.484 L63.378,90.417 C63.496,89.699 63.059,89.006 62.358,88.807 L62.358,88.807 Z" id="Mustafa-Left-Collar" fill="#EFEFEF"></path>
<path d="M85.984,78.799 C85.408,78.639 84.79,78.854 84.439,79.336 C79.851,85.66 69.2,88.774 69.088,88.807 C68.393,89.006 67.953,89.7 68.067,90.417
         L69.888,101.484 C69.96,101.916 70.223,102.289 70.606,102.503 C70.822,102.624 71.065,102.686 71.308,102.686 C71.492,102.686
         71.677,102.644 71.854,102.574 C72.458,102.323 86.754,96.296 89.039,86.014 C89.441,84.223 88.521,79.506 85.984,78.799
         L85.984,78.799 Z" id="Mustafa-Right-Collar" fill="#EFEFEF"></path>
<path d="M45.821,47.087 C45.821,47.087 48.215,47.551 48.588,44.092 C49.207,39.158 47.304,25.716 54.907,27.976 C62.513,30.241 67.131,31.426 72.271,28.758
         C77.406,26.085 80.23,30.547 81.311,33.531 C82.352,36.408 80.573,46.199 85.095,45.786 C85.121,44.68 85.073,43.809 85.116,42.687 C87.802,41.369
         87.042,36.324 87.118,28.9 C86.626,22.662 83.987,16.503 69.765,16.263 C68.323,16.263 52.084,15.646 48.18,21.195 C44.276,26.742 45.621,35.719
         45.621,35.719 L45.821,47.087 L45.821,47.087 Z" id="Mustafa-Hair-2" fill="#3F372E"></path>
<path d="M60.429,52.326 C59.764,52.326 59.226,51.787 59.226,51.122 C59.226,50.295 58.551,49.619 57.72,49.619 C56.89,49.619 56.217,50.295 56.217,51.122
         C56.217,51.787 55.676,52.326 55.014,52.326 C54.347,52.326 53.81,51.787 53.81,51.122 C53.81,48.967 55.563,47.213 57.72,47.213 C59.88,47.213
         61.634,48.967 61.634,51.122 C61.634,51.787 61.094,52.326 60.429,52.326 L60.429,52.326 Z" id="Mustafa-Left-Eye" fill="#3F372E"></path>
<path d="M75.899,52.326 C75.231,52.326 74.695,51.787 74.695,51.122 C74.695,50.295 74.021,49.619 73.188,49.619 C72.361,49.619 71.688,50.295 71.688,51.122
         C71.688,51.787 71.146,52.326 70.484,52.326 C69.818,52.326 69.278,51.787 69.278,51.122 C69.278,48.967 71.037,47.213 73.188,47.213 C75.346,47.213
         77.101,48.967 77.101,51.122 C77.102,51.787 76.559,52.326 75.899,52.326 L75.899,52.326 Z" id="Mustafa-Right-Eye" fill="#3F372E"></path>
<path d="M76.4456778,62.3565674 C78.1319071,63.7008727 74.4204926,66.9530814 72.7733273,68.0499695 C71.126162,69.1468575 68.0660971,70.5763405
         65.8852394,70.5763405 C63.7043817,70.5763405 59.6097044,68.9318757 58.3813209,68.0499693 C57.1529374,67.1680629 53.4953577,63.8108791
         54.8127441,62.3565674 C56.1301305,60.9022556 58.2236035,63.1233233 59.4535298,63.9693678 C60.6834562,64.8154119 63.4038036,66.1736356
         65.6591608,66.1736357 C67.2722666,66.1736358 69.8272118,65.4283507 71.0461488,64.5069182 C72.2650857,63.5854857 74.7594486,61.012262
         76.4456778,62.3565674 Z" id="Mustafa-Mouth" fill="#E6BE7C"></path></g>

Abstract

Основна ідея мати чистий SVG фреймворк що усі елементи були однотипними, і підхід був уніфікований, кнопки будь якого розміру, форми і які легко було би змінити в майбутньому. HTML/CSS підхід в подальшому не даcть змогу легко замінити контрольні елементи, карти і таке інше, доведеть повністью розбирати CSS елементи і верску. Уявіть що ми захочемо в майбутньому просто відкрити SVG у векторному редакторі, перемалювати і зберегти з тими самими element ID. У випадку з CSS при зміні дизайну ми постійно будемо змушені пестворювати верстку, знову наймати одноразову ручну роботу. У випадку з SVG нам доведеться тільки замінити елементи SVG.

SVG Integration Process

Підхід який пропонується нагадуеє уніфіковану роботу з векторними XML елементами, як це є в WPF наприклад. Тут справа не в байтах, в інтеграції процессу між дизайнерами, розробниками, верстальниками і серверними програмістами. Як наприклад Expression Blend у Microsoft для WPF. Саме з цих міркувань була вибрана технологія SVG.

SVG DOM Control

Інша частина це інтеграція SVG DOM і управління ним на сервері. Ми хочемо мати можливість модифікувати SVG DOM з сервера. Для цього нам потрібно прозорий та уніфікований підхід до усіх елементів. Це дасть нам змогу використовувати підхід як товстого (гра повністю в браузері), так і тонкого клієнту (коли стан гри повнітю контролюється сервером).

Sample Client

Прототип тонкого клієнту на елементах HTML/CSS викладений тут:

http://srv5.kakaranet.com:8080