search

LENpolygon / Build-Order-Tool-AoE4-

Build Order Tool (for Age of Empires IV)
30 stars 15 forks source link

committing firebase boilerplate #11

Closed xarvey closed 2 years ago

xarvey commented 2 years ago

just boilerplate following

xarvey commented 2 years ago

don't merge yet

xarvey commented 2 years ago

hmm also why are all the images not in the repo

LENpolygon commented 2 years ago

hmm also why are all the images not in the repo

Because I wasn't sure if the owners of the icons would be so happy with me sharing it publicly for everyone to download... Maybe we can add some test image for testing purposes? I'll look into that.

don't merge yet

I will await your signal to check and test everything!

xarvey commented 2 years ago

Here's a quick MVP demo. I think I might need to figure out deploying through vercel. If you could just send me the img files to my email I can probably try deploying.

Let me know if you have any feedback @LENpolygon. If you wanna chat about it via zoom I'm also available after 6pm generally (I live in New York)

https://user-images.githubusercontent.com/5531887/166399620-4a19b6f6-ad8d-407b-9298-bb8c3cefbcd3.mp4

xarvey commented 2 years ago

here's an example of deployment https://build-order-tool-ao-e4.vercel.app/

LENpolygon commented 2 years ago

Demo looks like a good start! I will check out the code later, would love to learn how you set up the database! Unfortunately I have a very busy time at my day-job with long hours and I'm in the Netherlands. As soon as it's 6pm in USA then I'm already asleep. Maybe at some point in the weekend or we keep it with text for now.

I've added a placeholder image and updated the main branch a bit to give the no-icons variant a better look.

I tested your branch and noticed that one can very easily "spam" the upload button and thus upload multiple copies. I believe there should be two restrictions:

  1. After press upload buttons goes "greyed out" to prevent multiple presses
  2. Same IP can only upload once per minute (?) to prevent spamming to database

In terms of front end the browsing experience should be:

For backend/database this would also mean:

Keep up the great work!

xarvey commented 2 years ago

Demo looks like a good start! I will check out the code later, would love to learn how you set up the database! Unfortunately I have a very busy time at my day-job with long hours and I'm in the Netherlands. As soon as it's 6pm in USA then I'm already asleep. Maybe at some point in the weekend or we keep it with text for now.

I've added a placeholder image and updated the main branch a bit to give the no-icons variant a better look.

I tested your branch and noticed that one can very easily "spam" the upload button and thus upload multiple copies. I believe there should be two restrictions:

  1. After press upload buttons goes "greyed out" to prevent multiple presses
  2. Same IP can only upload once per minute (?) to prevent spamming to database

In terms of front end the browsing experience should be:

  • When clicking on a civilization two columns appear:
  • Left column: 20 most popular this month builds for that civ
  • Right column: 20 newest builds for that civ
  • (this should keep it fresh as a first start)
  • Uploaded builds can be clicked to look at them
  • Simple "upvote" button will make build more popular

For backend/database this would also mean:

  • Adding a date field for date published

  • Adding a int field for upvotes

  • some cleanup script; such as if there are more than 100 builds for 1 civ then the oldest non-popular build gets removed.

Keep up the great work!

Thanks for the reply.

  1. I do think we need to add login to prevent that in a longer term. But not sure if it's too much tax on users. Using IP address is not a good way to prevent it as many schools/internet providers share the same ip. And if you use VPN you can also change IP. Either login as google/facebook/apple or just use cookie
  2. For frontend: totally agree to put that on the table and have better filtering per CIV. But we need to get the voting works first. (Or we can start from captcha?)
  3. I think we can start with that and launch the product without protection and public shaming ip address on reddit if we found malicious behaviors.
  4. For cleanup script, I think we can wait until we have 100+ submissions

Side note: Also I heard working in Europe is supposed to be chill (Europeans Work Fewer Hours than Americans)? image

Let me know what you think on getting user to login, I'll try to implement the basic filtering CIV and simple voting first, then we can launch it and get some public opinions on this. We can align on some minimum criteria to launch it

LENpolygon commented 2 years ago

Thanks for the reply.

  1. I do think we need to add login to prevent that in a longer term. But not sure if it's too much tax on users. Using IP address is not a good way to prevent it as many schools/internet providers share the same ip. And if you use VPN you can also change IP. Either login as google/facebook/apple or just use cookie

I agree, no IP filtering then. Login is not a first priority, we need to get users to actually use it first.

  1. For frontend: totally agree to put that on the table and have better filtering per CIV. But we need to get the voting works first. (Or we can start from captcha?)

Captcha for voting is fine, but it could start out with some simpler mechanic, maybe just a cookie? This is not some high-stakes voting especially when there are less then 100 actual builds in the database.

  1. I think we can start with that and launch the product without protection and public shaming ip address on reddit if we found malicious behaviors.

Yes.

  1. For cleanup script, I think we can wait until we have 100+ submissions

Agree

Side note: Also I heard working in Europe is supposed to be chill (Europeans Work Fewer Hours than Americans)?

Haha, this is SO true! And this works exactly like that for at least 90% of all personnel. But in my case I just recently took up a slightly more challenging role for me and I'm putting in some extra hours to exceed expectations.

Let me know what you think on getting user to login, I'll try to implement the basic filtering CIV and simple voting first, then we can launch it and get some public opinions on this. We can align on some minimum criteria to launch it

I think we've mentioned most things already like ability to upload the build (URL) including description, date, etc. Do note that when entering description it should be filtered to prevent any xss. I've already got something within the JS code for that. After uploading users should be able to see the build show up in the "NEWEST BUILDS" column for the selected civ. On the Build page some sort of HEART-button for upvotes with simple controls to prevent spamming. This only affects the order in the "most liked this month"-column.

Guess that should be enough for people to not only share builds via URL / screenshot, but also via this database. As soon as people start abusing it badly it can be improved to fix just that.

Maybe it needs to be build in such a way that if abuse is extreme that it's easy to "pull the plug" on the database portion, such as literally removing a single file and the website goes back to the standard basic way of functioning only via URL sharing.

xarvey commented 2 years ago

Do note that when entering description it should be filtered to prevent any xss.

React should be XSS protected https://stackoverflow.com/questions/33644499/what-does-it-mean-when-they-say-react-is-xss-protected

After uploading users should be able to see the build show up in the "NEWEST BUILDS" column for the selected civ.

Good idea but I need to get newest builds/voting working first. I'm a bit busy recently, but will see if i can squeeze some bandwidth in this

I think we can worry about abuse later. We can start w/ cookie storing to identify user

LENpolygon commented 2 years ago

Sounds good, thanks for the explanation. I will await your signal before merging. In the mean time I'll look into making a mockup for the front-end!

xarvey commented 2 years ago

https://build-order-tool-ao-e4.vercel.app/buildOrderTable the latest version is here :) I think after adding vote and basic upload one build order per day we are good to go

For frontend, I'm mainly using https://mui.com/material-ui/getting-started/installation/ maybe just keep building stuff on top of this

xarvey commented 2 years ago

https://build-order-tool-ao-e4-h45o3aqf5-xarvey.vercel.app/

We are almost there! Getting the spam prevention upload and like count working. @LENpolygon you can play around this now. Saw your post in reddit ppl seems to enjoy it 👍

LENpolygon commented 2 years ago

Looks really nice!

I couldn't upload or vote it seems from the vercel.app, not sure why though.

Let me know at which point I can start merging the branches and I'll plan a Saturday/Sunday for it.

xarvey commented 2 years ago

oh you can only vote when you select the specific civ. I should just stop ppl from voting from the "all" page. I think you can give it a shot merging now as it might have some other random issues. You might wanna also look into this to deal with deploy https://medium.com/nerd-for-tech/lets-deploy-a-next-js-app-with-firebase-hosting-e070b3aecd04

LENpolygon commented 2 years ago

Hi Xarvey,

I've updated the main branch quite a bit and tried merging them both together in this branch:

https://github.com/LENpolygon/Build-Order-Tool-AoE4-/tree/merge-favorites

But when I try to test run it locally it keeps saying: image

Any idea how to fix this?

I tried using the deploy button within the Readme file you created, but the next.js setup kept loading and never completed.

xarvey commented 2 years ago

I think you need to install node js and run ‘npm install’ first. And then do ‘npm run dev’ . And you should start the main page from localhost:3000/

On Sat, May 14, 2022 at 5:52 AM LEN polygon @.***> wrote:

Hi Xarvey,

I've updated the main branch quite a bit and tried merging them both together in this branch:

https://github.com/LENpolygon/Build-Order-Tool-AoE4-/tree/merge-favorites

But when I try to test run it locally it keeps saying: [image: image] https://user-images.githubusercontent.com/97443666/168420678-9fad4c43-5b16-4a19-8dde-457b5bc9725a.png

Any idea how to fix this?

I tried using the deploy button within the Readme file you created, but the next.js setup kept loading and never completed.

— Reply to this email directly, view it on GitHub https://github.com/LENpolygon/Build-Order-Tool-AoE4-/pull/11#issuecomment-1126682291, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKGR36XY53SSNCTDHIFQYTVJ5ZUPANCNFSM5U2UFZIQ . You are receiving this because you authored the thread.Message ID: @.***>

LENpolygon commented 2 years ago

Ok, I got that sorted out, thanks!

Just need to read up a bit more on next.js to get everything working on my side. I expect I'll have some time for this upcoming weekend.

LENpolygon commented 2 years ago

I've done a Next.js tutorial to understand the basics and have deployed a basic Next.js app with Vercel.

Now I try to merge everything and deploy it again, but when I try locally I now get this Error after trying to push a build: image

Also, when I go to your Vercel deploy it gives me this on the buildOrderTable: image

While locally it only gives me this: image

And no real error messages there. Not even in the terminal, so I'm a bit confused here. Any suggestions?

xarvey commented 2 years ago
  1. somehow the url's string started with t=...., it should be s=....... since the upload system needs to process that string
  2. Did you pull the latest version? Seems like you are on an old version

It also worth noting that aoe world's tool here is really awesome...

https://www.reddit.com/r/aoe4/comments/uw2z17/view_your_games_build_order_and_stats_on_web_aoe4/

and there's also

https://www.rtsbuildorders.com/

Maybe we could coordinate with them so we don't have 3 versions of same thing...?

On Mon, May 23, 2022 at 4:00 PM LEN polygon @.***> wrote:

I've done a Next.js tutorial to understand the basics and have deployed a basic Next.js app with Vercel.

Now I try to merge everything and deploy it again, but when I try locally I now get this Error after trying to push a build: [image: image] https://user-images.githubusercontent.com/97443666/169896104-aad0dbda-0317-49d6-95b9-0c45322b3304.png

Also, when I go to your Vercel deploy it gives me this on the buildOrderTable: [image: image] https://user-images.githubusercontent.com/97443666/169896456-82f38e52-55db-4fe8-8a4a-e309699fb1a5.png

While locally it only gives me this: [image: image] https://user-images.githubusercontent.com/97443666/169896624-ae0944cf-00b3-4d7e-8fb9-c738a011433e.png

And no real error messages there. Not even in the terminal, so I'm a bit confused here. Any suggestions?

— Reply to this email directly, view it on GitHub https://github.com/LENpolygon/Build-Order-Tool-AoE4-/pull/11#issuecomment-1135084628, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKGR3ZJPH3XWI5QQC6NJBTVLPPWVANCNFSM5U2UFZIQ . You are receiving this because you authored the thread.Message ID: @.***>

LENpolygon commented 2 years ago
  1. somehow the url's string started with t=...., it should be s=....... since the upload system needs to process that string 2. Did you pull the latest version? Seems like you are on an old version It also worth noting that aoe world's tool here is really awesome... https://www.reddit.com/r/aoe4/comments/uw2z17/view_your_games_build_order_and_stats_on_web_aoe4/ and there's also https://www.rtsbuildorders.com/ Maybe we could coordinate with them so we don't have 3 versions of same thing...? … On Mon, May 23, 2022 at 4:00 PM LEN polygon @.> wrote: I've done a Next.js tutorial to understand the basics and have deployed a basic Next.js app with Vercel. Now I try to merge everything and deploy it again, but when I try locally I now get this Error after trying to push a build: [image: image] https://user-images.githubusercontent.com/97443666/169896104-aad0dbda-0317-49d6-95b9-0c45322b3304.png Also, when I go to your Vercel deploy it gives me this on the buildOrderTable: [image: image] https://user-images.githubusercontent.com/97443666/169896456-82f38e52-55db-4fe8-8a4a-e309699fb1a5.png While locally it only gives me this: [image: image] https://user-images.githubusercontent.com/97443666/169896624-ae0944cf-00b3-4d7e-8fb9-c738a011433e.png And no real error messages there. Not even in the terminal, so I'm a bit confused here. Any suggestions? — Reply to this email directly, view it on GitHub <#11 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKGR3ZJPH3XWI5QQC6NJBTVLPPWVANCNFSM5U2UFZIQ . You are receiving this because you authored the thread.Message ID: @.>

Yeah, I've updated the url string to s= and it worked yesterday. I had updated it to t and changed it in the code to allow for a new type of string that also contained the extra columns for villager distribution.

I wanted to merge this today however it stopped working all together. I checked your web app and noticed that it's database is also down: https://build-order-tool-ao-e4-h45o3aqf5-xarvey.vercel.app/buildOrderTable

So I've set up my own Firebase database and am trying to connect it, but I keep running into a new error every 5 minutes. Could you perhaps share the source you used to set up the database connection such that I can do it the exact same way?

I really like the functionality you made, but I'm having a very difficult time implementing it...

I saw the update on the aoeworld tool. It's very amazing yeah! But as of yet it's only statistics and not build orders. I'll reach out to the other builds order guys and see if they want to join in, but I don't see that they're doing anything opensource as of yet.

Also, the traffic is getting pretty good on this website with over 300 users per day that are just making builds. I imagine when the sharing via database goes live it can easily be tripled. I believe that the appeal of adding images and a standard format makes for easy to read builds.

LENpolygon commented 2 years ago

Hi Xarvey, I wasn't able to get the Next.js working on my machine. I don't know why, because I saw in your demo's that your code was clearly working. I've rebuild it using vanilla JS as step 1 and have uploaded that to the main branch.

I intend to make it back into modules via Node.js / Next.js at a later stage, but first I want some simple functionality. Thanks so much for introducing me to the modularity of these modern JS scripts, really like it!

xarvey commented 2 years ago

Ya sorry I’ve been very busy recently - lmk if you still want my solution in the future.

On Mon, May 30, 2022 at 16:25 LEN polygon @.***> wrote:

Hi Xarvey, I wasn't able to get the Next.js working on my machine. I don't know why, because I saw in your demo's that your code was clearly working. I've rebuild it using vanilla JS as step 1 and have uploaded that to the main branch.

I intend to make it back into modules via Node.js / Next.js at a later stage, but first I want some simple functionality. Thanks so much for introducing me to the modularity of these modern JS scripts, really like it!

— Reply to this email directly, view it on GitHub https://github.com/LENpolygon/Build-Order-Tool-AoE4-/pull/11#issuecomment-1141458686, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABKGR32L2PZE3UDTTZ7QO7LVMUP4NANCNFSM5U2UFZIQ . You are receiving this because you authored the thread.Message ID: @.***>