105 lines
3.7 KiB
HTML
105 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="Fisher-Yates Shuffle Demo">
|
|
<meta name="author" content="Timothy Gu">
|
|
|
|
<title>Fisher-Yates Shuffle Demo</title>
|
|
|
|
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
textarea.pre {
|
|
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
|
|
font-size: 1em;
|
|
}
|
|
</style>
|
|
|
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
|
|
<body>
|
|
<article class="container">
|
|
<h1>
|
|
Fisher-Yates Shuffle Demo
|
|
</h1>
|
|
<p>
|
|
This is a demo of <strong><a href="https://github.com/TimothyGu/knuth-shuffle-seeded">knuth-shuffle-seeded</a></strong>. Enjoy!
|
|
</p>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="inputArray">Input</label>
|
|
<textarea class="form-control pre" id="inputArray" rows="8" placeholder="Enter JSON-formatted array"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="form-group">
|
|
<label for="seed">Seed</label>
|
|
<input type="text" class="form-control" id="seed" placeholder="Enter seed (optional)">
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-default" onclick="shuffleInput('inputArray', 'out', 'seed')">
|
|
Submit
|
|
</button>
|
|
</div>
|
|
<pre id="out"></pre>
|
|
</div>
|
|
</article>
|
|
<footer class="container-fluid">
|
|
<p class="text-center small">
|
|
Made with ❤ by <a href="https://github.com/TimothyGu">@TimothyGu</a>. Copyright 2015. Apache License Version 2.0.
|
|
</p>
|
|
</footer>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
|
<script src="browser.js"></script>
|
|
<script>
|
|
function shuffleInput (inputId, outputId, seedId) {
|
|
var // Input array
|
|
arr = document.getElementById(inputId)
|
|
, // Output HTML element
|
|
out = document.getElementById(outputId)
|
|
, // User-specified seed
|
|
seed = document.getElementById(seedId).value
|
|
, // Output string
|
|
outStr
|
|
|
|
// Handle errors by catching it, print the message to the output HTML
|
|
// box, and throwing it again so that it's visible on the JS console.
|
|
function handleError(func) {
|
|
try {
|
|
func()
|
|
} catch (e) {
|
|
out.textContent = e.stack
|
|
throw e
|
|
}
|
|
}
|
|
|
|
// Parse input array.
|
|
handleError(function () {
|
|
arr = JSON.parse(arr.value)
|
|
})
|
|
|
|
// If the seed is empty, assume the user does not want to use a seed.
|
|
if (seed === '') seed = undefined
|
|
// If seed is a number assume the user wants to use a numerical seed.
|
|
else if (seed == String(+seed)) seed = +seed
|
|
|
|
handleError(function () {
|
|
// Shuffle the array with the seed, and stringifies it to outStr.
|
|
outStr = JSON.stringify(shuffle(arr, seed))
|
|
})
|
|
|
|
// Insert output string to the output HTML box.
|
|
out.textContent = outStr
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|