api-docs/setup.html at main · QuestPhone/api-docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quest Setup</title>
</head>
<body>
    <div id="quest-container">
        <!-- Header -->
        <div id="quest-header">
            <h1 id="quest-title">Quest Name</h1>
            <p id="quest-subtitle">Setup your quest</p>
        </div>

        <!-- Step 1: Quest Title -->
        <div class="step" id="step-title">
            <h2>1. Quest Title</h2>
            <input type="text" id="inputQuestTitle" placeholder="Enter quest name" value="">
        </div>

        <!-- Step 2: Active Days -->
        <div class="step" id="step-days">
            <h2>2. Active Days</h2>
            <div id="days-container">
                <button class="day-button" data-day="MON">Mon</button>
                <button class="day-button" data-day="TUE">Tue</button>
                <button class="day-button" data-day="WED">Wed</button>
                <button class="day-button" data-day="THU">Thu</button>
                <button class="day-button" data-day="FRI">Fri</button>
                <button class="day-button" data-day="SAT">Sat</button>
                <button class="day-button" data-day="SUN">Sun</button>
            </div>
        </div>

        <!-- Step 3: Time Range -->
        <div class="step" id="step-time">
            <h2>3. Time Range</h2>
            <label>Start Time: <input type="time" id="startTime" value=""></label>
            <label>End Time: <input type="time" id="endTime" value=""></label>
            <p>Note: Any value in the minutes part of the time is ignored.</p>
        </div>

        <!-- Step 4: Custom Settings (optional) -->
        <div class="step" id="step-settings">
            <h2>4. Settings</h2>
            <!-- Example numeric inputs -->
            <label>Setting 1: <input type="number" id="setting1" value=""></label>
            <label>Setting 2: <input type="number" id="setting2" value=""></label>
            <!-- Example checkbox -->
            <label><input type="checkbox" id="option1"> Option 1</label>
            <p>Note: These are the values that will be directly injected into the injectData(string) function of webpage. You can add stuff like configurations about your quest here. </p>

        </div>

        <!-- Step 5: Generate JSON -->
        <div class="step" id="step-generate">
            <button id="generateBtn">Generate Configuration</button>
        </div>

        <!-- JSON Output -->
        <div id="jsonOutput" style="display:none;">
            <h3>Your Quest Configuration</h3>
            <pre id="jsonContent"></pre>
            <button id="copyBtn">Copy JSON</button>
        </div>
    </div>

    <script>
        // Initialize selected days
        const selectedDays = new Set();

        document.querySelectorAll('.day-button').forEach(btn => {
            btn.addEventListener('click', () => {
                const day = btn.dataset.day;
                if (selectedDays.has(day)) {
                    selectedDays.delete(day);
                    btn.style.fontWeight = "normal";
                } else {
                    selectedDays.add(day);
                    btn.style.fontWeight = "bold";
                }
            });
        });

        let generatedJSON = '';

        function generateUUID() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
                const r = Math.random() * 16 | 0;
                return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
        }

        document.getElementById('generateBtn').addEventListener('click', () => {
            const questTitle = document.getElementById('inputQuestTitle').value || 'New Quest';

            const startTimeStr = document.getElementById('startTime').value || '08:00';
            const endTimeStr = document.getElementById('endTime').value || '22:00';
            const startTime = parseInt(startTimeStr.split(':')[0]);
            const endTime = parseInt(endTimeStr.split(':')[0]);

            if (selectedDays.size === 0) {
                alert('Please select at least one day!');
                return;
            }

            if (startTime >= endTime) {
                alert('Start hour must be before end hour!');
                return;
            }


            const questJson = JSON.stringify({
                    // This is the link to your page that displays when a quest is opened.
                    webviewUrl: "https://questphone.github.io/api-docs/view.html",
                    setting1: document.getElementById('setting1')?.value || '',
                    setting2: document.getElementById('setting2')?.value || '',
                    option1: document.getElementById('option1')?.checked.toString() || 'false'
                })
            const questConfig = {
                title: questTitle,
                selected_days: Array.from(selectedDays),
                time_range: [startTime, endTime],
                id: generateUUID(),
                quest_json: questJson
            };

            generatedJSON = JSON.stringify(questConfig, null, 2);
            document.getElementById('jsonContent').textContent = generatedJSON;
            document.getElementById('jsonOutput').style.display = 'block';
        });

        document.getElementById('copyBtn').addEventListener('click', () => {
            navigator.clipboard.writeText(generatedJSON)
                .then(() => alert('Copied!'))
                .catch(err => alert('Failed to copy: ' + err));
        });


    </script>
</body>
</html>