From 3e831ad785deaf70ac550f095dce121fec73e7e5 Mon Sep 17 00:00:00 2001 From: Kasper Bak <102696643+SpookyKasper@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:54:51 +0200 Subject: [PATCH] Adapt api-url to environment --- .env | 1 + .env.production | 1 + src/App.jsx | 7 +++-- .../AnswerFeedback/AnswerFeedback.css | 2 +- .../CharacterSelection/CharacterSelection.jsx | 9 +++--- .../TargetingCircle/TargetingCircle.css | 1 + src/components/EndGameModal/EndGameModal.jsx | 30 +++++++++---------- src/components/EndGameModal/Podium/Podium.jsx | 5 +++- .../TargetingCircle/TargetingCircle.css | 0 src/config.js | 3 ++ src/index.css | 4 ++- 11 files changed, 37 insertions(+), 26 deletions(-) create mode 100644 .env create mode 100644 .env.production delete mode 100644 src/components/TargetingCircle/TargetingCircle.css create mode 100644 src/config.js diff --git a/.env b/.env new file mode 100644 index 0000000..5317fce --- /dev/null +++ b/.env @@ -0,0 +1 @@ +VITE_API_URL=http://localhost:3000 diff --git a/.env.production b/.env.production new file mode 100644 index 0000000..9b397ca --- /dev/null +++ b/.env.production @@ -0,0 +1 @@ +VITE_API_URL=https://mysite-o46z.onrender.com diff --git a/src/App.jsx b/src/App.jsx index fa5fec8..aa63fec 100644 --- a/src/App.jsx +++ b/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} /> { 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; diff --git a/src/components/CharacterSelection/TargetingCircle/TargetingCircle.css b/src/components/CharacterSelection/TargetingCircle/TargetingCircle.css index 817d25b..e16c0b5 100644 --- a/src/components/CharacterSelection/TargetingCircle/TargetingCircle.css +++ b/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); } diff --git a/src/components/EndGameModal/EndGameModal.jsx b/src/components/EndGameModal/EndGameModal.jsx index 22875cc..6561f37 100644 --- a/src/components/EndGameModal/EndGameModal.jsx +++ b/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); }; diff --git a/src/components/EndGameModal/Podium/Podium.jsx b/src/components/EndGameModal/Podium/Podium.jsx index c7ba392..8a420f4 100644 --- a/src/components/EndGameModal/Podium/Podium.jsx +++ b/src/components/EndGameModal/Podium/Podium.jsx @@ -6,7 +6,10 @@ const Podium = ({ topScores }) => { const ScoreList = topScores.map((topScore, index) => { return ( -
+
{index + 1}. {topScore.name} {topScore.time_score}s diff --git a/src/components/TargetingCircle/TargetingCircle.css b/src/components/TargetingCircle/TargetingCircle.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/config.js b/src/config.js new file mode 100644 index 0000000..3145248 --- /dev/null +++ b/src/config.js @@ -0,0 +1,3 @@ +const apiUrl = import.meta.env.VITE_API_URL; + +export default apiUrl; diff --git a/src/index.css b/src/index.css index d4c5b18..dc370cf 100644 --- a/src/index.css +++ b/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 {