Skip to content

Commit e345ec8

Browse files
author
Konstantinos K
committed
added history
1 parent e41ee17 commit e345ec8

7 files changed

+4232
-8673
lines changed

‎App.js

+174-112
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,170 @@
1-
import React, { useState, useRef } from 'react';
1+
import React, { useState, useRef, useEffect } from 'react';
22
import {
33
SafeAreaView,
44
StyleSheet,
55
View,
66
Text,
7+
Modal,
8+
FlatList,
9+
TouchableOpacity,
10+
Pressable,
11+
ScrollView
712
} from 'react-native';
813

914
import CustomButton from './src/CustomButton';
1015
import CustomFlatList from './src/FlatList';
16+
import { loadDatabase, deleteDatabase, saveDatabase } from './src/Database';
17+
import { newGame, newRound, addScores, removeRound } from './src/NewGame';
1118

1219
const App: () => React$Node = () => {
1320

14-
let flatList = useRef(null);
15-
16-
// Teams' round score
17-
const [scoreA, setScoreA] = useState(0);
18-
const [scoreB, setScoreB] = useState(0);
19-
// Array to store every point of each team.
20-
// Template: [(points of teamA tricks), (points of teamA calls <tichu/grand tichu>), (points of teamB tricks), (points of teamB calls <tichu/grand tichu>)]
21-
const [allScores, setAllScores] = useState([0, 0, 0, 0]);
22-
// Teams' score list (FUTURE USE: add to database)
23-
const [scoreList, setScoreList] = useState([{id: 0, teamA: 0, teamB: 0}]);
24-
// Total games currently played
25-
const [totalGames, setTotalGames] = useState(1);
2621
const [buttonState, setButtonState] = useState(false);
2722
const [col, setColor] = useState(['white', 'white']);
23+
const [modalVisible, setModalVisible] = useState(false);
2824

29-
const addScoreButton = () => {
30-
scoreList[0].teamA += scoreA;
31-
scoreList[0].teamB += scoreB;
32-
setScoreList([...scoreList,
33-
{
34-
id: totalGames,
35-
teamA: scoreA,
36-
teamB: scoreB,
37-
}]);
38-
setTotalGames(totalGames+1);
39-
setScoreA(0);
40-
setScoreB(0);
41-
setAllScores([0,0,0,0]);
42-
setButtonState(false);
43-
setColor(['white', 'white']);
44-
}
25+
const [db, setDB] = useState([]);
26+
const [game, setGame] = useState();
27+
const [round, setRound] = useState();
4528

46-
const RemoveRoundButton = () => {
47-
if(totalGames>1) {
48-
scoreList[0].teamA -= scoreList[totalGames-1].teamA;
49-
scoreList[0].teamB -= scoreList[totalGames-1].teamB;
50-
setScoreList(scoreList.slice(0,-1));
51-
setTotalGames(totalGames-1);
52-
setScoreA(0);
53-
setScoreB(0);
54-
setAllScores([0,0,0,0]);
29+
useEffect(() => {
30+
const firstLoad = async () => {
31+
let t = await loadDatabase();
32+
t instanceof Array ? setDB(t) : setDB([t]);
33+
if (t === null) setDB([]);
34+
setGame(newRound(newGame()));
5535
}
56-
}
36+
firstLoad();
37+
}, []);
5738

58-
const ResetButton = () => {
59-
setScoreList([{id: 0, teamA: 0, teamB: 0}]);
60-
setScoreA(0);
61-
setScoreB(0);
62-
setAllScores([0,0,0,0]);
63-
setTotalGames(1);
64-
}
39+
useEffect(() => {
40+
setColor(['white', 'white']);
41+
setButtonState(false);
42+
} ,[game]);
6543

66-
const doubleVictory = (team) => {
67-
setButtonState(true);
68-
if (team === 0 && allScores[0] === 200 || team === 1 && allScores[2] === 200) {
69-
allScores[0] = 0;
70-
allScores[2] = 0;
71-
setColor(['white', 'white']);
72-
setButtonState(false);
73-
}
74-
else if(team === 0) {
75-
allScores[0] = 200;
76-
allScores[2] = 0;
77-
setColor(['green', 'white']);
78-
}
79-
else if (team === 1) {
80-
allScores[0] = 0;
81-
allScores[2] = 200;
82-
setColor(['white', 'green']);
83-
}
84-
setScoreA(allScores[0] + allScores[1]);
85-
setScoreB(allScores[2] + allScores[3]);
86-
}
44+
const addScore = (amount, team) => {
45+
setGame(addScores(game, amount, team));
46+
let temp = [];
47+
let round = game.data.rounds[0];
48+
round.gtd.team1[2] === 1 ? temp.push('green') : temp.push('white');
49+
round.gtd.team2[2] === 1 ? temp.push('green') : temp.push('white');
50+
(round.gtd.team1[2] + round.gtd.team2[2] === 1) ? setButtonState(true) : setButtonState(false);
51+
setColor(temp);
52+
};
8753

88-
const addScoreGT = (amount, team) => {
89-
if ( allScores[(team * 2) + 1] + amount < 201 && allScores[(team * 2) + 1] + amount > -301) {
90-
allScores[(team * 2) + 1] += amount;
91-
setScoreA(allScores[0] + allScores[1]);
92-
setScoreB(allScores[2] + allScores[3]);
54+
const loadGame = (id) => {
55+
resetButton(false);
56+
db.forEach((item,idx) => {
57+
if (idx === id) setGame(item);
58+
});
59+
};
60+
61+
const addScoreButton = () => {
62+
setGame(newRound(game));
63+
setButtonState(false);
64+
setColor(['white', 'white']);
65+
};
66+
67+
const removeRoundButton = () => {
68+
setGame(removeRound(game));
69+
setButtonState(false);
70+
setColor(['white', 'white']);
71+
};
72+
73+
const resetButton = (startGame = false) => {
74+
let idx = db.findIndex((item) => item.id === game.id);
75+
if (idx !== -1) {
76+
let temp = db;
77+
temp[idx] = game;
78+
setDB(temp);
79+
} else if (db.length > 0) {
80+
game.id = db.length+1;
81+
if (game.data.scores.team1 !== 0 && game.data.scores.team2 !== 0) setDB([...db, game]);
9382
}
94-
}
95-
96-
97-
const addScore = (amount, team) => {
98-
let temp = 0;
99-
if (team == 0)
100-
temp = 1;
101-
else
102-
temp = 0;
103-
if (allScores[team * 2] + amount > -26 && allScores[team * 2] + amount < 126) {
104-
allScores[team * 2] += amount;
105-
allScores[temp * 2] = 100 - allScores[team * 2];
83+
else {
84+
game.id = 1;
85+
setDB([game]);
10686
}
107-
setScoreA(allScores[0] + allScores[1]);
108-
setScoreB(100 - allScores[0] + allScores[3]);
109-
}
87+
if(startGame === true) setGame(newRound(newGame()));
88+
};
11089

11190
return (
11291
<SafeAreaView style = {styles.container}>
92+
<Modal
93+
animationType="slide"
94+
transparent={true}
95+
visible={modalVisible}
96+
onRequestClose={() => {setModalVisible(!modalVisible)}}>
97+
<TouchableOpacity
98+
style={styles.modal}
99+
activeOpacity={1}
100+
disabled={!modalVisible}
101+
onPress={() => {setModalVisible(!modalVisible); console.log(db)}}>
102+
<ScrollView
103+
directionalLockEnabled={true}
104+
style={styles.insideModal}>
105+
{
106+
db.map((items, index) => (
107+
<Pressable key={index} onPress={() => {loadGame(index); setModalVisible(!modalVisible); }}>
108+
<View style={styles.modalView}>
109+
<Text style={styles.modalNames}>{items!== null ? items.data.names.team1 : ''} vs {items!== null ? items.data.names.team2 : ''}</Text>
110+
<Text style={styles.modalDate}>{items!== null ? items.date : ''}</Text>
111+
<Text style={styles.modalScores}>{items!== null ? items.data.scores.team1 : ''} - {items!== null ? items.data.scores.team2 : ''}</Text>
112+
</View>
113+
</Pressable>
114+
))
115+
}
113116

114-
<View style={{flex: 1, flexDirection:'column', justifyContent:'center', alignItems: 'center'}}>
117+
</ScrollView>
118+
</TouchableOpacity>
119+
</Modal>
120+
121+
122+
<View style={{flex: 1, flexDirection:'column', justifyContent:'center', alignItems: 'flex-end'}}>
123+
<View style={{flex:0.3}}>
124+
<CustomButton title='History' onPress={() => { setModalVisible(true); }} />
125+
</View>
115126
<View style={{flex: 0.4, flexDirection: 'row'}}>
116127
<Text style={styles.teams}>
117-
Team A
128+
{game === undefined ? 'Team A' : game.data.names.team1}
118129
</Text>
119130
<Text style={styles.teams}>
120-
Team B
131+
{game === undefined ? 'Team A' : game.data.names.team2}
121132
</Text>
122133
</View>
123134

124135
<View style={{flex: 0.3, flexDirection: 'row'}}>
125-
<Text style={styles.teams}> {scoreList[0].teamA} </Text>
126-
<Text style={styles.teams}> {scoreList[0].teamB} </Text>
136+
<Text style={styles.teams}> {game === undefined ? 0 : game.data.scores.team1} </Text>
137+
<Text style={styles.teams}> {game === undefined ? 0 : game.data.scores.team2} </Text>
127138

128139
</View>
129140
</View>
130141

131142
<View style={{ flex: 3 }}>
132-
<CustomFlatList scores={scoreList} />
143+
<CustomFlatList scores={game === undefined ? '' : game.data.rounds} />
133144
</View>
134145

135146
<View style={{ flex: 0.5, flexDirection: 'row' }}>
136147
<View style={{ flex:1, marginRight:10 }}>
137-
<CustomButton title='Double Victory' color={col[0]} onPress={() => { doubleVictory(0)} } />
148+
<CustomButton title='Double Victory' color={col[0]} onPress={() => { addScore('D', 0)} } />
138149
</View>
139-
<CustomButton title='Double Victory' color={col[1]} onPress={() => {doubleVictory(1)} } />
150+
<CustomButton title='Double Victory' color={col[1]} onPress={() => { addScore('D', 1) } } />
140151
</View>
141152
<View style={styles.bottomScreen}>
142153
<View style={{ flex: 1 }}>
143-
<CustomButton title='grand' color='green' onPress={() => {addScoreGT(200, 0)} } />
144-
<CustomButton title='grand' color='red' onPress={() => {addScoreGT(-200, 0)} } />
145-
<CustomButton title='tichu' color='green' onPress={() => {addScoreGT(100, 0)} } />
146-
<CustomButton title='tichu' color='red' onPress={() => {addScoreGT(-100, 0)} } />
154+
<CustomButton title='grand' color='green' onPress={() => {addScore(200, 0)} } />
155+
<CustomButton title='grand' color='red' onPress={() => {addScore(-200, 0)} } />
156+
<CustomButton title='tichu' color='green' onPress={() => {addScore(100, 0)} } />
157+
<CustomButton title='tichu' color='red' onPress={() => {addScore(-100, 0)} } />
147158
</View>
148159

149160

150161
<View style={{ flex: 2, marginRight: 5}}>
151162

152163
<View style={{flex: 1, justifyContent:'center'}}>
153164
<Text style={styles.scoreText}>
154-
{scoreA}
165+
{ game === undefined ? 0 :
166+
(game.data.rounds[0].score.team1 + 200*game.data.rounds[0].gtd.team1[0] + 100*game.data.rounds[0].gtd.team1[1] + 200*game.data.rounds[0].gtd.team1[2])
167+
}
155168
</Text>
156169
</View>
157170
<View style={styles.pureScoreButtons}>
@@ -171,7 +184,9 @@ const App: () => React$Node = () => {
171184
<View style={{ flex: 2, marginLeft: 5}}>
172185
<View style={{ flex: 1, justifyContent: 'center' }}>
173186
<Text style={styles.scoreText}>
174-
{scoreB}
187+
{ game === undefined ? 0 :
188+
(game.data.rounds[0].score.team2 + 200*game.data.rounds[0].gtd.team2[0] + 100*game.data.rounds[0].gtd.team2[1] + 200*game.data.rounds[0].gtd.team2[2])
189+
}
175190
</Text>
176191
</View>
177192
<View style={styles.pureScoreButtons}>
@@ -189,33 +204,39 @@ const App: () => React$Node = () => {
189204
</View>
190205

191206
<View style={{flex: 1}}>
192-
<CustomButton title='grand' color='green' onPress={() => {addScoreGT(200, 1)} } />
193-
<CustomButton title='grand' color='red' onPress={() => {addScoreGT(-200, 1)} } />
194-
<CustomButton title='tichu' color='green' onPress={() => {addScoreGT(100, 1)} } />
195-
<CustomButton title='tichu' color='red' onPress={() => {addScoreGT(-100, 1)} } />
207+
<CustomButton title='grand' color='green' onPress={() => {addScore(200, 1)} } />
208+
<CustomButton title='grand' color='red' onPress={() => {addScore(-200, 1)} } />
209+
<CustomButton title='tichu' color='green' onPress={() => {addScore(100, 1)} } />
210+
<CustomButton title='tichu' color='red' onPress={() => {addScore(-100, 1)} } />
196211
</View>
197212
</View>
198213

199214
<View style = {styles.footer}>
200215
<View style={styles.footerButtons}>
201-
<CustomButton title="Add Score" onPress={()=> { addScoreButton(); }} />
216+
<CustomButton title="Add Score" onPress={()=> { addScoreButton() }} />
202217
</View>
203218
<View style={styles.footerButtons}>
204-
<CustomButton title='Remove last round' onPress={() => { RemoveRoundButton(); }}/>
219+
<CustomButton title='Remove last round' onPress={() => { removeRoundButton() }}/>
205220
</View>
206221
<View style={styles.footerButtons}>
207-
<CustomButton title='reset' onPress={() => { ResetButton(); }} />
222+
<CustomButton title='reset' onPress={() => { resetButton(true); }} />
208223
</View>
224+
209225
</View>
210226
</SafeAreaView>
227+
228+
211229
);
212230
};
213231

214232
const styles = StyleSheet.create({
215233
container: {
216-
backgroundColor: 'black',
217-
flex: 1,
218-
flexDirection: 'column',
234+
backgroundColor: '#000',
235+
position:'absolute',
236+
top:0,
237+
bottom:0,
238+
left:0,
239+
right:0
219240
},
220241
topScreen: {
221242
flex: 1,
@@ -229,8 +250,49 @@ const styles = StyleSheet.create({
229250
textAlign: 'center',
230251
fontSize: 25
231252
},
232-
midScreen: {
233253

254+
modal: {
255+
backgroundColor: 'rgba(0, 0, 0, 0.5)',
256+
position:'absolute',
257+
top:0,
258+
bottom:0,
259+
left:0,
260+
right:0,
261+
alignContent:'center',
262+
justifyContent:'center'
263+
},
264+
265+
insideModal: {
266+
position:'absolute',
267+
top:'10%',
268+
bottom:'10%',
269+
left:'20%',
270+
height:'80%',
271+
width:'60%',
272+
backgroundColor: '#333',
273+
flex:1
274+
},
275+
modalView: {
276+
justifyContent:'space-between',
277+
alignContent:'center',
278+
borderWidth:3,
279+
borderRadius:4,
280+
margin:5,
281+
borderStyle:'solid',
282+
borderColor:'#e4f',
283+
backgroundColor:'#4e0'
284+
},
285+
modalDate: {
286+
alignSelf:'center',
287+
fontSize:15
288+
},
289+
modalNames: {
290+
alignSelf:'center',
291+
fontSize:25
292+
},
293+
modalScores: {
294+
alignSelf:'center',
295+
fontSize:20
234296
},
235297

236298
bottomScreen: {

0 commit comments

Comments
 (0)