diff --git a/README.md b/README.md new file mode 100644 index 0000000..101f12e --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# womangling + +See diff --git a/index.css b/index.css index 624ca75..bb32b06 100644 --- a/index.css +++ b/index.css @@ -6,17 +6,27 @@ html { --color-primary: rebeccapurple; --color-white: white; --color-error: red; + + height: 100%; +} + +body { + height: 100%; } .main { - width: 100vw; + width: 100%; + height: 100%; display: flex; flex-direction: column; - justify-content: center; align-items: center; } +footer { + justify-self: flex-end; +} + .content { max-width: 50rem; } @@ -28,10 +38,24 @@ html { align-items: center; } -.start-button { - width: 300px; - height: 100px; - font-size: 3rem; +.root-link { + color: initial; + text-decoration: none; +} + +.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 { @@ -57,8 +81,8 @@ html { } form[data-challenge] > .error { - margin-top: 10px; - color: var(--color-error); + margin-top: 10px; + color: var(--color-error); } .quiz-section { diff --git a/index.html b/index.html index dfda3b0..84c9b3a 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@
-

Learn C++ Itanium Mangling

+

Learn C++ Symbol Itanium Mangling

+
+ +
diff --git a/lesson-0.html b/lesson-0.html index 1f14753..a9c201b 100644 --- a/lesson-0.html +++ b/lesson-0.html @@ -9,8 +9,10 @@
-

Learn C++ Itanium Mangling

-

Lesson 1: Intro and C names

+

+ Learn C++ Itanium Symbol Mangling +

+

Lesson 0: Intro and C names

-

meow meow meow!!

+

Congrats on answering your first mangling question!

+

+ 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! +

+
+ + Lesson 1: Basics + +
diff --git a/lesson-1.html b/lesson-1.html new file mode 100644 index 0000000..1540875 --- /dev/null +++ b/lesson-1.html @@ -0,0 +1,104 @@ + + + + + + + Womangling + + +
+
+

+ Learn C++ Itanium Symbol Mangling +

+

Lesson 1: Basics

+ + +
+

+ 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++. +

+

+ Every C++ mangled symbol is prefixed with the string + _Z. This signifies that this is a mangled C++ symbol. + _Z 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. +

+

+ 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. +

+ 
+void f() {}
+
+

+ This empty function will be mangled to _Z1fv. The + 1f signifies the name (we will look at this in more + detail later in this lesson) and the v signifies the + function type (which we will visit in more detail in a future + lesson). +

+
+

+ Which of these symbols cannot possibly be a mangled C++ symbol? + Answer with the name of the symbol. +

+
    +
  • _ZN3FooIA4_iE3barE
    • +
  • _ZN6System5Sound4beepEv
    • +
  • _RN3FooIA4_iE3barE
    • +
+
+ + +
+
+
+
+
+

+
+
+ + +
+
+
+
+
+
+ + + + diff --git a/lessons.js b/lessons.js index cc37941..b67842e 100644 --- a/lessons.js +++ b/lessons.js @@ -34,6 +34,14 @@ const rerender = () => { const setStep = (newStep) => { if (newStep > step) { step = newStep; + let lessons; + try { + lessons = JSON.parse(localStorage.getItem("lessons")) ?? {}; + } catch { + lessons = {}; + } + lessons[window.LESSON] = newStep; + localStorage.setItem("lessons", JSON.stringify(lessons)); rerender(); } }; @@ -69,10 +77,13 @@ const initButtons = () => { // Wrong answer :( const incorrectTries = parseIntThrow(error.dataset.errors ?? "0"); + const hint = + element.dataset.hint ?? + `The answer is ${answer.length} characters long`; const messages = [ "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. 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.`, ]; if (incorrectTries >= messages.length) { @@ -87,6 +98,14 @@ const initButtons = () => { }; const init = () => { + try { + const lessons = JSON.parse(localStorage.getItem("lessons")); + const existingStep = lessons[window.LESSON]; + if (typeof existingStep === "number") { + step = existingStep; + } + } catch {} + initButtons(); rerender(); };