A Stars Rating widget for FuseTools that requires Google MaterialIcons Font

fuse_starsrating.ux

<!-- 
	FuseTools Stars Rating Widget / UX Class
	Nizar Mahmoud https://nizarmah.me/

	Don't forget to add this font to your project 
	<Font File="Assets/Fonts/MaterialIcons-Regular.ttf" ux:Global="MaterialIcons" />

	Use freely, just would appreciate
	keeping this comment on top to
	show me off to other people
-->

<StackPanel ux:Class="StarsRating" Orientation="Horizontal" Rating="0">
	<float ux:Property="Rating" />
	<float ux:Property="StarSize" />

	<string ux:Property="StarColor" />

	<JavaScript>
		var value = this.Rating.value;
		var hstar = false;
			if (((value * 2) % 2)) {
				hstar = true;
				value = Math.floor(value);
			}

		// full star : &#xE838;
		// half star : &#xE839;
		// none star : &#xE83A;
		var stars = [
			{ star: "none" }, 
			{ star: "none" },
			{ star: "none" },
			{ star: "none" }, 
			{ star: "none" }
		];

		if (hstar) 
			stars[value].star = "half";

		while ((value--) > 0)
			stars[value].star = "full";

		module.exports = {
			stars: stars
		};
	</JavaScript>

	<Each Items="{stars}">
		<Match Value="{star}">
			<Case String="full">
				<Text Font="MaterialIcons" Value="&#xE838;" FontSize="{ReadProperty StarSize}" Color="{ReadProperty StarColor}" />
			</Case>
			<Case String="half">
				<Text Font="MaterialIcons" Value="&#xE839;" FontSize="{ReadProperty StarSize}" Color="{ReadProperty StarColor}" />
			</Case>
			<Case String="none">
				<Text Font="MaterialIcons" Value="&#xE83A;" FontSize="{ReadProperty StarSize}" Color="{ReadProperty StarColor}" />
			</Case>
		</Match>
	</Each>
</StackPanel>