diff --git a/src/facilities/farmyard/animals/animals.js b/src/facilities/farmyard/animals/animals.js index 07955b3c859de6c052abbc39de05e10ebec7f8d7..33b5927a9ac744516b66db94e8d9dbd48aadf93e 100644 --- a/src/facilities/farmyard/animals/animals.js +++ b/src/facilities/farmyard/animals/animals.js @@ -128,7 +128,7 @@ App.Facilities.Farmyard.animals = function() { return div; } - return document.createElement("div"); + return new DocumentFragment(); } function hooved() { @@ -145,7 +145,7 @@ App.Facilities.Farmyard.animals = function() { return div; } - return document.createElement("div"); + return new DocumentFragment(); } function feline() { @@ -162,7 +162,7 @@ App.Facilities.Farmyard.animals = function() { return div; } - return document.createElement("div"); + return new DocumentFragment(); } } @@ -197,7 +197,7 @@ App.Facilities.Farmyard.animals = function() { return div; } - return document.createElement("div"); + return new DocumentFragment(); } function hooved() { @@ -214,7 +214,7 @@ App.Facilities.Farmyard.animals = function() { return div; } - return document.createElement("div"); + return new DocumentFragment(); } function feline() { @@ -231,7 +231,7 @@ App.Facilities.Farmyard.animals = function() { return div; } - return document.createElement("div"); + return new DocumentFragment(); } } @@ -274,45 +274,51 @@ App.Facilities.Farmyard.animals = function() { */ function animalList(type, rarity, price, active) { const frag = new DocumentFragment(); - const filteredArray = App.Data.animals.filter(animal => animal.rarity === rarity && animal.type === type); - - filteredArray.forEach(animal => { - const animalDiv = document.createElement("div"); - const optionSpan = document.createElement("span"); - - const args = { - animal: animal, - active: active, - type: type, - price: price, - setActiveHandler() { - animal.setActive(); - App.UI.DOM.replace(frag, animalList(type, rarity, price, active)); - App.UI.DOM.replace(activeDiv, activeAnimals()); - }, - purchaseHandler() { - cashX(forceNeg(price), "farmyard"); - animal.purchase(); - if (!V.active[animal.type]) { + App.Data.animals + .filter(animal => animal.rarity === rarity && animal.type === type) + .forEach(animal => { + const animalDiv = document.createElement("div"); + const optionSpan = document.createElement("span"); + + const args = { + animal: animal, + active: active, + type: type, + price: price, + setActiveHandler() { animal.setActive(); + App.UI.DOM.replace(frag, animalList(type, rarity, price, active)); + App.UI.DOM.replace(activeDiv, activeAnimals()); + }, + purchaseHandler() { + cashX(forceNeg(price), "farmyard"); + animal.purchase(); + if (!V.active[animal.type]) { + animal.setActive(); + } + App.UI.DOM.replace(activeDiv, activeAnimals()); + App.UI.DOM.replace(frag, animalList(type, rarity, price, active)); } - App.UI.DOM.replace(activeDiv, activeAnimals()); - App.UI.DOM.replace(frag, animalList(type, rarity, price, active)); - } - }; + }; - optionSpan.append(animalLink(args)); + optionSpan.append(animalLink(args)); - animalDiv.append(capFirstChar(animal.name), ' ', optionSpan); + animalDiv.append(capFirstChar(animal.name), ' ', optionSpan); - frag.append(animalDiv); - }); + frag.append(animalDiv); + }); return frag; } function addAnimal() { const frag = new DocumentFragment(); + + const nameDiv = document.createElement("div"); + const speciesDiv = document.createElement("div"); + const typeDiv = document.createElement("div"); + const rarityDiv = document.createElement("div"); + const articleDiv = document.createElement("div"); const dickDiv = document.createElement("div"); const deadlinessDiv = document.createElement("div"); const addDiv = App.UI.DOM.makeElement("div", null, ['margin-top']); @@ -335,126 +341,71 @@ App.Facilities.Farmyard.animals = function() { return frag; function name() { - const div = document.createElement("div"); - - div.append( + nameDiv.append( `Name: `, App.UI.DOM.makeTextBox(animal.name || '', value => { animal.setName(value); - App.UI.DOM.replace(div, name()); + // App.UI.reload(); + // App.UI.DOM.replace(nameDiv, name()); + App.UI.DOM.replace(typeDiv, type); App.UI.DOM.replace(dickDiv, dick); App.UI.DOM.replace(deadlinessDiv, deadliness); App.UI.DOM.replace(addDiv, add()); }), ); - return div; + return nameDiv; } function species() { - const div = document.createElement("div"); - - div.append( + speciesDiv.append( `Species: `, App.UI.DOM.makeTextBox(animal.species || '', value => { animal.setSpecies(value); - App.UI.DOM.replace(div, species()); + App.UI.DOM.replace(speciesDiv, species()); App.UI.DOM.replace(addDiv, add()); }), ); - return div; + return speciesDiv; } function type() { - const div = document.createElement("div"); - - const typeLinks = []; + const options = new App.UI.OptionsGroup(); + options.addOption(null, "type", animal) + .addValue('Canine', 'canine') + .addValue('Hooved', 'hooved') + .addValue('Feline', 'feline'); if (animal.type === "canine") { - typeLinks.push( - App.UI.DOM.disabledLink(`Canine`, [`Already selected.`]), - App.UI.DOM.link(`Hooved`, () => { - animal.setType('hooved'); - - App.UI.DOM.replace(div, type()); - }), - App.UI.DOM.link(`Feline`, () => { - animal.setType("feline"); - - App.UI.DOM.replace(div, type()); - }), - ); + typeDiv.append(`The ${animal.name || 'animal'} is a canine.`, options.render()); } else if (animal.type === "hooved") { - typeLinks.push( - App.UI.DOM.link(`Canine`, () => { - animal.setType("canine"); - - App.UI.DOM.replace(div, type()); - }), - App.UI.DOM.disabledLink(`Hooved`, [`Already selected.`]), - App.UI.DOM.link(`Feline`, () => { - animal.setType("feline"); - - App.UI.DOM.replace(div, type()); - }), - ); + typeDiv.append(`The ${animal.name || 'animal'} is a hooved animal.`, options.render()); } else { - typeLinks.push( - App.UI.DOM.link(`Canine`, () => { - animal.setType("canine"); - - App.UI.DOM.replace(div, type()); - }), - App.UI.DOM.link(`Hooved`, () => { - animal.setType("hooved"); - - App.UI.DOM.replace(div, type()); - }), - App.UI.DOM.disabledLink(`Feline`, [`Already selected.`]), - ); + typeDiv.append(`The ${animal.name || 'animal'} is a feline.`, options.render()); } - div.append(`Type: `, App.UI.DOM.generateLinksStrip(typeLinks)); - - return div; + return typeDiv; } function rarity() { - const div = document.createElement("div"); - - const rarityLinks = []; + const options = new App.UI.OptionsGroup(); + options.addOption(null, "rarity", animal) + .addValue('Domestic', 'domestic') + .addValue('Exotic', 'exotic'); if (animal.rarity === "domestic") { - rarityLinks.push( - App.UI.DOM.disabledLink(`Domestic`, [`Already selected.`]), - App.UI.DOM.link(`Exotic`, () => { - animal.setRarity('exotic'); - - App.UI.DOM.replace(div, rarity()); - }), - ); + rarityDiv.append(`The ${animal.name || 'animal'} is domesticated.`, options.render()); } else { - rarityLinks.push( - App.UI.DOM.link(`Domestic`, () => { - animal.setRarity('domestic'); - - App.UI.DOM.replace(div, rarity()); - }), - App.UI.DOM.disabledLink(`Exotic`, [`Already selected.`]), - ); + rarityDiv.append(`The ${animal.name || 'animal'} is exotic and tamed.`, options.render()); } - div.append(`Rarity: `, App.UI.DOM.generateLinksStrip(rarityLinks)); - - return div; + return rarityDiv; } function article() { - const div = document.createElement("div"); - const articleLinks = []; if (animal.articleAn === 'a') { @@ -462,7 +413,7 @@ App.Facilities.Farmyard.animals = function() { App.UI.DOM.link("Yes", () => { animal.articleAn = 'an'; - App.UI.DOM.replace(div, article()); + App.UI.DOM.replace(articleDiv, article()); App.UI.DOM.replace(dickDiv, dick); App.UI.DOM.replace(deadlinessDiv, deadliness); }), @@ -474,16 +425,16 @@ App.Facilities.Farmyard.animals = function() { App.UI.DOM.link("No", () => { animal.articleAn = 'a'; - App.UI.DOM.replace(div, article()); + App.UI.DOM.replace(articleDiv, article()); App.UI.DOM.replace(dickDiv, dick); App.UI.DOM.replace(deadlinessDiv, deadliness); }), ); } - div.append(`Is this animal's name preceded by an 'an'? `, App.UI.DOM.generateLinksStrip(articleLinks)); + articleDiv.append(`Is this animal's name preceded by an 'an'? `, App.UI.DOM.generateLinksStrip(articleLinks)); - return div; + return articleDiv; } function dick() {