8 |
17 |
18 | `
19 | }
--------------------------------------------------------------------------------
/src/components/chat.js:
--------------------------------------------------------------------------------
1 | var markdown = require('markdown-it')
2 | var html = require('choo/html')
3 | var raw = require('bel/raw')
4 |
5 | var md = new markdown()
6 |
7 | module.exports = chat
8 |
9 | function chat (state, emit) {
10 | return html`
11 |
12 |
19 | `
20 |
21 | function elInput () {
22 | return html`
23 |
30 | `
31 | }
32 |
33 | function elMessage (data) {
34 | return html`
35 |
13 | ${state.chat.messages.map(elMessage)}
14 |
15 |
18 |
36 | ${raw(md.render(data.message))}
37 |
38 | `
39 | }
40 |
41 | function handleInput (event) {
42 | emit(state.events.CHAT_USER, {
43 | message: event.target.value
44 | })
45 | }
46 |
47 | function handleSubmit (event) {
48 | emit(state.events.CHAT_SEND, state.chat.user)
49 | event.preventDefault()
50 | }
51 | }
--------------------------------------------------------------------------------
/src/components/walk.js:
--------------------------------------------------------------------------------
1 | var Nanocomponent = require('nanocomponent')
2 | var html = require('choo/html')
3 | var css = require('sheetify')
4 | var xhr = require('xhr')
5 |
6 | var style = css`
7 | .line { height: 1px; background: #000; }
8 | .photo { width: 33.3% }
9 | .photo:hover { z-index: 2; width: 100%; left: 0!important; }
10 | .blink {
11 | animation: blink 500ms steps(1, end) infinite;
12 | }
13 |
14 | @keyframes blink {
15 | 0% { opacity: 0; }
16 | 50% { opacity: 1; }
17 | }
18 |
19 | `
20 |
21 | module.exports = class Walk extends Nanocomponent {
22 | constructor () {
23 | super()
24 |
25 | this.tick
26 | this.state = {
27 | api: 'https://api.are.na/v2/channels/walk-17-11-18',
28 | contents: [ ],
29 | timeline: {
30 | start: '2017-11-18T20:00:00.216Z',
31 | end: '2017-11-19T04:00:00.216Z',
32 | heightHour: 1000
33 | }
34 | }
35 |
36 | this.refresh = this.refresh.bind(this)
37 | }
38 |
39 | load () {
40 | this.refresh()
41 | this.tick = setInterval(this.refresh, 1000 * 60)
42 | }
43 |
44 | unload () {
45 | clearInterval(this.tick)
46 | }
47 |
48 | refresh () {
49 | var self = this
50 | window.scrollTo(0, window.scrollY + 16)
51 | xhr(this.state.api + '?' + new Date().getTime() / 1000, function (err, resp) {
52 | if (err) throw err
53 | var data = JSON.parse(resp.body, { }, 2)
54 | self.state.contents = data.contents.map(function (entry) {
55 | entry.left = Math.random() * 75
56 | return entry
57 | })
58 | self.rerender()
59 | })
60 | }
61 |
62 | scroll () {
63 |
64 | }
65 |
66 | createElement (props) {
67 | var self = this
68 | var timeNow = new Date().getTime() / 1000
69 | var timeStart = new Date(this.state.timeline.start).getTime() / 1000
70 | var timeEnd = new Date(this.state.timeline.end).getTime() / 1000
71 | var startHour = new Date(this.state.timeline.start).getHours()
72 | var hours = (timeEnd - timeStart) / (1000 * 60 * 60) * 1000
73 | var height = hours * this.state.timeline.heightHour
74 | var positionNow = ((timeNow - timeStart) / (timeEnd - timeStart) * hours) * self.state.timeline.heightHour
75 |
76 | return html`
77 |
78 |
113 | `
114 | }
115 |
116 | update () {
117 | return false
118 | }
119 | }
120 |
--------------------------------------------------------------------------------
/src/components/wrapper.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 |
3 | module.exports = wrapper
4 |
5 | function wrapper (view) {
6 | return function (state, emit) {
7 | return html`
8 |
9 | ${view(state, emit)}
10 |
11 | `
12 | }
13 | }
--------------------------------------------------------------------------------
/src/design.js:
--------------------------------------------------------------------------------
1 | var gr8 = require('gr8')
2 | var utils = [ ]
3 |
4 | var typography = {
5 | sans: '"Lars Mono", Menlo, Consolas, "Liberation Mono", Menlo, Courier, monospace'
6 | }
7 |
8 | var colors = {
9 | white: '#fff',
10 | grey_15: '#eee',
11 | grey_20: '#ccc',
12 | grey_75: '#333',
13 | red: '#f33',
14 | green: '#0FCE83',
15 | black: '#000'
16 | }
17 |
18 | var custom = `
19 | html { font-size: 100% }
20 |
21 | input { outline: 0 }
22 |
23 | .md h1,
24 | .md h2,
25 | .md h3 {
26 | font-size: 1rem;
27 | font-weight: normal;
28 | }
29 |
30 | .md > *+* {
31 | margin-top: 1rem;
32 | margin-bottom: 1rem;
33 | }
34 |
35 | .md ul { margin-left: 1rem }
36 | .md ul li { margin: 0; padding: 0; }
37 |
38 | .md h1:before { content: '# ' }
39 | .md h2:before { content: '## ' }
40 | .md h3:before { content: '### ' }
41 |
42 | code,
43 | pre {
44 | background: #333;
45 | border-radius: 3px;
46 | font-family: ${typography.sans};
47 | line-height: 1.5;
48 | }
49 |
50 | .md .external-link:after {
51 | content: '→';
52 | display: inline-block;
53 | transform: rotate(-45deg);
54 | text-decoration: none;
55 | }
56 |
57 | code {
58 | padding: 0.25rem;
59 | }
60 |
61 | pre {
62 | padding: 1rem;
63 | }
64 |
65 | @font-face {
66 | font-family: 'Lars Mono';
67 | src: url('/assets/Lars-Mono.eot');
68 | src: url('/assets/Lars-Mono.eot?#iefix') format('embedded-opentype'),
69 | url('/assets/Lars-Mono.woff2') format('woff2'),
70 | url('/assets/Lars-Mono.woff') format('woff');
71 | }
72 | `
73 |
74 | var borderWeights = [1]
75 | var borders = {}
76 | borderWeights.forEach(border => {
77 | Object.keys(colors).forEach(key => {
78 | borders[border + '-' + key] = `${border}px solid ${colors[key]}`
79 | })
80 | })
81 |
82 | utils.push({
83 | prop: [
84 | 'border',
85 | 'border-top',
86 | 'border-right',
87 | 'border-bottom',
88 | 'border-left'
89 | ],
90 | vals: borders
91 | })
92 |
93 | utils.push({
94 | prop: { bgc: 'background-color' },
95 | join: '-',
96 | vals: colors
97 | })
98 |
99 | utils.push({
100 | prop: { fc: 'color' },
101 | join: '-',
102 | vals: colors
103 | })
104 |
105 | utils.push({
106 | prop: { fc: 'color' },
107 | tail: ' a',
108 | join: '-',
109 | vals: colors
110 | })
111 |
112 | utils.push({
113 | prop: 'border-radius',
114 | unit: 'rem',
115 | vals: [0, 1, 1.5]
116 | })
117 |
118 | utils.push({
119 | prop: 'font-family',
120 | join: '-',
121 | vals: typography
122 | })
123 |
124 | var gr8css = gr8({
125 | utils: utils,
126 | spacing: [0, 0.5, 1, 1.5, 2],
127 | responsive: true,
128 | breakpointSelector: 'class'
129 | })
130 |
131 | module.exports = gr8css + custom
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | var choo = require('choo')
2 | var html = require('choo/html')
3 | var css = require('sheetify')
4 | var wrapper = require('./components/wrapper')
5 |
6 | var app = choo()
7 |
8 | css('ress/ress.css')
9 | css('./design.js')
10 |
11 | app.use(require('./stores/app'))
12 | app.use(require('./stores/chat'))
13 |
14 | app.route('*', wrapper(require('./views/main')))
15 | app.route('/', wrapper(require('./views/main')))
16 | app.route('/stream', wrapper(require('./views/hang')))
17 | app.route('/chat', wrapper(require('./views/chat')))
18 |
19 |
20 | if (module.parent) module.exports = app
21 | else app.mount('body')
--------------------------------------------------------------------------------
/src/lib/ws.js:
--------------------------------------------------------------------------------
1 | var ws = null
2 |
3 | if (typeof WebSocket !== 'undefined') {
4 | ws = WebSocket
5 | } else if (typeof MozWebSocket !== 'undefined') {
6 | ws = MozWebSocket
7 | } else {
8 | if (typeof window !== 'undefined') {
9 | ws = window.WebSocket || window.MozWebSocket
10 | }
11 | }
12 |
13 | module.exports = ws
--------------------------------------------------------------------------------
/src/stores/app.js:
--------------------------------------------------------------------------------
1 | module.exports = app
2 |
3 | function app (state, emitter) {
4 |
5 | }
6 |
--------------------------------------------------------------------------------
/src/stores/chat.js:
--------------------------------------------------------------------------------
1 | var WebSocket = require('../lib/ws')
2 | var xtend = require('xtend')
3 | var xhr = require('xhr')
4 |
5 | module.exports = chat
6 |
7 | function chat (state, emitter) {
8 | var ws
9 | state.chat = {
10 | address: 'wss://jk-hang.glitch.me/',
11 | http: 'https://jk-hang.glitch.me?' + Math.floor(new Date () / 1000),
12 | active: false,
13 | live: false,
14 | note: 'loading',
15 | messages: [ ],
16 | scratch: '',
17 | editing: false,
18 | user: {
19 | name: 'nice',
20 | message: ''
21 | }
22 | }
23 |
24 | state.events.CHAT_READY = 'chat:ready'
25 | state.events.CHAT_SEND = 'chat:send'
26 | state.events.CHAT_MESSAGE = 'chat:message'
27 | state.events.CHAT_USER = 'chat:user'
28 | state.events.CHAT_SCRATCH = 'chat:scratch'
29 | state.events.CHAT_LIVE = 'chat:live'
30 |
31 | emitter.on(state.events.DOMCONTENTLOADED, function () {
32 | ws = new WebSocket(state.chat.address)
33 |
34 | ws.addEventListener('open', function (event) {
35 | state.chat.active = true
36 | emitter.emit(state.events.CHAT_READY)
37 | emitter.emit(state.events.RENDER)
38 |
39 | setTimeout(function () {
40 | if (state.chat.live) {
41 | var elMessages = document.querySelector('[data-messages]')
42 | elMessages.scrollTo(0, elMessages.scrollHeight)
43 | }
44 | }, 100)
45 | })
46 |
47 | ws.addEventListener('error', function (event) {
48 | console.warn('ws can not connect', event)
49 | xhr(state.chat.http, function (err, res, body) {
50 | try {
51 | var data = JSON.parse(body)
52 | state.chat = xtend(state.chat, data)
53 | } catch (err) { }
54 | state.chat.loaded = true
55 | emitter.emit(state.events.RENDER)
56 | })
57 | })
58 |
59 | ws.addEventListener('message', function (event) {
60 | var data = JSON.parse(event.data)
61 |
62 | // active
63 | if (data.live !== undefined) {
64 | state.chat.live = data.live
65 | }
66 |
67 | if (data.note) {
68 | state.chat.note = data.note
69 | }
70 |
71 | // scratch
72 | if (!state.chat.editing && data.scratch !== undefined) {
73 | state.chat.scratch = data.scratch
74 | if (state.chat.live) scrollMessages('[data-scratch]')
75 | }
76 |
77 | // messages
78 | if (data.messages) {
79 | state.chat.messages = state.chat.messages.concat(data.messages)
80 | }
81 |
82 | // message
83 | if (data.message) {
84 | state.chat.messages.push(data)
85 | if (state.chat.live) scrollMessages('[data-messages]')
86 | if (data.message === state.chat.user.message) {
87 | emitter.emit(state.events.CHAT_USER, { message: '' })
88 | }
89 | }
90 |
91 | emitter.emit(state.events.CHAT_MESSAGE)
92 | emitter.emit(state.events.RENDER)
93 | })
94 | })
95 |
96 | emitter.on(state.events.CHAT_SEND, function (data) {
97 | if (data && data.name && data.message) {
98 | data.timestamp = new Date()
99 | ws.send(JSON.stringify(data))
100 | }
101 | })
102 |
103 | emitter.on(state.events.CHAT_SCRATCH, function (data) {
104 | if (data && data.scratch) {
105 | state.chat.editing = true
106 | state.chat.scratch = data.scratch
107 | ws.send(JSON.stringify(data))
108 | }
109 | })
110 |
111 | emitter.on(state.events.CHAT_LIVE, function (data) {
112 | if (data && data.live !== undefined) {
113 | state.chat.live = data.live
114 | data.pwd = 'niceone'
115 | ws.send(JSON.stringify(data))
116 | }
117 | })
118 |
119 | emitter.on(state.events.CHAT_USER, function (data) {
120 | if (!data) return
121 | state.chat.user = xtend(state.chat.user, data)
122 | emitter.emit(state.events.RENDER)
123 | })
124 |
125 | emitter.on(state.events.CHAT_MESSAGE, function (data) {
126 |
127 | })
128 | }
129 |
130 | function scrollMessages (selector) {
131 | if (typeof document !== 'undefined') {
132 | var elMessages = document.querySelector(selector)
133 | if (!elMessages) return
134 |
135 | if (elMessages.scrollHeight - elMessages.offsetHeight === elMessages.scrollTop) {
136 | setTimeout(function () {
137 | var elMessages = document.querySelector(selector)
138 | elMessages.scrollTo(0, elMessages.scrollHeight)
139 | }, 100)
140 | }
141 | }
142 | }
--------------------------------------------------------------------------------
/src/views/break.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 | var css = require('sheetify')
3 |
4 | var style = css`
5 | :host {
6 | max-width: 24rem;
7 | }
8 | `
9 |
10 | module.exports = view
11 |
12 | function view (state, emit) {
13 | return html`
14 |
79 | LIVE
80 |
81 |
82 | ${Array(hours).fill(null).map(function (hour, i) {
83 | return html`
84 |
97 |
98 | ${this.state.contents.map(function (entry) {
99 | if (!entry.image) return
100 | var timeEntry = new Date(entry.created_at).getTime() / 1000
101 | var position = ((timeEntry - timeStart) / (timeEnd - timeStart) * hours) * self.state.timeline.heightHour
102 | return html`
103 |
88 |
94 | `
95 | })}
96 | ${i + startHour}:00pst
89 |
90 |
91 |
92 |
93 |
107 | 
108 |
110 | `
111 | })}
112 |
108 | ${entry.title}
109 |
15 |
19 | `
20 |
21 | function getNote () {
22 | return ':)'
23 | // return state.chat && state.chat.messages.length > 0
24 | // ? state.chat.messages[state.chat.messages.length - 1].message
25 | // : ':)'
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/views/chat.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 | var chat = require('../components/chat')
3 |
4 | module.exports = view
5 |
6 | function view (state, emit) {
7 | return html`
8 |
16 | ${getNote()}
17 |
18 |
9 |
13 | `
14 | }
--------------------------------------------------------------------------------
/src/views/hang.js:
--------------------------------------------------------------------------------
1 | var externalLinks = require('markdown-it-external-links')
2 | var markdown = require('markdown-it')
3 | var html = require('choo/html')
4 | var raw = require('bel/raw')
5 |
6 | var channel = require('../components/channel')
7 | var chat = require('../components/chat')
8 |
9 | var md = new markdown()
10 |
11 | md.use(externalLinks, {
12 | externalTarget: ['_blank']
13 | })
14 |
15 | module.exports = view
16 |
17 | function view (state, emit) {
18 | return html`
19 |
10 | ${state.chat.active ? chat(state, emit) : ''}
11 |
12 |
20 |
34 | `
35 | }
36 |
37 | function loading () {
38 | return html`
39 |
21 | ${channel()}
22 | ${state.chat.active
23 | ? scratch({ text: state.chat.scratch })
24 | : loading()
25 | }
26 |
27 |
28 | ${state.chat.active
29 | ? chat(state, emit)
30 | : loading()
31 | }
32 |
33 |
40 |
44 | `
45 | }
46 |
47 | function scratch (props) {
48 | props = props || { }
49 | return html`
50 |
41 | LOADING
42 |
43 |
51 | ${raw(md.render(props.text))}
52 |
53 | `
54 | }
--------------------------------------------------------------------------------
/src/views/main.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 |
3 | var intermission = require('./break')
4 | var walk = require('./walk')
5 | var hang = require('./hang')
6 |
7 | module.exports = main
8 |
9 | function main(state, emit) {
10 | // if (state.chat && state.chat.live) {
11 | return hang(state, emit)
12 | // } else {
13 | // return intermission(state, emit)
14 | // }
15 | }
16 |
--------------------------------------------------------------------------------
/src/views/scratch-editor.js:
--------------------------------------------------------------------------------
1 | var html = require('choo/html')
2 | var css = require('sheetify')
3 | var raw = require('bel/raw')
4 |
5 | var chat = require('../components/chat')
6 |
7 | var style = css`
8 | :host {
9 | cursor: pointer;
10 | height: 2rem;
11 | width: 2rem;
12 | border-radius: 1rem;
13 | }
14 | `
15 |
16 | module.exports = scratch
17 |
18 | function scratch (state, emit) {
19 | return html`
20 |
21 |
34 | `
35 |
36 | function editor () {
37 | return html`
38 |
43 | `
44 | }
45 |
46 | function handleInput (event) {
47 | emit(state.events.CHAT_SCRATCH, {
48 | scratch: event.target.value
49 | })
50 | }
51 |
52 | function handleLiveClick (event) {
53 | emit(state.events.CHAT_LIVE, {
54 | live: !state.chat.live
55 | })
56 | }
57 | }
--------------------------------------------------------------------------------
/src/views/walk.js:
--------------------------------------------------------------------------------
1 | var externalLinks = require('markdown-it-external-links')
2 | var markdown = require('markdown-it')
3 | var html = require('choo/html')
4 | var raw = require('bel/raw')
5 |
6 | var Walk = require('../components/walk')
7 | var chat = require('../components/chat')
8 | var walk = new Walk()
9 |
10 | module.exports = view
11 |
12 | function view (state, emit) {
13 | return html`
14 |
22 |
26 |
27 |
28 | ${editor()}
29 |
30 |
31 | ${chat(state, emit)}
32 |
33 |
15 |
25 | `
26 | }
27 |
28 | function loading () {
29 | return html`
30 |
16 | ${walk.render()}
17 |
18 |
19 | ${state.chat.active
20 | ? chat(state, emit)
21 | : loading()
22 | }
23 |
24 |
31 |
35 | `
36 | }
--------------------------------------------------------------------------------
32 | LOADING
33 |
34 |