Commit 16c2f9f2 authored by marioromera's avatar marioromera
Browse files

starting

parent 932a2b43
<!doctype html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/><title>POC_WORKSHOP</title><link rel="shortcut icon" href="./favicon.ico"/><script src="./soundmanager2-jsmin.js"></script><script>window.soundManager = soundManager.setup({
url: './swf/',
debugMode: true,
onready: function () {
window.yourTurnAudio = soundManager.createSound({
id: 'yourTurnAudio',
url: './yourTurn.mp3',
});
},
});
document.addEventListener('click', playSound, false);
function playSound(e) {
console.log('PLay sound', e);
window.yourTurnAudio.play({ loops: 3, volume: 100 });
}</script><link rel="icon" href="favicon.ico"><link href="main.css" rel="stylesheet"></head><body><div class="app"><div class="id-container"><p>My name is:</p><input class="id-input"/><div class="scuttlebutt"><canvas id="node-pool" height="100%" width="100%"></canvas></div></div><div id="webRTC" class="webRTC"><div class="p2p-containers"><div class="offer-container"><div class="table"><div class="row"><div class="column">Offer</div></div><div class="row"><div class="column">from</div></div><div class="row"><div class="column">you</div><div class="column">other</div></div><div class="row"><div class="column"><textarea class="offer-copy" placeholder="copy"></textarea></div><div class="column"><button type="button" class="offer-try btn">Try out</button></div></div><div class="row"><div class="column"><button type="button" class="offer-generate btn">Generate</button></div><div class="column"><textarea type="text" class="offer-paste" placeholder="Paste"></textarea></div></div></div></div><div class="answer-container"><div class="table"><div class="row"><div class="column">Answer</div></div><div class="row"><div class="column">from</div></div><div class="row"><div class="column">you</div><div class="column">other</div></div><div class="row"><div class="column"><textarea class="answer-copy" placeholder="copy"></textarea></div><div class="column"><textarea class="answer-paste" placeholder="Paste"></textarea></div></div><div class="row"><div class="column"></div><div class="column"><button type="button" class="answer-try btn">Try out</button></div></div></div></div></div></div><div class="drawing-container"><svg id="drawing-svg"></svg></div></div><script src="main.js"></script></body></html>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
/*!
* The buffer module from node.js, for the browser.
*
* @author Feross Aboukhadijeh <http://feross.org>
* @license MIT
*/
/*! https://mths.be/utf8js v2.1.2 by @mathias */
/*! queue-microtask. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
/*! safe-buffer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
/*! simple-peer. MIT License. Feross Aboukhadijeh <https://feross.org/opensource> */
/**
* @license
* Lodash <https://lodash.com/>
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
* Released under MIT license <https://lodash.com/license>
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
* Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
*/
......@@ -12,15 +12,12 @@
<script>
window.soundManager = soundManager.setup({
url: './swf/',
debugMode: true,
debugMode: false,
onready: function () {
window.yourTurnAudio = soundManager.createSound({
id: 'yourTurnAudio',
url: './yourTurn.mp3',
autoPlay: true,
volume: 100,
loops: 3
url: './yourturn.ogg',
});
},
});
......@@ -38,6 +35,7 @@
<div class="scuttlebutt">
<canvas id="node-pool" height="100%" width="100%"></canvas>
</div>
<span class="audio-icon">🔈 </span>
</div>
<div id="webRTC" class="webRTC">
......
......@@ -6,14 +6,14 @@ import { Subject } from 'rxjs';
import { myTurnPathsData } from './myTurnPathData';
const MARGIN = 20;
const createEmptySession = () => ({
const createEmptyframe = () => ({
pathData: [],
from: undefined,
id: 'sessionId' + Date.now() * Math.random(),
id: 'frameId' + Date.now() * Math.random(),
});
export default function Drawing(svgId) {
this.sessions = [];
this.session = createEmptySession();
this.session = createEmptyframe();
this.svg = d3.select(svgId);
this.rect;
......@@ -37,6 +37,9 @@ export default function Drawing(svgId) {
.x((d) => (2 + Math.random() * 8 + d.x) * (this.width / 100))
.y((d) => (2 + Math.random() * 8 + d.y) * (this.height / 100));
this.sessionInterval;
this.liveDrawingG;
this.width =
this.svg.node().parentElement.getBoundingClientRect().width - MARGIN;
this.height =
......@@ -71,18 +74,21 @@ export default function Drawing(svgId) {
.scaleSequential(d3.interpolateRainbow)
.domain([-0.2, 0.45, 0.55, 1.1]);
const letterCoords = myTurnPathsData.map((point) =>
point.map((p) => ({ x: p[0], y: p[1] }))
);
this.$myTurn.subscribe((myTurn) => {
this.myTurn = myTurn;
console.log('Turn updated', myTurn);
this.myTurnG.selectAll('path').remove();
const letterCoords = myTurnPathsData.map((point) =>
point.map((p) => ({ x: p[0], y: p[1] }))
);
this.myTurn = myTurn;
if (myTurn) {
// AUDIO
if (window.soundManager) {
if (window.soundManager && state.withSound) {
const volume = 80;
console.log('playing sound');
window.soundManager.play('yourTurnAudio', { volume, loops: 3 });
}
......@@ -106,11 +112,11 @@ export default function Drawing(svgId) {
});
} else {
console.log('Finishing turn');
if (window.soundManager) {
console.log('Stop sounds');
soundManager.stopAll();
}
this.myTurnG.selectAll('path').remove();
}
});
......@@ -126,25 +132,38 @@ export default function Drawing(svgId) {
this.rect.attr('width', width).attr('height', height);
};
this.drawSessions = (sessions) => {
console.log('Drawing sessions', sessions.length);
this.drawframes = (frames) => {
clearInterval(this.sessionInterval);
let frame = 0;
this.sessionInterval = setInterval(() => {
console.log('Drawing frame', frame);
const f = frames[frame];
const s = sessions[sessions.length - 1];
if (!f) return;
const overallConnected = state.data.overallConnected;
if (!s) return;
const overallConnected = state.data.overallConnected;
const colorIndex = overallConnected.indexOf(s.from);
const colorIndex = overallConnected.indexOf(f.from);
if (s.from === state.id) {
console.log('Already drawn');
return;
}
this.drawLine(s.pathData, colorIndex);
this.drawLine(f.pathData, colorIndex, frame);
frame = frame + 1;
setTimeout(() => {
if (frame === frames.length) {
console.log('Restarting');
this.group.selectAll('path').remove();
frame = 0;
this.drawframes(frames);
}
}, 500);
}, 1000);
};
this.drawLine = (pathData, colorIndex) => {
this.path = this.group
this.drawLine = (pathData, colorIndex, frame) => {
const group = frame === undefined ? this.liveDrawingG : this.group;
this.path = group
.append('path') // start a new line
.data([pathData])
.attr('class', 'line')
......@@ -163,7 +182,7 @@ export default function Drawing(svgId) {
}
this.drawing = true;
this.session = createEmptySession(); // reset point data
this.session = createEmptyframe(); // reset point data
this.session.from = state.id;
this.pointInterval = setInterval(() => {
......@@ -174,7 +193,7 @@ export default function Drawing(svgId) {
y: (this.point[1] / this.height) * 100,
});
}
}, 50);
}, 100);
this.drawLine(
this.session.pathData,
......@@ -194,9 +213,13 @@ export default function Drawing(svgId) {
if (!this.drawing) return;
this.drawing = false;
clearInterval(this.pointInterval);
// add newly created line to the drawing frames
updateGossipData('frames', [...state.data.frames, this.session]);
this.$myTurn.next(false);
// add newly created line to the drawing sessions
updateGossipData('sessions', [...state.data.sessions, this.session]);
this.liveDrawingG.selectAll('path').remove();
// redraw the line after simplification
this.tick();
......@@ -240,10 +263,10 @@ export default function Drawing(svgId) {
.attr('width', this.width)
.attr('height', this.height)
.attr('class', 'drawing-canvas-background');
this.group = this.svg
.append('g')
.attr('id', 'group')
.attr('transform', 'translate(0, 0)');
this.group = this.svg.append('g').attr('id', 'group');
this.liveDrawingG = this.svg.append('g').attr('id', 'group');
this.myTurnG = this.svg
.append('g')
.attr('id', 'myTurnGroup')
......@@ -259,9 +282,11 @@ export default function Drawing(svgId) {
this.group.selectAll('path').attr('d', (d) => {
return this.line(d);
});
this.myTurnG.selectAll('path').attr('d', (d) => {
return this.myTurnLine(d);
});
if (this.myTurn) {
this.myTurnG.selectAll('path').attr('d', (d) => {
return this.myTurnLine(d);
});
}
}, 100);
this.redraw();
......
......@@ -13,11 +13,25 @@ drawId(state.id);
import _ from 'lodash';
// Sound Control
const audioTrigger = document.querySelector('.audio-icon');
audioTrigger.addEventListener('click', toggleSound, false);
if (JSON.parse(localStorage.getItem('withSound'))) {
console.log('Adding sound class');
audioTrigger.classList.add('withSound');
}
function toggleSound(e) {
e.preventDefault();
state.withSound = !state.withSound;
localStorage.setItem('withSound', state.withSound);
audioTrigger.classList.toggle('withSound');
}
document.querySelector('.app').addEventListener('click', playSound, false);
function playSound(e) {
console.log('PLay sound', e);
window.yourTurnAudio.play();
window.soundManager.play('yourTurnAudio', { volume: 0, loops: 3 });
}
import Drawing from './components/drawing';
......@@ -66,16 +80,20 @@ state.dataObserver.subscribe((update) => {
]);
}
const sessionsLength = state.data.sessions.length;
const framesLength = state.data.frames.length;
const peersNumber = state.data.overallConnected.length;
const myIndex = state.data.overallConnected.indexOf(state.id);
const myTurn = sessionsLength % peersNumber === myIndex;
draw.$myTurn.next(myTurn);
const myTurn =
framesLength || peersNumber || framesLength % peersNumber === myIndex;
if (draw.turn !== myTurn) {
draw.$myTurn.next(myTurn);
}
if (update.sessions) {
console.log('Sessions updated', state.data.sessions);
draw.drawSessions(state.data.sessions);
if (update.frames) {
console.log('frames updated', state.data.frames);
draw.drawframes(state.data.frames);
}
});
......@@ -128,7 +146,6 @@ const answerButton = document.querySelector('button.answer-try');
answerButton.addEventListener('click', tryAnswer);
export function drawOffer(offer) {
console.log('draw offer', offer);
let offerEl;
if (!offer.from || !state.socket) {
offerEl = document.querySelector(`.offer-copy`);
......
......@@ -193,3 +193,18 @@ path.myTurn {
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.audio-icon {
padding: 1rem;
margin-right: 1rem;
display: flex;
align-items: center;
border: 1px dashed yellow;
border-radius: 50%;
justify-content: center;
background-color: rgba(255, 0, 0, 0.185);
&.withSound {
background-color: rgba(0, 128, 0, 0.233);
}
}
......@@ -15,6 +15,11 @@ export let state = {
answers: {},
connectedPeers: [],
// sound
withSound: localStorage.getItem('withSound')
? JSON.parse(localStorage.getItem('withSound'))
: true,
//Socket
socket: null,
socketConnections: [],
......@@ -30,7 +35,7 @@ export let state = {
// Scuttlebut state mirrored
data: {
sessions: [],
frames: [],
overallConnected: [],
},
dataObserver: new Subject(),
......
......@@ -17,7 +17,7 @@ const plugins = [
favicon: './public/favicon.ico',
}),
new CopyPlugin([
{ from: 'public/yourTurn.mp3' },
{ from: 'public/yourturn.ogg' },
{ from: 'public/swf', to: 'swf' },
{ from: 'public/soundmanager2-jsmin.js' },
]),
......
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