Skip to content

Commit

Permalink
feat(endscreen): linked cta of endscreen and minor change on others s…
Browse files Browse the repository at this point in the history 
…creens
  • Loading branch information
@arenault-pass
arenault-pass committed Feb 20, 2024
1 parent 6be7649 commit 5bbdd4b
Show file tree
Hide file tree
Showing 4 changed files with 118 additions and 93 deletions.
10 changes: 6 additions & 4 deletions provider/ImageContext.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<ImageContext.Provider value={contextValue}>
Expand Down
49 changes: 26 additions & 23 deletions screens/Endscreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<View className="flex-1">
Expand All @@ -25,37 +26,39 @@ export default function Endscreen() {
className="absolute h-full w-full"
/>
<SafeAreaView className="flex-1">
<StatusBar style="light"/>
<StatusBar style="light" />
{/* Header */}
<View className="flex-row m-4 pb-10">
<TouchableOpacity className="absolute left-8" onPress={goToHomescreen}>
<HomeIcon color="white" size="30" className=""/>
</TouchableOpacity>
<Text className="text-white absolute left-28 text-2xl font-black">Classement</Text>
<TouchableOpacity
className="absolute left-8"
onPress={goToHomescreen}
>
<HomeIcon color="white" size="30" className="" />
</TouchableOpacity>
<Text className="text-white absolute left-28 text-2xl font-black">
Classement
</Text>
</View>
{/* Ranking Table */}
<View
style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
className="flex-1 justify-center w-78 m-10 mx-4 p-10 rounded-lg"
>

<Text className=" text-white font-semibold text-center text-sm">
Merci d'avoir participé à la beta. Faites nous part de vos retour
via le lien ci-dessous :
</Text>
</View>
{/* Button */}
<View className="flex-1 items-center ">
<TouchableOpacity
className=" bg-white w-36 px-4 py-4 border-solid rounded-lg "
className=" bg-white absolute top-0 w-40 px-4 py-4 border-solid rounded-lg mt-4 justify-center align-items-center"
onPress={restartGame}
>
<Text className="text-cyan-900 text-sm text-center font-bold">
Recommencer
</Text>
</TouchableOpacity>
<TouchableOpacity
className=" bg-white w-36 px-4 py-4 border-solid rounded-lg mt-4 "
>
<Text className="text-cyan-900 text-sm text-center font-bold">
Accueil
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
Expand Down
142 changes: 82 additions & 60 deletions screens/Gamescreen.js
View file
Original file line number Diff line number Diff line change
@@ -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);
Expand Down Expand Up @@ -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 (
<View className="items-center">
<Text className="text-black font-semibold text-center text-sm">Thème : {item.Theme}</Text>
<Text className="text-3xl text-white font-black p-4">{currentPlayer.name}</Text>
<Text className="text-white font-semibold text-center text-sm">{item.Questions}</Text>
<Text className=" text-gray-800 italic font-semibold text-center text-sm">
Thème : {item.Theme}
</Text>
<Text className="text-3xl text-white font-black p-4">
{currentPlayer.name}
</Text>
<Text className="text-white font-semibold text-center text-sm">
{item.Questions}
</Text>
</View>
);
};


const navigation = useNavigation();
const goToHomescreen = () => {
Expand All @@ -109,53 +115,69 @@ export default function Gamescreen() {

return (
<View className="flex-1">
<ImageBackground blurRadius={70}
<ImageBackground
blurRadius={70}
source={backgroundImageSource}
resizeMode="cover"
className="absolute h-full w-full"/>
<SafeAreaView className="flex-1 ">
<StatusBar style="light" />
{/* Header */}
<View className="flex-row m-4 pb-10">
<TouchableOpacity className="absolute left-8" onPress={goToHomescreen}>
<HomeIcon color="white" size="30" className=""/>
</TouchableOpacity>
<Text className="text-white absolute right-32 text-2xl font-black">DRINKUP</Text>
</View>
{/* ProgressBar */}
<View style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }} className="flex justify-center items-center m-4 p-4 rounded-lg">
<Text className=" text-white font-black text-lg text-dark-400 m-2">On en est où ?</Text>
<Progress.Bar
progress={(currentQuestionIndex + 1) / questions.length}
width={300}
height={10}
color="#62C0CC"/>
</View>
{/* Game component */}
<View style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }} className=" flex m-10 p-10 mx-4 rounded-lg items-center">
{questions.length > 0 ? (
<FlatList
horizontal={false}
data={[questions[currentQuestionIndex]]}
keyExtractor={(item) => item._id.toString()}
renderItem={renderQuestion}
/>
) : (
<Text className=" text-white">Loading questions...</Text>
)}
</View>
{/* Button */}
<View className="flex justify-center items-center ">
<TouchableOpacity
onPress={handleNextRound}
className=" bg-white w-40 px-4 py-4 border-solid rounded-lg mt-4 justify-center align-items-center"
className="absolute h-full w-full"
/>
<SafeAreaView className="flex-1 ">
<StatusBar style="light" />
{/* Header */}
<View className="flex-row m-4 pb-10">
<TouchableOpacity
className="absolute left-8"
onPress={goToHomescreen}
>
<HomeIcon color="white" size="30" className="" />
</TouchableOpacity>
<Text className="text-white absolute right-32 text-2xl font-black">
DRINKUP
</Text>
</View>
{/* ProgressBar */}
<View
style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
className="flex justify-center items-center m-4 p-4 rounded-lg"
>
<Text className="text-cyan-900 text-sm text-center font-bold">
TOUR SUIVANT
<Text className=" text-white font-black text-lg text-dark-400 m-2">
On en est où ?
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
<Progress.Bar
progress={(currentQuestionIndex + 1) / questions.length}
width={300}
height={10}
color="#62C0CC"
/>
</View>
{/* Game component */}
<View
style={{ backgroundColor: "rgba(255, 255, 255, 0.1)" }}
className=" flex m-10 p-10 mx-4 rounded-lg items-center"
>
{questions.length > 0 ? (
<FlatList
horizontal={false}
data={[questions[currentQuestionIndex]]}
keyExtractor={(item) => item._id.toString()}
renderItem={renderQuestion}
/>
) : (
<Text className=" text-white">Loading questions...</Text>
)}
</View>
{/* Button */}
<View className="flex justify-center items-center ">
<TouchableOpacity
onPress={handleNextRound}
className=" bg-white w-40 px-4 py-4 border-solid rounded-lg mt-4 justify-center align-items-center"
>
<Text className="text-cyan-900 text-sm text-center font-bold">
TOUR SUIVANT
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
);
}
10 changes: 4 additions & 6 deletions screens/Lobbyscreen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -43,7 +40,6 @@ export default function Lobbyscreen() {
});
}
}, []);


useEffect(() => {
setHasMinPlayer(players.length >= 2);
Expand Down Expand Up @@ -121,7 +117,9 @@ export default function Lobbyscreen() {
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<View className=" bg-white justify-center items-center p-4 rounded-lg my-2">
<Text className=" text-cyan-900 font-semibold">{item.name}</Text>
<Text className=" text-cyan-900 font-semibold">
{item.name}
</Text>
</View>
)}
/>
Expand Down

0 comments on commit 5bbdd4b

Please sign in to comment.