Skip to content

Commit

Permalink
Merge pull request #4 from rust-dd/feat/add_new_exercise
Browse files Browse the repository at this point in the history
feat: add new exercise
  • Loading branch information
dancixx authored Aug 23, 2024
2 parents 40339b8 + 38b28e9 commit fda45ea
Show file tree
Hide file tree
Showing 8 changed files with 179 additions and 53 deletions.
4 changes: 3 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,6 @@ sessions/

style/output.css

.idea/
.idea/

package-lock.json
3 changes: 3 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# tryrust.org

![workflow](https://github.com/rust-dd/tryrust.org/actions/workflows/rust.yml/badge.svg)

Welcome to the interactive tutorial project, [tryrust.org](https://tryrust.org), which runs directly in your browser.

![Website screenshot](docs/site.png)
Expand All @@ -16,6 +18,7 @@ To get started with running the project locally, you will need to execute the fo
First, compile the CSS using TailwindCSS:

```bash
npm install
npx tailwindcss -i input.css -o ./style/output.css --watch
```

Expand Down
6 changes: 4 additions & 2 deletions src/context.rs
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ where
pub exercise_03: &'a str,
pub exercise_04: &'a str,
pub exercise_05: &'a str,
pub exercise_06: &'a str,
pub count: usize,
}

Expand All @@ -29,8 +30,9 @@ impl<'a> Default for Exercises<'a> {
exercise_02: r#"let a: usize = 5;1.let b: usize = 7;2.println!("The sum of {} + {} is: {}", a, b, a + b);"#,
exercise_03: r#"let mut x = 10;1.x = 15;2.println!("The value of x is: {}", x);"#,
exercise_04: r#"let mut y = 20;1.let y_ref1 = &y;2.let y_ref2 = &y;3.println!("y_ref1: {}, y_ref2: {}", y_ref1, y_ref2);4.let y_mut_ref = &mut y;5.println!("y_mut_ref: {}", y_mut_ref);"#,
exercise_05: r#"#[derive(Debug)] struct Vec { x: i32, y: i32 };1.impl std::ops::Add for Vec { type Output = Self; fn add(self, other: Self) -> Self { Self { x: self.x + other.x, y: self.y + other.y } } };2.let v1 = Vec { x: 1, y: 2 };3.let v2 = Vec { x: 3, y: 4 };4.let result = v1 + v2;5.println!("result: {:?}", result);"#,
count: 5,
exercise_05: r#"let tuple = (10, 20);1.println!("The elements are: {} {}", tuple.0, tuple.1);2.let (x, y) = tuple;3.println!("Destructured: x = {}, y = {}", x, y);"#,
exercise_06: r#"#[derive(Debug)] struct Vec { x: i32, y: i32 };1.impl std::ops::Add for Vec { type Output = Self; fn add(self, other: Self) -> Self { Self { x: self.x + other.x, y: self.y + other.y } } };2.let v1 = Vec { x: 1, y: 2 };3.let v2 = Vec { x: 3, y: 4 };4.let result = v1 + v2;5.println!("result: {:?}", result);"#,
count: 6,
}
}
}
1 change: 1 addition & 0 deletions src/exercises.rs
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ pub mod exercise_02;
pub mod exercise_03;
pub mod exercise_04;
pub mod exercise_05;
pub mod exercise_06;
58 changes: 10 additions & 48 deletions src/exercises/exercise_05.rs
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

use leptos::*;
use regex::Regex;
use std::rc::Rc;
Expand All @@ -15,13 +16,13 @@ pub fn Component() -> impl IntoView {
view! {
<div class="flex flex-col gap-4 w-full text-white rounded-lg">
<div class="flex flex-col gap-2">
<h2 class="text-3xl font-bold">Learning by Structs and Operator Overloading</h2>
<h2 class="text-3xl font-bold">Learning Tuples</h2>
<p class="text-gray-400">
{r#"In this exercise, we will define a Vec struct with x and y fields and implement the Add operator for it."#}
{r#"In this exercise, we will learn about tuples in Rust, their properties, and how to work with them."#}
</p>

<div class="flex flex-col gap-1 mt-2">
<h3 class="text-xl font-bold">Step 1: Define the Vec struct</h3>
<h3 class="text-xl font-bold">Step 1: Define a Tuple</h3>
<pre
on:click={
let exercise_05 = exercise_05.clone();
Expand All @@ -41,7 +42,7 @@ pub fn Component() -> impl IntoView {
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 2: Implement Add for Vec</h3>
<h3 class="text-xl font-bold">Step 2: Access Tuple Elements</h3>
<pre
on:click={
let exercise_05 = exercise_05.clone();
Expand All @@ -61,7 +62,7 @@ pub fn Component() -> impl IntoView {
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 3: Declare v1</h3>
<h3 class="text-xl font-bold">Step 3: Destructuring a Tuple</h3>
<pre
on:click={
let exercise_05 = exercise_05.clone();
Expand All @@ -81,7 +82,7 @@ pub fn Component() -> impl IntoView {
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 4: Declare v2</h3>
<h3 class="text-xl font-bold">Step 4: Print Tuples</h3>
<pre
on:click={
let exercise_05 = exercise_05.clone();
Expand All @@ -95,53 +96,14 @@ pub fn Component() -> impl IntoView {
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-yellow-500">{exercise_05[3]}</code>
</pre>
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 5: Add v1 and v2</h3>
<pre
on:click={
let exercise_05 = exercise_05.clone();
move |_| {
set_code(String::from(exercise_05[4]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-left text-yellow-500">
{exercise_05[4]}
</code>
</pre>
</div>
<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 5: Print v1, v2, and v3</h3>
<pre
on:click={
let exercise_05 = exercise_05.clone();
move |_| {
set_code(String::from(exercise_05[5]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-left text-yellow-500">
{move || String::from(exercise_05[5])}
{exercise_05[3]}
</code>
</pre>
</div>


</div>
</div>
}
Expand Down
148 changes: 148 additions & 0 deletions src/exercises/exercise_06.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
use leptos::*;
use regex::Regex;
use std::rc::Rc;

use crate::context::{CodeSetter, Exercises, InputRef};

#[component]
pub fn Component() -> impl IntoView {
let CodeSetter(set_code) = expect_context::<CodeSetter>();
let InputRef(_ref) = expect_context::<InputRef>();
let Exercises { exercise_06, .. } = expect_context::<Exercises>();
let re = Regex::new(r"\d+\.").unwrap();
let exercise_06 = Rc::new(re.split(exercise_06).collect::<Vec<&str>>());

view! {
<div class="flex flex-col gap-4 w-full text-white rounded-lg">
<div class="flex flex-col gap-2">
<h2 class="text-3xl font-bold">Learning by Structs and Operator Overloading</h2>
<p class="text-gray-400">
{r#"In this exercise, we will define a Vec struct with x and y fields and implement the Add operator for it."#}
</p>

<div class="flex flex-col gap-1 mt-2">
<h3 class="text-xl font-bold">Step 1: Define the Vec struct</h3>
<pre
on:click={
let exercise_06 = exercise_06.clone();
move |_| {
set_code(String::from(exercise_06[0]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-yellow-500">{exercise_06[0]}</code>
</pre>
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 2: Implement Add for Vec</h3>
<pre
on:click={
let exercise_06 = exercise_06.clone();
move |_| {
set_code(String::from(exercise_06[1]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-yellow-500">{exercise_06[1]}</code>
</pre>
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 3: Declare v1</h3>
<pre
on:click={
let exercise_06 = exercise_06.clone();
move |_| {
set_code(String::from(exercise_06[2]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-yellow-500">{exercise_06[2]}</code>
</pre>
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 4: Declare v2</h3>
<pre
on:click={
let exercise_06 = exercise_06.clone();
move |_| {
set_code(String::from(exercise_06[3]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-yellow-500">{exercise_06[3]}</code>
</pre>
</div>

<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step 5: Add v1 and v2</h3>
<pre
on:click={
let exercise_06 = exercise_06.clone();
move |_| {
set_code(String::from(exercise_06[4]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-left text-yellow-500">
{exercise_06[4]}
</code>
</pre>
</div>
<div class="flex flex-col gap-1">
<h3 class="text-xl font-bold">Step : Print v1, v2, and v3</h3>
<pre
on:click={
let exercise_06 = exercise_06.clone();
move |_| {
set_code(String::from(exercise_06[5]));
_ref()
.get()
.expect("input_ref should be loaded by now")
.focus()
.unwrap();
}
}
class="p-4 whitespace-pre-wrap bg-black bg-opacity-30 rounded-lg transition duration-500 cursor-pointer hover:bg-black hover:bg-opacity-50"
>
<code class="font-mono text-sm text-left text-yellow-500">
{move || String::from(exercise_06[5])}
</code>
</pre>
</div>
</div>
</div>
}
}
5 changes: 4 additions & 1 deletion src/instruction.rs
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ use leptos::*;

use crate::{
context::{Exercises, Progress},
exercises::{exercise_00, exercise_01, exercise_02, exercise_03, exercise_04, exercise_05},
exercises::{exercise_00, exercise_01, exercise_02, exercise_03, exercise_04, exercise_05, exercise_06},
};

#[component]
Expand All @@ -28,6 +28,9 @@ pub fn Component() -> impl IntoView {
<Show when=move || progress.get() == 4>
<exercise_05::Component />
</Show>
<Show when=move || progress.get() == 5>
<exercise_06::Component />
</Show>
<Show when=move || progress.get() == count>
<exercise_00::Component />
</Show>
Expand Down
7 changes: 6 additions & 1 deletion src/terminal.rs
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,10 @@ pub fn Component() -> impl IntoView {
let exercise_04 = exercise_04[5];
let exercise_05 = exercises.exercise_05;
let exercise_05 = re.split(exercise_05).collect::<Vec<&str>>();
let exercise_05 = exercise_05[5];
let exercise_05 = exercise_05[3];
let exercise_06 = exercises.exercise_06;
let exercise_06 = re.split(exercise_06).collect::<Vec<&str>>();
let exercise_06 = exercise_06[5];

data.update(|prev| {
prev.insert((prev.len(), TerminalEvent::Code), code.clone());
Expand Down Expand Up @@ -78,6 +81,8 @@ pub fn Component() -> impl IntoView {
progress.update(|prev| *prev += 1);
} else if progress.get() == 4 && code == *exercise_05 {
progress.update(|prev| *prev += 1);
} else if progress.get() == 5 && code == *exercise_06 {
progress.update(|prev| *prev += 1);
}
}
}
Expand Down

0 comments on commit fda45ea

Please sign in to comment.