-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
67 lines (67 loc) · 4.46 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
<title>Starcraft 2 campaign</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
<link href="style.css" rel="stylesheet"/>
<meta charset='utf-8'/>
<div id='layout'>
<div id='map'></div>
<template class='area'><div class='area'>
<div class='credits'></div>
<div class='label'></div>
</div></template>
<div id='sidebar'>
<div class='clock centered'>
Time: <span id='ellapsed'></span>
<button id='time'>Start</button>
<button id='pause'>Pause</button>
</div>
<div id='credits' class='centered'>
Credits: <input type='number' value='0'></input>
<button id='gamble'>Gamble!</button>
</div>
<div id='info'>
<div class='tabs header'>
<span id='tab-cards' class='selected'>Cards</span>
<span id='tab-areainfo' >Area information</span>
<span id='tab-instructions' >Instructions</span>
</div>
<div id='cards'>
<template class='card'><div class='card'>
<div class='text'></div>
<div class='actions'>
<button class='claim'>Claim</button>
<button class='sell'>Sell (+$1)</button>
</div>
</div></template>
<div id='draw'>
<button id='drawprotoss'>Protoss card (-$2)</button>
<button id='drawterran'>Terran card (-$2)</button>
<button id='drawzerg'>Zerg card (-$2)</button>
</div>
</div>
<div id='instructions' class='hidden'>
<ol>
<li>Start by clicking a territory on the bottom row for free. (Challenge: start higher on the map).</li>
<li>Each turn, attack a hostile area next to any of your owned territories.</li>
<li>Play as any race you want. (Challenge: use only the race from your starting area or area you're attacking from).</li>
<li>Play by setting up custom melee matches (or play a ladder match, if teams are even). Set-up as shown when hovering the mouse over the target area.</li>
<li>If you win, click the target area to capture it.</li>
<li>Earn credits to spend on cards by capturing an area for the first time. Claim bonus cards as you use them and goal cards after they're completed. You can invest in cards to make them sticky so that they won't be removed from your hand once claimed.</li>
<li>Gamble credits for a sense of pride and accomplishment!</li>
<li>You win by capturing a territory on the top row or by having $50 in the bank. (Challenge: double or triple those goals or give yourself a time limit).</li>
</ol>
</div>
<div id='areainfo' class='hidden'>
<ul class='generated'>
<template class='data'><li class='generated data'>
<strong class='name'></strong>: <span class='value'></strong>
</li></template>
</ul>
</div>
</div>
</div>
</div>
<script type='module'>
import * as map from './src/view/map.js'
map.setup()
</script>
<a href="https://github.com/tukkek/starcraft2-campaign" target='_blank' class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#151513; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>