-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (126 loc) · 6.75 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
<!DOCTYPE html>
<html>
<head>
<title>Codenames</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" >
<style type="text/css">
html, body {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
background: transparent url('./bg.jpg');
}
#board {
display: grid;
grid-template: repeat(5, 1fr) / repeat(5, 1fr);
width: 100vw;
height: 100vh;
grid-gap: 0.75em;
padding: 0.75em;
}
.card {
display: flex;
align-items: center;
justify-content: center;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.card:hover {
box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}
.card span {
text-transform: uppercase;
font-weight: bold;
background-color: white;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
letter-spacing: 0.75px;
}
.card.unguessed {
background-color: #fff;
}
.card.red,
.card.blue,
.card.neutral,
.card.black {
background-color: transparent;
background-size: cover;
background-position: center;
}
.card.red span,
.card.blue span,
.card.black span,
.card.neutral span {
display: none;
}
.card.red {
background-image: url('./red.jpg');
}
.card.blue {
background-image: url('./blue.jpg');
}
.card.neutral {
background-image: url('./neutral.jpg');
}
.card.black {
background-image: url('./black.jpg');
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
var ROWS = 5
var COLS = 5
var WORDS = ['africa', 'agent', 'air', 'alien', 'alps', 'amazon', 'ambulance', 'america', 'angel', 'antarctica', 'apple', 'arm', 'atlantis', 'australia', 'aztec', 'back', 'ball', 'band', 'bank', 'bar', 'bark', 'bat', 'battery', 'beach', 'bear', 'beat', 'bed', 'beijing', 'bell', 'belt', 'berlin', 'bermuda', 'berry', 'bill', 'block', 'board', 'bolt', 'bomb', 'bond', 'boom', 'boot', 'bottle', 'bow', 'box', 'bridge', 'brush', 'buck', 'buffalo', 'bug', 'bugle', 'button', 'calf', 'canada', 'cap', 'capital', 'car', 'card', 'carrot', 'casino', 'cast', 'cat', 'cell', 'centaur', 'center', 'chair', 'change', 'charge', 'check', 'chest', 'chick', 'china', 'chocolate', 'church', 'circle', 'cliff', 'cloak', 'club', 'code', 'cold', 'comic', 'compound', 'concert', 'conductor', 'contract', 'cook', 'copper', 'cotton', 'court', 'cover', 'crane', 'crash', 'cricket', 'cross', 'crown', 'cycle', 'czech', 'dance', 'date', 'day', 'death', 'deck', 'degree', 'diamond', 'dice', 'dinosaur', 'disease', 'doctor', 'dog', 'draft', 'dragon', 'dress', 'drill', 'drop', 'duck', 'dwarf', 'eagle', 'egypt', 'embassy', 'engine', 'england', 'europe', 'eye', 'face', 'fair', 'fall', 'fan', 'fence', 'field', 'fighter', 'figure', 'file', 'film', 'fire', 'fish', 'flute', 'fly', 'foot', 'force', 'forest', 'fork', 'france', 'game', 'gas', 'genius', 'germany', 'ghost', 'giant', 'glass', 'glove', 'gold', 'grace', 'grass', 'greece', 'green', 'ground', 'ham', 'hand', 'hawk', 'head', 'heart', 'helicopter', 'himalayas', 'hole', 'hollywood', 'honey', 'hood', 'hook', 'horn', 'horse', 'horseshoe', 'hospital', 'hotel', 'ice', 'ice cream', 'india', 'iron', 'ivory', 'jack', 'jam', 'jet', 'jupiter', 'kangaroo', 'ketchup', 'key', 'kid', 'king', 'kiwi', 'knife', 'knight', 'lab', 'lap', 'laser', 'lawyer', 'lead', 'lemon', 'leprechaun', 'life', 'light', 'limousine', 'line', 'link', 'lion', 'litter', 'loch ness', 'lock', 'log', 'london', 'luck', 'mail', 'mammoth', 'maple', 'marble', 'march', 'mass', 'match', 'mercury', 'mexico', 'microscope', 'millionaire', 'mine', 'mint', 'missile', 'model', 'mole', 'moon', 'moscow', 'mount', 'mouse', 'mouth', 'mug', 'nail', 'needle', 'net', 'new york', 'night', 'ninja', 'note', 'novel', 'nurse', 'nut', 'octopus', 'oil', 'olive', 'olympus', 'opera', 'orange', 'organ', 'palm', 'pan', 'pants', 'paper', 'parachute', 'park', 'part', 'pass', 'paste', 'penguin', 'phoenix', 'piano', 'pie', 'pilot', 'pin', 'pipe', 'pirate', 'pistol', 'pit', 'pitch', 'plane', 'plastic', 'plate', 'platypus', 'play', 'plot', 'point', 'poison', 'pole', 'police', 'pool', 'port', 'post', 'pound', 'press', 'princess', 'pumpkin', 'pupil', 'pyramid', 'queen', 'rabbit', 'racket', 'ray', 'revolution', 'ring', 'robin', 'robot', 'rock', 'rome', 'root', 'rose', 'roulette', 'round', 'row', 'ruler', 'satellite', 'saturn', 'scale', 'school', 'scientist', 'scorpion', 'screen', 'scuba diver', 'seal', 'server', 'shadow', 'shakespeare', 'shark', 'ship', 'shoe', 'shop', 'shot', 'sink', 'skyscraper', 'slip', 'slug', 'smuggler', 'snow', 'snowman', 'sock', 'soldier', 'soul', 'sound', 'space', 'spell', 'spider', 'spike', 'spine', 'spot', 'spring', 'spy', 'square', 'stadium', 'staff', 'star', 'state', 'stick', 'stock', 'straw', 'stream', 'strike', 'string', 'sub', 'suit', 'superhero', 'swing', 'switch', 'table', 'tablet', 'tag', 'tail', 'tap', 'teacher', 'telescope', 'temple', 'theater', 'thief', 'thumb', 'tick', 'tie', 'time', 'tokyo', 'tooth', 'torch', 'tower', 'track', 'train', 'triangle', 'trip', 'trunk', 'tube', 'turkey', 'undertaker', 'unicorn', 'vacuum', 'van', 'vet', 'wake', 'wall', 'war', 'washer', 'washington', 'watch', 'water', 'wave', 'web', 'well', 'whale', 'whip', 'wind', 'witch', 'worm', 'yard']
function randomWord() {
return WORDS[Math.floor(Math.random()*WORDS.length)];
}
</script>
</head>
<body>
<div id="board"></div>
<script type="text/javascript">
function addClick($elt) {
$elt.click(function() {
if ($elt.is(".unguessed")) {
$elt.removeClass().addClass("card red")
} else if ($elt.is(".red")) {
$elt.removeClass().addClass("card blue")
} else if ($elt.is(".blue")) {
$elt.removeClass().addClass("card neutral")
} else if ($elt.is(".neutral")) {
$elt.removeClass().addClass("card black")
} else {
$elt.removeClass().addClass("card unguessed")
}
})
}
var chosenWords = []
var wordIndex = {}
while (chosenWords.length < 25) {
var word = randomWord()
if (wordIndex[word])
continue
wordIndex[word] = 1
chosenWords.push(word)
}
var $board = $("#board")
for (var i = 0; i < ROWS; i++) {
for (var j = 0; j < COLS; j++) {
var $card = $("<div class='card'></div>")
$card.addClass("unguessed")
addClick($card)
var $word = $("<span class='word'></span>")
$word.html(chosenWords[i*ROWS + j])
$card.append($word)
$board.append($card)
}
}
</script>
</body>
</html>