jlengrand/polymer-summit-whose-flag-polymer-3
1
0
Fork 0
mirror of https://github.com/jlengrand/polymer-summit-whose-flag-polymer-3.git synced 2026-03-10 08:41:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add imports

Browse Source 
Still something wrong with the data bindings
This commit is contained in:
julien Lengrand-Lambert
2017-08-28 13:21:05 +02:00
parent 350abc7835
commit fea2943bb1
1 changed files with 46 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/whose-flag-app/whose-flag-app.js
View File

@@ -1,4 +1,9 @@
import { Element } from '/node_modules/@polymer/polymer/polymer-element.js';
import '/node_modules/@polymer/paper-button/paper-button.js';
// import '/node_modules/@polymer/app-layout/app-layout.js';
import '/node_modules/@polymer/iron-image/iron-image.js';
import '/node_modules/@polymer/iron-ajax/iron-ajax.js';
// import '/node_modules/@polymer/paper-styles/paper-syles.js';
export class WhoseFlagApp extends Element {
static get is() { return 'whose-flag-app'; }
@@ -26,6 +31,45 @@ export class WhoseFlagApp extends Element {
};
}
_selectAnswer(event) {
let clickedButton = event.target;
this.userAnswer = clickedButton.textContent;
if (this.userAnswer == this.correctAnswer.name) {
this.outputMessage = `${this.userAnswer} is correct!`;
}
else {
this.outputMessage = `Nope! The correct answer is ${this.correctAnswer.name} !`;
}
}
_handleResponse(event) {
console.log("handling");
this.countryList = event.detail.response.countrycodes;
while (!this.countryA || !this.countryB || (this.countryA.code == this.countryB.code)){
this.countryA = this.countryList[this.__getRandomCountry()];
this.countryB = this.countryList[this.__getRandomCountry()];
}
this.correctAnswer = this.countryA;
let coin = (Math.floor(Math.random() * 2));
this.correctAnswer = coin == 1 ? this.countryA : this.countryB;
console.log("A ");
console.log(this.countryA);
console.log("B " + this.countryB);
console.log(this.countryB);
console.log("correct : " + this.correctAnswer);
console.log(this.correctAnswer);
}
__getRandomCountry() {
return Math.floor(Math.random() * (this.countryList.length));
}
_restart() {
window.location.reload();
}
static get template(){
return `
<style>
@@ -80,7 +124,8 @@ export class WhoseFlagApp extends Element {
</app-header>
<iron-ajax
auto
url="data/countrycodes.json"
id="ironAjax"
url="/data/countrycodes.json"
handle-as="json"
on-response="_handleResponse">
</iron-ajax>
@@ -98,37 +143,6 @@ export class WhoseFlagApp extends Element {
</div>
`;
}
_selectAnswer(event) {
let clickedButton = event.target;
this.userAnswer = clickedButton.textContent;
if (this.userAnswer == this.correctAnswer.name) {
this.outputMessage = `${this.userAnswer} is correct!`;
}
else {
this.outputMessage = `Nope! The correct answer is ${this.correctAnswer.name} !`;
}
}
_handleResponse(event) {
this.countryList = event.detail.response.countrycodes;
while (!this.countryA || !this.countryB || (this.countryA.code == this.countryB.code)){
this.countryA = this.countryList[this.__getRandomCountry()];
this.countryB = this.countryList[this.__getRandomCountry()];
}
this.correctAnswer = this.countryA;
let coin = (Math.floor(Math.random() * 2));
this.correctAnswer = coin == 1 ? this.countryA : this.countryB;
}
__getRandomCountry() {
return Math.floor(Math.random() * (this.countryList.length));
}
_restart() {
window.location.reload();
}
}
customElements.define('whose-flag-app', WhoseFlagApp);