mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
v1.5.09 - speak functionality
This commit is contained in:
Azgaar
parent
f4d8b439b4
commit
378ed71702
12 changed files with 143 additions and 55 deletions
13
icons.css
13
icons.css
|
|
@ -252,17 +252,8 @@
|
|||
.icon-if:before {font-style: italic; font-weight: bold;content:'if';}
|
||||
.icon-coa:before {content:'\f3ed'; font-size: .9em; color: #999;} /* '' */
|
||||
.icon-half:before {font-weight: bold;content:'½';}
|
||||
.icon-curve:before {content: 'C';}
|
||||
.icon-area:before {content: 'O';}
|
||||
.icon-curve:before,
|
||||
.icon-area:before {
|
||||
font-size: 1.5em;
|
||||
padding: 0;
|
||||
writing-mode: tb-rl;
|
||||
margin-left: 1px;
|
||||
width: .6em;
|
||||
font-family: monospace;
|
||||
}
|
||||
.icon-voice:before {content:'🔊';}
|
||||
|
||||
.icon-die:before {content:'🎲';}
|
||||
.icon-button-die:before {content:'🎲'; padding-right: .4em;}
|
||||
.icon-button-power:before {content:'💪'; padding-right: .6em;}
|
||||
|
|
|
|||
15
index.css
15
index.css
|
|
@ -76,10 +76,14 @@ input, button, select, a, textarea {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
button, select, a, .pointer {
|
||||
button, select, a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.pointer {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
#prec text {
|
||||
font-size: 32px;
|
||||
stroke: none;
|
||||
|
|
@ -1464,9 +1468,7 @@ div.states > .coaIcon > use {
|
|||
}
|
||||
|
||||
.burgFeature {
|
||||
font-size: 1.2em;
|
||||
padding: 1px 2px;
|
||||
color: #555;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -2141,6 +2143,11 @@ svg.button {
|
|||
border: dashed 1px #5d4651;
|
||||
}
|
||||
|
||||
.speaker {
|
||||
font-size: .9em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#prompt {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
|
|
|
|||
72
index.html
72
index.html
|
|
@ -1863,6 +1863,17 @@
|
|||
</td>
|
||||
</tr>
|
||||
|
||||
<tr data-tip="Select speech synthesis voice to pronounce generated names">
|
||||
<td></td>
|
||||
<td>Speaker voice</td>
|
||||
<td>
|
||||
<select id="speakerVoice" data-stored="speakerVoice"></select>
|
||||
</td>
|
||||
<td>
|
||||
<span id="speakerTest" data-tip="Click to test the voice" style="cursor: pointer">🔊</span>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr data-tip="Set minimum and maximum possible zoom level">
|
||||
<td></td>
|
||||
<td>Zoom extent</td>
|
||||
|
|
@ -2163,6 +2174,7 @@
|
|||
<div id="labelTextSection" style="display: none">
|
||||
<button id="labelTextHide" data-tip="Hide the edit label text section" class="icon-pencil"></button>
|
||||
<input id="labelText" data-tip='Type to change the label. Enter "|" to move to a new line' style="width: 12em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<span id="labelTextRandom" data-tip="Generate random name" class="icon-shuffle pointer"></span>
|
||||
</div>
|
||||
|
||||
|
|
@ -2186,6 +2198,7 @@
|
|||
<div id="riverNameSection" style="display: none">
|
||||
<button id="riverNameHide" data-tip="Hide the river name section" class="icon-font"></button>
|
||||
<input id="riverName" data-tip="Change river proper name" style="width: 8em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<input id="riverType" data-tip="Change river type name" style="width: 6em">
|
||||
<span id="riverNameCulture" data-tip="Generate culture-specific name for the river" class="icon-book pointer"></span>
|
||||
<span id="riverNameRandom" data-tip="Generate random name for the river" class="icon-globe pointer"></span>
|
||||
|
|
@ -2420,27 +2433,36 @@
|
|||
<div id="burgEditor" class="dialog" style="display: none">
|
||||
|
||||
<div id="burgBody" style="padding-bottom: .3em">
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Name:</div>
|
||||
<input id="burgName" data-tip="Type to rename the burg" autocorrect="off" spellcheck="false" style="width: 7em">
|
||||
<span id="burgNameReCulture" data-tip="Generate culture-specific name for the burg" class="icon-book pointer"></span>
|
||||
<span id="burgNameReRandom" data-tip="Generate random name for the burg" class="icon-globe pointer"></span>
|
||||
</div>
|
||||
<svg viewBox="0 0 200 200" width="85" height="85"><use id="burgEmblem"></use></svg>
|
||||
<div style="float: right">
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Name:</div>
|
||||
<input id="burgName" data-tip="Type to rename the burg" autocorrect="off" spellcheck="false" style="width: 8em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<span id="burgNameReRandom" data-tip="Generate random name for the burg" class="icon-globe pointer"></span>
|
||||
</div>
|
||||
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Population:</div>
|
||||
<input id="burgPopulation" data-tip="Set burg population" type="number" min=0 step=1 style="width: 7em">
|
||||
</div>
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Culture:</div>
|
||||
<select id="burgCulture" data-tip="Select dominant culture" style="width: 8em"></select>
|
||||
<span id="burgNameReCulture" data-tip="Generate culture-specific name for the burg" class="icon-book pointer"></span>
|
||||
</div>
|
||||
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Features:</div>
|
||||
<span id="burgCapital" data-tip="Shows whether the burg is a state capital. Click to toggle" data-feature="capital" class="burgFeature icon-star"></span>
|
||||
<span id="burgPort" data-tip="Shows whether the burg is a port. Click to toggle" data-feature="port" class="burgFeature icon-anchor"></span>
|
||||
<span id="burgCitadel" data-tip="Shows whether the burg has a citadel (castle). Click to toggle" data-feature="citadel" class="burgFeature icon-chess-rook" style="font-size: 1.1em"></span>
|
||||
<span id="burgWalls" data-tip="Shows whether the burg is walled. Click to toggle" data-feature="walls" class="burgFeature icon-fort-awesome"></span>
|
||||
<span id="burgPlaza" data-tip="Shows whether the burg is a trade center (has big marketplace). Click to toggle" data-feature="plaza" class="burgFeature icon-store" style="font-size: 1em"></span>
|
||||
<span id="burgTemple" data-tip="Shows whether the burg is a religious center. Click to toggle" data-feature="temple" class="burgFeature icon-chess-bishop" style="font-size: 1.1em; margin-left: 3px"></span>
|
||||
<span id="burgShanty" data-tip="Shows whether the burg has a shanty town. Click to toggle" data-feature="shanty" class="burgFeature icon-campground" style="font-size: 1em"></span>
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Population:</div>
|
||||
<input id="burgPopulation" data-tip="Set burg population" type="number" min=0 step=1 style="width: 8em">
|
||||
</div>
|
||||
|
||||
<div style="padding: .1em">
|
||||
<div class="label">Features:</div>
|
||||
<span id="burgCapital" data-tip="Shows whether the burg is a state capital. Click to toggle" data-feature="capital" class="burgFeature icon-star"></span>
|
||||
<span id="burgPort" data-tip="Shows whether the burg is a port. Click to toggle" data-feature="port" class="burgFeature icon-anchor"></span>
|
||||
<span id="burgCitadel" data-tip="Shows whether the burg has a citadel (castle). Click to toggle" data-feature="citadel" class="burgFeature icon-chess-rook" style="font-size: 1.1em"></span>
|
||||
<span id="burgWalls" data-tip="Shows whether the burg is walled. Click to toggle" data-feature="walls" class="burgFeature icon-fort-awesome"></span>
|
||||
<span id="burgPlaza" data-tip="Shows whether the burg is a trade center (has big marketplace). Click to toggle" data-feature="plaza" class="burgFeature icon-store" style="font-size: 1em"></span>
|
||||
<span id="burgTemple" data-tip="Shows whether the burg is a religious center. Click to toggle" data-feature="temple" class="burgFeature icon-chess-bishop" style="font-size: 1.1em; margin-left: 3px"></span>
|
||||
<span id="burgShanty" data-tip="Shows whether the burg has a shanty town. Click to toggle" data-feature="shanty" class="burgFeature icon-campground" style="font-size: 1em"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -2463,7 +2485,7 @@
|
|||
</div>
|
||||
|
||||
<button id="burgSeeInMFCG" data-tip="Open burg in the Medieval Fantasy City Generator by Watabou. Ctrl + click to change the seed" class="icon-map-o"></button>
|
||||
<button id="burgOpenCOA" data-tip="Open burg's COA. Ctrl + click to change the seed" class="icon-shield-alt"></button>
|
||||
<button id="burgEditEmblem" data-tip="Edit emblem" class="icon-shield-alt"></button>
|
||||
<button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
|
||||
<button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
|
||||
<button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
|
||||
|
|
@ -2516,6 +2538,7 @@
|
|||
<div>
|
||||
<button id="regimentType" data-tip="Regiment type (land or naval). Click to change"></button>
|
||||
<input id="regimentName" data-tip="Type to rename the regiment" autocorrect="off" spellcheck="false" style="width: 13em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<i id="regimentNameRestore" data-tip="Click to restore regiment's default name" class="icon-ccw pointer"></i>
|
||||
</div>
|
||||
|
||||
|
|
@ -2968,6 +2991,7 @@
|
|||
<div style="padding: .1em">
|
||||
<div data-tip="State short name" class="label">Short name:</div>
|
||||
<input id="stateNameEditorShort" data-tip="Type to change the short name" autocorrect="off" spellcheck="false" style="width: 11em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<span id="stateNameEditorShortCulture" data-tip="Generate culture-specific name" class="icon-book pointer"></span>
|
||||
<span id="stateNameEditorShortRandom" data-tip="Generate random name" class="icon-globe pointer"></span>
|
||||
</div>
|
||||
|
|
@ -3030,6 +3054,7 @@
|
|||
<div style="padding: .1em">
|
||||
<div data-tip="State full name" class="label">Full name:</div>
|
||||
<input id="stateNameEditorFull" data-tip="Type to change the full name" autocorrect="off" spellcheck="false" style="width: 11em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<span id="stateNameEditorFullRegenerate" data-tip="Click to re-generate full name" data-tick="0" class="icon-arrows-cw pointer"></span>
|
||||
</div>
|
||||
|
||||
|
|
@ -3118,13 +3143,14 @@
|
|||
<div style="padding: .1em">
|
||||
<div data-tip="Province short name" class="label">Short name:</div>
|
||||
<input id="provinceNameEditorShort" data-tip="Type to change the short name" autocorrect="off" spellcheck="false" style="width: 11em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<span id="provinceNameEditorShortCulture" data-tip="Generate culture-specific name" class="icon-book pointer"></span>
|
||||
<span id="provinceNameEditorShortRandom" data-tip="Generate random name" class="icon-globe pointer"></span>
|
||||
</div>
|
||||
|
||||
<div style="padding: .1em" data-tip="Select form name">
|
||||
<div data-tip="Province form name" class="label">Form name:</div>
|
||||
<select id="provinceNameEditorSelectForm" style="display: inline-block; width: 11.7em; height: 1.645em">
|
||||
<select id="provinceNameEditorSelectForm" style="display: inline-block; width: 11em; height: 1.645em">
|
||||
<option value="">blank</option>
|
||||
<option value="Barony">Barony</option>
|
||||
<option value="Canton">Canton</option>
|
||||
|
|
@ -3155,6 +3181,7 @@
|
|||
<div style="padding: .1em">
|
||||
<div data-tip="Province full name" class="label">Full name:</div>
|
||||
<input id="provinceNameEditorFull" data-tip="Type to change the full name" autocorrect="off" spellcheck="false" style="width: 11em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
<span id="provinceNameEditorFullRegenerate" data-tip="Click to re-generate full name" class="icon-arrows-cw pointer"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -3237,6 +3264,7 @@
|
|||
<button id="namesbaseDownload" data-tip="Download namesbase to PC" class="icon-download"></button>
|
||||
<button id="namesbaseUpload" data-tip="Upload a namesbase from PC" class="icon-upload"></button>
|
||||
<button id="namesbaseCA" data-tip="Find or share custom namesbase on Cartography Assets portal" class="icon-drafting-compass" onclick="openURL('https://cartographyassets.com/asset-category/specific-assets/azgaars-generator/namebases/')"></button>
|
||||
<button id="namesbaseSpeak" data-tip="Speak the examples. You can change voice and language in options" class="icon-voice"></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -3285,9 +3313,11 @@
|
|||
<select id="notesSelect" data-tip="Select object" style="width: 12em"></select>
|
||||
<span>Object name: </span>
|
||||
<input id="notesName" data-tip="Type to change object name" autocorrect="off" spellcheck="false" style="width: 16em">
|
||||
<span data-tip="Speak the name. You can change voice and language in options" class="speaker">🔊</span>
|
||||
</div>
|
||||
<div id="notesText" data-tip="Type and style object description" style="padding: .4em 0"></div>
|
||||
<div>
|
||||
<button id="notesSpeak" data-tip="Speak the note. You can change voice and language in options" class="icon-voice"></button>
|
||||
<button id="notesFocus" data-tip="Focus on selected object" class="icon-target"></button>
|
||||
<button id="notesPin" data-tip="Toggle notes box dispay: hide or do not hide the box on mouse move" class="icon-pin"></button>
|
||||
<button id="notesDownload" data-tip="Download notes to PC" class="icon-download"></button>
|
||||
|
|
|
|||
|
|
@ -361,9 +361,9 @@
|
|||
|
||||
coa.ordinaries ? coa.ordinaries.push(canton) : coa.ordinaries = [canton];
|
||||
|
||||
console.log(encodeURI(`https://azgaar.github.io/Armoria/?coa=${JSON.stringify(coa)}`));
|
||||
console.log(encodeURI(`https://azgaar.github.io/Armoria/?coa=${JSON.stringify(parent)}`));
|
||||
console.log("-------");
|
||||
// console.log(encodeURI(`https://azgaar.github.io/Armoria/?coa=${JSON.stringify(coa)}`));
|
||||
// console.log(encodeURI(`https://azgaar.github.io/Armoria/?coa=${JSON.stringify(parent)}`));
|
||||
// console.log("-------");
|
||||
}
|
||||
|
||||
function selectCharge(set) {
|
||||
|
|
|
|||
|
|
@ -879,7 +879,7 @@
|
|||
// async render coa if it does not exist
|
||||
const trigger = function(id, coa) {
|
||||
if (!coa) {
|
||||
console.warn(id, "emblem is undefined");
|
||||
console.warn(`Emblem ${id} is undefined`);
|
||||
return;
|
||||
}
|
||||
if (!document.getElementById(id)) draw(id, coa);
|
||||
|
|
|
|||
|
|
@ -31,8 +31,9 @@ function editBurg(id) {
|
|||
document.getElementById("burgRemoveGroup").addEventListener("click", removeBurgsGroup);
|
||||
|
||||
document.getElementById("burgName").addEventListener("input", changeName);
|
||||
document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture);
|
||||
document.getElementById("burgNameReRandom").addEventListener("click", generateNameRandom);
|
||||
document.getElementById("burgCulture").addEventListener("input", changeCulture);
|
||||
document.getElementById("burgNameReCulture").addEventListener("click", generateNameCulture);
|
||||
document.getElementById("burgPopulation").addEventListener("change", changePopulation);
|
||||
burgBody.querySelectorAll(".burgFeature").forEach(el => el.addEventListener("click", toggleFeature));
|
||||
|
||||
|
|
@ -43,7 +44,7 @@ function editBurg(id) {
|
|||
document.getElementById("burgEditAnchorStyle").addEventListener("click", editGroupAnchorStyle);
|
||||
|
||||
document.getElementById("burgSeeInMFCG").addEventListener("click", openInMFCG);
|
||||
document.getElementById("burgOpenCOA").addEventListener("click", editCOA);
|
||||
document.getElementById("burgEditEmblem").addEventListener("click", openEmblemEdit);
|
||||
document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg);
|
||||
document.getElementById("burglLegend").addEventListener("click", editBurgLegend);
|
||||
document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg);
|
||||
|
|
@ -55,6 +56,12 @@ function editBurg(id) {
|
|||
document.getElementById("burgPopulation").value = rn(b.population * populationRate.value * urbanization.value);
|
||||
document.getElementById("burgEditAnchorStyle").style.display = +b.port ? "inline-block" : "none";
|
||||
|
||||
// update list and select culture
|
||||
const cultureSelect = document.getElementById("burgCulture");
|
||||
cultureSelect.options.length = 0;
|
||||
const cultures = pack.cultures.filter(c => !c.removed);
|
||||
cultures.forEach(c => cultureSelect.options.add(new Option(c.name, c.i, false, c.i === b.culture)));
|
||||
|
||||
// toggle features
|
||||
if (b.capital) document.getElementById("burgCapital").classList.remove("inactive");
|
||||
else document.getElementById("burgCapital").classList.add("inactive");
|
||||
|
|
@ -79,6 +86,11 @@ function editBurg(id) {
|
|||
burgLabels.selectAll("g").each(function() {
|
||||
select.options.add(new Option(this.id, this.id, false, this.id === group));
|
||||
});
|
||||
|
||||
// set emlem image
|
||||
const coaID = "burgCOA"+id;
|
||||
COArenderer.trigger(coaID, b.coa);
|
||||
document.getElementById("burgEmblem").setAttribute("href", "#" + coaID);
|
||||
}
|
||||
|
||||
function dragBurgLabel() {
|
||||
|
|
@ -220,6 +232,17 @@ function editBurg(id) {
|
|||
elSelected.text(burgName.value);
|
||||
}
|
||||
|
||||
function generateNameRandom() {
|
||||
const base = rand(nameBases.length-1);
|
||||
burgName.value = Names.getBase(base);
|
||||
changeName();
|
||||
}
|
||||
|
||||
function changeCulture() {
|
||||
const id = +elSelected.attr("data-id");
|
||||
pack.burgs[id].culture = +this.value;
|
||||
}
|
||||
|
||||
function generateNameCulture() {
|
||||
const id = +elSelected.attr("data-id");
|
||||
const culture = pack.burgs[id].culture;
|
||||
|
|
@ -227,12 +250,6 @@ function editBurg(id) {
|
|||
changeName();
|
||||
}
|
||||
|
||||
function generateNameRandom() {
|
||||
const base = rand(nameBases.length-1);
|
||||
burgName.value = Names.getBase(base);
|
||||
changeName();
|
||||
}
|
||||
|
||||
function changePopulation() {
|
||||
const id = +elSelected.attr("data-id");
|
||||
pack.burgs[id].population = rn(burgPopulation.value / populationRate.value / urbanization.value, 4);
|
||||
|
|
@ -326,10 +343,9 @@ function editBurg(id) {
|
|||
}
|
||||
}
|
||||
|
||||
function editCOA() {
|
||||
const id = elSelected.attr("data-id"), burg = pack.burgs[id];
|
||||
const coa = COA.toString(burg.coa);
|
||||
openURL("http://azgaar.github.io/Armoria/?coa=" + coa);
|
||||
function openEmblemEdit() {
|
||||
const id = +elSelected.attr("data-id"), burg = pack.burgs[id];
|
||||
editEmblem("burg", "burgCOA"+id, burg);
|
||||
}
|
||||
|
||||
function toggleRelocateBurg() {
|
||||
|
|
|
|||
|
|
@ -367,6 +367,22 @@ function stored(option) {
|
|||
return localStorage.getItem(option);
|
||||
}
|
||||
|
||||
// assign skeaker behaviour
|
||||
Array.from(document.getElementsByClassName("speaker")).forEach(el => {
|
||||
const input = el.previousElementSibling;
|
||||
el.addEventListener("click", () => speak(input.value));
|
||||
});
|
||||
|
||||
function speak(text) {
|
||||
const speaker = new SpeechSynthesisUtterance(text);
|
||||
const voices = speechSynthesis.getVoices();
|
||||
if (voices.length) {
|
||||
const voiceId = +document.getElementById("speakerVoice").value;
|
||||
speaker.voice = voices[voiceId];
|
||||
}
|
||||
speechSynthesis.speak(speaker);
|
||||
}
|
||||
|
||||
// apply drop-down menu option. If the value is not in options, add it
|
||||
function applyOption(select, id, name = id) {
|
||||
const custom = !Array.from(select.options).some(o => o.value == id);
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ function editNamesbase() {
|
|||
document.getElementById("namesbaseDownload").addEventListener("click", namesbaseDownload);
|
||||
document.getElementById("namesbaseUpload").addEventListener("click", () => namesbaseToLoad.click());
|
||||
document.getElementById("namesbaseToLoad").addEventListener("change", function() {uploadFile(this, namesbaseUpload)});
|
||||
document.getElementById("namesbaseSpeak").addEventListener("click", () => speak(namesbaseExamples.textContent));
|
||||
|
||||
createBasesList();
|
||||
updateInputs();
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ function editNotes(id, name) {
|
|||
|
||||
// open a dialog
|
||||
$("#notesEditor").dialog({
|
||||
title: "Notes Editor", minWidth: "40em",
|
||||
title: "Notes Editor", minWidth: "40em", width: "50vw",
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
close: () => notesText.innerHTML = ""
|
||||
});
|
||||
|
|
@ -50,6 +50,7 @@ function editNotes(id, name) {
|
|||
document.getElementById("notesSelect").addEventListener("change", changeObject);
|
||||
document.getElementById("notesName").addEventListener("input", changeName);
|
||||
document.getElementById("notesPin").addEventListener("click", () => options.pinNotes = !options.pinNotes);
|
||||
document.getElementById("notesSpeak").addEventListener("click", () => speak(editor.content.innerHTML));
|
||||
document.getElementById("notesFocus").addEventListener("click", validateHighlightElement);
|
||||
document.getElementById("notesDownload").addEventListener("click", downloadLegends);
|
||||
document.getElementById("notesUpload").addEventListener("click", () => legendsToLoad.click());
|
||||
|
|
|
|||
|
|
@ -140,6 +140,7 @@ optionsContent.addEventListener("click", function(event) {
|
|||
else if (id === "optionsEraRegenerate") regenerateEra();
|
||||
else if (id === "zoomExtentDefault") restoreDefaultZoomExtent();
|
||||
else if (id === "translateExtent") toggleTranslateExtent(event.target);
|
||||
else if (id === "speakerTest") testSpeaker();
|
||||
});
|
||||
|
||||
function mapSizeInputChange() {
|
||||
|
|
@ -198,6 +199,30 @@ function toggleTranslateExtent(el) {
|
|||
else zoom.translateExtent([[0, 0], [graphWidth, graphHeight]]);
|
||||
}
|
||||
|
||||
// add voice options
|
||||
const voiceInterval = setInterval(function() {
|
||||
const voices = speechSynthesis.getVoices();
|
||||
if (voices.length) clearInterval(voiceInterval); else return;
|
||||
|
||||
const select = document.getElementById("speakerVoice");
|
||||
voices.forEach((voice, i) => {
|
||||
select.options.add(new Option(voice.name, i, false));
|
||||
});
|
||||
if (stored("speakerVoice")) select.value = localStorage.getItem("speakerVoice"); // se voice to store
|
||||
else select.value = voices.findIndex(voice => voice.lang === "en-US"); // or to first found English-US
|
||||
}, 1000);
|
||||
|
||||
function testSpeaker() {
|
||||
const text = `${mapName.value}, ${options.year} ${options.era}`;
|
||||
const speaker = new SpeechSynthesisUtterance(text);
|
||||
const voices = speechSynthesis.getVoices();
|
||||
if (voices.length) {
|
||||
const voiceId = +document.getElementById("speakerVoice").value;
|
||||
speaker.voice = voices[voiceId];
|
||||
}
|
||||
speechSynthesis.speak(speaker);
|
||||
}
|
||||
|
||||
function generateMapWithSeed() {
|
||||
if (optionsSeed.value == seed) {
|
||||
tip("The current map already has this seed", false, "error");
|
||||
|
|
@ -331,6 +356,7 @@ function applyStoredOptions() {
|
|||
|
||||
for (let i=0; i < localStorage.length; i++) {
|
||||
const stored = localStorage.key(i), value = localStorage.getItem(stored);
|
||||
if (stored === "speakerVoice") continue;
|
||||
const input = document.getElementById(stored+"Input") || document.getElementById(stored);
|
||||
const output = document.getElementById(stored+"Output");
|
||||
if (input) input.value = value;
|
||||
|
|
|
|||
|
|
@ -383,7 +383,7 @@ function editProvinces() {
|
|||
document.getElementById("provinceNameEditorFull").value = p.fullName;
|
||||
|
||||
$("#provinceNameEditor").dialog({
|
||||
resizable: false, title: "Change province name", width: "22em", buttons: {
|
||||
resizable: false, title: "Change province name", buttons: {
|
||||
Apply: function() {applyNameChange(p); $(this).dialog("close");},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}, position: {my: "center", at: "center", of: "svg"}
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ function editStates() {
|
|||
document.getElementById("stateNameEditorFull").value = s.fullName || "";
|
||||
|
||||
$("#stateNameEditor").dialog({
|
||||
resizable: false, title: "Change state name", width: "22em", buttons: {
|
||||
resizable: false, title: "Change state name", buttons: {
|
||||
Apply: function() {applyNameChange(s); $(this).dialog("close");},
|
||||
Cancel: function() {$(this).dialog("close");}
|
||||
}, position: {my: "center", at: "center", of: "svg"}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue