-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (86 loc) · 3.42 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
<html>
<head>
<title>The Great Game</title>
<link rel="stylesheet" href="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.css" />
<script src="https://d19vzq90twjlae.cloudfront.net/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/inputs.css">
<script src="js/decks.js"></script>
<script src="countries.js"></script>
<script src="js/card.js"></script>
<script src="js/rules.js"></script>
<script src="js/country.js"></script>
</head>
<body>
<div id="map"></div>
<div class="cardSection">
<div class="side">
</div>
<div class="centerYear">
<div class="year" style="min-width:65vw;">
</div>
<div class="year"">1900</div>
<div class="year">1901</div>
<div class="year">1902</div>
<div class="year">1903</div>
<div class="year">1904</div>
<div class="year">1905</div>
</div>
</div>
<script>
// initialize the map
var map = L.map('map',{zoomControl:false}).setView([50.35, -0.08], 3);
var southWest = L.latLng(-180, -350),
northEast = L.latLng(180, 350);
var bounds = L.latLngBounds(southWest, northEast);
map.setMaxBounds(bounds);
map.on('drag', function() {
map.panInsideBounds(bounds);
});
// load a tile layer
/* L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: ''
// attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
*/
</script>
<script src="js/init.js"></script>
<script src="js/scenario.js"></script>
<script>
function buildLayer(){
return L.geoJson(countryData, {
style: function(feature) {
let opacity = .6;
let myInfluencer = "noOne";
(feature.properties.influenceAmount>15)? myInfluencer = feature.properties.influencer : '';
(feature.properties.influenceAmount<40)?opacity=.4:opacity = feature.properties.influenceAmount / 100;
(feature.properties.influenceAmount>80)?opacity=1:'';
if ( feature.properties.color !== undefined ){
return {color:'rgb(80,80,80)', fillColor: feature.properties.color,weight:1, fillOpacity:1,filter: `brightness(${(Math.abs(feature.properties.Independence) / 100)}%)`}
} else { return {color:'rgb(80,80,80)',fillColor:`rgb(${255 - Math.abs(feature.properties.Independence)*1.5},${255 - Math.abs(feature.properties.Independence)*1.5},${(255 - Math.abs(feature.properties.Independence)*1.5)}`, weight:1,fillOpacity:1/*(Math.abs(feature.properties.Independence) / 150)*/}
}
},
onEachFeature: function (feature, layer){
// layer.bindPopup(countryPopup(feature),{autoPanPaddingTopLeft:[100,100]});
layer.on('click', function (e){
selectCountry(feature.properties.admin);
showPanel();
});
},
});
}
// console.log(country.properties.admin);
var myLayer = buildLayer();
myLayer.addTo(map);
//continent --- show view based on this property...
</script>
<script src="js/leaderboard.js"></script>
<script src="js/views.js"></script>
<script src="js/viewManager.js"></script>
<script src="js/viewsRightMenu.js"></script>
<script src="js/gameplay.js"></script>
<script src="js/utility.js"></script>
<script>
</script>
</body>
</html>