Submitted 8 months ago

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

Vihaan Sharma•250

@Lemirq

Preview site View code

This is a solution for...Rock, Paper, Scissors game

HTML
CSS
JS

4advanced

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

markus•2,250

@markuslewinPosted 8 months ago

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')]" />

Please log in to post a comment

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