임시 업데이트 나중에 수정할것

This commit is contained in:
김민서 2024-01-29 17:41:36 +09:00
parent c9000b20fe
commit 9a99ffcdc7
2 changed files with 123 additions and 114 deletions

121
Server/HTML/Spin.cs Normal file
View File

@ -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);
}
}
}

View File

@ -1,3 +1,4 @@
using Server.HTML;
using Server.System; using Server.System;
var builder = WebApplication.CreateBuilder(args); var builder = WebApplication.CreateBuilder(args);
@ -17,120 +18,7 @@ var app = builder.Build();
//app.MapPost("/update", GItWebhook.Process); //app.MapPost("/update", GItWebhook.Process);
app.MapGet("/spin", async context => app.MapGet("/spin", Spin.Main);
{
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.MapPost("/spin/random", async context => app.MapPost("/spin/random", async context =>
{ {