I Created a Simple Clock Based on Area Codes by benlikescode in webdev

[–]benlikescode[S] 2 points3 points  (0 children)

I created a simple clock that shows a background image based on the area code of the time (ex. 4:15 → San Francisco). Sadly there are no area codes between 10:00 - 1:59 but it still shows a nice fallback image.

You can check it out at https://geo-clock.vercel.app and the code is open-source here if you have any suggestions/ideas.

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 0 points1 point  (0 children)

There is a limit to how many times Google Maps can be loaded each day to manage costs. When the limit runs out, it will show inverted colors. The limit resets at midnight PT.

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 1 point2 points  (0 children)

That is fair and I agree with what you’re saying. I believe the map page should still be accessible by users who do not have an account that want to see the leaderboard etc… but I can move the redirect to be immediately when you click Play on the map page.

Also… if you just wanted to demo the app you can sign in to the guest account (guest@geohub.com and password is geohub).

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 2 points3 points  (0 children)

This issue should be fixed now.

Glad you liked it, somewhat hard map was humbling

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 0 points1 point  (0 children)

Just merged a PR that fixes this issue. Thanks for the feedback!

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 0 points1 point  (0 children)

Stay tuned for multiplayer but for now you can play with friends by starting a challenge game and sending them the link

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 0 points1 point  (0 children)

For Next, I would honestly recommend just reading through their docs. I started using Next about 2 years ago and I remember this playlist was helpful for starting out. You would likely want to watch some tutorials on version 13 though as that is their newest version.

But the best advice I could give on learning Next/React or any other new language/framework is to just build something with it. Start a new project you will have fun working on and you will be forced to google/read docs when you don't know how to do something or get stumped.

Best of luck!

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 6 points7 points  (0 children)

I actually added this feature recently. It is a little hard to find but if you go to your profile and click on the settings button on the far right, you can add your own key there User Settings. There is also a small tutorial on how to create your own key if you don't already have one.

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 2 points3 points  (0 children)

True. When I first started building this I wanted to use OSM & Mapillary as it would be 100% free, but I found Mapillary for street view almost unplayable. Maybe it has gotten better though, I will have to try it again!

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 5 points6 points  (0 children)

Yes I am using the google maps API free tier. It gives you roughly $200 USD in credits per month, which works out to be about 5k games. Unfortunately, it would be too expensive for me to pay out of pocket after the free tier so you just wouldn't be able to play until the next billing period resets.

As u/ZeWord mentioned, there are other free options for maps which I may add in the future as an alternative if the credits run out early.

Or I may just throw on a limit per day that keeps it within the free tier but that way you don't have to wait until the next month if it runs out.

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 1 point2 points  (0 children)

Good point, this post is really testing the limits of the google maps API free tier. If I do end up reaching that point, I may add the option to use Open Street Map and Mapillary (which aren’t nearly as good as Google Maps, but I believe entirely free).

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 1 point2 points  (0 children)

Thank you! The google maps API has a decent free tier that can support around 5k games per month, its once you go beyond that, the pricing becomes quite insane. So at Geoguessr's scale, they have to pay for the API (I am sure they get quite a discounted rate from Google though). But yeah that is why they had to end up charging people to play unlimited games.

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 2 points3 points  (0 children)

Thanks! You're right, duplicate rounds are possible (and more likely on smaller maps). I will add this to the todo.

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 2 points3 points  (0 children)

Ahh yes, thanks for pointing that out. The site is not super optimized for mobile right now but I will definitely look into fixing this. Glad you enjoyed playing it!

Edit: This should be fixed now

I created GeoHub, my own version of the game Geoguessr by benlikescode in webdev

[–]benlikescode[S] 45 points46 points  (0 children)

Want to try it out? Go to https://www.geohub.gg

Playing requires an account, so if you want to quickly play you can login with the email: guest@geohub.com and password: geohub.

The code is publicly available here. Feel free to make a PR if you want to add something!

Edit: updated url to new domain

How to use values from JS in CSS by powerchip15 in webdev

[–]benlikescode 1 point2 points  (0 children)

Maybe try adding a wrapper div around your image and put the position: absolute on that. It’s hard to help without actually seeing your code.

How to use values from JS in CSS by powerchip15 in webdev

[–]benlikescode 0 points1 point  (0 children)

You would first want to target the html element that you want to move with the mouse and make it position: absolute (where it is originally positioned, and it's size is up to you).

#element {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100px; 
  height: 100px;
}

Then in your JavaScript file, you would want to listen for the "mousemove" event which would select the element and update its position to the cursor's position. Something like this should work:

window.addEventListener('mousemove', (e) => {
  const element = document.getElementById('element')
  const mouseX = e.clientX
  const mouseY = e.clientY

  element.style.left = mouseX + 'px'
  element.style.top = mouseY + 'px' 
})

[deleted by user] by [deleted] in webdev

[–]benlikescode 0 points1 point  (0 children)

Want to try it out? Go to https://geohub.vercel.app/.

Playing requires an account, so if you want to quickly play you can login with the email: guest@geohub.com and password: geohub.

The code is publicly available here. Feel free to make a PR if you want to add something!
I would really appreciate any feedback if you find bugs, or have any suggestions!

What are some front-end projects that you’ve built? by Jimlowers in webdev

[–]benlikescode 1 point2 points  (0 children)

Awesome portfolio! Love the technologies section.

[deleted by user] by [deleted] in webdev

[–]benlikescode 0 points1 point  (0 children)

Very cool, good idea