---
# System prepended metadata

title: THE REDEMPTION

---

# THE REDEMPTION

### View 1



- _Usman finds himself alone in a room (prison?) with the intro._
- **Text displays: ... [reference to piece of paper]** 

You wake to find yourself in a strange environment. There’s a mysterious note on the floor, which says:


"Welcome to your digital prison, Usman. You have been deemed a menace to society with your lit tunes and you have been sentenced to life clearing caches. This prison is guarded by a massive firewall so don't even think about getting out. You better get started."

// the keypad clue button text can say “back of the mysterious note” with text inside saying “you find these markings at the back of the mysterious note”

- _Click next/something kind of transition._: **Button text:** Clear the cache x 3/4 times

### View 2

- _Helen appears_
- **Before - Text displays:**
After a long day of cache clearing, you appear in your cell for the night, mumbling to yourself about how much you hate cache clearing. That's when you realise the cell isn't empty.
"First day in the jount huh? Wait until the years start rolling by - I've lost all my shiny pixels from clearing caches all day!"
<!-- "Wow, first day and already complaining. At least you still have your shiny pixels. Years and years of clearing caches have stripped away mine." -->
"Hmm", you say as you look for a way to help them.

- **After - Text:**
- “THANK YOU SO MUCH! I’ve never felt so WHOLE! I just gotta spread the word!”

<!-- "Wow! Thank you so much! It's so nice to feel whole again." -->

- Next **button text needed**

### View 3

_Joko present_
- 3 more clues, another character - "I'll get you a hammer"

Chilling in the local Docker container, another prisoner (Joko) approaches you.
"Yo, you must be the guy who helped my girl get her pixels back. As you can see, I'm in need of the same service. And if you scratch my back, I'll scratch yours."


- After - text:

"Oh damn, I didn't think you could actually do it! As a reward, take this firepick. It's good for more than just scratching backs."


### View 4

- **Before - text:**
After yet another long day of clearing the cache, you relax in the streaming room. You're not far into the latest episode of [After Work Dice Club] when a prisoner approaches you. She whispers "Hey" and you know exactly what you have to do.

- **After - text:**
"Blimey! I feel so fresh again. Here's a poster of ---- that I made with my bare hands. I could see how much you like it."

### View 5

"You chip away at the firewall with the firepick. 19 long seconds later, you make it to the end. You can hear the birds. The sweet smell of freedom. Oh no, the exit's encrypted! You need the secret environment variable."

- Button text: "Enter the key" (are digits)

### View 6

You escape! To find your friends were the ones who had locked you up all along... 

**HAPPY BIRTHDAY!!**

Button text: To  Zihuatanejo, Mexico!
Links to our video chat where we sing him HBD with Mexico virtual backgrounds.


## Clue commentary

Each clue needs the following metadata:

- Clue Name: 
- Modal title:
- Input label: (can be generic)
- Input placeholder: (can be generic)
- Success message:
- Incorrect message:

## Coding/Pixel art

### To Do

- [x] Add the rest of the clues
- [x] FIX Page transitions
- [x] Image placeholders?
- [ ] Hand draw the keypad
- [x] Jumping avatars
- [ ] Make usman shorter
- [ ] Final is codenames? Or make the input digits only
- [ ] No context storywise - why need to solve these puzzles / how do they relate to the person
- [ ] Rename Cell 1 etc
- [ ] 2) Is there any easy way to change the colour or look of the solved clues? Maybe grey them out a bit? When I first landed on the second lot of puzzles, I thought "hmm, 6 puzzles??" Only a tiny issue tho.
- [ ] 3) Could we close the modal when you get the answer correct? Or maybe remove the input in favour of the SUCCESS! text? But I think at this stage, closing the modal would probably be easier.
- [ ] It's not really clear why he gets the poster. 😅 We could leave it in as a Shawshank reference, or we could add a line to the escape paragraph like "Now that you've got a poster to hide your secret side-job, you chip away at the firewall with the firepick.... etc" ? What do y'all think?

### Stretch goals

- [ ] Button with 'clear the cache' and another '.' where continue button will be
- [ ] BUG: When only one connected, and refresh, will reset the story (only if others are connected does refreshing not affect it)
- [ ] More pixel art? E.g. poster / firewall / fire pick etc
- [ ] Jumping characters at the end
- [ ] Change the images into svg

It could be cool to make the final keypad clue interact-able - so on top of each of the lines you could type in a letter if you click it

https://codesandbox.io/s/quirky-framework-nvmg6?file=/src/App.js

make the block animate in somehow

https://codesandbox.io/s/musing-butterfly-59vhg?file=/src/App.js