Incomplete Code: Seeking Clarification

[flynncao]

Hey there! I recently stumbled upon your project and I must say, it's incredibly useful and interesting. Not to mention, it's blazing fast!

As a frontend developer familiar with Vue.js and related development tools, I'd love to contribute to this repository by adding some new features, especially the translation stuff that I believe you have planned.

However, I encountered a small hiccup. I couldn't locate the dev/index.js files precisely. It seems like there might be some code missing, or perhaps I ran it incorrectly. I tried executing the following command: concurrently \"nodemon dev/index.js \" \"cd client && vite\", but the terminal displayed the message "nodemon dev/index.js exited with code 0" while everything of frontend side works well.

Since I couldn't find your contact information on GitHub, I figured it'd be best to ask my questions here. Could you kindly point me in the right direction?

Thank you sooo much!

[alpharmi]

Hello Flynn, thanks for the kind words, I really appericate it. Hopefully below should answer majority of your questions.

Because I added the /dev directory to my .gitignore that means it doesn't exist on your side when testing locally, hence why it just exits.

I use https://vercel.com to deploy my site, along with their amazing Serverless Functions which automatically read the /api directory and setups the API / Backend for production. Unfortunately because of the CORS policy we cannot make requests to these endpoints (https://astral-express.vercel.app/api/) when testing, meaning we need to setup a local version. Fortunately for us, Vercel has a NPM Package we can use to setup these endpoints on our side for testing, which you can try yourself.

I had various issues setting it up though (most likely I'm doing something wrong), because of this I switched to using Express.js and copying all the endpoints from /api to /dev and got it setup there instead.

Here's an explanation of how I have it setup with Express:

/dev/index.js

const express = require("express")
const cors = require("cors")
const app = express()

const routes = [require("./routes/warps"), require("./routes/player")]

app.use(cors()) // Remember to use cors to allow testing internally.
app.use("/api", routes)

// You could also set something up like so to use one off endpoints
// api.use("/api/importWarps", "./importWarps.js")

app.listen(3000)

/dev/routes/importWarps.js

// This is pretty much the exact same as the original /api endpoint but just swapped to use express instead.
const express = require("express")
const router = express.Router()

...

router.get("/importWarps", async (req, res) => {
    const authkey = req.query.authkey
    const region = req.query.region
    const gachaType = req.query.gacha_type
    const lastId = req.query.last_id
    var warps = []

    if (authkey && region && gachaType && lastId) {
        const query = takumiQuery
        ...
    }

   res.json(warps)
})

module.exports = router

After setting this up it should now all work correctly, running on localhost:3000, for example the http://localhost:3000/api/importWarps endpoint. My site should automatically know when in production and not and use the respective endpoints. Such as here at .../views/Import.vue Line 54

Regarding the translation stuff, I once again appreciate your interest. Majority of the system is actually complete, I've just yet to merge / push it all. I may do this sooner or later, it really depends how fast you want / need it.

If you have anymore questions, feel free to reply here, of course, or message me on discord @alpharmi.

[flynncao]

Thank you for your generous support! It worked!

I wanted to update on the progress regarding the translation feature. I have made several commits in the recent days, focusing on implementing the translation functionality. However, before I push a PR to this repository tomorrow, I need to set up ESLint because the code modification by my hand appears quite messy without it. On a positive note, I would like to share a preview of the feature through this demo.