From 90ec34774a626bde67bcaf711e35beab2f54c4dd Mon Sep 17 00:00:00 2001 From: "axe.l.r" Date: Tue, 20 Feb 2024 22:17:21 +0100 Subject: [PATCH 1/2] feat(endscreen): linked cta of endscreen and minor change on others screens --- provider/ImageContext.js | 10 +-- screens/Endscreen.js | 49 +++++++------- screens/Gamescreen.js | 142 ++++++++++++++++++++++----------------- screens/Lobbyscreen.js | 10 ++- 4 files changed, 118 insertions(+), 93 deletions(-) diff --git a/provider/ImageContext.js b/provider/ImageContext.js index 8e36bfd..588a917 100644 --- a/provider/ImageContext.js +++ b/provider/ImageContext.js @@ -2,10 +2,12 @@ import React, { createContext, useContext, useMemo } from "react"; const ImageContext = createContext(); -export const ImageProvider = ({ children, backgroundImageSource }) => { /* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling - const contextValue = useMemo(() => ({ backgroundImageSource }), [ - backgroundImageSource, - ]); +export const ImageProvider = ({ children, backgroundImageSource }) => { + /* eslint-disable react/prop-types */ // TODO: upgrade to latest eslint tooling + const contextValue = useMemo( + () => ({ backgroundImageSource }), + [backgroundImageSource], + ); console.log("context fetched"); return ( diff --git a/screens/Endscreen.js b/screens/Endscreen.js index 4b76cea..0b99a09 100644 --- a/screens/Endscreen.js +++ b/screens/Endscreen.js @@ -2,19 +2,20 @@ import { View, Text, ImageBackground, TouchableOpacity } from "react-native"; import React from "react"; import { SafeAreaView } from "react-native-safe-area-context"; import { StatusBar } from "expo-status-bar"; -import { HomeIcon } from "react-native-heroicons/solid" +import { HomeIcon } from "react-native-heroicons/solid"; import { useNavigation } from "@react-navigation/native"; -import { AsyncStorage } from "@react-native-async-storage/async-storage"; import { useImage } from "../provider/ImageContext"; - export default function Endscreen() { - const {backgroundImageSource} = useImage(); - const navigation = useNavigation(); - const goToHomescreen = () => { - navigation.navigate("Home"); - AsyncStorage.clear(); - }; + const { backgroundImageSource } = useImage(); + const navigation = useNavigation(); + const goToHomescreen = () => { + navigation.navigate("Home"); + }; + + const restartGame = () => { + navigation.navigate("Lobby"); + }; return ( @@ -25,37 +26,39 @@ export default function Endscreen() { className="absolute h-full w-full" /> - + {/* Header */} - - - - Classement + + + + + Classement + {/* Ranking Table */} - + + Merci d'avoir participé à la beta. Faites nous part de vos retour + via le lien ci-dessous : + {/* Button */} Recommencer - - - Accueil - - diff --git a/screens/Gamescreen.js b/screens/Gamescreen.js index 7ed0cf0..3f56a12 100644 --- a/screens/Gamescreen.js +++ b/screens/Gamescreen.js @@ -1,30 +1,33 @@ -import { View, Text, FlatList, TouchableOpacity, ImageBackground } from "react-native"; +import { + View, + Text, + FlatList, + TouchableOpacity, + ImageBackground, +} from "react-native"; import React, { useEffect, useState } from "react"; import { SafeAreaView } from "react-native-safe-area-context"; import { StatusBar } from "expo-status-bar"; import AsyncStorage from "@react-native-async-storage/async-storage"; -import { HomeIcon } from "react-native-heroicons/solid" +import { HomeIcon } from "react-native-heroicons/solid"; import { useNavigation } from "@react-navigation/native"; import * as Progress from "react-native-progress"; import { useImage } from "../provider/ImageContext"; - export default function Gamescreen() { const [questions, setQuestions] = useState([]); const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0); const [players, setPlayers] = useState([]); const port = 3000; - const {backgroundImageSource} = useImage(); + const { backgroundImageSource } = useImage(); useEffect(() => { fetchQuestions(); fetchPlayers(); }, []); // Fetch questions and players initially - - const fetchQuestions = () => { - fetch(`http://192.168.1.99:${port}/api/questions`) + fetch(`http://192.168.1.66:${port}/api/questions`) .then((response) => response.json()) .then((data) => { const shuffledQuestions = shuffledArray(data); @@ -73,33 +76,36 @@ export default function Gamescreen() { setCurrentQuestionIndex((prevIndex) => prevIndex + 1); } }; - - const renderQuestion = ({ item }) => { if (questions.length === 0 || players.length === 0) { return null; // or loading indicator } - + console.log("rendering questions start"); - + const currentPlayer = players[currentQuestionIndex % players.length]; - + if (!item) { // No more questions, navigate to Endscreen navigation.navigate("End"); return null; } - + return ( - Thème : {item.Theme} - {currentPlayer.name} - {item.Questions} + + Thème : {item.Theme} + + + {currentPlayer.name} + + + {item.Questions} + ); }; - const navigation = useNavigation(); const goToHomescreen = () => { @@ -109,53 +115,69 @@ export default function Gamescreen() { return ( - - - - {/* Header */} - - - - - DRINKUP - - {/* ProgressBar */} - - On en est où ? - - - {/* Game component */} - - {questions.length > 0 ? ( - item._id.toString()} - renderItem={renderQuestion} - /> - ) : ( - Loading questions... - )} - - {/* Button */} - - + + + {/* Header */} + + + + + + DRINKUP + + + {/* ProgressBar */} + - - TOUR SUIVANT + + On en est où ? - - - + + + {/* Game component */} + + {questions.length > 0 ? ( + item._id.toString()} + renderItem={renderQuestion} + /> + ) : ( + Loading questions... + )} + + {/* Button */} + + + + TOUR SUIVANT + + + + ); } diff --git a/screens/Lobbyscreen.js b/screens/Lobbyscreen.js index e09da21..c1d6de9 100644 --- a/screens/Lobbyscreen.js +++ b/screens/Lobbyscreen.js @@ -13,15 +13,12 @@ import { useNavigation } from "@react-navigation/native"; import AsyncStorage from "@react-native-async-storage/async-storage"; import { useImage } from "../provider/ImageContext"; - export default function Lobbyscreen() { const [playerName, setPlayerName] = useState(""); const [players, setPlayers] = useState([]); const [hasCleared, setHasCleared] = useState(false); const [hasMinPlayer, setHasMinPlayer] = useState(false); - const {backgroundImageSource} = useImage(); - - + const { backgroundImageSource } = useImage(); useEffect(() => { loadPlayers(); @@ -43,7 +40,6 @@ export default function Lobbyscreen() { }); } }, []); - useEffect(() => { setHasMinPlayer(players.length >= 2); @@ -121,7 +117,9 @@ export default function Lobbyscreen() { keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => ( - {item.name} + + {item.name} + )} /> From 5500d7f54ce4606d16fa035e71e061db798d4868 Mon Sep 17 00:00:00 2001 From: "axe.l.r" Date: Wed, 21 Feb 2024 02:46:13 +0100 Subject: [PATCH 2/2] (#10) feat(endscreen): change endscreen name and add icon --- screens/Endscreen.js | 6 ++++-- screens/Gamescreen.js | 8 ++++++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/screens/Endscreen.js b/screens/Endscreen.js index 0b99a09..a18e5ea 100644 --- a/screens/Endscreen.js +++ b/screens/Endscreen.js @@ -2,10 +2,11 @@ import { View, Text, ImageBackground, TouchableOpacity } from "react-native"; import React from "react"; import { SafeAreaView } from "react-native-safe-area-context"; import { StatusBar } from "expo-status-bar"; -import { HomeIcon } from "react-native-heroicons/solid"; +import { HomeIcon, ArrowPathIcon } from "react-native-heroicons/solid"; import { useNavigation } from "@react-navigation/native"; import { useImage } from "../provider/ImageContext"; + export default function Endscreen() { const { backgroundImageSource } = useImage(); const navigation = useNavigation(); @@ -36,7 +37,7 @@ export default function Endscreen() { - Classement + Fin de Partie {/* Ranking Table */} @@ -57,6 +58,7 @@ export default function Endscreen() { > Recommencer + diff --git a/screens/Gamescreen.js b/screens/Gamescreen.js index 3f56a12..52a67d5 100644 --- a/screens/Gamescreen.js +++ b/screens/Gamescreen.js @@ -6,6 +6,7 @@ import { ImageBackground, } from "react-native"; import React, { useEffect, useState } from "react"; +import { ActivityIndicator } from "react-native" import { SafeAreaView } from "react-native-safe-area-context"; import { StatusBar } from "expo-status-bar"; import AsyncStorage from "@react-native-async-storage/async-storage"; @@ -140,7 +141,7 @@ export default function Gamescreen() { style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }} className="flex justify-center items-center m-4 p-4 rounded-lg" > - + On en est où ? ) : ( - Loading questions... + <> + + Loading questions... + )} {/* Button */}