https://codeforanchorage.org/dog-name-game/index.js

1// const dogs = require('./dogs.json')
2
3var NUMBER_OF_ROUNDS = 10
4var is_hard_mode = false
5var rounds_played = 0
6var correct_rounds = 0
7var current_dog_pair = null
8var dogs = []
9var loading = true;
10
11var DOG_DATA_URL = 'https://codeforanchorage.org/dog-name-game/dog_names3.json'
12/*  Dog data as an array of objects:
13    [{"name": "FIDO", "count": "30"}, {"name": ...]
14    The input script transforms the 'name' parameter to lowercase
15    and parses the 'count' parameter to an integrer
16*/
17
18getDogData()
19
20function getDogData(){
21    httpRequest = new XMLHttpRequest();
22    if (!httpRequest) {
23      alert("I'm sorry - I can't load the dog data");
24      return false;
25    }
26    httpRequest.onreadystatechange = incoming;
27    httpRequest.open('GET', DOG_DATA_URL);
28    httpRequest.send();
29  }
30
31  function incoming() {
32    if (httpRequest.readyState === XMLHttpRequest.DONE) {
33      if (httpRequest.status === 200) {
34        dogs = JSON.parse(httpRequest.responseText);
35        dogs.forEach(function(dog){
36            dog.count = parseInt(dog.count)
37            dog.name = dog.name.toLowerCase()
38        })
39        var htmlElement = document.querySelector("html");
40        htmlElement.className = ""
41        loading = false
42      } else {
43        alert("I'm sorry - the was an error loading the dog data");
44      }
45    }
46  }
47
48
49// Grabs 2 dogs from the (global) dog list
50// You can tune the difficulty by passing in the maximim and minimum difference
51// in popularity count. Both are nullable.
52function getTwoDogs(minimum_count_diff, maximum_count_diff) {
53    var dog1 = dogs[Math.floor(Math.random() * dogs.length)]
54
55    var other_dogs = dogs.filter(function(dog) {
56        // check for minimum difference
57        if (!isNaN(parseInt(minimum_count_diff))) {
58            if (Math.abs(dog.count - dog1.count) < parseInt(minimum_count_diff)) {
59                return false
60            }
61        }
62
63        // check for maximum difference
64        if (!isNaN(parseInt(maximum_count_diff))) {
65            if (Math.abs(dog.count - dog1.count) > parseInt(maximum_count_diff)) {
66                return false
67            }
68        }
69
70        // make sure they don't have the same count
71        if (dog.count === dog1.count) return false
72
73        return true
74    })
75    var dog2 = other_dogs[Math.floor(Math.random() * other_dogs.length)]
76
77    /* Dog1 is almost guarateened to be the lowest score because
78       the distribution strongly favors picking a very low-numbered name
79       so let's randomize the order a bit
80    */
81    return Math.random() < 0.5 ? [ dog1, dog2 ] : [ dog2, dog1 ]
82}
83
84function getTwoIcons() {
85    // list in './dogIconClasses.js'
86    var num_of_icons = dogIconsClasses.length;
87    var idx1 = Math.floor(Math.random() * num_of_icons);
88    // Calculate second index with offset so we get unique icons
89    var idx2 = (idx1 + 1 + Math.floor(Math.random() * (num_of_icons - 1))) % num_of_icons
90    return [dogIconsClasses[idx1], dogIconsClasses[idx2]]
91}
92
93// Set mode and begin the game
94function chooseMode(_is_hard_mode) {
95    is_hard_mode = _is_hard_mode
96
97    var count_div = document.querySelector('#round');
98
99    (function addBone(n){
100        var s = document.createElement('span');
101        s.className = "bone"
102        count_div.appendChild(s)
103        if(n<NUMBER_OF_ROUNDS) setTimeout(function() {
104            addBone(++n);
105        }, 50)
106    })(1)
107
108    playARound()
109}
110
111
112// Gets new dog choices and displays them
113function playARound() {
114    document.body.className = 'play'
115
116    if (is_hard_mode) {
117        current_dog_pair = getTwoDogs(null, 1) // hard mode
118    }
119    else {
120        current_dog_pair = getTwoDogs(10, null) // easy mode
121    }
122
123    iconClasses = getTwoIcons();
124
125    document.querySelector('#roundNumber').innerText = rounds_played + 1 + ' / ' + NUMBER_OF_ROUNDS
126
127    document.querySelectorAll('#play button')[0].innerText = current_dog_pair[0].name
128    document.querySelectorAll('#play button')[0].className = iconClasses[0];
129
130    document.querySelectorAll('#play button')[1].innerText = current_dog_pair[1].name
131    document.querySelectorAll('#play button')[1].className = iconClasses[1];
132
133}
134
135
136// Displays results of a choice
137function displayResults(is_correct) {
138    document.body.className = 'results'
139
140    document.querySelector('#gameNav #result').innerText = (is_correct ? 'Correct' : 'Wrong')
141    document.querySelector('#gameNav #result').className = is_correct ? 'correct' : 'wrong'
142
143    var count_div = document.querySelectorAll('#round span')[rounds_played].className += is_correct ? " correct" : " wrong"
144    var result_divs = document.querySelectorAll('#counts div')
145    result_divs[0].innerHTML = current_dog_pair[0].name + '<br>' + current_dog_pair[0].count + ' dogs'
146    result_divs[0].className = iconClasses[0] + (current_dog_pair[0].count > current_dog_pair[1].count ? " correct" : " wrong")
147
148    result_divs[1].innerHTML = current_dog_pair[1].name + '<br>' + current_dog_pair[1].count + ' dogs'
149    result_divs[1].className = iconClasses[1] + (current_dog_pair[1].count > current_dog_pair[0].count ? " correct" : " wrong")
150}
151
152
153// Displays final results
154function displayFinalResults() {
155    document.body.className = 'final_results'
156
157    document.querySelector('#final_results h2').innerText = 'You got ' + correct_rounds + ' out of ' + NUMBER_OF_ROUNDS + ' correct'
158
159    var social_text = "I just scored " + correct_rounds + " out of " + NUMBER_OF_ROUNDS + " on the Anchorage Dog Name Game! Try it here: https://codeforanch

159orage.org/dog-name-game/"
160    document.querySelector('#twitter-link').href = "https://twitter.com/home?status=" + encodeURIComponent(social_text)
161
162    // initialize()
163}
164
165
166// Onclick handler for choosing a dog
167function nameChosen(name) {
168    var popular_dog = current_dog_pair.slice().sort(function(a, b) {
169        return a.count - b.count
170    })[1] // prevent sorting original array
171    var is_correct = name.toLowerCase() === popular_dog.name
172
173    displayResults(is_correct)
174
175    rounds_played++
176    if (is_correct) correct_rounds++
177
178    return false // onclick event response
179}
180
181
182// Onclick handler for next button
183function nextButton() {
184    if (rounds_played === NUMBER_OF_ROUNDS) {
185        displayFinalResults()
186    }
187    else {
188        playARound()
189    }
190}
191
192
193// initialize the game
194function initialize() {
195    rounds_played = 0
196    correct_rounds = 0
197    current_dog_pair = null
198    var bones = document.querySelectorAll('#round span')
199    Array.prototype.forEach.call( bones, function( node ) {
200        node.parentNode.removeChild( node );
201    });
202    document.body.className = 'choose_mode'
203}
204
205
206initialize()