js 링크 하나로 사용 가능한 룰렛 미니게임

따로 설치할 필요 없이
cdn 사용하듯이 사용 가능한 룰렛게임 만들어봤습니다.
룰렛 게임 기능과 UI 만 제공하고, 게임의 결과값을 본인 웹페이지의 소스상에서 callback 처리해서
결과에 따라 원하는 작업을 붙여넣으시면 됩니다~

<script src="https://carsnap.shop/roulette-sdk.js"></script>
<script>

const resultEl = document.querySelector("#result");

const roulette = RouletteWidget.create({
target: "#roulette",
items: sampleItems,
buttonText: "룰렛 게임하기",
theme: {
primaryColor: "#2563eb",
buttonColor: "#111827",
textColor: "#ffffff"
},
onStart: function () {
resultEl.textContent = "룰렛 시작...";
console.log("룰렛 시작");
},
onComplete: function (result) {
resultEl.textContent = JSON.stringify(result, null, 2);
console.log("룰렛 결과:", result);
}
});

window.demoRoulette = roulette;
</script>
이런 식으로 사용하시면 되고...
프론트에서만 실행되는거라 ... 프로그램 소스 이해도가 있다면 결과 조작이 가능하긴한데요,
아에 서버 개설해서 UI, 기능, 항목 설정과 결과값 보안 유효성을 갖춰서, 비용을 받고 서비스 해볼까 생각도 해봤습니다...ㅎㅎ;;

혹시 지금 운영중인 사이트에서 사용해보고싶은데 콜백 관련 기능처리에 도움이 필요하신분은...
연락주세요 ㅎㅎㅎ

사용 방법은 아래 예시 코드 참고하세요~
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RouletteWidget Demo</title>
<style>
:root {
color: #111827;
background: #f3f4f6;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
margin: 0;
}

.page {
width: min(1080px, calc(100% - 32px));
margin: 0 auto;
padding: 40px 0;
}

.header {
margin-bottom: 28px;
}

h1 {
margin: 0 0 10px;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1;
}

p {
margin: 0;
color: #4b5563;
line-height: 1.6;
}

.layout {
display: grid;
grid-template-columns: minmax(280px, 480px) 1fr;
gap: 28px;
align-items: start;
}

.panel {
border-radius: 8px;
background: #ffffff;
padding: 24px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}

.result-title {
margin: 0 0 12px;
font-size: 18px;
}

.result {
min-height: 168px;
border-radius: 8px;
background: #111827;
color: #e5e7eb;
padding: 16px;
overflow: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
line-height: 1.55;
white-space: pre-wrap;
}

.example {
margin-top: 18px;
border-radius: 8px;
background: #f9fafb;
padding: 16px;
overflow: auto;
font-size: 13px;
line-height: 1.55;
}

@media (max-width: 820px) {
.page {
width: min(100% - 24px, 560px);
padding: 24px 0;
}

.layout {
grid-template-columns: 1fr;
}

.panel {
padding: 18px;
}
}
</style>
</head>
<body>
<main class="page">
<header class="header">
<h1>RouletteWidget Demo</h1>
</header>

<section class="layout">
<div class="panel">
<div id="roulette"></div>
</div>

<aside class="panel">
<h2 class="result-title">Callback Result</h2>
<div id="result" class="result">아직 결과가 없습니다.</div>
<pre class="example"><code>const roulette = RouletteWidget.create({
target: "#roulette",
items: sampleItems,
buttonText: "\uB8F0\uB81B \uB3CC\uB9AC\uAE30",
onComplete: function(result) {
// Handle result persistence, coupon issuing, etc. in the customer page.
}
});</code></pre>
</aside>
</section>
</main>

<script src="https://carsnap.shop/roulette-sdk.js"></script>
<script>
const sampleItems = [
{ text: "당첨 1", code: "LUCKY 1", weight: 20 },
{ text: "당첨 2", code: "LUCKY 2", weight: 20 },
{ text: "당첨 3", code: "LUCKY 3", weight: 20 },
{ text: "당첨 4", code: "LUCKY 4", weight: 20 },
{ text: "꽝", code: "LOSE", weight: 20 },
];

const resultEl = document.querySelector("#result");

const roulette = RouletteWidget.create({
target: "#roulette",
items: sampleItems,
buttonText: "룰렛 게임하기",
theme: {
primaryColor: "#2563eb",
buttonColor: "#111827",
textColor: "#ffffff"
},
onStart: function () {
resultEl.textContent = "룰렛 시작...";
console.log("룰렛 시작");
},
onComplete: function (result) {
resultEl.textContent = JSON.stringify(result, null, 2);
console.log("룰렛 결과:", result);
}
});

window.demoRoulette = roulette;
</script>
</body>
</html>

댓글 (0)