-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstory.php
155 lines (139 loc) · 5.4 KB
/
story.php
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
144
145
146
147
148
149
150
151
152
153
154
155
<?php
require_once __DIR__ . '/vendor/autoload.php';
require_once __DIR__ . '/appVars.inc.php';
if(time() < DELAY+RELEASE_DATE)
{
header("Location: wait.php");
die();
}
$database = initDatabase();
$storyWords = $database->select('story', ['word_place', 'word']);
usort($storyWords, function($a, $b){return $a['word_place'] - $b['word_place'];});
$story = "";
foreach($storyWords as $word)
{
$story .= $word['word'] . ' ';
}
$story = '"' . trim($story) . '"';
?>
<html dir = "rtl">
<head>
<meta charset="utf-8"/>
<title>رایانش</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
var urlParams = new URLSearchParams(window.location.search);
var story = <?php echo($story); ?>;
var username = urlParams.get('username');
var token = urlParams.get('token');
var selectedWord = "wb0";
function ajax(destination, request, responseHandle) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
responseHandle(this.responseText);
}
};
xhttp.open("POST", destination, true);
xhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(request);
}
function init()
{
loadTheStory();
}
function loadTheStory()
{
storyWords = story.split(" ");
storyFrame = document.getElementById('storyFrame');
for(var i = 0; i < storyWords.length; i++)
{
wordBox = document.createElement('span');
wordBox.setAttribute('class', 'wordBox');
wordBox.setAttribute('id', 'wb'+i);
wordBox.setAttribute('onclick', 'wordSelected("wb'+i+'")');
wordBox.innerText = storyWords[i];
storyFrame.appendChild(wordBox);
}
}
function wordSelected(wordID)
{
previousWord = document.getElementById(selectedWord);
word = document.getElementById(wordID);
previousWord.setAttribute('class', 'wordBox');
word.setAttribute('class', 'wordBox selected');
selectedWord = wordID;
document.getElementById('txtWordChanger').value = word.innerText;
}
function changeWord()
{
word = document.getElementById(selectedWord);
alternative = document.getElementById('txtWordChanger').value;
changeRequest = {username: username,
token: token,
wp: selectedWord.substring(2),
alternative: nuetralized(alternative)};
displayMessage("یه لحظه وایسا به بچههای سرور بگم...", false);
ajax("change.php", JSON.stringify(changeRequest), verifyChange);
}
function nuetralized(input)
{
return input.trim();
//TODO: this bro
}
function verifyChange(response)
{
response = JSON.parse(response);
if(response['success'])
{
word = document.getElementById(selectedWord);
alternative = document.getElementById('txtWordChanger').value;
word.innerText = alternative;
displayMessage("عوض شد :)", true);
}
else
{
displayMessage(response['errorMsg'], true);
}
}
function displayMessage(msg, autoVanish)
{
//TODO: replace alerts with better buddies
document.getElementById('messageBox').innerText = msg;
displayModal(true);
if(autoVanish)
{
setTimeout(function(){
displayModal(false);
}, 2000);
}
}
function displayModal(visible)
{
var modal = document.getElementById("msgModal");
modal.style.display = visible ? "block" : "none";
}
</script>
</head>
<body onload = "init()">
<div id="background">
<img src="bg.jpg" class="stretch" alt="" />
</div>
<div id = "whole">
<div id = "storyFrame"></div>
<div id = "controls">
<input type = "text" id = "txtWordChanger">
<input type = "button" value = "تغییرش بده" id = "btnChanger" onclick = "changeWord()">
</div>
<div id = "credit">Photo by Kelly Sikkema on Unsplash</div>
</div>
<!-- Modal adopted of https://www.w3schools.com/howto/howto_css_modals.asp -->
<div id="msgModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div id = "messageBox"></div>
</div>
</div>
</body>
</html>