summaryrefslogtreecommitdiff
path: root/assets/javascripts/mx/primitives
diff options
context:
space:
mode:
Diffstat (limited to 'assets/javascripts/mx/primitives')
-rw-r--r--assets/javascripts/mx/primitives/mx.box.js62
-rw-r--r--assets/javascripts/mx/primitives/mx.boxDimensions.js88
-rw-r--r--assets/javascripts/mx/primitives/mx.coords.js61
-rw-r--r--assets/javascripts/mx/primitives/mx.door.js75
-rw-r--r--assets/javascripts/mx/primitives/mx.face.js41
-rw-r--r--assets/javascripts/mx/primitives/mx.iframe.js19
-rw-r--r--assets/javascripts/mx/primitives/mx.image.js40
-rw-r--r--assets/javascripts/mx/primitives/mx.texturedBox.js119
-rw-r--r--assets/javascripts/mx/primitives/mx.video.js48
9 files changed, 553 insertions, 0 deletions
diff --git a/assets/javascripts/mx/primitives/mx.box.js b/assets/javascripts/mx/primitives/mx.box.js
new file mode 100644
index 0000000..9f053da
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.box.js
@@ -0,0 +1,62 @@
+MX.Box = MX.Object3D.extend({
+
+ // this will be called within the contructor
+ init: function (size, color, borderColor) {
+
+ this.type = "Box"
+
+ size = size || 100
+ color = color || 'rgba(0, 255, 122, .1)'
+ borderColor = borderColor || '#0f3'
+
+ // an Object3D's associated DOM node is the "el" property
+ this.el.classList.add('box')
+
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+ var top = this.top = new MX.Object3D('.face')
+ top.rotationX = angle
+ top.y = size / 2
+
+ var bottom = this.bottom = new MX.Object3D('.face')
+ bottom.rotationX = -angle
+ bottom.y = -size / 2
+
+ var left = this.left = new MX.Object3D('.face')
+ left.rotationY = -angle
+ left.x = -size / 2
+
+ var right = this.right = new MX.Object3D('.face')
+ right.rotationY = angle
+ right.x = size / 2
+
+ var front = this.front = new MX.Object3D('.face')
+ front.z = -size / 2
+
+ var back = this.back = new MX.Object3D('.face')
+ back.rotationY = angle * 2
+ back.z = size / 2
+
+ // adding children, must also be instances of Object3D
+ this.add(top, bottom, left, right, front, back)
+
+ this.children.forEach(function (face) {
+ face.width = size - 2
+ face.height = size - 2
+ face.el.style.backgroundColor = color
+ face.el.style.border = '1px solid ' + borderColor
+ })
+
+ // this applies the updated CSS style
+ // required for any change to take effect
+ // when a parent object's update() is called
+ // all its children will be updated as well
+ this.update()
+
+ // if this object's children won't move by themselves
+ this.updateChildren = false
+ }
+
+ // other properties will be mixed into the prototype of the new constructor
+
+}) \ No newline at end of file
diff --git a/assets/javascripts/mx/primitives/mx.boxDimensions.js b/assets/javascripts/mx/primitives/mx.boxDimensions.js
new file mode 100644
index 0000000..d1d507d
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.boxDimensions.js
@@ -0,0 +1,88 @@
+MX.BoxDimensions = MX.Object3D.extend({
+
+ // this will be called within the contructor
+ init: function (opt) {
+
+ this.type = "BoxDimensions"
+
+ this.opt = opt
+
+ var width = opt.width || 100
+ var height = opt.height || 100
+ var depth = opt.depth || 100
+ var color = this.color = opt.color || 'rgba(0, 255, 122, .1)'
+ var borderColor = this.borderColor = opt.borderColor || '#0f3'
+ var sides = this.sides = opt.sides || "top bottom left right back"
+
+ // an Object3D's associated DOM node is the "el" property
+ this.el.classList.add('box')
+
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+ var top = this.top = new MX.Object3D('.face.top')
+ top.rotationX = angle
+ top.width = width
+ top.height = depth
+ top.y = height
+
+ var bottom = this.bottom = new MX.Object3D('.face.bottom')
+ bottom.rotationX = -angle
+ bottom.width = width
+ bottom.height = depth
+ bottom.y = 0
+
+ var left = this.left = new MX.Object3D('.face.left')
+ left.rotationY = -angle
+ left.width = depth
+ left.height = height
+ left.x = -width/2
+ left.y = height/2
+
+ var right = this.right = new MX.Object3D('.face.right')
+ right.rotationY = angle
+ right.width = depth
+ right.height = height
+ right.x = width/2
+ right.y = height/2
+
+ var front = this.front = new MX.Object3D('.face.front')
+ front.width = width
+ front.height = height
+ front.z = -depth/2
+ front.y = height/2
+
+ var back = this.back = new MX.Object3D('.face.back')
+ back.width = width
+ back.height = height
+ back.rotationY = angle * 2
+ back.z = depth/2
+ back.y = height/2
+
+ // adding children, must also be instances of Object3D
+ if (-1 != sides.indexOf("top")) this.add(top)
+ if (-1 != sides.indexOf("bottom")) this.add(bottom)
+ if (-1 != sides.indexOf("left")) this.add(left)
+ if (-1 != sides.indexOf("right")) this.add(right)
+ if (-1 != sides.indexOf("front")) this.add(front)
+ if (-1 != sides.indexOf("back")) this.add(back)
+
+ this.children.forEach(function (face) {
+ face.el.style.backgroundColor = color
+ face.el.style.border = '3px solid ' + borderColor
+ })
+
+ bottom.el.style.border = "0"
+
+ // this applies the updated CSS style
+ // required for any change to take effect
+ // when a parent object's update() is called
+ // all its children will be updated as well
+ this.update()
+
+ // if this object's children won't move by themselves
+ this.updateChildren = false
+ }
+
+ // other properties will be mixed into the prototype of the new constructor
+
+}) \ No newline at end of file
diff --git a/assets/javascripts/mx/primitives/mx.coords.js b/assets/javascripts/mx/primitives/mx.coords.js
new file mode 100644
index 0000000..80b148c
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.coords.js
@@ -0,0 +1,61 @@
+MX.Coords = (function () {
+
+ var colors = {
+ x: '#f33',
+ y: '#3f3',
+ z: '#66f'
+ }
+
+ var Axis = MX.Object3D.extend({
+ init: function (axis, size) {
+
+ var label = document.createElement('span')
+ label.textContent = axis.toUpperCase()
+ label.style.position = 'absolute'
+ label.style.right = '0px'
+ label.style.bottom = '3px'
+ label.style.fontSize = Math.round(size / 10) + 'px'
+ this.el.appendChild(label)
+
+ var faceA = new MX.Object3D(),
+ faceB = new MX.Object3D()
+ faceA.rotationX = 90
+ this.add(faceA, faceB)
+
+ this.el.style.color =
+ faceA.el.style.backgroundColor =
+ faceB.el.style.backgroundColor = colors[axis]
+
+ this.width =
+ faceA.width =
+ faceB.width = size
+
+ this.height =
+ faceA.height =
+ faceB.height = Math.round(size / 100)
+
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+ if (axis === 'y') {
+ this.rotationZ = -angle
+ } else if (axis === 'z') {
+ this.rotationY = angle
+ }
+ }
+ })
+
+ var Coords = MX.Object3D.extend({
+ init: function (size) {
+ size = size || 100
+ var x = new Axis('x', size),
+ y = new Axis('y', size),
+ z = new Axis('z', size)
+ this.add(x, y, z)
+ this.update()
+ this.updateChildren = false
+ }
+ })
+
+ return Coords
+
+})() \ No newline at end of file
diff --git a/assets/javascripts/mx/primitives/mx.door.js b/assets/javascripts/mx/primitives/mx.door.js
new file mode 100644
index 0000000..12ff148
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.door.js
@@ -0,0 +1,75 @@
+
+borderThickness = 3
+
+MX.Door = MX.Object3D.extend({
+
+ // this will be called within the contructor
+ init: function (opt) {
+
+ width = opt.width || 100
+ height = opt.height || 100
+ doorOffset = opt.doorOffset || 0
+ doorWidth = opt.doorWidth || 30
+ doorHeight = opt.doorHeight || 20
+ color = opt.color || 'rgba(0, 255, 122, .1)'
+ borderColor = opt.borderColor || '#0f3'
+
+ // an Object3D's associated DOM node is the "el" property
+ this.el.classList.add('box')
+
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+ var left = new MX.Object3D('.face.door.leftTop')
+ left.width = (width - doorWidth) / 2 + doorOffset
+ left.height = height-doorHeight-borderThickness
+ left.x = (width + doorWidth) / 4 + doorOffset
+ left.y = (height+doorHeight+borderThickness)/2
+ left.el.style.backgroundColor = color
+ left.el.style.borderTop = borderThickness + 'px solid ' + borderColor
+ left.el.style.borderRight = borderThickness + 'px solid ' + borderColor
+ this.add(left)
+
+ var leftBot = new MX.Object3D('.face.door.leftBot')
+ leftBot.width = (width - doorWidth) / 2 - doorOffset
+ leftBot.height = doorHeight + borderThickness
+ leftBot.x = (width + doorWidth) / 4 - doorOffset
+ leftBot.y = (doorHeight+borderThickness)/2
+ leftBot.el.style.backgroundColor = color
+ leftBot.el.style.borderLeft = borderThickness + 'px solid ' + borderColor
+ leftBot.el.style.borderRight = borderThickness + 'px solid ' + borderColor
+ leftBot.el.style.borderBottom = borderThickness + 'px solid ' + borderColor
+ this.add(leftBot)
+
+ var rightTop = new MX.Object3D('.face.door.rightTop')
+ rightTop.width = (width - doorWidth) / 2 - doorOffset
+ rightTop.height = height-doorHeight-borderThickness
+ rightTop.x = -(width+doorWidth)/4 - doorOffset
+ rightTop.y = (height+ doorHeight+borderThickness)/2
+ rightTop.el.style.backgroundColor = color
+ rightTop.el.style.borderTop = borderThickness + 'px solid ' + borderColor
+ rightTop.el.style.borderLeft = borderThickness + 'px solid ' + borderColor
+ this.add(rightTop)
+
+ var rightBot = new MX.Object3D('.face.door.rightBot')
+ rightBot.width = (width - doorWidth) / 2 - doorOffset
+ rightBot.height = doorHeight+borderThickness
+ rightBot.x = -(width + doorWidth)/4 - doorOffset
+ rightBot.y = (doorHeight+borderThickness)/2
+ rightBot.el.style.backgroundColor = color
+ rightBot.el.style.borderLeft = borderThickness + 'px solid ' + borderColor
+ rightBot.el.style.borderRight = borderThickness + 'px solid ' + borderColor
+ rightBot.el.style.borderBottom = borderThickness + 'px solid ' + borderColor
+ this.add(rightBot)
+
+ var top = new MX.Object3D('.face.door.top')
+ top.width = doorWidth
+ top.height = height-doorHeight
+ top.x = doorOffset
+ top.y = (height+ doorHeight)/2
+ top.el.style.backgroundColor = color
+ top.el.style.borderTop = borderThickness + 'px solid ' + borderColor
+ top.el.style.borderBottom = borderThickness + 'px solid ' + borderColor
+ this.add(top)
+
+ }
+}) \ No newline at end of file
diff --git a/assets/javascripts/mx/primitives/mx.face.js b/assets/javascripts/mx/primitives/mx.face.js
new file mode 100644
index 0000000..ac47ab4
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.face.js
@@ -0,0 +1,41 @@
+MX.Face = MX.Object3D.extend({
+
+ // this will be called within the contructor
+ init: function (size, color, borderColor) {
+
+ size = size || 100
+ color = color || 'rgba(0, 255, 122, .1)'
+ borderColor = borderColor || '#0f3'
+
+ // an Object3D's associated DOM node is the "el" property
+ this.el.classList.add('face')
+
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2)
+
+ var top = this.top = new MX.Object3D('.face')
+ top.rotationX = angle
+ top.y = size / 2
+
+ // adding children, must also be instances of Object3D
+ this.add(top)
+
+ this.children.forEach(function (face) {
+ face.width = size - 2
+ face.height = size - 2
+ face.el.style.backgroundColor = color
+ face.el.style.border = '1px solid ' + borderColor
+ })
+
+ // this applies the updated CSS style
+ // required for any change to take effect
+ // when a parent object's update() is called
+ // all its children will be updated as well
+ this.update()
+
+ // if this object's children won't move by themselves
+ this.updateChildren = false
+ }
+
+ // other properties will be mixed into the prototype of the new constructor
+
+})
diff --git a/assets/javascripts/mx/primitives/mx.iframe.js b/assets/javascripts/mx/primitives/mx.iframe.js
new file mode 100644
index 0000000..76ce603
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.iframe.js
@@ -0,0 +1,19 @@
+MX.Iframe = MX.Object3D.extend({
+ init: function (ops) {
+
+ var layer = this.layer = new MX.Object3D()
+ layer.width = ops.width
+ layer.height = ops.height
+
+// this.add(layer)
+ this.width = ops.width
+ this.height = ops.height
+
+ this.el.innerHTML = "<iframe src='" + ops.texture[i] + "' width='100%' height='100%' style='pointer-events: none;'>"
+
+ this.dirty = true
+ this.updateChildren = true
+ this.update()
+ }
+
+})
diff --git a/assets/javascripts/mx/primitives/mx.image.js b/assets/javascripts/mx/primitives/mx.image.js
new file mode 100644
index 0000000..92a8882
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.image.js
@@ -0,0 +1,40 @@
+MX.Image = MX.Object3D.extend({
+ init: function (ops) {
+
+ this.type = "Image"
+
+ var layer = this
+ layer.width = 0
+ layer.height = 0
+
+ if (ops.src) this.loadTexture(ops)
+
+ if (ops.className) {
+ layer.el.classList.add(ops.className)
+ }
+ layer.el.style.backgroundRepeat = 'no-repeat'
+
+ this.dirty = true
+ this.updateChildren = true
+ this.update()
+ },
+
+ loadTexture: function(ops){
+ var layer = this
+ var image = new Image()
+ image.onload = function(){
+ layer.width = image.naturalWidth
+ layer.height = image.naturalHeight
+ layer.x = ops.x || 0
+ layer.y = ops.y || 0
+ layer.z = ops.z || 0
+ layer.scale = ops.scale || 1
+ layer.el.style.backgroundImage = "url(" + image.src + ")"
+ layer.el.classList.add('image')
+ layer.dirty = true
+ layer.update()
+ minimap.update()
+ }
+ image.src = ops.src;
+ }
+})
diff --git a/assets/javascripts/mx/primitives/mx.texturedBox.js b/assets/javascripts/mx/primitives/mx.texturedBox.js
new file mode 100644
index 0000000..34668d4
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.texturedBox.js
@@ -0,0 +1,119 @@
+// Creates a box using a given texture image.
+// Uses a texture image like this:
+//
+// ---------- ----------
+// | | |
+// | top | bottom |
+// | | |
+// ---------- ---------- ---------- ----------
+// | | | | |
+// | left | front | right | back |
+// | | | | |
+// ---------- ---------- ---------- ----------
+//
+// See `examples/images/skins/` for some minecraft skin examples.
+
+// Options:
+//
+// - {number} `width`
+// - {number} `height`
+// - {number} `depth`
+// - {string} `texture` path to texture image
+// - {string} `classname` class to be added to dom element
+
+MX.TexturedBox = MX.Object3D.extend({
+
+ init: function (ops) {
+
+ if (!ops.width || !ops.height || !ops.depth || (!ops.texture && !ops.classname)) {
+ console.warn('TextureBox: missing arguments')
+ return
+ }
+
+ // faces
+ var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2),
+ offsetX = ops.offset ? (ops.offset.x || 0) : 0,
+ offsetY = ops.offset ? (ops.offset.y || 0) : 0,
+ overlap = ops.overlap ? ops.overlap : 0
+ var multiTexture = typeof ops.texture == "object";
+
+ var top = this.top = new MX.Object3D()
+ top.width = ops.width
+ top.height = ops.depth
+ top.rotationX = angle
+ top.y = ops.height / 2 - overlap
+ if (!multiTexture)
+ top.el.style.backgroundPosition =
+ (-(offsetX + ops.depth) + 'px ') +
+ (-offsetY + 'px')
+
+ var bottom = this.bottom = new MX.Object3D()
+ bottom.width = ops.width
+ bottom.height = ops.depth
+ bottom.rotationX = -angle
+ bottom.y = -ops.height / 2 + overlap
+ if (!multiTexture)
+ bottom.el.style.backgroundPosition =
+ (-(offsetX + ops.depth + ops.width) + 'px ') +
+ (-offsetY + 'px')
+
+ var left = this.left = new MX.Object3D()
+ left.width = ops.depth
+ left.height = ops.height
+ left.rotationY = -angle
+ left.x = -ops.width / 2 + overlap
+ if (!multiTexture)
+ left.el.style.backgroundPosition =
+ (-offsetX + 'px ') +
+ (-(offsetY + ops.depth) + 'px')
+
+ var right = this.right = new MX.Object3D()
+ right.width = ops.depth
+ right.height = ops.height
+ right.rotationY = angle
+ right.x = ops.width / 2 - overlap
+ if (!multiTexture)
+ right.el.style.backgroundPosition =
+ (-(offsetX + ops.depth + ops.width) + 'px ') +
+ (-(offsetY + ops.depth) + 'px')
+
+ var front = this.front = new MX.Object3D()
+ front.width = ops.width
+ front.height = ops.height
+ front.z = -ops.depth / 2 + overlap
+ if (!multiTexture)
+ front.el.style.backgroundPosition =
+ (-(offsetX + ops.depth) + 'px ') +
+ (-(offsetY + ops.depth) + 'px')
+
+ var back = this.back = new MX.Object3D()
+ back.width = ops.width
+ back.height = ops.height
+ back.rotationY = angle * 2
+ back.z = ops.depth / 2 - overlap
+ if (!multiTexture)
+ back.el.style.backgroundPosition =
+ (-(offsetX + ops.depth * 2 + ops.width) + 'px ') +
+ (-(offsetY + ops.depth) + 'px')
+
+ this.add(top, bottom, left, right, front, back)
+
+ this.children.forEach(function (c,i) {
+ if (multiTexture) {
+ c.el.style.backgroundImage = 'url(' + ops.texture[i] + ')'
+ }
+ else if (ops.texture) {
+ c.el.style.backgroundImage = 'url(' + ops.texture + ')'
+ }
+ if (ops.classname) {
+ c.el.classList.add(ops.classname)
+ }
+ c.el.style.backgroundRepeat = 'no-repeat'
+ })
+
+ this.update()
+ this.updateChildren = false
+
+ }
+
+})
diff --git a/assets/javascripts/mx/primitives/mx.video.js b/assets/javascripts/mx/primitives/mx.video.js
new file mode 100644
index 0000000..b48eff3
--- /dev/null
+++ b/assets/javascripts/mx/primitives/mx.video.js
@@ -0,0 +1,48 @@
+MX.Video = MX.Object3D.extend({
+ init: function (ops) {
+
+ this.type = "Video"
+
+ if (ops.src) this.loadTexture(ops)
+
+ this.children.forEach(function (c, i) {
+ if (ops.texture) {
+ }
+ else if (ops.classname) {
+ c.el.classList.add(ops.classname)
+ }
+ else {
+ }
+ c.el.style.backgroundRepeat = 'no-repeat'
+ })
+
+ this.dirty = true
+ this.updateChildren = true
+ this.update()
+ },
+
+ loadTexture: function(ops){
+ var layer = this
+ var video = document.createElement('video')
+ video.setAttribute("autoplay", "")
+ video.setAttribute("loop", "")
+ video.setAttribute("muted", "muted")
+ video.addEventListener("loadedmetadata", function(){
+ layer.width = video.videoWidth
+ layer.height = video.videoHeight
+ layer.x = ops.x || 0
+ layer.y = ops.y || 0
+ layer.z = ops.z || 0
+ layer.scale = ops.scale || 1
+ layer.el.appendChild(video)
+ layer.el.classList.add('video')
+ layer.dirty = true
+ layer.update()
+ minimap.update()
+ })
+ video.src = ops.src
+ video.load()
+ }
+
+})
+
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 20:18:24 +0000