Update README and prepare app for production build

Author: Minimuino

README.md

@@ -1,20 +1,31 @@
 # GaliGuessr
 
-React geography quiz 🌍 Originally designed for [Galicia](https://en.wikipedia.org/wiki/Galicia_(Spain)) but customizable for any region in the world. Try it for yourself at ...
+React geography quiz 🌍 Originally designed for [Galicia](https://en.wikipedia.org/wiki/Galicia_(Spain)) but customizable for any region in the world. Try it for yourself at https://minimuino.github.io/galiguessr/
 
 ## Features
 
-- Four game modes: Point & Click, Write Name, Guess Location and City Map.
+- Four game modes: Point & Click, Write Name, Guess Location and Guess the City.
 - Load any valid geojson file and create a custom map quiz.
 - Responsive design.
 
 ## Usage
 
-1. Fork this repo.
+Go to [the custom quiz page](https://minimuino.github.io/galiguessr/custom-quiz), choose a valid geojson file from your local storage, select game mode and hit play button. The geojson file must meet two requirements:
+- It is a valid geojson: https://datatracker.ietf.org/doc/html/rfc7946
+- Every Feature item has a `properties` field that includes the `name` property with some string value.
+
+There are several websites you can use to get nice geospatial data:
+- https://overpass-turbo.eu/
+- https://www.naturalearthdata.com/
+- https://github.com/martynafford/natural-earth-geojson
+- https://gadm.org/
+
+You can also make your own geography quiz by following these steps:
+1. Fork or copy this repo.
 2. Choose a name and logo for your project and set it in metadata properties.
 3. Replace all files in `/data/geojson` with your own. Make sure each Feature item has an `id` field and a `properties` field that includes the `name` property.
 4. Edit `/src/assets/settings.json` to reference each one of your geojson files.
-5. Set your language to 'en' in `/src/i18n.ts`, or add new i18n files if you want so.
+5. Set your language to 'en' in `/src/i18n.ts`, or add new i18n files if you want to.
 6. Edit `/src/components/CreditsModal.tsx` to add your own copyright notice.
 7. Deploy and enjoy!
 

src/App.tsx

@@ -51,7 +51,7 @@ export default function Home() {
       <main className="flex flex-col gap-16 row-start-2 items-center">
         <div className="flex flex-col gap-6">
           <img
-            src="/logo.svg"
+            src="./logo.svg"
             alt="Galiguessr logo"
             width={450}
             height={76}
@@ -90,7 +90,7 @@ export default function Home() {
                 onClick={onClickBack}
               >
                 <img
-                  src="/back.svg"
+                  src="./back.svg"
                   alt="Back"
                   width={14}
                   height={14}
@@ -147,7 +147,7 @@ export default function Home() {
         >
           <img
             aria-hidden
-            src="/github-mark.svg"
+            src="./github-mark.svg"
             alt="Github icon"
             width={16}
             height={16}
@@ -162,7 +162,7 @@ export default function Home() {
         >
           <img
             aria-hidden
-            src="/globe.svg"
+            src="./globe.svg"
             alt="Error icon"
             width={16}
             height={16}
@@ -175,7 +175,7 @@ export default function Home() {
         >
           <img
             aria-hidden
-            src="/file.svg"
+            src="./file.svg"
             alt="Credits icon"
             width={16}
             height={16}

src/assets/settings.json

@@ -5,6 +5,6 @@
     {"name": "Vilas e Cidades", "data": "vilas-cidades.json", "availableModes": ["point-and-click", "guess-location", "write-name", "city-map"]},
     {"name": "Ríos", "data": "rios.json", "availableModes": ["point-and-click", "guess-location", "write-name"]},
     {"name": "Natureza", "data": "natureza.json", "availableModes": ["point-and-click", "guess-location", "write-name"]},
-    {"name": "100 ao azar", "data": "random", "availableModes": ["point-and-click","guess-location"]}
+    {"name": "100 ao azar", "data": "random", "availableModes": ["guess-location"]}
   ]
 }

src/components/CreditsModal.tsx

@@ -22,7 +22,7 @@ export default function CreditsModal({ ref }: Props) {
     >
       <div className="rounded-xl overflow-hidden bg-white p-8 flex flex-col gap-8 items-left">
         <img
-          src="/logo.svg"
+          src="./logo.svg"
           alt="Galiguessr logo"
           width={280}
           height={56}

src/components/GameOverModal.tsx

@@ -65,7 +65,7 @@ export default function GameOverModal({ score, totalDistanceKm, datasetName, mod
     >
       <div className="rounded-xl overflow-hidden bg-white p-8 flex flex-col gap-8 items-center">
         <img
-          src="/logo.svg"
+          src="./logo.svg"
           alt="Galiguessr logo"
           width={280}
           height={56}

src/components/TextInput.tsx

@@ -38,7 +38,7 @@ export default function TextInput({ onEnterText }: Props) {
           type="submit"
         >
           <img
-            src="/send.svg"
+            src="./send.svg"
             alt="Submit icon"
             width={28}
             height={28}

src/main.tsx

@@ -29,8 +29,10 @@ const router = createBrowserRouter([
   {
     path: "/custom-quiz",
     element: <SelectFile />,
-  },
-]);
+  }],
+  {
+    basename: import.meta.env.BASE_URL
+  });
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

src/pages/Play.tsx

@@ -131,7 +131,7 @@ export default function Play() {
       >
         <img
           className="-translate-x-[2px]"
-          src="/back.svg"
+          src="./back.svg"
           alt="Back"
           width={16}
           height={16}

vite.config.ts

@@ -11,4 +11,5 @@ import { defineConfig } from "vite";
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  base: "/galiguessr/",
 });