Commit ecf1e6ca authored by Jens-Christian Fischer's avatar Jens-Christian Fischer
Browse files

experiment with splitting things

going to revert in a second
parent 84829139
......@@ -3,14 +3,26 @@ exports.config = {
files: {
javascripts: {
joinTo: {
'js/app.js' : [/^(?!node_modules\/p5)/,
/^(?!node_modules\/osc)/,
/(?!presencesketch.js$)/
],
'js/myp5.js' : [/^(node_modules\/p5)/,
/^(node_modules\/osc)/,
/presencesketch.js$/
]
// 'js/app.js' : [/^(?!node_modules\/p5)/,
// /^(?!node_modules\/osc)/,
// /(?!presencesketch.js$)/
// ],
// 'js/myp5.js' : [/^(node_modules\/p5)/,
// /^(node_modules\/osc)/,
// /presencesketch.js$/
// ]
'js/app.js' : [
/^(web\/static\/js\/app)/,
/node_modules\/phoenix|node_modules\/process/,
/node_modules\/interface.js/,
/node_modules\/underscore/,
],
'js/conductor.js' :[
/^(web\/static\/js\/conductor)/,
/node_modules\/phoenix|node_modules\/process/,
/node_modules\/underscore/,
/node_modules\/p5|node_modules\/osc/
]
}
// To use a separate vendor.js bundle, specify two files path
......
......@@ -13,7 +13,7 @@
// to also remove its path from "config.paths.watched".
import "phoenix_html";
import {Socket, Presence} from "phoenix"
import {Socket, Presence} from "phoenix";
import loadView from "./views/loader.js";
......
import MainView from './main';
import GrainsIndexView from './player';
// Collection of specific view modules
const views = {
GrainsIndexView
};
export default function loadView(viewName) {
return views[viewName] || MainView;
}
// Brunch automatically concatenates all files in your
// watched paths. Those paths can be configured at
// config.paths.watched in "brunch-config.js".
//
// However, those files will only be executed if
// explicitly imported. The only exception are files
// in vendor, which are never wrapped in imports and
// therefore are always executed.
// Import dependencies
//
// If you no longer want to use a dependency, remember
// to also remove its path from "config.paths.watched".
import "phoenix_html";
import {Socket, Presence} from "phoenix";
import loadView from "./views/loader.js";
import _ from "underscore";
import socket from "./socket";
function handleDOMContentLoaded() {
// Get the current view name
const viewName = document.getElementsByTagName('body')[0].dataset.jsViewName;
// Load view class and mount it
const ViewClass = loadView(viewName);
const view = new ViewClass();
view.mount();
window.currentView = view;
}
function handleDocumentUnload() {
window.currentView.unmount();
}
window.addEventListener('DOMContentLoaded', handleDOMContentLoaded, false);
window.addEventListener('unload', handleDocumentUnload, false);
// Import local files
//
// Local files can be imported directly using relative
// paths "./socket" or full ones "web/static/js/socket".
// NOTE: The contents of this file will only be executed if
// you uncomment its entry in "web/static/js/app.js".
// To use Phoenix channels, the first step is to import Socket
// and connect at the socket path in "lib/my_app/endpoint.ex":
import {Socket} from "phoenix"
let socket = new Socket("/socket", {params: {token: window.userToken}})
// When you connect, you'll often need to authenticate the client.
// For example, imagine you have an authentication plug, `MyAuth`,
// which authenticates the session and assigns a `:current_user`.
// If the current user exists you can assign the user's token in
// the connection for use in the layout.
//
// In your "web/router.ex":
//
// pipeline :browser do
// ...
// plug MyAuth
// plug :put_user_token
// end
//
// defp put_user_token(conn, _) do
// if current_user = conn.assigns[:current_user] do
// token = Phoenix.Token.sign(conn, "user socket", current_user.id)
// assign(conn, :user_token, token)
// else
// conn
// end
// end
//
// Now you need to pass this token to JavaScript. You can do so
// inside a script tag in "web/templates/layout/app.html.eex":
//
// <script>window.userToken = "<%= assigns[:user_token] %>";</script>
//
// You will need to verify the user token in the "connect/2" function
// in "web/channels/user_socket.ex":
//
// def connect(%{"token" => token}, socket) do
// # max_age: 1209600 is equivalent to two weeks in seconds
// case Phoenix.Token.verify(socket, "user socket", token, max_age: 1209600) do
// {:ok, user_id} ->
// {:ok, assign(socket, :user, user_id)}
// {:error, reason} ->
// :error
// end
// end
//
// Finally, pass the token on connect as below. Or remove it
// from connect if you don't care about authentication.
socket.connect()
// Now that you are connected, you can join channels with a topic:
// let channel = socket.channel("topic:subtopic", {})
// channel.join()
// .receive("ok", resp => { console.log("Joined successfully", resp) })
// .receive("error", resp => { console.log("Unable to join", resp) })
export default socket
54654
\ No newline at end of file
......@@ -50,7 +50,7 @@ export default class View extends MainView {
}
render(presences, diff) {
console.log("ConductorIndexView.render()")
console.log("ConductorIndexView.render()");
super.render(presences, diff);
if (diff) {
......
import MainView from './main';
import ConductorIndexView from './conductor';
import GrainsIndexView from './player';
// Collection of specific view modules
const views = {
ConductorIndexView,
GrainsIndexView
};
export default function loadView(viewName) {
......
import {Socket, Presence} from "phoenix"
import socket from "../socket";
let formatTimestamp = (timestamp) => {
let date = new Date(timestamp);
return date.toLocaleDateString();
}
let listBy = (user, {metas: metas}) => {
return {
user: user,
onlineAt: formatTimestamp(metas[0].online_at)
};
}
export default class MainView {
constructor() {
this._presences = {};
}
mount() {
// This will be executed when the document loads..
let room = socket.channel("presence:lobby", {});
room.on("presence_state", state => {
console.log("p_s");
this._presences = Presence.syncState(this._presences, state)
this.render(this._presences)
});
room.on("presence_diff", diff => {
console.log("p_d");
console.log(diff);
this._presences = Presence.syncDiff(this._presences, diff);
this.render(this._presences, diff)
});
console.log("joining presence");
room.join().receive("ok", resp => {
console.log("presence joined");
})
.receive("error", reason => console.log("presence join failed", reason));
console.log('MainView mounted');
}
unmount() {
// This will be executed when the document unloads...
console.log('MainView unmounted');
}
get presences() { return this._presences; }
set presences(p) {this._presences = p; }
render(presences, diff) {
console.log("MainView.render()");
let userList = document.getElementById("UserList");
let userCounter = document.getElementById("UserCount");
if (userList) {
userList.innerHTML = Presence.list(presences, listBy)
.map(presence => `
<li>
<b>${presence.user}</b>
<br><small>online since ${presence.onlineAt}</small>
</li>
`)
.join("");
}
if (userCounter) {
userCounter.innerHTML = Presence.list(presences).length;
}
}
}
MainView._presences = {};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment