Bug Tracker

Ticket #3836: solitaire.html

File solitaire.html, 7.9 KB (added by trave, 13 years ago)

HTML CSS and JS for the beginnings of a Solitaire game

Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3        <head>
4                <title>jQuery Solitaire</title>
5                <style type="text/css">
6                        #pnlSolitaire { width:640px; height:480px; border:#000 2px solid; background:#00CC00; position:relative; }
7                                #pnlSolHand, #pnlSolPile, #pnlSolColumns B, #pnlSolSuites B { position:absolute; top:10px; left:10px; width:65px; height:116px; border:#FFF 1px dotted; }
8                                #pnlSolPile { left:88px; }
9                                        #pnlSolHand I, #pnlSolPile I, #pnlSolColumns B I, #pnlSolSuites B I { position:absolute; }
10                                #pnlSolColumns { position:absolute; top:130px; right:10px; }
11                                        #pnlSolColumns B { position:relative; float:left; margin-right:10px; }
12                                #pnlSolSuites { position:absolute; top:0px; right:10px; }
13                                        #pnlSolSuites B { position:relative; float:left; margin-right:10px; }
14                       
15                        .face_cards I { display:block; width:62px; height:112px; background:#999 url(images/playing_cards.jpg) 0px 0px no-repeat; border:#000 2px solid; }
16                        .face_cards I.facedown { background-position:-123px 0px !important; } .face_cards I.facedown.x2 { background-position:-184px 0px !important; }
17                        .face_cards I.c1X  { background-position:0px 0px; }                     .face_cards I.c2X  { background-position:-61px 0px; }
18                        .face_cards I.cAS  { background-position:-0px -113px; }         .face_cards I.c2S  { background-position:-61px -113px; }
19                        .face_cards I.c3S  { background-position:-123px -113px; }       .face_cards I.c4S  { background-position:-184px -113px; }
20                        .face_cards I.c5S  { background-position:-246px -113px; }       .face_cards I.c6S  { background-position:-307px -113px; }
21                        .face_cards I.c7S  { background-position:-369px -113px; }       .face_cards I.c8S  { background-position:-431px -113px; }
22                        .face_cards I.c9S  { background-position:-492px -113px; }       .face_cards I.c10S { background-position:-553px -113px; }
23                        .face_cards I.cJS  { background-position:-615px -113px; }       .face_cards I.cQS  { background-position:-676px -113px; }
24                        .face_cards I.cKS  { background-position:-738px -113px; }       .face_cards I.cAH  { background-position:-0px -226px; }
25                        .face_cards I.c2H  { background-position:-61px -226px; }        .face_cards I.c3H  { background-position:-123px -226px; }
26                        .face_cards I.c4H  { background-position:-184px -226px; }       .face_cards I.c5H  { background-position:-246px -226px; }
27                        .face_cards I.c6H  { background-position:-307px -226px; }       .face_cards I.c7H  { background-position:-369px -226px; }
28                        .face_cards I.c8H  { background-position:-430px -226px; }       .face_cards I.c9H  { background-position:-492px -226px; }
29                        .face_cards I.c10H { background-position:-553px -226px; }       .face_cards I.cJH  { background-position:-615px -226px; }
30                        .face_cards I.cQH  { background-position:-676px -226px; }       .face_cards I.cKH  { background-position:-738px -226px; }
31                        .face_cards I.cAD  { background-position:-0px -339px; }         .face_cards I.c2D  { background-position:-61px -339px; }
32                        .face_cards I.c3D  { background-position:-123px -339px; }       .face_cards I.c4D  { background-position:-184px -339px; }
33                        .face_cards I.c5D  { background-position:-246px -339px; }       .face_cards I.c6D  { background-position:-307px -339px; }
34                        .face_cards I.c7D  { background-position:-369px -339px; }       .face_cards I.c8D  { background-position:-430px -339px; }
35                        .face_cards I.c9D  { background-position:-492px -339px; }       .face_cards I.c10D { background-position:-553px -339px; }
36                        .face_cards I.cJD  { background-position:-615px -339px; }       .face_cards I.cQD  { background-position:-676px -339px; }
37                        .face_cards I.cKD  { background-position:-738px -339px; }       .face_cards I.cAC  { background-position:-0px -452px; }
38                        .face_cards I.c2C  { background-position:-61px -452px; }        .face_cards I.c3C  { background-position:-123px -452px; }
39                        .face_cards I.c4C  { background-position:-184px -452px; }       .face_cards I.c5C  { background-position:-246px -452px; }
40                        .face_cards I.c6C  { background-position:-307px -452px; }       .face_cards I.c7C  { background-position:-369px -452px; }
41                        .face_cards I.c8C  { background-position:-430px -452px; }       .face_cards I.c9C  { background-position:-492px -452px; }
42                        .face_cards I.c10C { background-position:-553px -452px; }       .face_cards I.cJC  { background-position:-615px -452px; }
43                        .face_cards I.cQC  { background-position:-676px -452px; }       .face_cards I.cKC  { background-position:-738px -452px; }
44                </style>
45                <script type="text/javascript" language="Javascript" src="/js/jquery/jquery-1.3pre.js"></script>
46                <script type="text/javascript" language="Javascript" src="/js/jquery/jquery.shuffle.js"></script>
47                <script type="text/javascript" language="Javascript" src="/js/jquery/ui/ui.core.js"></script>
48                <script type="text/javascript" language="Javascript" src="/js/jquery/ui/ui.draggable.js"></script>
49                <script type="text/javascript" language="Javascript">           
50                        Solitaire = {
51                                Deck: [
52                                        'A.S','2.S','3.S','4.S','5.S','6.S','7.S','8.S','9.S','10.S','J.S','Q.S','K.S',
53                                        'A.C','2.C','3.C','4.C','5.C','6.C','7.C','8.C','9.C','10.C','J.C','Q.C','K.C',
54                                        'A.H','2.H','3.H','4.H','5.H','6.H','7.H','8.H','9.H','10.H','J.H','Q.H','K.H',
55                                        'A.D','2.D','3.D','4.D','5.D','6.D','7.D','8.D','9.D','10.D','J.D','Q.D','K.D'
56                                ],
57                               
58                                Board: {Pile:[], Columns:{1:[],2:[],3:[],4:[],5:[],6:[],7:[]}, Suites:{1:[],2:[],3:[],4:[]}, Hand:[]},
59                               
60                                setup: function() {
61                                        $('#gameCanvas').empty();
62                                       
63                                        strBoard = '';
64                                        $.each(this.Board, function(i, val) {
65                                                strBoard +=  '<b id="pnlSol'+ i +'">';
66                                                if (val.length == undefined && typeof(val) == 'object') { 
67                                                        $.each(val, function(i2, val2) {
68                                                                strBoard += '<b class="cell'+ i2 +'">'+ i2 +'</b>';
69                                                        });
70                                                }
71                                                strBoard += '</b>';
72                                        });
73                                       
74                                        $('#gameCanvas').append('<div id="pnlSolitaire" class="face_cards">' + strBoard + '</div>');
75                                       
76                                        $('#pnlSolHand').click(function() {
77                                                Solitaire.draw();
78                                        });
79                                       
80                                        return this;
81                                },
82                               
83                                deal: function() {
84                                        $('#pnlSolitaire I').draggable('destroy');
85                                        $('#pnlSolHand, #pnlSolPile, #pnlSolColumns B, #pnlSolSuites B').html('');
86                                       
87                                        $.shuffle(this.Deck);
88                                       
89                                        $.each(this.Deck, function(i, val) {
90                                                strClass = 'c' + val.replace('.','');
91                                                $('#pnlSolHand').append('<i class="'+ strClass +' facedown"></i>');
92                                        });
93                                       
94                                        $('#pnlSolHand I').draggable({revert:true, opacity:.5, stack:{group:'#pnlSolitaire B I', min:1}, containment:'#pnlSolitaire'});
95                                       
96                                        $.each(this.Board.Columns, function(i, val) {
97                                                for (i2=7; i2>=i; i2--) {
98                                                        $('#pnlSolHand I:last').appendTo('#pnlSolColumns B:eq('+(i2-1)+')');
99                                                }
100                                               
101                                                for (i2=0; i2<=i; i2++) {
102                                                        $('#pnlSolColumns B:eq('+i2+') I').each(function(i3) {
103                                                                $(this).css({top:0}).addClass('facedown').animate({top:i3*6}, 'slow');
104                                                        });
105                                                       
106                                                        $('#pnlSolColumns B:eq('+i2+') I:last').removeClass('facedown');
107                                                }
108                                        });
109                                       
110                                        $('#pnlSolHand I').each(function(i) {
111                                                $(this).css({top:0}).animate({top:i*3}, 'slow');
112                                        });
113                                       
114                                        $('#pnlSolitaire I').draggable('disable');
115                                        $('#pnlSolColumns B I:last').draggable('enable');
116                                },
117                               
118                                draw: function() {
119                                        if ($('#pnlSolHand I').size() == 0) {
120                                                $('#pnlSolPile I').each(function(i) {
121                                                        $(this).addClass('facedown').appendTo('#pnlSolHand').animate({top:i*3}, 'slow');
122                                                });
123                                                $('#pnlSolHand I:last').draggable('disable');
124                                        } else {
125                                                for (i=0; i<4; i++) {
126                                                        $('#pnlSolHand I:last').removeClass('facedown').css({top:0}).appendTo('#pnlSolPile');
127                                                }
128                                        }
129                                       
130                                        $('#pnlSolPile I').draggable('disable');
131                                        $('#pnlSolPile I:last').draggable('enable');                           
132                                }
133                        };
134               
135                        $(document).ready( function() {
136                                // TODO: Show Loading Animation;
137                       
138                                $.each(['images/playing_cards.jpg'], function(i) {
139                                $("<img>").attr("src", arguments[i]);
140                                });
141                               
142                                Solitaire.setup().deal();
143                               
144                                // TODO: Hide Loading Animation
145                        });
146                </script>
147        </head>
148        <body id="gameCanvas">
149                This page requires JavaScript to be enabled.
150        </body>
151</html>