Add matter-js and get balls appearing per TX. still very messy

This commit is contained in:
Joshua Seigler 2018-01-09 01:32:05 -05:00
parent efc36034bc
commit 5dbf1b9dca
5 changed files with 59 additions and 77 deletions

View file

@ -1,11 +1,12 @@
'use strict'; 'use strict';
const io = require('socket.io-client'); const io = require('socket.io-client');
const Matter = require('matter-js');
var App = { var App = {
init: function init() { init: function init() {
var socket = io("https://insight.dash.org:443/"); var socket = io("https://insight.dash.org:443/");
var transactionList = document.getElementById('transactionList'); var playground = document.getElementById('playground');
var muteButton = document.getElementById('muteToggle'); var muteButton = document.getElementById('muteToggle');
var muted = false; var muted = false;
var audioContext; var audioContext;
@ -71,6 +72,7 @@ var App = {
var onTransaction = function(data) { var onTransaction = function(data) {
console.log(data); console.log(data);
/*
if (!muted) { if (!muted) {
if (data.valueOut < 10) { if (data.valueOut < 10) {
playSound('tx-sm', playbackRate(data.valueOut, 0.00001, 10, 1, 1.5)); playSound('tx-sm', playbackRate(data.valueOut, 0.00001, 10, 1, 1.5));
@ -109,11 +111,14 @@ var App = {
var toDelete = domRefList.pop(); var toDelete = domRefList.pop();
toDelete.remove(); toDelete.remove();
} }
transactionList.insertBefore(tx, transactionList.firstChild); playground.insertBefore(tx, playground.firstChild);
*/
World.add(engine.world, Bodies.circle(width / 2 + Math.random() * 10, -50, 50, { friction: 0.1 }));
}; };
var onBlock = function(data) { var onBlock = function(data) {
console.log(data); console.log(data);
/*
playSound('block', 1); playSound('block', 1);
var newBlock = document.createElement('a'); var newBlock = document.createElement('a');
newBlock.className = 'blockDivider'; newBlock.className = 'blockDivider';
@ -125,7 +130,8 @@ var App = {
var toDelete = domRefList.pop(); var toDelete = domRefList.pop();
toDelete.remove(); toDelete.remove();
} }
transactionList.insertBefore(newBlock, transactionList.firstChild); playground.insertBefore(newBlock, playground.firstChild);
*/
}; };
if (localStorage) { if (localStorage) {
@ -171,6 +177,44 @@ var App = {
console.error('Couldn\'t load sounds.'); console.error('Couldn\'t load sounds.');
} }
// module aliases
var Engine = Matter.Engine,
Render = Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
// create an engine
var engine = Engine.create();
var width = playground.offsetWidth;
var height = playground.offsetHeight;
// create a renderer
var render = Render.create({
canvas: playground,
engine: engine,
options: {
width: width,
height: height
}
});
// create two boxes and a ground
var edges = [
Bodies.rectangle(-10, height / 2, 60, height + 10, { isStatic: true }),
Bodies.rectangle(width + 10, height / 2, 60, height + 10, { isStatic: true }),
Bodies.rectangle(width/2, height + 10, width + 10, 60, { isStatic: true })
];
// add all of the bodies to the world
World.add(engine.world, edges);
// run the engine
Engine.run(engine);
// run the renderer
Render.run(render);
socket.on('connect', function() { socket.on('connect', function() {
document.getElementById('connectionStatus').className = 'is-connected'; document.getElementById('connectionStatus').className = 'is-connected';
// Join the room. // Join the room.

View file

@ -9,7 +9,7 @@
<div id="muteToggle"></div> <div id="muteToggle"></div>
<div id="connectionStatus" class="is-connecting"></div> <div id="connectionStatus" class="is-connecting"></div>
<div id="transactionList"></div> <canvas id="playground" style=""></canvas>
<script src="bundle.js"></script> <script src="bundle.js"></script>
<script>require('application').init();</script> <script>require('application').init();</script>

View file

@ -20,81 +20,14 @@ a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
#transactionList { #playground {
padding: 1em 0 0; position: absolute;
mix-blend-mode: screen; top: 0;
opacity: 0.75; left: 0;
width: 100vw;
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
} background: none !important;
#transactionList:after {
content: '';
position: fixed;
bottom: 0;
height: 8em;
left: 0;
right: 0;
background-image: linear-gradient(to top, black, transparent);
z-index: 2;
pointer-events: none;
}
#connectionStatus.is-connected ~ #transactionList:empty:before {
content: 'Waiting for first transaction...';
display: block;
text-align: center;
font-size: 2em;
opacity: 0.5;
}
.tx {
position: relative;
margin: 3px auto;
width: 20em;
min-width: 80%;
max-width: 100%;
z-index: 1;
}
.txValue {
display: none;
flex: 0 0 auto;
line-height: 1.25;
}
.txOutputs {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-content: stretch;
}
.txOut {
position: relative;
flex: 1 1 auto;
background-color: white;
}
.txOut:first {
border-left: 3px solid black;
}
.txOut:after {
content: '';
width: 3px;
background: black;
position: absolute;
right: 0;
top: 0;
bottom: 0;
}
.blockDivider {
display: block;
margin: 1em -1em -1.5em;
background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0.125));
padding: 0.125em 1em 1.5em;
color: rgba(0,0,0,0);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.blockDivider:hover, .blockDivider:focus {
color: inherit;
} }
#muteToggle, #connectionStatus { #muteToggle, #connectionStatus {

View file

@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"autoprefixer": "^7.1.4", "autoprefixer": "^7.1.4",
"less": "^2.7.2", "less": "^2.7.2",
"matter-js": "^0.14.0",
"socket.io": "^2.0.3" "socket.io": "^2.0.3"
}, },
"scripts": { "scripts": {

View file

@ -1893,6 +1893,10 @@ map-obj@^1.0.0, map-obj@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d" resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
matter-js@^0.14.0:
version "0.14.0"
resolved "https://registry.yarnpkg.com/matter-js/-/matter-js-0.14.0.tgz#413858ebb76613161579a0415cb9017ad4b5dcae"
md5.js@^1.3.4: md5.js@^1.3.4:
version "1.3.4" version "1.3.4"
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d" resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"