The client isn't currently saving information about which words the
player themself submitted, so it isn't yet preventing the user from
sending kudos to an item they submitted themself.
margin-bottom: 0.25em;
padding: 0;
border-radius: 10px;
+ position: relative;
}
.ambiguity-button {
padding: 0.25em;
text-transform: uppercase;
}
+
+.star-button {
+ color: white;
+ opacity: 0.5;
+ font-size: 125%;
+ font-weight: bold;
+ cursor: pointer;
+ position: absolute;
+ right: 0.5em;
+ top: 0;
+}
+
+@media (hover:hover) {
+ .star-button:hover {
+ color: var(--accent-color-bright);
+ opacity: 1.0;
+ }
+}
+
+.star-button.selected {
+ color: var(--accent-color-bright);
+ opacity: 1.0;
+}
this.state = {
word_sets: word_sets,
- selected: null
+ selected: null,
+ starred: null
};
this.submitted = false;
const response = await fetch_post_json(
`judged/${this.props.prompt.id}`,{
- word_groups: this.state.word_sets.map(set => Array.from(set))
+ word_groups: this.state.word_sets.map(set => Array.from(set)),
+ kudos: Array.from(this.state.starred)
}
);
</button>
);
})}
+ <span
+ className={this.state.starred === set ?
+ "star-button selected" : "star-button"
+ }
+ onClick={(event) => {
+ event.stopPropagation();
+ this.setState({
+ starred: set
+ });
+ }}
+ >
+ {this.state.starred === set ?
+ '★' : '☆'
+ }
+ </span>
</div>
);
})}