I’m making a rock, scissors, paper game on the backend of Node.js with express server, frontend.js client-side, index.ejs and main.css files. I firstly want to render a string line of the result of your decision (won, lost, the same – try again).
However, it doesn’t render the result. I tried to use console.log to detect if the data is passed between the routes, which indeed happens and it literally shows that the data is in the ejs template, but it still doesn’t render.
I tried to use chat GPT to figure it out and it failed…
backend.js:
import express from "express";
import bodyParser from "body-parser";
import pg from "pg";
import ejs from "ejs";
import axios from "axios";
import { dirname } from "path";
import { fileURLToPath } from "url";
// import icons from "bootstrap-icons";
const __dirname = dirname(fileURLToPath(import.meta.url));
const app = express();
const port = 3000;
let gameResult = [];
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));
app.get("/", (req, res) => {
const results = [...gameResult];
gameResult = [];
console.log("Result from session:", results);
res.render("index", {results});
});
app.post("/add", (req,res) => {
const {targetedId, dataIdList} = req.body;
let compSelector = dataIdList[Math.floor(Math.random() * dataIdList.length)];
console.log(`Chosen by client: ${targetedId}`);
console.log(`Chosen by computer: ${compSelector}`);
function determineResult(targetedId, compSelector) {
switch (targetedId) {
case "paper":
if(compSelector === "scissors") {
return "You lost";
} else if(compSelector === "rock") {
return "You won!";
} else {
return "The same, try again";
}
break;
case "scissors":
if(compSelector === "rock") {
return "You lost";
} else if(compSelector === "paper") {
return "You won!"
} else {
return "The same, try again";
}
break;
case "rock":
if(compSelector === "paper") {
return "You lost";
} else if(compSelector === "scissors") {
return "You won!"
} else {
return "The same, try again";
}
break;
default:
console.log("Error");
break;
}
}
try {
const result = determineResult(targetedId, compSelector);
console.log(result);
gameResult = [result];
res.redirect("/");
} catch (error) {
console.error("Error handling POST /add request:", error);
res.status(500).send("Internal Server Error");
}
});
app.listen(port, () => {
console.log(`Listening on port ${port}`);
});
frontend.js:
console.log("Frontend.js is loaded");
function myFrontFunction(event) {
const selectedImage = event.target;
const targetedId = selectedImage.getAttribute("data-id");
const images = document.querySelectorAll(".image");
const dataIdList = [];
images.forEach(dataId => {
dataIdList.push(dataId.getAttribute("data-id"));
});
console.log(`Data list: ${dataIdList}`);
// console.log(typeof(idData));
console.log(targetedId);
fetch("/add", {
method: "POST",
headers: {"Content-Type": "application/json"},
body: JSON.stringify({targetedId, dataIdList}),
})
.then(response => {
if(response.ok) {
console.log("Data sent successfully");
response.text().then(text => console.log(text));
console.log("All images:", images);
images.forEach(image => {
if(image !== selectedImage){
console.log("Hiding image:", image);
image.classList.add('hidden'); // Use class to hide
}
});
} else {
console.error("Failed to send data to the server");
}
})
.catch(error => console.error("Error:", error));
}
index.ejs:
<%- include('partials/header.ejs') %>
<h1>The RSP App!</h1>
<h2>Choose Rock, Scissors or Paper:</h2>
<img class="image" src="/images/paper.png" alt="A piece of paper" width="400px" height="400px" data-id="paper" onclick="myFrontFunction(event)">
<img class="image" src="/images/rock.png" alt="A rock" width="400px" height="400px" data-id="rock" onclick="myFrontFunction(event)">
<img class="image" src="/images/scissors.png" alt="Scissors" width="400px" height="400px" data-id="scissors" onclick="myFrontFunction(event)">
<div>
<% if (results.length > 0) { %>
<% results.forEach( result => { %>
<p> <%= result %></p>
<% }) %>
<% } %>
</div>
<script src="/frontend.js"></script>
<%- include('partials/footer.ejs') %>
main.css:
.hidden {
display: none;
}