Im making a darts timer system, Im using vue js voor de timer itself and for the addscore I also use VueJs And i’ve tried with php the ajax call for in the console while you can check when the the timer status is started pauzed or stopped. Ive tried several things but I cant fix the issue I assigned everything that I could think of, but for some reason in the POST isset it goes instant too the end even why I haven’t started yet. I need an extra eye with more experience in the field, because I cant see it.
Ill show my full code what I have so far with the filename above my code.
Darts-counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Darts Counter</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Added jQuery library -->
<style>
.container {
display: flex;
justify-content: center;
}
.dart-counter {
margin: 0 10px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div>
<h1>Darts Counter</h1>
</div>
</div>
<div id="app" class="container mt-5">
<div>
<div>
<countdown-timer></countdown-timer>
</div>
</div>
<div class="dart-counter">
<div>
<dart-counter></dart-counter>
</div>
</div>
</div>
<script src="../js/darts.js"></script>
</body>
</html>
darts.js
Vue.component('countdown-timer', {
data() {
return {
totalTime: 100 * 60 * 60, // Total time in seconds (100 hours)
currentTime: 100 * 60 * 60, // Current time in seconds (initialized with total time)
timer: null,
isPaused: true, // Set timer as paused by default
isAdmin: true,
scores: [],
scoreInput: null,
totalScore: 501, // Starting score for darts game
savedGames: [], // Array to store saved game data
actionToggle: false,
action: "end",
status: "",
message: "",
test: "",
timeLeft: "",
};
},
computed: {
formatTime() {
const hours = Math.floor(this.currentTime / 3600);
const minutes = Math.floor((this.currentTime % 3600) / 60);
const seconds = this.currentTime % 60;
return `${this.padTime(hours)}:${this.padTime(minutes)}:${this.padTime(seconds)}`;
},
},
methods: {
startTimer() {
this.timer = setInterval(() => {
if (this.currentTime > 0 && !this.isPaused) {
this.currentTime--;
} else {
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
// Make AJAX call to start the timer
this.sendTimerRequest();
},
toggleTimer() {
this.isPaused = !this.isPaused;
if (this.isPaused) {
clearInterval(this.timer);
this.timer = null;
} else {
this.startTimer();
}
this.actionToggle = !this.actionToggle;
if (this.actionToggle) {
this.action = "start";
} else {
this.action = "end";
}
this.sendTimerRequest();
},
padTime(time) {
return time.toString().padStart(2, '0');
},
sendTimerRequest() {
$.ajax({
url: "timer.php",
type: "POST",
data: { ajax: "1",
data: JSON.stringify({ action: this.action }) },
dataType: 'json',
context: this,
success: function(response) {
if (response.status !== undefined) {
this.status = response.status;
}
if (response.timeLeft !== undefined) {
this.timeLeft = response.timeLeft;
}
if (response.test !== undefined) {
this.test = response.text;
}
console.log(response);
},
}).fail(function () {
alert('error');
});
},
},
mounted() {
this.startTimer();
},
template: `
<div class="text-center mb-4">
<p class="h2">{{ formatTime }}</p>
<button class="btn btn-primary" @click="toggleTimer">{{ isPaused ? 'Resume' : 'Pause' }}</button>
</div>
`,
});
Vue.component('dart-counter', {
data() {
return {
scores: [],
scoreInput: null,
totalScore: 501, // Starting score for darts game
action: 'start',
};
},
computed: {
averageScore() {
if (this.scores.length === 0) {
return 0;
}
return (501 - this.totalScore) / this.scores.length; // Average remaining score per dart
},
isGameWon() {
return this.totalScore === 0; // Check if remaining score is 0
},
},
methods: {
addScore() {
if (this.scoreInput === null) {
alert('Please enter a score.');
return;
}
const score = parseInt(this.scoreInput);
if (isNaN(score) || score < 0 || score > 180) {
alert('Score must be between 0 and 180.');
return;
}
if (this.totalScore - score < 0) {
alert('Busted! You have exceeded the total score.');
return;
}
this.scores.push(score);
this.totalScore -= score;
this.sendTimerRequest();
// Reset the score input
this.scoreInput = null;
},
removeScore(index) {
const removedScore = this.scores.splice(index, 1)[0];
this.totalScore += removedScore;
},
resetGame() {
this.totalScore = 501;
this.scores = [];
},
//Een AJAX-oproep met JSON-codering heeft als functie het verzenden en ontvangen van gegevens tussen een webpagina en een server.
startTimer() {
this.timer = setInterval(() => {
if (this.currentTime > 0 && !this.isPaused) {
this.currentTime--;
} else {
clearInterval(this.timer);
this.timer = null;
}
}, 1000);
// Make AJAX call to start the timer
this.sendTimerRequest();
},
},
template: `
<div>
<div>
<input type="number" v-model="scoreInput" placeholder="Enter score" @keyup.enter="addScore">
<button @click="addScore">Add Score</button>
</div>
<div>
<p>Remaining Score: {{ totalScore }}</p>
<p v-if="scores.length > 0">Average Remaining Score per Dart: {{ averageScore.toFixed(2) }}</p>
<div v-for="(score, index) in scores" :key="index">
<span>{{ score }}</span>
<button @click="removeScore(index)">Remove</button>
</div>
</div>
<button @click="resetGame">Reset Game</button>
<p v-if="isGameWon" class="text-success">Congratulations! You won!</p>
</div>
`,
});
new Vue({
el: '#app',
});
timer.php
<?php
$ret = new stdClass();
class Timer
{
private $timeLeft;
private $startTime;
private $status;
public function __construct($startTime)
{
$timeLeftFile = "timeleft.txt";
if (file_exists($timeLeftFile))
{
$this->timeLeft = (INT)file_get_contents($timeLeftFile);
}
else
{
$this->timeLeft = $startTime;
}
$statusFile = "timerstatus.txt";
if (file_exists($statusFile))
{
$this->status = file_get_contents($statusFile);
}
else
{
$this->status = "stopped";
}
}
private function saveTimeLeft($timeLeft)
{
$this->timeleft = $timeLeft;
file_put_contents("timeleft.txt", $timeLeft);
}
public function reset()
{
$this->saveTimeLeft($this->startTime);
$this->stop();
}
public function start()
{
$this->status = "running";
$startTimeFile = "starttime.txt";
file_put_contents($startTimeFile, time());
}
public function stop()
{
$this->status = "stopped";
$startTimeFile = "starttime.txt";
$startTime = (INT)file_get_contents($startTimeFile);
$runningTime = time()-$startTime;
$this->saveTimeLeft($this->timeLeft-$runningTime);
}
public function isRunning()
{
if($this->status == "running")
{
return true;
}
return false;
}
public function getTimeLeft()
{
if ($this->status == "running")
{
return $this->timeLeft-(time()-$this->startTime);
}
return $this->timeLeft;
}
}
if (isset($_POST["ajax"]) && $_POST["ajax"] == "1")
{
$json = $_POST["data"] ?? "{}";
$data = json_decode($json);
$timer = new Timer(100*60*60);
if (isset($data->action) && $data->action == "start")
{
if (!$timer->isRunning() && ($timer->getTimeLeft() > 0))
{
$timer->start();
$ret->status = "running";
$ret->test = "little test";
$ret->timeLeft = $timer->getTimeLeft();
}
else
{
$ret->message = "the timer is already started";
}
}
if (isset($data->action) && $data->action == "end")
{
if ($timer->isRunning())
{
$timer->stop();
$ret->status = "stopped";
$ret->timeLeft = $timer->getTimeLeft();
}
else
{
$ret->message = "timer stopped!";
}
}
}
header("Content-type: application/json; charset=utf-8");
echo json_encode($ret);