quickconquest/index.html at master · chrisrobison/quickconquest · GitHub

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
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Quick Qonquest</title>
    <link rel="stylesheet" type="text/css" href="default.css"/>
    <script src="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.js"></script>
    <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.6.1/firebase-ui-auth.css" />
</head>
<body>
<div id='c'>
	<div id='o' style='display: none'>
        <div id='d'></div>

        <div id='mv' class="sc">
            <div class='bl'>
                <div id="mc"></div>
                <div>Moves</div>
            </div>
            <div class='br'>
                <div id="ft"></div>
                <div>Gold</div>
            </div>
            <div style='clear:both;font-size:1px'></div>
        </div>

        <div id='u'></div></div>
	<div id='m'></div>

    <div id='ts' class='h'>
        <h1>Quick Conquest
            <div style="font-size: 25%; margin-top: 1em; text-shadow: none">
                <span style="color: #666; margin-right: 0.5em">1.0.2</span>
                by <a href="http://cdr2.com">Christopher Robison</a>
            </div></h1>

        <div id="tut">
            <div id="tuc">
                <div class="crd">
                    <h2>How to win (1/5)</h2>
                    <div class="pic">
                        <div style="padding-top:0.5em;">&#9819;</div>
                    </div>
                    <ul>
                        <li>The standard game lasts <b>12 turns</b>.</li>
                        <li>Once time runs out, <b>whoever has most territories, wins</b>.</li>
                        <li>Your <b>soldiers</b> conquer and defend <b>territories</b>.</li>
                        <li>Your <b>castles</b> generate new soldiers each turn and can be <b>upgraded</b> with gold.</li>
                        <li>You earn <b>gold</b>(<span class='gold'></span>) for territories and for soldiers stationed at forts.</li>
                    </ul>
                </div>
                <div class="crd">
                    <h2>Temples (2/5)</h2>
                    <div class="pic">
                        <div class="o" style="background: #777; left:22%; top: 30%; width:60%; height:70%;"><div class="i" style="background: #777;"> </div></div>
                    </div>
                    <ul style="margin-top: 1.5em">
                        <li>Each player <b>starts with one fort</b> under their control.</li>
                        <li>After your turn, each of your forts <b>produces a new soldier</b>.</li>
                        <li>You can <b>take over</b> your enemies' forts.</li>
                        <li>There are <b>neutral forts</b> that you can conquer.</li>
                        <li>Forts can be imbued with <b>enhanced features</b> using upgrades.</li>
                    </ul>
                </div>
                <div class="crd">
                    <h2>Soldiers (3/5)</h2>
                    <div class="pic">
                        <div class="s l" style="width:16%;height:20%;top:30%;left:20%"></div>
                        <div class="s l" style="width:16%;height:20%;top:32%;left:40%"></div>
                        <div class="s" style="width:16%;height:20%;top:34%;left:60%"></div>
                    </div>
                    <ul style="margin-top: 0;">
                        <li>You get <b>3 moves</b> each turn.</li>
                        <li>Every move allows you to move <b>one army</b> to a neighbouring territory.</li>
                        <li>An army that has conquered a territory <b>cannot move again</b> this turn.</li>
                        <li>If you move into an occupied territory, a <b>battle</b> will ensue.</li>
                        <li>If you manage to <b>kill all defenders</b>, you take over the territory.</li>
                        <li>If the <b>defenders survive</b>, your army retreats.</li>
                    </ul>
                </div>
                <div class="crd">
                    <h2>Income (4/5)</h2>
                    <div class="pic">
                        <div style="padding-top:0.5em;" class='gold'></div>
                    </div>
                    <ul>
                        <li>Once you end your turn, new <b>gold</b> is generated.</li>
                        <li>You get 1 gold <b>for each territory</b> you have, and 1 gold <b>for each soldier</b> stationed at a fort.</li>
                        <li>You also get <b>4 gold</b> for each soldier killed in defense of a territory.</li>
                    </ul>
                </div>
                <div class="crd">
                    <h2>Upgrades (5/5)</h2>
                    <div class="pic">
                        <div class="o" style="background: #ffa; left:22%; top: 30%; width:60%; height:70%;">
                            <div class="i" style="background: #ffa;"><div class="i" style="background: #ffa;"></div></div>
                        </div>
                    </div>
                    <ul style="margin-top: 1.5em">
                        <li><b>Enhanced feature upgrades</b> are purchased with <b>gold</b> (<span class='gold'></span>).</li>
                        <li>There are <b>2 levels</b> of each upgrade.</li>
                        <li>Instead of upgrading, you can use gold to <b>purchase soldiers</b>.</li>
                        <li>Each soldier you purchase in a turn gets <b>more expensive</b>.</li>
                        <li>If a fort is lost, the <b>upgrade is lost with it</b>.</li>
                    </ul>
                </div>
            </div>
        </div>
        <a href="#" class="rb" id="prv">«</a>
        <a href="#" class="rb" id="nxt">»</a>

        <div class='bb'>
            <a id='cb' href='#'>Got it!</a>
        </div>
    </div>
    <a id="end" href="#" class="cb rb" title="Restart">&#9762;</a>
    <a id="hlp" href="#" style="right: 5.7%" class="cb rb" title="Instructions">?</a>
    <a id="snd" href="#" style="right: 10.4%" class="cb rb" title="Sound"></a>
    <a id="undo" href="#" style="right: 15.1%" class="cb rb" title="Undo"></a>
</div>
<div id='status'></div>
<div id="fb-root"></div>
<script src="main.js"></script>
<script>
window.fbAsyncInit = function() {
    FB.init({
        appId      : '1848776875399776',
        xfbml      : true,
        version    : 'v9.0'
    });
        FB.AppEvents.logPageView();
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "https://connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
</script>
<script>
function checkLoginState() {
    FB.getLoginStatus(function(response) {
      statusChangeCallback(response);
    });
   }

   function statusChangeCallback(response) {
    console.log('statusChangeCallback');
    console.dir(response);
    if (response.status === 'connected') {
      logLogin();
    } else if (response.status === 'not_authorized') {
      document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';
    } else {
      document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';
    }
   }

   function logLogin() {
    console.log('Welcome!  Fetching your information.... ');
    FB.api('/me?fields=name,first_name,last_name,email,picture', function(response) {
      console.log('Successful login for: ' + response.name);
      var p = tictac.state.loggingInPlayer || 0;

      // document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '! <img src="'+response.picture.data.url+'">';

    });
   }
checkLoginState();

   </script>
</body>
</html>