Adapt api-url to environment

.env

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:3000

.env.production

@@ -0,0 +1 @@
+VITE_API_URL=https://mysite-o46z.onrender.com

src/App.jsx

@@ -5,6 +5,7 @@ import CharacterSelection from "./components/CharacterSelection/CharacterSelecti
 import EndGameModal from "./components/EndGameModal/EndGameModal";
 import AnswerFeedback from "./components/AnswerFeedback/AnswerFeedback";
 import MarkerList from "./components/MarkerList/MarkerList";
+import apiUrl from "./config";
 
 function App() {
   const [gameStarted, setGameStarted] = useState(false);
@@ -16,13 +17,12 @@ function App() {
   const [gameOver, setGameOver] = useState(false);
   const [currentPlayerScoreId, setCurrentPlayerScoreId] = useState(null);
 
-  // Update The Score Record with the name and score
-
   // Create the record (to start tracking time) when page loads
   useEffect(() => {
     const createScore = async () => {
       const scoreData = { name: "Player1" };
-      const response = await fetch("https://mysite-o46z.onrender.com/scores", {
+      const response = await fetch(`${apiUrl}/scores`, {
+        mode: "cors",
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -70,6 +70,7 @@ function App() {
         placeMarker={placeMarker}
         markersLength={markers.length}
         setGameOver={setGameOver}
+        apiUrl={apiUrl}
       />
       <EndGameModal
         currentPlayerScoreId={currentPlayerScoreId}

src/components/AnswerFeedback/AnswerFeedback.css

@@ -1,6 +1,6 @@
 .answer-box {
   padding: 30px;
-  font-size: 124px;
+  font-size: 12vh;
   position: fixed;
   left: 50px;
   top: 50px;

src/components/CharacterSelection/CharacterSelection.jsx

@@ -3,6 +3,7 @@ import _ from "lodash";
 import { useState, useEffect } from "react";
 import TargetingCircle from "./TargetingCircle/TargetingCircle";
 import CharacterList from "./CharacterList/CharacterList";
+import apiUrl from "../../config";
 
 const CharacterSelection = ({
   clickCoordinates,
@@ -19,9 +20,9 @@ const CharacterSelection = ({
   // Get Characters from Backend
   useEffect(() => {
     const getCharacters = async () => {
-      const response = await fetch(
-        "https://mysite-o46z.onrender.com/personages"
-      );
+      const response = await fetch(`${apiUrl}/personages`, {
+        mode: "cors",
+      });
       const charactersObjects = await response.json();
       setCharacters(charactersObjects);
     };
@@ -35,7 +36,7 @@ const CharacterSelection = ({
       setGameOver(true);
   }, [setGameOver, markersLength, characters.length]);
 
-  const circleDiameter = 40;
+  const circleDiameter = 50;
   const circleRadius = circleDiameter / 2;
   const xPos = clickCoordinates.x - circleRadius - 2;
   const yPos = clickCoordinates.y - circleRadius - 2;

src/components/CharacterSelection/TargetingCircle/TargetingCircle.css

@@ -1,4 +1,5 @@
 .targeting-circle {
   border: 3px solid white;
   border-radius: 50%;
+  box-shadow: 0 0 40px 40px rgba(255, 255, 255, 0.3);
 }

src/components/EndGameModal/EndGameModal.jsx

@@ -3,6 +3,7 @@ import CustomInput from "./CustomInput/CustomInput";
 import "./EndGameModal.css";
 import Podium from "./Podium/Podium";
 import { differenceInSeconds } from "date-fns";
+import apiUrl from "../../config";
 
 const EndGameModal = ({ currentPlayerScoreId, gameOver }) => {
   const [name, setName] = useState(null);
@@ -14,9 +15,9 @@ const EndGameModal = ({ currentPlayerScoreId, gameOver }) => {
   useEffect(() => {
     if (!gameOver) return;
     const getScore = async () => {
-      const response = await fetch(
-        `https://mysite-o46z.onrender.com/scores/${currentPlayerScoreId}`
-      );
+      const response = await fetch(`${apiUrl}/scores/${currentPlayerScoreId}`, {
+        mode: "cors",
+      });
       const result = await response.json();
       const startTime = new Date(result.created_at);
       const now = new Date();
@@ -29,17 +30,14 @@ const EndGameModal = ({ currentPlayerScoreId, gameOver }) => {
   useEffect(() => {
     if (!name) return;
     const updatePlayerName = async () => {
-      const response = await fetch(
-        `https://mysite-o46z.onrender.com/scores/${currentPlayerScoreId}`,
-        {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
+      const response = await fetch(`${apiUrl}/scores/${currentPlayerScoreId}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+        },
 
-          body: JSON.stringify({ name, time_score: timeScore }),
-        }
-      );
+        body: JSON.stringify({ name, time_score: timeScore }),
+      });
       const result = await response.json();
       setDidScoresUpdate(true);
     };
@@ -49,9 +47,9 @@ const EndGameModal = ({ currentPlayerScoreId, gameOver }) => {
   // Get Top Scores
   useEffect(() => {
     const getTopScores = async () => {
-      const response = await fetch(
-        "https://mysite-o46z.onrender.com/scores_top"
-      );
+      const response = await fetch(`${apiUrl}/scores_top`, {
+        mode: "cors",
+      });
       const result = await response.json();
       setTopScores(result);
     };

src/components/EndGameModal/Podium/Podium.jsx

@@ -6,7 +6,10 @@ const Podium = ({ topScores }) => {
 
   const ScoreList = topScores.map((topScore, index) => {
     return (
-      <div key={topScore.id} className={`score-row ${colors[index]} `}>
+      <div
+        key={topScore.id}
+        className={`score-row ${colors[index] || "simple"} `}
+      >
         <span>{index + 1}.</span>
         <span className="name">{topScore.name}</span>
         <span className="timeScore">{topScore.time_score}s</span>

src/config.js

@@ -0,0 +1,3 @@
+const apiUrl = import.meta.env.VITE_API_URL;
+
+export default apiUrl;

src/index.css

@@ -47,7 +47,9 @@ button {
   transition: border-color 0.25s;
 }
 button:hover {
-  border-color: #646cff;
+  /* border-color: #646cff; */
+  background-color: #213547;
+  color: white;
 }
 button:focus,
 button:focus-visible {