Skip to content

Commit

Permalink
Merge pull request #2 from sogoagain/issue1_optionCharset
Browse files Browse the repository at this point in the history
Add the option to set the characters to use when scrambled
  • Loading branch information
sogoagain authored Jan 15, 2022
2 parents c097a50 + 6612ee9 commit 57b8928
Show file tree
Hide file tree
Showing 7 changed files with 15,920 additions and 6,281 deletions.
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,15 @@ const handleScramble = (text) => {

// call scramble function with the text to be scrambled and handler.
scrambler.scramble('- Friedrich Nietzsche -', handleScramble);

// call scramble with the option to set the characters to use when scrambled.
scrambler.scramble(text, handleScramble, {
charactersToUseWhenScrambling: ['a', 'b', 'c'],
});

// Scrambler provides several characters.
console.log(Scrambler.CHARACTERS.DEFAULT);
console.log(Scrambler.CHARACTERS.ALPHABET);
```

### React Example
Expand Down
85 changes: 52 additions & 33 deletions examples/index.html
Original file line number Diff line number Diff line change
@@ -1,39 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<style>
body {font-family: 'Roboto Mono', monospace; letter-spacing: 5px;}
#container {display: flex; flex-direction: column; justify-content: center; text-align: center;}
</style>
<title>Scrambling Text Example</title>
</head>
<body>
<div id="container">
<h1 id="text"></h1>
</div>
<script src="./scrambling-text.js"></script>
<script>
const TEXTS = [
'- Friedrich Nietzsche -',
'The doer alone learneth.',
'There are no facts, only interpretations.',
];

const scrambler = new window.Scrambler();
const handleScramble = (text) => {
document.getElementById('text').innerHTML = text;
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto Mono', monospace;
letter-spacing: 5px;
}

#container {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
</style>
<title>Scrambling Text Example</title>
</head>

<body>
<div id="container">
<h1 id="text"></h1>
</div>
<script src="./scrambling-text.js"></script>
<script>
const TEXTS = [
'- Friedrich Nietzsche -',
'The doer alone learneth.',
'There are no facts, only interpretations.',
];

let i = 0;
function printText() {
scrambler.scramble(TEXTS[i % TEXTS.length], handleScramble);
setTimeout(printText, 5000);
i++;
const scrambler = new window.Scrambler();
const handleScramble = (text) => {
document.getElementById('text').innerHTML = text;
}

let i = 0;
function printText() {
const targetText = TEXTS[i % TEXTS.length];
if (i == 2) {
scrambler.scramble(targetText, handleScramble, {
charactersToUseWhenScrambling: Scrambler.CHARACTERS.ALPHABET,
});
} else {
scrambler.scramble(targetText, handleScramble);
}
printText();
</script>
</body>
setTimeout(printText, 5000);
i++;
}
printText();
</script>
</body>

</html>
2 changes: 1 addition & 1 deletion examples/scrambling-text.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 57b8928

Please sign in to comment.