diff --git a/README.md b/README.md
index 6959969..bee0d8d 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@ For convenience, I add the `budo` command to the `scripts` section of my
```json
{
"scripts": {
- "start": "budo index.js"
+ "start": "budo index.js:bundle.js"
}
}
```
diff --git a/drawing-animating-svgs/README.md b/drawing-animating-svgs/README.md
new file mode 100644
index 0000000..577e553
--- /dev/null
+++ b/drawing-animating-svgs/README.md
@@ -0,0 +1,10 @@
+# Drawing & Animating SVGs
+
+> [https://www.youtube.com/watch?v=Nnnx9ytFqK4](https://www.youtube.com/watch?v=Nnnx9ytFqK4)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/drawing-animating-svgs/index.html b/drawing-animating-svgs/index.html
new file mode 100644
index 0000000..12cd9d8
--- /dev/null
+++ b/drawing-animating-svgs/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+ Obligatory Bear Inclusion
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/drawing-animating-svgs/index.js b/drawing-animating-svgs/index.js
new file mode 100644
index 0000000..e69de29
diff --git a/drawing-animating-svgs/package.json b/drawing-animating-svgs/package.json
new file mode 100644
index 0000000..105a321
--- /dev/null
+++ b/drawing-animating-svgs/package.json
@@ -0,0 +1,15 @@
+{
+ "name": "drawing-animating-svgs",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js --live",
+ "test": "node test.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ }
+}
diff --git a/easier-webgl-shaders-stackgl/README.md b/easier-webgl-shaders-stackgl/README.md
new file mode 100644
index 0000000..33caf49
--- /dev/null
+++ b/easier-webgl-shaders-stackgl/README.md
@@ -0,0 +1,10 @@
+# Easier WebGL and Shaders with stack.gl
+
+> [https://www.youtube.com/watch?v=Qsku8RfB-pM](https://www.youtube.com/watch?v=Qsku8RfB-pM)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/easier-webgl-shaders-stackgl/index.js b/easier-webgl-shaders-stackgl/index.js
new file mode 100644
index 0000000..656949b
--- /dev/null
+++ b/easier-webgl-shaders-stackgl/index.js
@@ -0,0 +1,48 @@
+const shell = require('gl-now')()
+const createShader = require('gl-shader')
+const createBuffer = require('gl-buffer')
+const mat4 = require('gl-mat4')
+
+let shader, buffer
+shell.on('gl-init', function () {
+ const gl = shell.gl
+ shader = createShader(gl, `
+ uniform mat4 model;
+ uniform mat4 camera;
+ attribute vec3 position;
+ void main() {
+ gl_Position = camera * model * vec4(position, 1.0);
+ }
+ `, `
+ void main() {
+ gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
+ }
+ `)
+ buffer = createBuffer(gl, [
+ 0.0, 0.5, 0.0,
+ -0.5, -0.5, 0.0,
+ 0.5, -0.5, 0.0,
+ ])
+})
+
+shell.on('gl-render', function () {
+ const gl = shell.gl
+ shader.bind()
+ buffer.bind()
+
+ const camera = mat4.create()
+ mat4.perspective(camera, 45 * Math.PI / 180, shell.width / shell.height, 0.1, 1000.0)
+ mat4.translate(camera, camera, [0, 0, -2])
+ shader.uniforms.camera = camera
+
+ const model = mat4.create()
+ mat4.translate(model, model, [-.3, 0, 0])
+ //mat4.rotate(model, model, 45, [0, 0, 1])
+ mat4.scale(model, model, [.5, .5, 1])
+ shader.uniforms.model = model
+ shader.attributes.position.pointer()
+ gl.drawArrays(gl.TRIANGLES, 0, 3)
+})
+
+
+
diff --git a/easier-webgl-shaders-stackgl/package.json b/easier-webgl-shaders-stackgl/package.json
new file mode 100644
index 0000000..3bb131a
--- /dev/null
+++ b/easier-webgl-shaders-stackgl/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "easier-webgl-shaders-stackgl",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js --live"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ },
+ "dependencies": {
+ "gl-buffer": "^2.1.2",
+ "gl-mat4": "^1.2.0",
+ "gl-now": "^1.4.0",
+ "gl-shader": "^4.2.1"
+ }
+}
diff --git a/electron-webpack-vuejs/.gitignore b/electron-webpack-vuejs/.gitignore
new file mode 100644
index 0000000..0841ed3
--- /dev/null
+++ b/electron-webpack-vuejs/.gitignore
@@ -0,0 +1,3 @@
+dist
+node_modules
+package-lock.json
\ No newline at end of file
diff --git a/electron-webpack-vuejs/README.md b/electron-webpack-vuejs/README.md
new file mode 100644
index 0000000..e5b86ce
--- /dev/null
+++ b/electron-webpack-vuejs/README.md
@@ -0,0 +1,10 @@
+# Electron with webpack and Vue.js
+
+> [https://youtu.be/oL7vIDkDOsg](https://youtu.be/oL7vIDkDOsg)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app.
diff --git a/electron-webpack-vuejs/package.json b/electron-webpack-vuejs/package.json
new file mode 100644
index 0000000..cd652ea
--- /dev/null
+++ b/electron-webpack-vuejs/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "electron-webpack-vuejs",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "electron-webpack dev",
+ "build": "electron-webpack && electron-builder -c.mac.identity=null"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "electron": "^2.0.2",
+ "electron-builder": "^20.15.1",
+ "electron-webpack": "^2.1.2",
+ "vue": "^2.5.16",
+ "vue-loader": "^15.2.2",
+ "vue-template-compiler": "^2.5.16",
+ "webpack": "^4.9.1"
+ },
+ "dependencies": {
+ "source-map-support": "^0.5.6"
+ }
+}
diff --git a/electron-webpack-vuejs/src/index.html b/electron-webpack-vuejs/src/index.html
new file mode 100644
index 0000000..b438956
--- /dev/null
+++ b/electron-webpack-vuejs/src/index.html
@@ -0,0 +1,18 @@
+
+
+
+ <%= process.env.npm_package_productName %>
+
+
+
+
+
+
+
diff --git a/electron-webpack-vuejs/src/main/index.js b/electron-webpack-vuejs/src/main/index.js
new file mode 100644
index 0000000..acd13a1
--- /dev/null
+++ b/electron-webpack-vuejs/src/main/index.js
@@ -0,0 +1,32 @@
+import { app, BrowserWindow } from 'electron'
+import path from 'path'
+import { format as formatUrl } from 'url'
+
+const isDevelopment = process.env.NODE_ENV !== 'production'
+
+app.on('ready', () => {
+ let window = new BrowserWindow({
+ width: 1024,
+ webPreferences: {
+ nodeIntegration: true
+ }
+ })
+ if (isDevelopment) {
+ window.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`)
+ } else {
+ window.loadURL(formatUrl({
+ pathname: path.join(__dirname, 'index.html'),
+ protocol: 'file',
+ slashes: true
+ }))
+ }
+ window.on("closed", () => {
+ window = null;
+ })
+})
+
+app.on("window-all-closed", () => {
+ if (process.platform !== "darwin") {
+ app.quit();
+ }
+})
\ No newline at end of file
diff --git a/electron-webpack-vuejs/src/renderer/App.vue b/electron-webpack-vuejs/src/renderer/App.vue
new file mode 100644
index 0000000..49f4ae4
--- /dev/null
+++ b/electron-webpack-vuejs/src/renderer/App.vue
@@ -0,0 +1,13 @@
+
+ {{name}}
+
+
+
\ No newline at end of file
diff --git a/electron-webpack-vuejs/src/renderer/index.js b/electron-webpack-vuejs/src/renderer/index.js
new file mode 100644
index 0000000..734a3c1
--- /dev/null
+++ b/electron-webpack-vuejs/src/renderer/index.js
@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+new Vue({
+ el: '#app',
+ render(h) {
+ return h(App)
+ }
+})
\ No newline at end of file
diff --git a/electron-webpack-vuejs/webpack.config.js b/electron-webpack-vuejs/webpack.config.js
new file mode 100644
index 0000000..f9d3d0e
--- /dev/null
+++ b/electron-webpack-vuejs/webpack.config.js
@@ -0,0 +1,14 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+module.exports = {
+ module: {
+ rules: [
+ {
+ test: /\.vue$/,
+ use: 'vue-loader'
+ }
+ ]
+ },
+ plugins: [
+ new VueLoaderPlugin()
+ ]
+}
\ No newline at end of file
diff --git a/how-to-make-chrome-extensions/bear/content.js b/how-to-make-chrome-extensions/bear/content.js
index e11d1c4..b249bae 100644
--- a/how-to-make-chrome-extensions/bear/content.js
+++ b/how-to-make-chrome-extensions/bear/content.js
@@ -6,7 +6,8 @@
// })
const re = new RegExp('bear', 'gi')
-const matches = document.documentElement.innerHTML.match(re)
+const matches = document.documentElement.innerHTML.match(re) || []
+
chrome.runtime.sendMessage({
url: window.location.href,
count: matches.length
diff --git a/javascript-filereader/README.md b/javascript-filereader/README.md
new file mode 100644
index 0000000..f2e3785
--- /dev/null
+++ b/javascript-filereader/README.md
@@ -0,0 +1,10 @@
+# JavaScript FileReader
+
+> [https://www.youtube.com/watch?v=-AR-6X_98rM](https://www.youtube.com/watch?v=-AR-6X_98rM)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-filereader/bear.jpg b/javascript-filereader/bear.jpg
new file mode 100644
index 0000000..3b4a4ae
Binary files /dev/null and b/javascript-filereader/bear.jpg differ
diff --git a/javascript-filereader/bears.csv b/javascript-filereader/bears.csv
new file mode 100644
index 0000000..771bfa2
--- /dev/null
+++ b/javascript-filereader/bears.csv
@@ -0,0 +1,3 @@
+name,type
+tim,grizzly
+randy,brown
\ No newline at end of file
diff --git a/javascript-filereader/index.html b/javascript-filereader/index.html
new file mode 100644
index 0000000..1a19517
--- /dev/null
+++ b/javascript-filereader/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ JS FileReader
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/javascript-filereader/index.js b/javascript-filereader/index.js
new file mode 100644
index 0000000..2b3ef6f
--- /dev/null
+++ b/javascript-filereader/index.js
@@ -0,0 +1,56 @@
+const input = document.querySelector('input[type="file"]')
+function handleFiles (files) {
+ console.log(files)
+ const reader = new FileReader()
+ reader.onload = function () {
+ // const lines = reader.result.split('\n').map(function (line) {
+ // return line.split(',')
+ // })
+ // console.log(lines)
+ const img = new Image()
+ img.onload = function () {
+ const canvas = document.createElement('canvas')
+ const context = canvas.getContext('2d')
+ context.drawImage(img, 0, 0)
+
+ const imageData = context.getImageData(0, 0, canvas.width, canvas.height)
+ const data = imageData.data
+ for (var i = 0; i <= data.length; i += 4) {
+ const avg = (data[i] + data[i + 1] + data[i + 2]) / 3
+ data[i] = avg
+ data[i + 1] = avg
+ data[i + 2] = avg
+ }
+ context.putImageData(imageData, 0, 0)
+
+ document.body.appendChild(canvas)
+ //canvas.toDataURL()
+ //const csvfile = new Blob(['one,two,three'], { type: 'text/csv' })
+ canvas.toBlob(function (blob) {
+ const form = new FormData()
+ form.append('image', blob, 'moody.jpg')
+ const xhr = new XMLHttpRequest()
+ xhr.open('POST', '/imageupload', true)
+ xhr.send(form)
+ })
+ }
+ img.src = reader.result
+ //document.body.appendChild(img)
+ }
+ //reader.readAsText(files[0])
+ reader.readAsDataURL(files[0])
+}
+
+input.addEventListener('change', function (e) {
+ handleFiles(input.files)
+}, false)
+
+document.addEventListener('dragover', function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+}, false)
+document.addEventListener('drop', function (e) {
+ e.preventDefault()
+ e.stopPropagation()
+ handleFiles(e.dataTransfer.files)
+}, false)
\ No newline at end of file
diff --git a/javascript-filereader/package.json b/javascript-filereader/package.json
new file mode 100644
index 0000000..270a1f7
--- /dev/null
+++ b/javascript-filereader/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "javascript-filereader",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js:bundle.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.2"
+ }
+}
diff --git a/javascript-mutation-observer/README.md b/javascript-mutation-observer/README.md
new file mode 100644
index 0000000..bef233b
--- /dev/null
+++ b/javascript-mutation-observer/README.md
@@ -0,0 +1,10 @@
+# JavaScript Mutation Observer
+
+> [https://youtu.be/Hn2zzi_lquA](https://youtu.be/Hn2zzi_lquA)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-mutation-observer/bears.js b/javascript-mutation-observer/bears.js
new file mode 100644
index 0000000..d00f052
--- /dev/null
+++ b/javascript-mutation-observer/bears.js
@@ -0,0 +1,13 @@
+const theOnlyBearsIKnow = ['Polar', 'Brown', 'Grizzly']
+
+setTimeout(function addBear () {
+ const bears = document.querySelector('ul.bears')
+ const bear = document.createElement('li')
+ bear.textContent = theOnlyBearsIKnow[parseInt(Math.random() * theOnlyBearsIKnow.length, 10)]
+ bears.appendChild(bear)
+}, Math.random() * 2000)
+
+setTimeout(function removeBear () {
+ const bears = document.querySelector('ul.bears')
+ bears.removeChild(bears.querySelector('li'))
+}, Math.random() * 2000 + 2000)
\ No newline at end of file
diff --git a/javascript-mutation-observer/index.html b/javascript-mutation-observer/index.html
new file mode 100644
index 0000000..538748f
--- /dev/null
+++ b/javascript-mutation-observer/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ MutationObserver
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/javascript-mutation-observer/index.js b/javascript-mutation-observer/index.js
new file mode 100644
index 0000000..ea09770
--- /dev/null
+++ b/javascript-mutation-observer/index.js
@@ -0,0 +1,40 @@
+require('./bears.js')
+require('./sizer.js')
+
+const observer = new MutationObserver(function (mutations) {
+ mutations.forEach(function (mutation) {
+ if (mutation.attributeName === 'style') {
+ centerModal()
+ }
+ if (mutation.addedNodes.length) {
+ console.log('Added', mutation.addedNodes[0])
+ }
+ if (mutation.removedNodes.length) {
+ console.log('Removed', mutation.removedNodes[0])
+ }
+ })
+})
+const bears = document.querySelector('ul.bears')
+observer.observe(bears, {
+ childList: false,
+ attributes: true
+})
+
+function centerModal () {
+ const width = parseInt(bears.offsetWidth, 10)
+ const height = parseInt(bears.offsetHeight, 10)
+ Object.assign(bears.style, {
+ top: '50%',
+ left: '50%',
+ marginTop: -(height / 2) + 'px',
+ marginLeft: -(width / 2) + 'px',
+ })
+}
+
+// const poller = setInterval(function () {
+// const bear = document.querySelector('ul.bears li')
+// if (bear) {
+// console.log(bear)
+// clearInterval(poller)
+// }
+// }, 1000)
\ No newline at end of file
diff --git a/javascript-mutation-observer/package.json b/javascript-mutation-observer/package.json
new file mode 100644
index 0000000..62c095c
--- /dev/null
+++ b/javascript-mutation-observer/package.json
@@ -0,0 +1,14 @@
+{
+ "name": "javascript-mutation-observer",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "start": "budo index.js:bundle.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT",
+ "devDependencies": {
+ "budo": "^11.2.0"
+ }
+}
diff --git a/javascript-mutation-observer/sizer.js b/javascript-mutation-observer/sizer.js
new file mode 100644
index 0000000..1623c2b
--- /dev/null
+++ b/javascript-mutation-observer/sizer.js
@@ -0,0 +1,13 @@
+setInterval(function sizer () {
+ const bears = document.querySelector('ul.bears')
+ Object.assign(bears.style, {
+ position: 'absolute',
+ border: '1px solid #ddd',
+ width: (Math.random() * 200) + 'px',
+ height: (Math.random() * 200) + 'px',
+ boxShadow: '0px 0px 5px 0px rgba(0,0,0,.3)',
+ overflow: 'hidden',
+ padding: '20px',
+ listStyle: 'none'
+ })
+}, 1000)
\ No newline at end of file
diff --git a/javascript-proxy/README.md b/javascript-proxy/README.md
new file mode 100644
index 0000000..6596ec9
--- /dev/null
+++ b/javascript-proxy/README.md
@@ -0,0 +1,10 @@
+# JavaScript Proxy
+
+> [https://youtu.be/gZ4MCb2nlfQ](https://youtu.be/gZ4MCb2nlfQ)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/javascript-proxy/array.js b/javascript-proxy/array.js
new file mode 100644
index 0000000..5125216
--- /dev/null
+++ b/javascript-proxy/array.js
@@ -0,0 +1,59 @@
+
+const IndexedArray = new Proxy(Array, {
+ construct: function (target, [originalArray]) {
+ const index = {}
+ originalArray.forEach(function (item) {
+ index[item.id] = item
+ })
+
+ const newArray = new target(...originalArray)
+
+ return new Proxy(newArray, {
+ get: function (target, name) {
+ if (name === 'push') {
+ return function (item) {
+ index[item.id] = item
+ return target[name].call(target, item)
+ }
+ } else if (name === 'findById') {
+ return function (searchId) {
+ return index[searchId]
+ }
+ }
+ return target[name]
+ }
+ })
+ }
+})
+
+const bears = new IndexedArray([
+ {
+ id: 2,
+ name: 'grizzly',
+ },
+ {
+ id: 4,
+ name: 'black',
+ },
+ {
+ id: 3,
+ name: 'polar',
+ },
+])
+
+bears.push({
+ id: 55,
+ name: 'brown'
+})
+
+const brown = bears.findById(55)
+console.log(brown)
+console.log(bears.findById(3))
+
+// const index = {}
+// bears.forEach(function (bear) {
+// index[bear.id] = bear
+// })
+//
+// const polar = index[3]
+// const black = index[4]
diff --git a/javascript-proxy/index.js b/javascript-proxy/index.js
new file mode 100644
index 0000000..88d7492
--- /dev/null
+++ b/javascript-proxy/index.js
@@ -0,0 +1,53 @@
+let bears = { grizzly: true }
+
+let grizzlyCount = 0
+
+const proxyBears = new Proxy(bears, {
+ get: function (target, prop) {
+ if (prop === 'grizzly') grizzlyCount++
+ return target[prop]
+ },
+ set: function (target, prop, value) {
+ if (['grizzly', 'brown', 'polar'].indexOf(prop) === -1) {
+ throw new Error('THAT IS TOTALLY NOT A BEAR!')
+ }
+ target[prop] = value
+ },
+ deleteProperty: function (target, prop) {
+ console.log(`You have deleted ${prop}`)
+ delete target[prop]
+ }
+})
+
+//proxyBears.aardvark = true
+proxyBears.polar = true
+//delete proxyBears.polar
+//console.log(proxyBears.polar)
+
+// proxyBears.grizzly
+// proxyBears.grizzly
+// proxyBears.grizzly
+// proxyBears.grizzly
+// console.log(grizzlyCount)
+
+function growl() {
+ return 'grrr'
+}
+const loudGrowl = new Proxy(growl, {
+ apply: function (target, thisArg, args) {
+ return target().toUpperCase() + '!!!'
+ }
+})
+
+console.log(loudGrowl())
+
+
+
+
+
+
+
+
+
+
+
diff --git a/javascript-proxy/package.json b/javascript-proxy/package.json
new file mode 100644
index 0000000..8c75330
--- /dev/null
+++ b/javascript-proxy/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "javascript-proxy",
+ "version": "0.1.0",
+ "description": "",
+ "main": "index.js",
+ "dependencies": {},
+ "devDependencies": {
+ "budo": "^9.1.0"
+ },
+ "scripts": {
+ "start": "budo array.js --live",
+ "test": "node test.js"
+ },
+ "author": "Kyle Robinson Young (http://dontkry.com)",
+ "license": "MIT"
+}
diff --git a/javascript-proxy/person.js b/javascript-proxy/person.js
new file mode 100644
index 0000000..0d05ecd
--- /dev/null
+++ b/javascript-proxy/person.js
@@ -0,0 +1,20 @@
+const person = {
+ first: 'Bear',
+ last: 'McBearison'
+}
+
+const cleverPerson = new Proxy(person, {
+ get: function (target, prop) {
+ if (!(prop in target)) {
+ return prop.split('_').map(function (part) {
+ return target[part]
+ }).join(' ')
+ }
+ return target[prop]
+ }
+})
+
+console.log(cleverPerson.last_first_first_first_first_first)
+
+cleverPerson.last = 'Beary'
+console.log(cleverPerson.first_last)
\ No newline at end of file
diff --git a/simple-p2p-with-webrtc/README.md b/simple-p2p-with-webrtc/README.md
index e73c406..142d040 100644
--- a/simple-p2p-with-webrtc/README.md
+++ b/simple-p2p-with-webrtc/README.md
@@ -1,7 +1,10 @@
-# Simple P2P with WebRTC
+# P2P Signaling for WebRTC
+# I MADE A WEBRTC MISTAKE
> [https://youtu.be/jY9k4rfXwEI](https://youtu.be/jY9k4rfXwEI)
+> UPDATED with WebRTC: [https://www.youtube.com/watch?v=IqPJb6o_S1Q](https://www.youtube.com/watch?v=IqPJb6o_S1Q)
+
Install [Node.js](https://nodejs.org/).
Within this folder run the terminal command `npm install` to install the
diff --git a/simple-p2p-with-webrtc/index.js b/simple-p2p-with-webrtc/index.js
index 0c3d16e..379d143 100644
--- a/simple-p2p-with-webrtc/index.js
+++ b/simple-p2p-with-webrtc/index.js
@@ -1,43 +1,73 @@
-const signalhub = require('signalhub')
-const hub = signalhub('my-game', [
- 'http://localhost:8080'
-])
-
-const Player = require('./player.js')
-const you = new Player()
-
-const players = {}
-hub.subscribe('update').on('data', function (data) {
- if (data.color === you.color) return
- if (!players[data.color]) {
- players[data.color] = new Player(data)
- }
- players[data.color].update(data)
- //console.log(data)
-})
+navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(function (stream) {
+
+ const signalhub = require('signalhub')
+ const createSwarm = require('webrtc-swarm')
+ const hub = signalhub('my-game', [
+ 'http://localhost:8080'
+ ])
+ const swarm = createSwarm(hub, {
+ stream: stream
+ })
+
+ const Player = require('./player.js')
+ const you = new Player()
+ you.addStream(stream)
+
+ const players = {}
+ swarm.on('connect', function (peer, id) {
+ if (!players[id]) {
+ players[id] = new Player()
+ peer.on('data', function (data) {
+ data = JSON.parse(data.toString())
+ players[id].update(data)
+ })
+ players[id].addStream(peer.stream)
+ }
+ })
-setInterval(function () {
- //hub.broadcast('update', window.location.hash)
- you.update()
- hub.broadcast('update', you)
-}, 100)
-
-document.addEventListener('keypress', function (e) {
- const speed = 16
- switch (e.key) {
- case 'a':
- you.x -= speed
- break
- case 'd':
- you.x += speed
- break
- case 'w':
- you.y -= speed
- break
- case 's':
- you.y += speed
- break
- }
-}, false)
+ swarm.on('disconnect', function (peer, id) {
+ if (players[id]) {
+ players[id].element.parentNode.removeChild(players[id].element)
+ delete players[id]
+ }
+ })
+ // hub.subscribe('update').on('data', function (data) {
+ // if (data.color === you.color) return
+ // if (!players[data.color]) {
+ // players[data.color] = new Player(data)
+ // }
+ // players[data.color].update(data)
+ // //console.log(data)
+ // })
+
+ setInterval(function () {
+ //hub.broadcast('update', window.location.hash)
+ you.update()
+ //hub.broadcast('update', you)
+ const youString = JSON.stringify(you)
+ swarm.peers.forEach(function (peer) {
+ peer.send(youString)
+ })
+ }, 100)
+
+ document.addEventListener('keypress', function (e) {
+ const speed = 16
+ switch (e.key) {
+ case 'a':
+ you.x -= speed
+ break
+ case 'd':
+ you.x += speed
+ break
+ case 'w':
+ you.y -= speed
+ break
+ case 's':
+ you.y += speed
+ break
+ }
+ }, false)
+
+})
diff --git a/simple-p2p-with-webrtc/package.json b/simple-p2p-with-webrtc/package.json
index 702c864..a735c9e 100644
--- a/simple-p2p-with-webrtc/package.json
+++ b/simple-p2p-with-webrtc/package.json
@@ -13,6 +13,7 @@
"budo": "^11.2.0"
},
"dependencies": {
- "signalhub": "^4.9.0"
+ "signalhub": "^4.9.0",
+ "webrtc-swarm": "^2.9.0"
}
}
diff --git a/simple-p2p-with-webrtc/player.js b/simple-p2p-with-webrtc/player.js
index d7e883f..a188163 100644
--- a/simple-p2p-with-webrtc/player.js
+++ b/simple-p2p-with-webrtc/player.js
@@ -5,10 +5,10 @@ function Player (data) {
this.color = data.color || randomColor()
this.x = 0
this.y = 0
- this.element = document.createElement('div')
+ this.element = document.createElement('video')
Object.assign(this.element.style, {
- width: '16px',
- height: '16px',
+ width: '64px',
+ height: '64px',
position: 'absolute',
top: '0px',
left: '0px',
@@ -17,6 +17,11 @@ function Player (data) {
document.body.appendChild(this.element)
}
+Player.prototype.addStream = function (stream) {
+ this.element.srcObject = stream
+ this.element.play()
+}
+
Player.prototype.update = function (data) {
data = data || {}
this.x = data.x || this.x
@@ -28,5 +33,5 @@ Player.prototype.update = function (data) {
}
function randomColor () {
- return '#' + ((1 << 24) * Math.random() | 0).toString()
+ return '#' + Math.random().toString(16).substr(-6)
}
\ No newline at end of file
diff --git a/vuejs-computed-properties/App.vue b/vuejs-computed-properties/App.vue
new file mode 100644
index 0000000..3bc8f6a
--- /dev/null
+++ b/vuejs-computed-properties/App.vue
@@ -0,0 +1,69 @@
+
+
+
+
+
+