Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Rock Paper Scissors with TS, React, framer-motion, tailwind, zustand

#framer-motion#react#tailwind-css#vite#zustand

@Lemirq

Desktop design screenshot for the Rock, Paper, Scissors game coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

Pretty easy app. Made extremely fast with million.js.

What specific areas of your project would you like help with?

I need to learn how to edit css paths during build time. Currently I have to push it to the repo, and then grab the entire url. For example:

I want to display an image:

This URL is not going to work in production as it will point to my main site: https://lemirq.github.io/images/rock.svg and not to the subdirectory: https://lemirq.github.io/rps/images/rock.svg

Community feedback

P
markus 1,430

@markuslewin

Posted

Hey!

Vite exposes the base path as import.meta.env.BASE_URL, so you can use that variable to build the URLs if you need to, e.g.:

const getImg = () => {
  const base = import.meta.env.BASE_URL;
  return type === "r"
    ? `${base}images/icon-rock.svg`
    : type === "s"
    ? `${base}images/icon-scissors.svg`
    : `${base}images/icon-paper.svg`;
};

You can also import the assets and let Vite optimize them:

import p from "./icon-paper.svg";
import r from "./icon-rock.svg";
import s from "./icon-scissors.svg";

const getImg = () => {
  return type === "r" ? r : type === "s" ? s : p;
};

The CSS paths should work with the --base flag:

<motion.div className="bg-[url('/images/bg-triangle.svg')]" />
0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord