Garciat
6/1/2016 - 7:57 AM

chat.py

"""
copy(Array.from(document.querySelectorAll('._3oh-')).map(n => n.innerText).join('\n'));

save to 'chat.txt'

usage: python chat.py < chat.txt > chat.html

enjoy.
"""

import re
import sys
from collections import Counter, namedtuple

text = sys.stdin.read()

lines = text.split('\n')

participants = map(lambda x: x[0], Counter(lines).most_common(2))

ChatBlock = namedtuple('ChatBlock', ['participant', 'messages'])

chat = []

current_block = None

for line in lines:
    if re.match(r'^\d\d?:\d\d(AM|PM)$', line):
        pass
    elif line in participants:
        if current_block:
            chat.append(current_block)
        current_block = ChatBlock(participant=line, messages=[])
    else:
        current_block.messages.append(line)

if current_block:
    chat.append(current_block)

print """<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    
    <script src="https://twemoji.maxcdn.com/twemoji.min.js"></script>  
    
    <style>

body {
    font-family: "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
}

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}

.chat-block {
    margin: 10px 0;
}

.chat.hide-header .chat-block header {
    display: none;
}

.chat-block article {
    margin: 1px 0;
    padding: 6px 12px;
}

.chat-block.participant-0 article {
    float: left;
    background: #e5e4e4;
    
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.chat-block.participant-0 header + div article {
    border-top-left-radius: 20px;
}

.chat-block.participant-0 div:last-child article {
    border-bottom-left-radius: 20px;
}

.chat-block.participant-1 header {
    text-align: right;
}

.chat-block.participant-1 article {
    float: right;
    background: #0084ff;
    color: white;
    
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.chat-block.participant-1 header + div article {
    border-top-right-radius: 20px;
}

.chat-block.participant-1 div:last-child article {
    border-bottom-right-radius: 20px;
}

.chat {
    max-width: 800px;
    margin: 2em auto;
}

    </style>
    <script>

function swap() {
    const p0 = Array.from(document.querySelectorAll('.participant-0'));
    const p1 = Array.from(document.querySelectorAll('.participant-1'));
    
    p0.forEach(x => {
        x.classList.remove('participant-0');
        x.classList.add('participant-1');
    });
    
    p1.forEach(x => {
        x.classList.remove('participant-1');
        x.classList.add('participant-0');
    });
}

function toggleHeaders() {
    document.querySelector('.chat').classList.toggle('hide-header');
}

window.onload = function() {

  twemoji.size = '16x16';

  twemoji.parse(document.body);

};

    </script>
</head>
<body>
<div class="chat hide-header">
"""

for block in chat:
    print '<div class="chat-block participant-{}">'.format(participants.index(block.participant))
    
    print '<header><h2>{}</h2></header>'.format(block.participant)
    
    for message in block.messages:
        print '<div class="clearfix"><article>{}</article></div>'.format(message)
    
    print '</div>'

print """
</div>
</body>
</html
"""