What can we do with 10 RGB LEDs and 3 buttons?

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
	<div
		class="pixel"
		v-for="pixel in pixels"
		:style="pixel"
	></div>
	<button
		v-for="(value, index) in buttons"
		:class="{
			active: value
		}"
		@mousedown="buttons[index] = true"
		@mouseup="buttons[index] = false"
	>{{ index }}</button>
</div>

CSS

body {
	margin: 0;
	padding: 32px;
	background-color: #000;
}
.pixel {
	width: 16px;
	height: 16px;
}

JavaScript

var app = new Vue({
	el: '#app',
	data: {
		values: [
			[255,255,255],
			[127,0,0],
			[0,127,0],
			[0,0,127],
			[255,0,0],
			[0,255,0],
			[0,0,255],
			[255,255,0],
			[0,255,255],
			[255,0,255]
		],
		buttons: [
			false,
			false,
			false
		],
		speed: 5
	},
	created () {
		this.interval = setInterval(
			this.doUpdate,
			100
		)
	},
	computed: {
		pixels () {
			return this.values.map((a) => {
				return {
					backgroundColor: `rgb(${a[0]},${a[1]},${a[2]})`
				}
			})
		}
	},
	methods: {
		doUpdate () {
			var values = this.values.slice()
			var last = values.pop()
			values.unshift(last)
			this.values = values
		}
	}
});