heonian.org/heonian-conversation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

badges

Browse Source
This commit is contained in:
remi 2022-05-05 19:26:29 +02:00
parent cae18e8414
commit dda182fb90
4 changed files with 104 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
html/pop_up.html
View File

@ -4,17 +4,13 @@
<div>
<span id="popup-e">heonian: </span><span id="popup-heo"></span><br>
type: <span id="popup-type"></span><br>
quirks: <span id="popup-quirks"></span>
<div id="popup-quirks-container">quirks: <span id="popup-quirks"></span></div>
</div>
<p id="popup-meaning"></p>
</div>
</div>
<div id="smol-popup" style="opacity: 0; pointer-events: none;">
<h1>um</h1>
<div>
<span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
type: <span id="smol-type"></span><br>
quirks: <span id="smol-quirks"></span>
</div>
<p id="smol-meaning"></p>
<p>click for more info!</p>
</div>

93
main.js
View File

@ -9,11 +9,65 @@ let currentFont = "r";
let timeout = "";
let quirkBadges = {
"present-tense": {
"name": "Present tense",
"description": "The word is in the present tense.",
"color": "#00dd00",
"type": "Tense",
"bending": "ka'nya"
},
"past-tense": {
"name": "Past tense",
"description": "The word is in the past tense.",
"color": "#dd00dd",
"type": "Tense",
"bending": "kome"
},
"volitional-mood": {
"name": "Feeling mood",
"description": "A feeling,",
"color": "#dd00dd",
"type": "Mood",
"bending": "pash"
},
"imperative-mood": {
"name": "Imperative mood",
"description": "Commanding mood.",
"color": "#dd0000",
"type": "Mood",
"bending": "dash"
},
"shy-mood": {
"name": "Shy mood",
"description": "Shy mood.",
"color": "#dddd00",
"type": "Mood",
"bending": "bash"
},
"threat-mood": {
"name": "Threat mood",
"description": "Threat mood.",
"color": "#00dddd",
"type": "Mood",
"bending": "tash"
},
"negated": {
"name": "Negated",
"description": "The word is negated.",
"color": "#7777dd",
"type": "Negation",
"bending": "fa"
}
}
function init() {
createWordList();
document.querySelector("#popup-container").addEventListener("click", () => {
document.querySelector("#popup-container").style.opacity = 0;
document.querySelector("#popup-container").style.pointerEvents = "none";
document.querySelector("#popup-container").addEventListener("click", (e) => {
if (e.target.id == "popup-container") {
document.querySelector("#popup-container").style.opacity = 0;
document.querySelector("#popup-container").style.pointerEvents = "none";
}
});
// above are commented out until wordlist is added~
document.querySelector("#font-button").addEventListener("click", () => {fontButton();});
@ -45,11 +99,28 @@ function showPopup(ogword, word, quirks = "") {
}
p.querySelector("#popup-type").innerText = words[word]["type"];
p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
let wq = "";
p.querySelector("#popup-quirks").innerHTML = "";
if (quirks.trim() != "") {
wq = quirks.split(" ").join(", ");
p.querySelector("#popup-quirks-container").style.display = "block";
let qyuirks = quirks.split(" ");
qyuirks.forEach(quirk => {
let badge = document.createElement("div");
badge.classList.add("badge");
badge.style.backgroundColor = quirkBadges[quirk]["color"];
badge.innerText = quirkBadges[quirk]["name"];
badge.onclick = () => {
p.querySelector("h1").innerText = quirkBadges[quirk]["name"];
p.querySelector("#popup-meaning").innerText = quirkBadges[quirk]["description"];
p.querySelector("#popup-type").innerText = quirkBadges[quirk]["type"];
p.querySelector("#popup-quirks-container").style.display = "none";
p.querySelector("#popup-e").innerText = "bending: ";
p.querySelector("#popup-heo").innerText = quirkBadges[quirk]["bending"];
}
p.querySelector("#popup-quirks").appendChild(badge);
});
} else {
p.querySelector("#popup-quirks-container").style.display = "none";
}
p.querySelector("#popup-quirks").innerText = wq;
c.style.opacity = 1;
c.style.pointerEvents = "all";
} catch (e) {
@ -65,22 +136,12 @@ function showSmolPopup(ogword, word, self, quirks) {
word = cleanWord(word);
if (currentFont == "r") {
p.querySelector("h1").innerText = words[word]["romanizationProper"];
p.querySelector("#smol-heo").innerText = words[word]["heonian"];
p.querySelector("h1").style.fontFamily = "var(--font-normal)";
p.querySelector("#smol-e").innerText = "heonian: ";
} else {
p.querySelector("h1").innerText = words[word]["heonian"];
p.querySelector("#smol-heo").innerText = words[word]["romanizationProper"];
p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
p.querySelector("#smol-e").innerText = "romanization: ";
}
p.querySelector("#smol-type").innerText = words[word]["type"];
p.querySelector("#smol-meaning").innerText = words[word]["meaning"];
let wq = "";
if (quirks.trim() != "") {
wq = quirks.split(" ").join(", ");
}
p.querySelector("#smol-quirks").innerText = wq;
p.style.opacity = 1;
p.style.pointerEvents = "all";
// set position to cursor position (but we dont have the event)

8
test.html
View File

@ -4332,19 +4332,15 @@ fayu
<div>
<span id="popup-e">heonian: </span><span id="popup-heo"></span><br>
type: <span id="popup-type"></span><br>
quirks: <span id="popup-quirks"></span>
<div id="popup-quirks-container">quirks: <span id="popup-quirks"></span></div>
</div>
<p id="popup-meaning"></p>
</div>
</div>
<div id="smol-popup" style="opacity: 0; pointer-events: none;">
<h1>um</h1>
<div>
<span id="smol-e">heonian: </span><span id="smol-heo"></span><br>
type: <span id="smol-type"></span><br>
quirks: <span id="smol-quirks"></span>
</div>
<p id="smol-meaning"></p>
<p>click for more info!</p>
</div>
</main>
<script src="main.js"></script>

24
text_analysis.css
View File

@ -191,16 +191,38 @@ main {
top: 0;
left: 0;
transition: opacity 0.3s;
text-align: center;
}
#popup h1, #smol-popup h1 {
#popup h1 {
text-align: center;
}
#smol-popup h1 {
margin: 0;
}
#popup-heo, #smol-heo {
font-family: "heonian";
}
#popup-quirks {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
#popup-quirks * {
margin-bottom: 8px;
}
.badge {
padding: 4px;
border-radius: 8px;
color: white;
cursor: pointer;
}
.button {
text-decoration: underline;
text-align: center;