Avatar.vue

<template>
    <div>
        <!--{{ name }}-->
        <br>
        <div v-for="(avatar, i) in avatars">
            <v-avatar :key="i" size="100px" color="grey lighten-4">
                <img :src="avatar.url" class="border" :class="getClassName(avatar.updated)">
            </v-avatar>
            <br>
            <!--seconds: {{ avatar.updated }}-->
        </div>
        <br>
    </div>
</template>

<script>
    import {Random} from "random-js";
    import Vue from 'vue'

    const R = new Random();
    const getSeconds = () => {
        return Math.round((new Date()).getTime() / 1000)
    }

    let vm
    const C = window.console.log
    const range = new Map()
    range.set(2, 'active').set(5, 'idle').set(8, 'inactive');


    export default {
        data() {
            return {
                name: "Avatar.vue",
                avatars: []
            }
        },
        created() {
            vm = this
            const URLS = ["/b100.png", "/bassie.png", "/vlugge.png", "/barron.png", "/adriaan.png"]
            URLS.forEach((url) => {
                C(url);
                vm.avatars.push({url, status: "active", seconds: getSeconds(), updated: 0})
            })
            const range = new Map()
            range.set(10, 'classActive').set(15, 'classIdle').set(20, 'classInactive');
            setInterval(() => {
                vm.avatars.forEach((avatar) => {
                    avatar.updated = getSeconds() - avatar.seconds
                })
            }, 1000)
            setInterval(() => {
                const randIndex = R.integer(0, vm.avatars.length - 1)
                const avatar = vm.avatars[randIndex]
                avatar.update = getSeconds() - avatar.seconds
                avatar.seconds = getSeconds()
                Vue.set(vm.avatars, randIndex, avatar)
            }, R.integer(200, 900))
        },
        computed: {},
        methods: {
            getClassName(input) {
                let output
                for (const key of range) {
                    output = key[1]
                    if (input < key[0]) {
                        break
                    }
                }
                return output;
            }
        }
    }
</script>

<style>
    .border {
        border: 6px solid
    }

    .active {
        border-color: rgba(0,255, 0, 0.2);
    }

    .idle {
        border-color: rgba(255, 184, 0, 0.4);
    }

    .inactive {
        border-color: rgba(192, 0, 19, 0.6);
    }
</style>

update

Avatar