Currently, I am working on programming a Highscore Screen for a Quiz Game that utilizes a ListView to display all the players along with their scores. My main goal is to emphasize my own points, since the ListView only shows player IDs and points without any nicknames. The Highscore.js Screen is connected to a websocket which sends me JSON data like this:
{"Finish":"true","Scores":{"48046":0,"48056":2}}
In this JSON snippet, you can see if the game has ended and the constantly changing ID along with the corresponding score for each player. For example, Player 48046 has 0 points while Player 48056 has 2 points. Since I do not know which ID belongs to me (as the websocket server assigns them), I need to compare my points to this JSON message in order to determine my ID. Here is the current structure of my ListView:
<ListView
dataSource={
this.ds.cloneWithRows(
this.state.sortable
)
}
renderRow={(rowData)=> {
return (
<View style={styles.row}>
<Text style={styles.rowText}> Spieler: {rowData.toString().substring(0,6)}</Text><Text style={styles.scoreText}> Score: {rowData.toString().substring(6,7)}</Text>
</View>
)
}}
/>
I encountered difficulties extracting the proper ID and value from the rowData parameter. Directly accessing rowData concatenated the ID and score into one string, so I resorted to using substring. If there is a better approach to achieve this, please share your knowledge!
The next challenge I face is highlighting the row that represents me as a player. Even though I know my score, I struggle to differentiate and highlight my specific row in the ListView. Ideally, I would like to change the backgroundColor of my row to visually distinguish it. As the websocket generates new player IDs for each game, including mine, how can I effectively highlight my row?
Below is the code snippet I have been working on:
import React, {Component} from 'react';
import { View, Text, ListView, StyleSheet, KeyboardAvoidingView, Image, TouchableOpacity } from 'react-native';
import WebsocketController from './WebsocketController';
class HighScore extends Component {
// Code implementation here...
}
var styles = StyleSheet.create({
// CSS styling definition here...
});
export default HighScore;
I appreciate any assistance or guidance provided. Thank you!