dice-sides-grid.vugu

<div class="dice-sides-grid">
	<side-roll-counter vg-for='_, counter := range data.Counters' :side-number='counter.SideNumber'></side-roll-counter>
</div>

<style>
	.dice-sides-grid {
		/*height: 80%;*/
		position: absolute;
		/* max-height: 100%; */
		/* display: block; */
		/*margin: auto;*/
		display: grid;
		grid-row-start: 1;
		grid-row-end: 2;
		grid-template-columns: repeat(4, 25%);
		grid-template-rows: repeat(5, 20%);
		grid-auto-flow: row;
		place-items: center;
		height: 100%;
		width: 100%;
	}
</style>

<script type="application/x-go">
	type DiceSidesGridData struct {
		NumSides int `default:"20"`
		NumRows int
		Counters []SideRollCounterData
	}

	func (comp *DiceSidesGrid) NewData(props vugu.Props) (interface{}, error) {
		numSides := props["sides"].(int)
		numRows :=  props["rows"].(int)

		ret := &DiceSidesGridData{
			NumSides: numSides,
			NumRows: numRows,
			Counters: state.SideRollCounters,
		}
		return ret, nil
	}
</script>