@jhbhan/kings-quiz
Version:
Old testament Kings trivia quiz game
408 lines (396 loc) • 29.6 kB
JavaScript
"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.tsx
var index_exports = {};
__export(index_exports, {
KingsQuiz: () => KingsQuiz,
default: () => index_default
});
module.exports = __toCommonJS(index_exports);
// #style-inject:#style-inject
function styleInject(css, { insertAt } = {}) {
if (!css || typeof document === "undefined") return;
const head = document.head || document.getElementsByTagName("head")[0];
const style = document.createElement("style");
style.type = "text/css";
if (insertAt === "top") {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
// src/index.css
styleInject('* {\n box-sizing: border-box;\n}\nbody {\n margin: 0;\n font-family:\n "Helvetica Neue",\n Arial,\n sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n background-color: #f0f0f0;\n min-height: 100vh;\n color: #333;\n}\n.trivia-container {\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n}\n.trivia-header {\n background-color: #ffffff;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 30px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #ddd;\n}\n.progress-bar {\n width: 100%;\n height: 8px;\n background-color: #e0e0e0;\n border-radius: 4px;\n overflow: hidden;\n margin-bottom: 15px;\n}\n.progress-fill {\n height: 100%;\n background-color: #666666;\n transition: width 0.3s ease;\n}\n.question-counter {\n font-size: 14px;\n color: #666;\n margin-bottom: 5px;\n}\n.score {\n font-size: 18px;\n font-weight: bold;\n color: #333;\n}\n.question-section {\n background-color: #ffffff;\n border-radius: 8px;\n padding: 40px 30px;\n margin-bottom: 30px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #ddd;\n text-align: center;\n}\n.question {\n font-size: 28px;\n font-weight: 600;\n color: #333;\n margin: 0;\n line-height: 1.4;\n}\n.answers-section {\n display: flex;\n flex-direction: column;\n gap: 15px;\n margin-bottom: 30px;\n}\n.answer-option {\n background-color: #ffffff;\n border: 1px solid #ccc;\n border-radius: 8px;\n padding: 20px;\n font-size: 18px;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n text-align: left;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n color: #333;\n}\n.answer-option:hover:not(:disabled) {\n border-color: #666;\n transform: translateY(-2px);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.answer-option.selected {\n border-color: #333;\n background-color: #e8e8e8;\n}\n.answer-option.correct {\n border-color: #4a7c59;\n background-color: #e6f4ea;\n color: #333;\n}\n.answer-option.incorrect {\n border-color: #b85c5c;\n background-color: #fbeaea;\n color: #333;\n}\n.answer-option:disabled {\n cursor: not-allowed;\n opacity: 0.7;\n}\n.option-letter {\n background-color: #666;\n color: #ffffff;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n margin-right: 15px;\n flex-shrink: 0;\n}\n.answer-option.correct .option-letter {\n background-color: #4a7c59;\n}\n.answer-option.incorrect .option-letter {\n background-color: #b85c5c;\n}\n.option-text {\n flex: 1;\n}\n.submit-section {\n text-align: center;\n}\n.submit-btn {\n background-color: #333;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 15px 40px;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.submit-btn:hover:not(:disabled) {\n background-color: #555;\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.submit-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n}\n.result-message {\n font-size: 20px;\n font-weight: 600;\n padding: 15px;\n}\n.correct-message {\n color: #333;\n}\n.incorrect-message {\n color: #333;\n}\n.game-finished {\n background-color: #ffffff;\n border-radius: 8px;\n padding: 60px 40px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #ddd;\n margin-top: 50px;\n}\n.game-finished h1 {\n color: #333;\n margin-bottom: 30px;\n font-size: 36px;\n}\n.final-score h2 {\n color: #333;\n margin-bottom: 15px;\n font-size: 32px;\n}\n.score-percentage {\n font-size: 24px;\n color: #666;\n margin-bottom: 40px;\n}\n.play-again-btn {\n background-color: #333;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 15px 40px;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.play-again-btn:hover {\n background-color: #555;\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.landing-screen {\n background-color: #ffffff;\n border-radius: 8px;\n padding: 40px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #ddd;\n margin-top: 20px;\n max-width: 700px;\n margin-left: auto;\n margin-right: auto;\n}\n.app-title {\n font-size: 48px;\n font-weight: 700;\n color: #333;\n margin-bottom: 10px;\n}\n.app-description {\n font-size: 20px;\n color: #666;\n margin-bottom: 40px;\n line-height: 1.5;\n}\n.game-settings {\n margin-bottom: 40px;\n}\n.setting-group {\n margin-bottom: 30px;\n}\n.setting-group h3 {\n font-size: 20px;\n color: #333;\n margin-bottom: 15px;\n}\n.category-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: 15px;\n}\n.category-option {\n background-color: #ffffff;\n border: 1px solid #ccc;\n border-radius: 8px;\n padding: 15px;\n cursor: pointer;\n transition: all 0.2s ease;\n text-align: left;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);\n}\n.category-option:hover {\n border-color: #666;\n transform: translateY(-1px);\n}\n.category-option.selected {\n border-color: #333;\n background-color: #e8e8e8;\n}\n.category-name {\n display: block;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n margin-bottom: 5px;\n}\n.category-count {\n font-size: 14px;\n color: #666;\n}\n.game-info {\n background-color: #f8f8f8;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 30px;\n border: 1px solid #ddd;\n}\n.info-summary p {\n margin: 5px 0;\n color: #333;\n font-size: 16px;\n}\n.start-btn {\n background-color: #333;\n color: #ffffff;\n border: none;\n border-radius: 8px;\n padding: 20px 50px;\n font-size: 24px;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s ease;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n.start-btn:hover:not(:disabled) {\n background-color: #555;\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n.start-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n transform: none;\n}\n.category-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 5px;\n}\n.checkmark {\n color: #333;\n font-size: 18px;\n font-weight: bold;\n}\n.results-sections {\n margin: 30px 0;\n width: 100%;\n}\n.results-section {\n margin-bottom: 20px;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n border: 1px solid #ddd;\n}\n.section-header {\n width: 100%;\n padding: 15px 20px;\n border: none;\n font-size: 18px;\n font-weight: 600;\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all 0.2s ease;\n background-color: #f8f8f8;\n color: #333;\n border-bottom: 1px solid #ddd;\n}\n.wrong-header {\n background-color: #f8f8f8;\n color: #333;\n border-bottom: 1px solid #ddd;\n}\n.wrong-header:hover {\n background-color: #e0e0e0;\n}\n.right-header {\n background-color: #f8f8f8;\n color: #333;\n border-bottom: 1px solid #ddd;\n}\n.right-header:hover {\n background-color: #e0e0e0;\n}\n.expand-icon {\n transition: transform 0.2s ease;\n font-size: 14px;\n}\n.expand-icon.expanded {\n transform: rotate(180deg);\n}\n.questions-list {\n background-color: #ffffff;\n max-height: 400px;\n overflow-y: auto;\n}\n.question-result {\n padding: 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n.question-result:last-child {\n border-bottom: none;\n}\n.wrong-result {\n border-left: 4px solid #666;\n}\n.right-result {\n border-left: 4px solid #666;\n}\n.result-question {\n font-size: 16px;\n font-weight: 600;\n color: #333;\n margin: 0 0 15px 0;\n line-height: 1.4;\n}\n.result-options {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.result-option {\n display: flex;\n align-items: center;\n padding: 10px 12px;\n border-radius: 6px;\n font-size: 14px;\n border: 1px solid #e0e0e0;\n background-color: #f8f8f8;\n}\n.result-option .option-letter {\n background-color: #666;\n color: #ffffff;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n margin-right: 12px;\n flex-shrink: 0;\n font-size: 12px;\n}\n.result-option .option-text {\n flex: 1;\n}\n.result-option .option-indicator {\n font-size: 12px;\n font-weight: 600;\n margin-left: 10px;\n}\n.correct-option {\n background-color: #e6f4ea;\n border-color: #4a7c59;\n color: #333;\n}\n.correct-option .option-letter {\n background-color: #4a7c59;\n}\n.correct-option .option-indicator {\n color: #4a7c59;\n}\n.wrong-option {\n background-color: #fbeaea;\n border-color: #b85c5c;\n color: #333;\n}\n.wrong-option .option-letter {\n background-color: #b85c5c;\n}\n.wrong-option .option-indicator {\n color: #b85c5c;\n}\n.no-questions {\n padding: 40px 20px;\n text-align: center;\n font-size: 18px;\n color: #666;\n font-style: italic;\n}\n@media (max-width: 768px) {\n .trivia-container {\n padding: 15px;\n }\n .landing-screen {\n padding: 30px 20px;\n margin-top: 10px;\n }\n .app-title {\n font-size: 36px;\n }\n .app-description {\n font-size: 18px;\n }\n .category-options {\n grid-template-columns: 1fr;\n }\n .start-btn {\n padding: 15px 40px;\n font-size: 20px;\n }\n .question {\n font-size: 24px;\n }\n .answer-option {\n padding: 15px;\n font-size: 16px;\n }\n .option-letter {\n width: 28px;\n height: 28px;\n margin-right: 12px;\n }\n .section-header {\n padding: 12px 15px;\n font-size: 16px;\n }\n .question-result {\n padding: 15px;\n }\n .result-question {\n font-size: 15px;\n }\n .result-option {\n padding: 8px 10px;\n font-size: 13px;\n }\n .result-option .option-letter {\n width: 20px;\n height: 20px;\n margin-right: 10px;\n font-size: 11px;\n }\n .questions-list {\n max-height: 300px;\n }\n}\n');
// src/KingsQuiz.tsx
var import_react2 = require("react");
// src/types.ts
var categoryNamesMap = {
"successor": "Succession",
"kingdom": "Which Kingdom?",
"approval": "Good or Bad",
"prophetKing": "Who's your prophet?"
};
// src/components/shared/slider.css
styleInject(".slider-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n}\n.question-slider {\n width: 100%;\n max-width: 300px;\n height: 8px;\n border-radius: 4px;\n background-color: #e0e0e0;\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.question-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background-color: #333;\n cursor: pointer;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: all 0.2s ease;\n}\n.question-slider::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n.question-slider::-moz-range-thumb {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background-color: #333;\n cursor: pointer;\n border: none;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n transition: all 0.2s ease;\n}\n.question-slider::-moz-range-thumb:hover {\n transform: scale(1.1);\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n}\n.question-slider:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.question-slider:disabled::-webkit-slider-thumb {\n cursor: not-allowed;\n}\n.question-slider:disabled::-moz-range-thumb {\n cursor: not-allowed;\n}\n.slider-labels {\n display: flex;\n justify-content: space-between;\n width: 100%;\n max-width: 300px;\n font-size: 14px;\n color: #666;\n padding: 0 12px;\n}\n");
// src/components/shared/Slider.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var Slider = ({
value,
onChange,
min = 5,
max = 20,
step = 1,
disabled = false
}) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "slider-container", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"input",
{
type: "range",
min,
max,
step,
value,
onChange: (e) => onChange(Number(e.target.value)),
className: "question-slider",
disabled
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "slider-labels", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: min }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: max })
] })
] });
// src/components/Landing.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
function LandingPage(props) {
const {
selectedQuestionCount,
setSelectedQuestionCount,
selectedCategories,
handleCategoryChange,
startGame
} = props;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "trivia-container", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "landing-screen", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "app-title", children: "Trivia Challenge" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "app-description", children: "Customize your trivia experience!" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "game-settings", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "setting-group", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("h3", { children: [
"Number of Questions: ",
selectedQuestionCount
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Slider,
{
value: selectedQuestionCount,
onChange: setSelectedQuestionCount,
min: 5,
max: 20,
step: 1
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "setting-group", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { children: "Select Categories" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "category-options", children: Object.entries(categoryNamesMap).map(([key, name]) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
className: `category-option ${selectedCategories.includes(key) ? "selected" : ""}`,
onClick: () => handleCategoryChange(key),
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "category-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "category-name", children: name }),
selectedCategories.includes(key) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "checkmark", children: "\u2713" })
] })
},
key
);
}) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "game-info", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "info-summary", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: selectedCategories.length }),
" selected categories"
] }) }) })
] }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"button",
{
className: "start-btn",
onClick: startGame,
disabled: selectedCategories.length === 0,
children: "Start Game"
}
)
] }) });
}
// src/components/Results.tsx
var import_react = require("react");
var import_jsx_runtime3 = require("react/jsx-runtime");
var Results = (props) => {
const {
score,
gameQuestions,
questionResults,
resetGame
} = props;
const [wrongAnswersExpanded, setWrongAnswersExpanded] = (0, import_react.useState)(true);
const [rightAnswersExpanded, setRightAnswersExpanded] = (0, import_react.useState)(false);
const wrongAnswers = questionResults.filter((result) => !result.isCorrect);
const rightAnswers = questionResults.filter((result) => result.isCorrect);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "trivia-container", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "game-finished", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h1", { children: "Game Complete!" }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "final-score", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("h2", { children: [
"Your Score: ",
score,
" / ",
gameQuestions.length
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: "score-percentage", children: [
Math.round(score / gameQuestions.length * 100),
"%"
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "results-sections", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "results-section", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"button",
{
className: "section-header wrong-header",
onClick: () => setWrongAnswersExpanded(!wrongAnswersExpanded),
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
"\u274C Questions You Got Wrong (",
wrongAnswers.length,
")"
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `expand-icon ${wrongAnswersExpanded ? "expanded" : ""}`, children: "\u25BC" })
]
}
),
wrongAnswersExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "questions-list", children: [
wrongAnswers.map((result, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "question-result wrong-result", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "result-question", children: result.question.question }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "result-options", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "result-option wrong-option", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "option-text", children: result.userAnswer }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "option-indicator", children: "\u2717 Your Answer" })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "result-option correct-option", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "option-text", children: result.question.correctAnswer }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "option-indicator", children: "\u2713 Correct" })
] })
] })
] }, `wrong-${index}`)),
wrongAnswers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "no-questions", children: "\u{1F389} Perfect! You got all questions right!" })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "results-section", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"button",
{
className: "section-header right-header",
onClick: () => setRightAnswersExpanded(!rightAnswersExpanded),
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
"\u2705 Questions You Got Right (",
rightAnswers.length,
")"
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: `expand-icon ${rightAnswersExpanded ? "expanded" : ""}`, children: "\u25BC" })
]
}
),
rightAnswersExpanded && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "questions-list", children: [
rightAnswers.map((result, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "question-result right-result", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h4", { className: "result-question", children: result.question.question }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "result-options", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "result-option correct-option", children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "option-text", children: result.userAnswer }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "option-indicator", children: "\u2713 Your Answer" })
] }) })
] }, `right-${index}`)),
rightAnswers.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "no-questions", children: "\u{1F614} No correct answers this time. Better luck next time!" })
] })
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "play-again-btn", onClick: resetGame, children: "Play Again" })
] }) });
};
// src/api.ts
var URL = "https://8539852b27d737c54d69d5a15610e246.balena-devices.com/trivia";
var fetchQuestions = async (count, categories) => {
const url = new URLSearchParams();
url.append("type", "kings");
url.append("count", count.toString());
url.append("categories", categories.join(","));
const response = await fetch(`${URL}?${url.toString()}`);
const data = await response.json();
if (!response.ok) {
throw new Error(data.message || "Failed to fetch questions");
}
if (!Array.isArray(data)) {
throw new Error("Invalid response format");
}
return data;
};
// src/KingsQuiz.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
function KingsQuiz() {
const [showResult, setShowResult] = (0, import_react2.useState)(false);
const [gameFinished, setGameFinished] = (0, import_react2.useState)(false);
const [gameStarted, setGameStarted] = (0, import_react2.useState)(false);
const [loadingQuestions, setLoadingQuestions] = (0, import_react2.useState)(false);
const [currentQuestionIndex, setCurrentQuestionIndex] = (0, import_react2.useState)(0);
const [selectedAnswer, setSelectedAnswer] = (0, import_react2.useState)(null);
const [score, setScore] = (0, import_react2.useState)(0);
const [selectedCategories, setSelectedCategories] = (0, import_react2.useState)(["successor", "kingdom", "approval", "prophetKing"]);
const [selectedQuestionCount, setSelectedQuestionCount] = (0, import_react2.useState)(10);
const [gameQuestions, setGameQuestions] = (0, import_react2.useState)([]);
const [questionResults, setQuestionResults] = (0, import_react2.useState)([]);
const currentQuestion = gameQuestions[currentQuestionIndex];
const handleAnswerSelect = (answer) => {
if (showResult) return;
setSelectedAnswer(answer);
const isCorrect = answer === currentQuestion.correctAnswer;
if (isCorrect) {
setScore(score + 1);
}
const result = {
question: currentQuestion,
userAnswer: answer,
isCorrect
};
setQuestionResults((prev) => [...prev, result]);
setShowResult(true);
setTimeout(() => {
if (currentQuestionIndex < gameQuestions.length - 1) {
setCurrentQuestionIndex(currentQuestionIndex + 1);
setSelectedAnswer(null);
setShowResult(false);
} else {
setGameFinished(true);
}
}, 1e3);
};
const handleCategoryToggle = (categoryId) => {
setSelectedCategories((prev) => {
if (prev.includes(categoryId)) {
return prev.filter((id) => id !== categoryId);
} else {
return [...prev, categoryId];
}
});
};
const startGame = async () => {
setLoadingQuestions(true);
const fetchedQuestions = await fetchQuestions(selectedQuestionCount, selectedCategories);
const shuffled = [...fetchedQuestions].sort(() => Math.random() - 0.5);
setGameQuestions(shuffled);
setLoadingQuestions(false);
setGameStarted(true);
};
const resetGame = () => {
setCurrentQuestionIndex(0);
setSelectedAnswer(null);
setScore(0);
setShowResult(false);
setGameFinished(false);
setGameStarted(false);
setGameQuestions([]);
setQuestionResults([]);
};
if (loadingQuestions) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "loading", children: "Loading questions..." });
}
if (gameFinished) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
Results,
{
score,
gameQuestions,
questionResults,
resetGame
}
);
}
if (!gameStarted) {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
LandingPage,
{
selectedQuestionCount,
setSelectedQuestionCount,
selectedCategories,
handleCategoryChange: handleCategoryToggle,
startGame
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "trivia-container", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "trivia-header", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "progress-bar", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"div",
{
className: "progress-fill",
style: { width: `${(currentQuestionIndex + 1) / gameQuestions.length * 100}%` }
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "question-counter", children: [
"Question ",
currentQuestionIndex + 1,
" of ",
gameQuestions.length
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "score", children: [
"Score: ",
score
] })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "question-section", children: showResult ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "result-message", children: selectedAnswer === currentQuestion.correctAnswer ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "correct-message", children: "\u2713 Correct!" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "incorrect-message", children: [
"\u2717 Incorrect. The correct answer was ",
currentQuestion.correctAnswer,
"."
] }) }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h1", { className: "question", children: currentQuestion.question }) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "answers-section", children: currentQuestion.options.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"button",
{
className: `answer-option ${selectedAnswer === option ? "selected" : ""} ${showResult ? option === currentQuestion.correctAnswer ? "correct" : selectedAnswer === option ? "incorrect" : "" : ""}`,
onClick: () => handleAnswerSelect(option),
disabled: showResult,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "option-text", children: option })
},
index
)) })
] });
}
// src/index.tsx
var index_default = KingsQuiz;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
KingsQuiz
});
//# sourceMappingURL=index.cjs.map