Skip to content

Instantly share code, notes, and snippets.

@siemanko

siemanko/codenames.html

Last active July 4, 2017 13:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save siemanko/6cc17ee2a253089969b1b904660b4097 to your computer and use it in GitHub Desktop.
Save siemanko/6cc17ee2a253089969b1b904660b4097 to your computer and use it in GitHub Desktop.
Download ZIP
Codenames
Raw
codenames.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
body {
padding-top: 70px;
}
.cards {
vertical-align: middle;
width: 100%;
height: 100%;
border-spacing: 10px;
border-collapse: separate;
}
.cell {
border-radius: 10px;
text-align: center;
font-weight: bold;
font-size: 30px;
display: table-cell;
max-width: 0px;
max-height: 0px;
}
.cell-inrevealed {
border: 2px dotted black;
}
.cell-inrevealed:hover {
border: 2px solid black;
cursor: pointer;
}
.cell-revealed {
border: 2px solid black;
cursor: auto;
}
.cell-red {
background: #FFCCCC;
}
.cell-blue {
background: #99CCFF;
}
.cell-neutral {
background: #eeeeee;
}
.cell-end {
background: black;
color: white;
}
.red-stats {
color: red;
}
.blue-stats {
color: blue;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<span class="navbar-brand">Codenames</span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<p class="navbar-text" style="color:red"> Red left: <span id="red-left"></span></p>
<p class="navbar-text" style="color:blue"> Blue left: <span id="blue-left"></span></p>
<ul class="nav navbar-nav navbar-right">
<li id="spymaster-li"><a href="#" id="spymaster">Toggle Spymaster</a></li>
<li><a href="#" id="reset-key">Reset Key</a></li>
<li><a href="#" id="reset">Reset Game</a></li>
</ul>
</div>
</nav>
<div class="container">
<div id="game">
<table class="cards" id="cards">
</table>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
var game = {};
game.num_rows = 5;
game.num_cols = 5;
game.words = [];
game.revealed = [];
game.allrevealed = false;
game.type = []
var random_comparer = function(a, b) {
return 2 * Math.random() - 1;
}
var polish_words = ["afryka", "agent", "akcje", "alpy", "ambasada", "ambulans", "anglia", "anioł", "antactica", "atlantyda", "australia", "aztek", "bagaznik", "bagażnik", "bank", "bar", "basen", "bat", "bateria", "bawełna", "bawół", "bałwan", "berlin", "blok", "bochater", "boisko", "bomba", "bucik", "bum", "butelka", "centaur", "centrum", "chiny", "choroba", "ciasto", "cielę", "cień", "cytryna", "czapka", "czarownica", "czas", "czech", "czek", "czekolada", "część", "data", "diament", "dinozaur", "drapacz chmur", "duch", "dusza", "dynia", "dziecko", "dziedziniec", "dziennik", "dzień", "dziobak", "dzwon", "dół", "dąbrówka", "dłoń", "dźwig", "dźwięk", "dżem", "egipt", "ekran", "etykietka", "europa", "fala", "film", "flet", "foka", "fortepian", "francja", "garnitur", "gaz", "geniusz", "gigant", "gips", "gra", "grać", "grecja", "gwiazda", "gwóźdź", "głowa", "hak", "hel", "hollywood", "hotel", "huśtawka", "igła", "indie", "indyk", "jabłko", "jacek", "jagoda", "jastrząb", "jednorożec", "jowisz", "kaczka", "kanada", "kangur", "kaptur", "karta", "kasyno", "kaszubka", "katowice", "kciuk", "keczup", "kij", "kilogram", "kiwi", "klatka piersiowa", "kleszcz", "klif", "klon", "klub", "klucz", "kod", "kokarda", "kolec", "komik", "komórka", "koncert", "konduktor", "kontrakt", "kopalnia", "kora", "korona", "korzeń", "kostka do gry", "kot", "koń", "kościół", "kość słoniowa", "kran", "krasnolud", "krasnoludek", "krawat", "kret", "krykiet", "krzesło", "krzyż", "król", "królik", "królowa", "kręgosłup", "księżniczka", "księżyc", "kubek", "kucharz", "laboratorium", "las", "laser", "latać", "lekarz", "lew", "limuzyna", "linia", "linijka", "list", "loch ness", "lody", "lodz podwodna", "londyn", "lód", "mamut", "marchewka", "marmur", "marsz", "masa", "mecz", "meksyk", "miedź", "miejsce", "mikroskop", "milioner", "miod", "mięta", "model", "moskwa", "most", "mysz", "nauczyciel", "naukowiec", "niedźwiedź", "niemcy", "nietoperz", "ninja", "noc", "notatka", "nurek", "nóż", "odkurzać", "odrzutowiec", "ogień", "ogniwo", "ogon", "oko", "okrąg", "olej", "olimp", "oliwa", "opera", "opłata", "organ", "orzech", "orzeł", "otwór", "ośmiornica", "pająk", "palma", "papier", "park", "pas", "pasta", "patelnia", "pekin", "personel", "pielęgniarka", "pieniadz", "pierścień", "pies", "pilot", "pingwin", "piramida", "pirat", "pisklę", "pistolet", "piłka", "plac", "plastik", "plaża", "plecy", "plik", "pluskwa", "pochodnia", "pocisk", "pociąg", "poczta", "podkowa", "podołek", "pokrywa", "pole", "policja", "pomarańczowy", "port", "postać", "powietrze", "powieść", "poślizg", "prad", "pralka", "prasa", "prawnik", "promień", "przedsiebiorca", "przemytnik", "przestrzeń", "przełącznik", "przycisk", "przywodca", "pudełko", "punkt", "płaszcz", "płot", "płyta", "rachunek", "rakieta", "ramię", "rekin", "rewolucja", "robak", "robot", "rower", "rtęć", "rudzik", "ruletka", "runda", "rura", "ryba", "rycerz", "rytm", "rzym", "rząd", "róg", "róża", "rękawica", "samochód", "samolot", "satelita", "saturn", "sejm", "serce", "serwer", "siec", "sieć", "silnik", "siła", "skala", "skarpetka", "skała", "sklep", "skorpion", "slup", "smok", "smoła", "spad", "spadek", "spadochron", "spodnie", "stadion", "statek", "stolica", "stopa", "stopień", "strajk", "strumień", "struna", "strzał", "studnia", "stypa", "stół", "sukienka", "swiatlo", "szczotka", "szczęście", "szkoła", "szkło", "szpieg", "szpital", "szymborska", "szynka", "słoma", "tablet", "tablica", "talia kart", "taniec", "targi", "tatry", "teatr", "teleskop", "tokio", "tor", "trawa", "trucizna", "trójkąt", "twarz", "uchwyt", "uczeń", "ufoludek", "usta", "wan", "warszawa", "wdzięk", "wejsciowka", "wentylator", "weterynarz", "wiatr", "widelec", "wieloryb", "wiertarka", "wieża", "wiosna", "więź", "woda", "wojewodztwo", "wojna", "wojownik", "wycieczka", "wypadek", "wątek", "zaklęcie", "zamek", "zegarek", "zespol", "zielen", "ziemia", "zimno", "zlew", "zmiana", "zwiazek", "ząb", "złodziej", "złoto", "łóżko", "ściana", "ślimak", "śmieci", "śmierć", "śmigłowiec", "śnieg", "śruba", "świątynia", "żelazo", "żołnierz", "życie"];
var english_words = ["africa", "agent", "air", "alien", "alps", "amazon", "ambulance", "america", "angel", "antactica", "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", "genious", "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", "millionarie", "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", "pheonix", "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"];
var allwords = polish_words;
// var allwords = english_words; // uncomment for english words.
function sample_words(n) {
allwords.sort(random_comparer);
return allwords.slice(0, n);
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
function getRemaining(c) {
var res = 0;
for (var idx = 0; idx < game.num_rows * game.num_cols; idx += 1) {
if (!game.revealed[idx] && game.type[idx] == c) {
res += 1;
}
}
return res;
}
function render() {
var table = $("#cards");
$('#spymaster-li').removeClass();
if (game.allrevealed) {
$('#spymaster-li').addClass("active");
}
table.html("");
for (var i=0; i < game.num_rows; i+=1) {
var row = $("<tr>")
for (var j=0; j < game.num_cols; j+=1) {
var idx = i * game.num_cols + j;
var cell = $("<td>")
cell.addClass("cell");
if (game.revealed[idx] || game.allrevealed) {
cell.addClass("cell-revealed");
if (game.type[idx] === "r") {
cell.addClass("cell-red");
} else if (game.type[idx] === "b") {
cell.addClass("cell-blue");
} else if (game.type[idx] === "n") {
cell.addClass("cell-neutral");
} else if (game.type[idx] === "e") {
cell.addClass("cell-end");
}
} else {
cell.addClass("cell-inrevealed");
cell.click(function(inner) { return function() { reveal(inner); }}(idx));
}
var word = $("<span>");
word.text(game.words[idx])
word.addClass("cell-text")
cell.append(word);
row.append(cell);
}
table.append(row);
}
$('#red-left').text(getRemaining("r"));
$('#blue-left').text(getRemaining("b"));
sessionStorage.setItem("game", JSON.stringify(game));
}
function reveal(idx) {
game.revealed[idx] = 1;
render();
}
function toggle_spymaster() {
game.allrevealed = !game.allrevealed;
render();
}
function reset_key() {
total = game.num_rows * game.num_cols;
nthings = Math.ceil((total + 3) / 4);
game.type = [];
for (var i = 0; i < nthings; i += 1) {
game.type.push("r");
game.type.push("b");
}
if (getRandomInt(0, 2) === 0) {
game.type.push("r");
} else {
game.type.push("b");
}
game.type.push("e");
for (var i = 0; i < total - (2 * nthings + 2); i += 1) {
game.type.push("n");
}
game.type.sort(random_comparer);
game.revealed = [];
for (var idx = 0; idx < game.num_rows * game.num_cols; idx += 1) { game.revealed.push(0); }
render();
}
function reset() {
reset_key();
total = game.num_rows * game.num_cols;
game.words = sample_words(total);
render();
}
$("#spymaster").click(toggle_spymaster)
$("#reset").click(reset)
$("#reset-key").click(reset_key)
if (sessionStorage.getItem("game")) {
game = JSON.parse(sessionStorage.getItem("game"))
render();
} else {
reset();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment