임시 업데이트 나중에 수정할것
This commit is contained in:
김민서
parent
c9000b20fe
commit
9a99ffcdc7
|
|
@ -0,0 +1,121 @@
|
|||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
using Server.HTML;
|
||||
using Server.System;
|
||||
|
||||
var builder = WebApplication.CreateBuilder(args);
|
||||
|
|
@ -17,120 +18,7 @@ var app = builder.Build();
|
|||
|
||||
//app.MapPost("/update", GItWebhook.Process);
|
||||
|
||||
app.MapGet("/spin", async context =>
|
||||
{
|
||||
await context.Response.WriteAsync(@"
|
||||
<!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>
|
||||
|
||||
");
|
||||
});
|
||||
app.MapGet("/spin", Spin.Main);
|
||||
|
||||
app.MapPost("/spin/random", async context =>
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue