live.html

<template>
    <div class="kiwi-startup-live">
        <div class="kiwi-startup-live-messages">
        	<message-list :buffer="buffer" />
        </div>

    	<div class="kiwi-startup-live-join">
    		<a class="u-button u-button-primary">Join to start talking!</a>
    	</div>
    </div>
</template>

<script>
'kiwi public';

import _ from 'lodash';
import * as Misc from '@/helpers/Misc';
import MessageList from '@/components/MessageList';

export default {
    components: {
        MessageList,
    },
    data() {
        return {
            buffer: null,
        };
    },
    created() {
        let network = this.$state.addNetwork('live', '-', {});
        network.state = 'connected';

        let buffer = this.$state.addBuffer(network.id, '#test');
        buffer.joined = true;

        this.buffer = buffer;

        this.$state.addMessage(buffer, {
        	message: 'hello!',
        	nick: 'someuser',
        });

        // TODO: connect websocket somewhere that retreives JSON messages such as:
        // { nick: 'somenick', message: 'hello!' }
    },
};
</script>

<style>

.kiwi-startup-live {
    background: white;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.kiwi-startup-live-messages {
    flex-grow: 1;
}

.kiwi-startup-live-join {
    flex-grow: 0;
    text-align: center;
    padding: 1em;
    font-size: 1.5em;
}

</style>