128 lines
4.7 KiB
C#
128 lines
4.7 KiB
C#
|
|
namespace Server.HTML
|
|
{
|
|
public class Spin
|
|
{
|
|
private static string html = @"
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Roulette</title>
|
|
<style>
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
}
|
|
.input-area {
|
|
margin-bottom: 10px;
|
|
}
|
|
#roulette {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 50%;
|
|
background-color: red;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 24px;
|
|
margin-top: 20px;
|
|
transition: opacity 0.5s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id='container'>
|
|
<h1>Spin the Roulette!</h1>
|
|
<form id='configForm'>
|
|
<label for='inputNumber'>Enter the number of texts:</label>
|
|
<input type='number' id='inputNumber' name='inputNumber' min='1'>
|
|
<button type='button' onclick='configureRoulette()'>Configure</button>
|
|
</form>
|
|
<div id='inputAreas' style='display: none;'></div>
|
|
<div id='roulette' style='display: none;' onclick='spinRoulette()'>Click to Spin!</div>
|
|
<form id='spinForm' method='post' action='/spin/random' style='display: none;'>
|
|
<input type='hidden' name='selectedText' id='selectedTextInput'>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
function configureRoulette() {
|
|
const inputNumber = document.getElementById('inputNumber').value;
|
|
const inputAreas = document.getElementById('inputAreas');
|
|
inputAreas.innerHTML = '';
|
|
|
|
for (let i = 0; i < inputNumber; i++) {
|
|
const inputArea = document.createElement('div');
|
|
inputArea.classList.add('input-area');
|
|
inputArea.innerHTML = `
|
|
<label for='text${i}'>Enter text ${i + 1}:</label>
|
|
<input type='text' id='text${i}' name='text${i}'>
|
|
`;
|
|
inputAreas.appendChild(inputArea);
|
|
}
|
|
|
|
document.getElementById('configForm').style.display = 'none';
|
|
document.getElementById('inputAreas').style.display = 'block';
|
|
document.getElementById('roulette').style.display = 'flex';
|
|
document.getElementById('spinForm').style.display = 'flex';
|
|
}
|
|
|
|
let spinning = false;
|
|
function spinRoulette() {
|
|
if (!spinning) {
|
|
spinning = true;
|
|
const texts = document.querySelectorAll('input[type=text]');
|
|
const candidates = [];
|
|
texts.forEach(text => {
|
|
if (text.value.trim() !== '') {
|
|
candidates.push(text.value.trim());
|
|
}
|
|
});
|
|
if (candidates.length > 0) {
|
|
let counter = 0;
|
|
const intervals = [10, 50, 100, 300, 750];
|
|
let timeout = 0;
|
|
intervals.forEach((interval, index) => {
|
|
setTimeout(() => {
|
|
const intervalId = setInterval(() => {
|
|
document.getElementById('roulette').innerText = candidates[counter % candidates.length];
|
|
counter++;
|
|
}, interval);
|
|
setTimeout(() => {
|
|
clearInterval(intervalId);
|
|
if (index === intervals.length - 1) {
|
|
const selectedText = candidates[Math.floor(Math.random() * candidates.length)];
|
|
document.getElementById('roulette').innerText = selectedText;
|
|
document.getElementById('selectedTextInput').value = selectedText;
|
|
spinning = false;
|
|
}
|
|
}, 2000); // 2 seconds
|
|
}, timeout);
|
|
timeout += 2000; // 2 seconds
|
|
});
|
|
} else {
|
|
alert('Please enter at least one text.');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
";
|
|
public static async Task Main(HttpContext context)
|
|
{
|
|
await context.Response.WriteAsync(html);
|
|
}
|
|
|
|
public static async Task Random(HttpContext context)
|
|
{
|
|
var selectedText = context.Request.Form["selectedText"];
|
|
await context.Response.WriteAsync($"The roulette landed on: {selectedText}!");
|
|
}
|
|
}
|
|
}
|