-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
217 lines (211 loc) · 13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Github Pages: Palace Card Game</title>
<meta name="description" content="Free Palace Card Game">
<meta name="keywords" content="free, card game, palace, game, cards">
<meta name="author" content="Victor Tang, Vtange">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style-0.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body data-ng-app="palace-game">
<div id="playing-field" data-ng-controller="MainCtrl">
<div id="click-guard" data-ng-hide="waitingForInput"></div>
<div class="vert-centered big-box" id="tutorial" data-ng-if="tutOn">
<a class="boxclose" data-ng-click="showTut()"></a>
<h1>How to Play Palace</h1>
<section>
<b>Rules</b>
<br>
Every turn, players play one or more cards of the same value into a pile beside the center, draw cards if possible until 3 on hand.
<br>
On the first turn, players can swap out their Upper Palace cards with cards they have in their hand.
<br>
From weakest to strongest:
<br>
<div class="card-rep halfStyle" data-content="3">3</div><span> < </span><div class="card-rep halfStyle" data-content="4">4</div><span> < </span><div class="card-rep halfStyle" data-content="5">5</div><span> < </span><div class="card-rep halfStyle" data-content="6">6</div><span> < </span><div class="card-rep halfStyle" data-content="9">9</div><span> < </span><div class="card-rep halfStyle" data-content="J">J</div><span> < </span><div class="card-rep halfStyle" data-content="Q">Q</div><span> < </span><div class="card-rep halfStyle" data-content="K">K</div><span> < </span><div class="card-rep halfStyle" data-content="1">1</div><span> < [<strong>Magic Cards</strong>]</span>
<br>
If you play a card too weak or are unable to play, you must forfeit and pick up the pile into your hand.
<br><br>
<b>Magic Cards</b>
<br>
Magic Cards can be played over any card, even other Magic Cards. It is often a good idea to always save one on your hand to prevent getting wiped by an enemy Ace or Magic Card.
<br>
<div class="card-rep halfStyle" data-content="2">2</div> : Must be immediately followed up by the player with another card, unless it is the last card played by the player before a win.
<br>
<div class="card-rep halfStyle" data-content="7">7</div> : Next Player must follow up with a card with a weaker value than 7. (3,4,5, or 6. Magics are OK too).
<br>
<div class="card-rep halfStyle" data-content="8">8</div> : Functions similar to a 2 but must be followed up by the player with a card greater than 8.
<br>
<div class="card-rep halfStyle10" data-content="10">10</div> : "Blows up" the pile. Removes itself and all cards below from play so players who forfeit thereafter don't end up with a huge hand.
<br><br>
<b>How to Win</b>
<br>
Play out all cards on your hand, then your Upper Palace, then your Secret Palace. Player who first empties out all his/her cards wins
<br>
</section>
</div>
<div class="vert-centered big-box" id="pile-list" data-ng-if="pileOn">
<a class="boxclose" data-ng-click="showPile()"></a>
<h1>The Pile</h1>
<div>
<div class="card-mini" data-ng-repeat="card in pile">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
</div>
<div id="whose-turn" data-ng-style="showDeck()">
<p>{{gameIsAt}}</p>
<div data-ng-if="getCurrentPlayer().human">
<button class="btn" data-ng-disabled="cantPlay()" data-ng-click="playCards(getCurrentPlayer())">Play Selected</button>
<button class="btn" data-ng-disabled="cantSwap()" data-ng-if="!getCurrentPlayer().first" data-ng-click="enterSwapMode(getCurrentPlayer(),null)">{{swapPalaceBtn}}</button>
<button class="btn" data-ng-disabled="cantForf()" data-ng-click="forfeit(getCurrentPlayer())">Forfeit</button>
</div>
</div>
<div class="vert-centered" id="center-area">
<!--MAIN MENU-->
<div class="vert-centered" data-ng-style="showMenu()">
<h1>Palace</h1><div class="btn" data-ng-click="startGame()">Play</div><div class="btn" data-ng-click="showTut()">How to Play</div>
</div>
<!--GAME PILE AND DECK-->
<div class="vert-centered" data-ng-style="showDeck()">
<!--'pile' and 'deck' are hollow. A wrapper div around deck over pile to animate forfeit draw. 2 mock-cards on deck so what drawing doesn't show hollow part-->
<div id="pile" data-ng-style="blowUpAnim()">
<div data-ng-style="forfAnims()" data-ng-click="showPile()">
<div class="card" data-ng-repeat="card in pile">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
</div>
<div id="deck"><div data-ng-show="deck.length" data-ng-style="drawAnims()" class="card" id="mock-card1"></div><div data-ng-show="deck.length" class="card" id="mock-card2"></div></div>
</div>
</div>
<div class="player-area" id="player1-area" data-ng-style="showPlayer(player1)">
<div class="secret-guard" data-ng-hide="secretAccess(player1)"></div>
<div class="palace-guard" data-ng-hide="palaceAccess(player1)"></div>
<div class="secret-palace">
<div data-ng-repeat="card in player1.sec_palace" data-ng-style="cardAnims(card)" class="card flipped-card"></div>
</div>
<div class="upper-palace">
<div data-ng-repeat="card in player1.upp_palace" data-ng-style="cardAnims(card)" class="card">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
<span>Player 1</span>
</div>
<div class="player-area" id="player2-area" data-ng-style="showPlayer(player2)">
<div class="secret-guard" data-ng-hide="secretAccess(player2)"></div>
<div class="palace-guard" data-ng-hide="palaceAccess(player2)"></div>
<div class="secret-palace">
<div data-ng-repeat="card in player2.sec_palace" data-ng-style="cardAnims(card)" class="card flipped-card"></div>
</div>
<div class="upper-palace">
<div data-ng-repeat="card in player2.upp_palace" data-ng-style="cardAnims(card)" class="card">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
<span>Player 2</span>
</div>
<div class="player-area" id="player3-area" data-ng-style="showPlayer(player3)">
<div class="secret-guard" data-ng-hide="secretAccess(player3)"></div>
<div class="palace-guard" data-ng-hide="palaceAccess(player3)"></div>
<div class="secret-palace">
<div data-ng-repeat="card in player3.sec_palace" data-ng-style="cardAnims(card)" class="card flipped-card"></div>
</div>
<div class="upper-palace">
<div data-ng-repeat="card in player3.upp_palace" data-ng-style="cardAnims(card)" class="card">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
<span>Player 3</span>
</div>
<div class="player-area" id="player4-area" data-ng-style="showPlayer(player4)">
<div class="secret-guard" data-ng-hide="secretAccess(player4)"></div>
<div class="palace-guard" data-ng-hide="palaceAccess(player4)"></div>
<div class="secret-palace">
<div data-ng-repeat="card in player4.sec_palace" data-ng-style="cardAnims(card)" data-ng-click="selectCard(card)" class="card flipped-card"></div>
</div>
<div class="upper-palace">
<div data-ng-repeat="card in player4.upp_palace" data-ng-style="cardAnims(card)" data-ng-click="selectCard(card)" class="card">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
<span>Player 4</span>
</div>
<div id="player-hand" ng-side-scroll>
<div id="bg"></div>
<!-- cards in current player hand -->
<div id="hand" data-ng-style="showHand()">
<div data-ng-repeat="card in getCurrentHand()" data-ng-if="!getCurrentPlayer().human" data-ng-style="cardAnims(card)" class="card flipped-card"></div>
<div data-ng-repeat="card in getCurrentHand()" data-ng-if="getCurrentPlayer().human" data-ng-style="cardAnims(card)" data-ng-click="selectCard(card)" class="card">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- CARD TEMPLATE
<div class="card">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
<div class="vert-centered center-stuff">
<div class="vert-centered">
<div class="card-suit" data-ng-repeat="i in getNum(card.value) track by $index" data-ng-style="getSuit(card.suit)"></div>
<div class="card-face" data-ng-style="getFace(card.suit,card.value)" data-ng-if="isFace(card.value)"></div>
</div>
</div>
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
-->
<!-- MINICARD TEMPLATE
<div class="card-mini">
<div><div class="card-value" data-ng-style="color(card.suit)">{{JQK(card.value)}}</div><div class="card-suit" data-ng-style="getSuit(card.suit)"></div></div>
</div>
-->