I'm trying to wrap my head around the fetch api and get. From what i've been studying it looks like its suppose to be easy but my mind isn't getting it fully. In my game Javascript, it starts with a money=2000 global variable.
The game plays fine, but when someone leaves and goes to their profile page and comes back to the game, the game resets and starts the play from the beginning and resets the money back to 2000.
What is really crazy is if I refresh the page I finally see the correct value of 2200 on the web page, which is what is in the database.
startgame.html
<!DOCTYPE html>
<html>
<head>
<TITLE>Interactive Game</TITLE>
<meta charset="UTF-8">
</head>
<body background="images/pvpcoinnew.png" style="width=120%" onLoad="updateMoney(); popup('popUpDiv'); click(); updown()" oncontextmenu="return false;">
<img background="images/pvpcoinnew.png">
<select id="textbox">
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="25" selected>25</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="250">250</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
<button type="click" id="button" onclick="enterWager(); return false;">Wager!</button>
<p>Money: $<span id="money"></span><br></p>
<script type="text/javascript" src="game.js"></script>
</body>
</html>
The game.js file below has money preset at the very beginning to 2000.
game.js
//money = 2000;
window.money = 2000;
fetch('../php/moneyupdate/moneyupdate.php?money=value')
.then((response) => {
return response.json()
})
.then((money) => {
// Work with JSON data here
window.money = money
console.log(money)
})
.catch((err) => {
// Do something for an error here
})
document.getElementById("money").innerHTML = window.money;
When the php file is triggered from the fetch the status is 200. XHR Response Payload comes back with "2200" which is what is in the database, but the web page is still showing 2000.
Here is the moneyupdate.php file
<?php
session_start();
if(empty($_SESSION['userid']))
{
header("Location: ../login/index.php");
}
include('../../login/database.php');
if(isset($_GET["money"])) {
$money = htmlspecialchars($_GET["money"]);
$userid = $_SESSION['userid'];
try {
$db = DB();
$stmt = $db->prepare("SELECT money FROM usersystem WHERE userid=?");
$stmt->execute([$userid]);
$money = $stmt->fetchColumn();
// send a JSON encded money array to client
header('Content-type: application/json;charset=utf-8');
echo json_encode($money);
//}
}
catch(PDOException $e)
{
$db = null;
echo $e->getMessage();
}
}
// Notes: The json_encode function returns the JSON representation of the given value.
// The json_decode takes a JSON encoded string and converts it into a PHP variable.
?>
Thanks for the help and responding!
My Answer:
One workaround solution to this issue is to use the fetch API to make a request to the server to get the updated money value from the database. You can then update the global variable in your JavaScript code with the new value.
Here's an example of how you can do this:
javascript
// Define a function to fetch the updated money value from the server
function fetchMoneyValue() {
fetch('getMoneyValue.php')
.then(response => response.json())
.then(data => {
money = data.money; // Update the global money variable with the new value
});
}
// Call the fetchMoneyValue function when the page loads
fetchMoneyValue();
In this example, `getMoneyValue.php` is a server-side script that returns the updated money value in JSON format. You can replace this with the actual URL of your server-side script that fetches the money value from the database.
By calling the `fetchMoneyValue` function when the page loads, you can ensure that the global `money` variable is updated with the correct value from the database, even if the game is reset when the user leaves and comes back.
This workaround should help you maintain the correct money value in your game even after the user leaves and returns to the page.
Rate this post
5 of 5 based on 6064 votesComments