Noratrieb/womangling
1
0
Fork 0
mirror of https://github.com/Noratrieb/womangling.git synced 2026-01-14 08:55:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

great stuff

Browse source
This commit is contained in:
nora 2025-02-13 22:32:53 +01:00
parent e6201286ac
commit d122aab60a
6 changed files with 183 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# womangling
See <https://itanium-cxx-abi.github.io/cxx-abi/abi.html#mangling>

40
index.css
View file

@ -6,17 +6,27 @@ html {
--color-primary: rebeccapurple; --color-primary: rebeccapurple;
--color-white: white; --color-white: white;
--color-error: red; --color-error: red;
height: 100%;
}
body {
height: 100%;
} }
.main { .main {
width: 100vw; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
} }
footer {
justify-self: flex-end;
}
.content { .content {
max-width: 50rem; max-width: 50rem;
} }
@ -28,10 +38,24 @@ html {
align-items: center; align-items: center;
} }
.start-button { .root-link {
width: 300px; color: initial;
height: 100px; text-decoration: none;
font-size: 3rem; }
.action-button {
width: 400px;
font-size: 1.5rem;
font-weight: bold;
padding: 20px;
background-color: var(--color-primary);
color: var(--color-white);
border: none;
text-decoration: none;
&:hover {
background-color: color-mix(in oklab, var(--color-primary), white 15%);
}
} }
.lessons-list { .lessons-list {
@ -57,8 +81,8 @@ html {
} }
form[data-challenge] > .error { form[data-challenge] > .error {
margin-top: 10px; margin-top: 10px;
color: var(--color-error); color: var(--color-error);
} }
.quiz-section { .quiz-section {

17
index.html
View file

@ -9,7 +9,7 @@
<body> <body>
<main class="main"> <main class="main">
<div class="content"> <div class="content">
<h1>Learn C++ Itanium Mangling</h1> <h1>Learn C++ Symbol Itanium Mangling</h1>
<noscript> <noscript>
<p> <p>
Warning: You have JavaScript disabled While the content is still Warning: You have JavaScript disabled While the content is still
@ -36,17 +36,18 @@
<a href="/lesson-0.html">C names</a> <a href="/lesson-0.html">C names</a>
</li> </li>
<li class="lesson-list-item"> <li class="lesson-list-item">
<a href="/lesson.html?lesson=1">Arguments and Return Types</a> <a href="/lesson-1.html">Basics</a>
</li>
<li class="lesson-list-item">
<a href="/lesson.html?lesson=2">More Integers</a>
</li>
<li class="lesson-list-item">
<a href="/lesson.html?lesson=3">Namespaces</a>
</li> </li>
</ol> </ol>
</div> </div>
</div> </div>
<footer>
<button
onclick="localStorage.removeItem('lessons') ; alert('deleted data')"
>
reset
</button>
</footer>
</main> </main>
</body> </body>
</html> </html>

18
lesson-0.html
View file

@ -9,8 +9,10 @@
<body> <body>
<main class="main"> <main class="main">
<div class="content" id="content-area"> <div class="content" id="content-area">
<h1>Learn C++ Itanium Mangling</h1> <h1>
<h2>Lesson 1: Intro and C names</h2> <a class="root-link" href="/">Learn C++ Itanium Symbol Mangling</a>
</h1>
<h2>Lesson 0: Intro and C names</h2>
<noscript> <noscript>
<p> <p>
Warning: You have JavaScript disabled While the content is still Warning: You have JavaScript disabled While the content is still
@ -100,7 +102,17 @@ extern "C" {
</div> </div>
</section> </section>
<section data-step="2" class="step"> <section data-step="2" class="step">
<p>meow meow meow!!</p> <p>Congrats on answering your first mangling question!</p>
<p>
You now know how C functions are (not) mangled, which is a great
starting point for your C++ Itanium Symbol Mangling Adventures. I
wish you good luck for the rest!
</p>
<div class="center">
<a href="/lesson-1.html" class="action-button">
Lesson 1: Basics
</a>
</div>
</section> </section>
</div> </div>
</main> </main>

104
lesson-1.html Normal file
View file

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="index.css" />
<title>Womangling</title>
</head>
<body>
<main class="main">
<div class="content" id="content-area">
<h1>
<a class="root-link" href="/">Learn C++ Itanium Symbol Mangling</a>
</h1>
<h2>Lesson 1: Basics</h2>
<noscript>
<p>
Warning: You have JavaScript disabled While the content is still
viewable, interactive exercises will not work. Consider enabling
JavaScript for this website.
</p>
</noscript>
<section data-step="0" class="step">
<p>
After getting an understanding of how this guide works and learning
about the not-mangling of C identifiers, we are ready to dive into
C++.
</p>
<p>
Every C++ mangled symbol is prefixed with the string
<code>_Z</code>. This signifies that this is a mangled C++ symbol.
<code>_Z</code> starts with an underscore followed by an uppercase
letter. All symbols of that structures are reserved by the C
standard and cannot be used by programs. This ensures that there are
no name collisions with normal C functions and mangled C++
functions.
</p>
<p>
After that, the name of the entity is stored. For now, we will only
look at functions. For functions, the function type is appended to
the name to get the full symbol.
</p>
<pre class="code">
void f() {}
</pre>
<p>
This empty function will be mangled to <code>_Z1fv</code>. The
<code>1f</code> signifies the name (we will look at this in more
detail later in this lesson) and the <code>v</code> signifies the
function type (which we will visit in more detail in a future
lesson).
</p>
<div class="quiz-section">
<p>
Which of these symbols cannot possibly be a mangled C++ symbol?
Answer with the name of the symbol.
</p>
<ul>
<li><code>_ZN3FooIA4_iE3barE</code></li>
<li><code>_ZN6System5Sound4beepEv</code></li>
<li><code>_RN3FooIA4_iE3barE</code></li>
</ul>
<form
data-challenge="1"
data-answer="_RN3FooIA4_iE3barE"
data-hint="Look at the prefix"
>
<input class="quiz-input" />
<button
data-challenge-submit="1"
class="submit-challenge"
type="submit"
>
Answer
</button>
<div class="error"></div>
</form>
</div>
</section>
<section data-step="1" class="step">
<p></p>
<div class="quiz-section">
<form data-challenge="2" data-answer="meow">
<input class="quiz-input" />
<button
data-challenge-submit="2"
class="submit-challenge"
type="submit"
>
Answer
</button>
<div class="error"></div>
</form>
</div>
</section>
</div>
</main>
<script>
window.LESSON = 1;
</script>
<script type="module" src="./lessons.js"></script>
</body>
</html>

21
lessons.js
View file

@ -34,6 +34,14 @@ const rerender = () => {
const setStep = (newStep) => { const setStep = (newStep) => {
if (newStep > step) { if (newStep > step) {
step = newStep; step = newStep;
let lessons;
try {
lessons = JSON.parse(localStorage.getItem("lessons")) ?? {};
} catch {
lessons = {};
}
lessons[window.LESSON] = newStep;
localStorage.setItem("lessons", JSON.stringify(lessons));
rerender(); rerender();
} }
}; };
@ -69,10 +77,13 @@ const initButtons = () => {
// Wrong answer :( // Wrong answer :(
const incorrectTries = parseIntThrow(error.dataset.errors ?? "0"); const incorrectTries = parseIntThrow(error.dataset.errors ?? "0");
const hint =
element.dataset.hint ??
`The answer is ${answer.length} characters long`;
const messages = [ const messages = [
"This is not the right answer, please try again.", "This is not the right answer, please try again.",
"This is still not the right answer, please try again.", "This is still not the right answer, please try again.",
`This is still not the right answer, please try again. Tip: The answer is ${answer.length} characters long`, `This is still not the right answer, please try again. Hint: ${hint}`,
`The right answer was: '${answer}'. Enter it to finish this step.`, `The right answer was: '${answer}'. Enter it to finish this step.`,
]; ];
if (incorrectTries >= messages.length) { if (incorrectTries >= messages.length) {
@ -87,6 +98,14 @@ const initButtons = () => {
}; };
const init = () => { const init = () => {
try {
const lessons = JSON.parse(localStorage.getItem("lessons"));
const existingStep = lessons[window.LESSON];
if (typeof existingStep === "number") {
step = existingStep;
}
} catch {}
initButtons(); initButtons();
rerender(); rerender();
}; };