EJS не отображается

Я делаю игру «Камень, ножницы, бумага» на серверной части Node.js с экспресс-сервером, клиентской частью frontend.js, файлами index.ejs и main.css. Сначала я хочу отобразить строковую строку результата вашего решения (выиграл, проиграл, то же самое — попробуйте еще раз). Однако это не дает результата. Я попытался использовать console.info, чтобы определить, передаются ли данные между маршрутами, что действительно происходит и буквально показывает, что данные находятся в шаблоне ejs, но они все равно не отображаются. Я пытался использовать чат GPT, чтобы разобраться в этом, но безуспешно...

бэкэнд.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.info("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.info(`Chosen by client: ${targetedId}`);
    console.info(`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.info("Error");
            break;
    }

 }

 try {
    const result = determineResult(targetedId, compSelector);
    console.info(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.info(`Listening on port ${port}`);
});

интерфейс.js:

console.info("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.info(`Data list: ${dataIdList}`);


// console.info(typeof(idData));


    console.info(targetedId);

    fetch("/add", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({targetedId, dataIdList}),
    })
    .then(response => {

        if (response.ok) {
        console.info("Data sent successfully");
        response.text().then(text => console.info(text));
        console.info("All images:", images); 

        images.forEach(image => {
            if (image !== selectedImage){
                console.info("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));

}

индекс.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') %>

основной.css:

.hidden {
    display: none;
}