123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077 |
- export function Cubelet( cube, id, colors ){
-
-
- this.cube = cube
-
-
-
-
-
-
- this.id = id || 0
-
-
-
-
- this.setAddress( this.id )
-
-
-
-
-
-
- this.size = cube.cubeletSize || 140
-
-
-
- var
- x = this.addressX * this.size,
- y = this.addressY * this.size,
- z = this.addressZ * this.size
-
-
- var
- half = this.size / 2,
- rotations = [
- [ 0, 0, 0 ],
- [ -90, 0, 0 ],
- [ 0, 90, 0 ],
- [ 90, 0, 0 ],
- [ 0, -90, 0 ],
- [ 0, 180, 0 ]
- ],
- positions = [
- [ 0, 0, half ],
- [ 0, -half, 0 ],
- [ half, 0, 0 ],
- [ 0, half, 0 ],
- [ -half, 0, 0 ],
- [ 0, 0, -half ]
- ]
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- var extrovertedFaces = 0
- if( colors === undefined ) colors = [ W, O, , , G, ]
- this.faces = []
-
-
-
-
- for( var i = 0; i < 6; i ++ ){
-
-
-
- var
- color = colors[ i ] || COLORLESS
-
-
-
-
- this.faces[ i ] = {}
- this.faces[ i ].id = i
- this.faces[ i ].color = color
-
-
-
-
-
- this.faces[ i ].normal = Direction.getNameById( i )
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- }
-
-
-
- this.type = [
- 'core',
- 'center',
- 'edge',
- 'corner'
- ][ extrovertedFaces ]
-
-
- this.map()
-
-
- if( this.front.color && this.front.color.name === 'white' && this.type === 'center' ){
-
-
-
- }
-
-
-
- this.isTweening = true
- this.isEngagedX = false
- this.isEngagedY = false
- this.isEngagedZ = false
-
-
-
-
- this.x = this.xPrevious = 0
- this.y = this.yPrevious = 0
- this.z = this.zPrevious = 0
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- this.isTweening = false
-
- this.opacity = 1
- this.radius = 0
- }
- globalThis.setupTasks = globalThis.setupTasks || []
- globalThis.setupTasks.push( function(){
-
-
-
-
- globalThis.augment( Cubelet, {
-
-
- map: function(){
- this.front = this.faces[ 0 ]
- this.up = this.faces[ 1 ]
- this.right = this.faces[ 2 ]
- this.down = this.faces[ 3 ]
- this.left = this.faces[ 4 ]
- this.back = this.faces[ 5 ]
- this.colors =
- ( this.faces[ 0 ].color ? this.faces[ 0 ].color.initial : '-' ) +
- ( this.faces[ 1 ].color ? this.faces[ 1 ].color.initial : '-' ) +
- ( this.faces[ 2 ].color ? this.faces[ 2 ].color.initial : '-' ) +
- ( this.faces[ 3 ].color ? this.faces[ 3 ].color.initial : '-' ) +
- ( this.faces[ 4 ].color ? this.faces[ 4 ].color.initial : '-' ) +
- ( this.faces[ 5 ].color ? this.faces[ 5 ].color.initial : '-' )
- },
-
-
-
-
-
-
- setAddress: function( address ){
- this.address = address || 0
- this.addressX = address.modulo( 3 ).subtract( 1 )
- this.addressY = address.modulo( 9 ).divide( 3 ).roundDown().subtract( 1 ) * -1
- this.addressZ = address.divide( 9 ).roundDown().subtract( 1 ) * -1
- },
-
-
- inspect: function( face ){
- if( face !== undefined ){
-
-
-
- return this[ face ].color || '!'
- }
- else {
-
-
- var
- that = this,
- id = this.id,
- address = this.address,
- type = this.type,
- color = this.cube.color,
- LEFT = 0,
- CENTER = 1,
- getColorName = function( face, justification, minimumLength ){
- var colorName = that[ face ].color.name.toUpperCase()
-
- if( justification !== undefined && minimumLength !== undefined ){
- if( justification === CENTER ) colorName = colorName.justifyCenter( minimumLength )
- else if( justification === LEFT ) colorName = colorName.justifyLeft( minimumLength )
- }
- return colorName
- }
- if( id < 10 ) id = '0' + id
- if( address < 10 ) address = '0' + address
- console.log(
- '\n ID '+ id +
- '\n Type '+ type.toUpperCase() +'\n'+
- '\n Address '+ address +
- '\n Address X '+ this.addressX.toSignedString() +
- '\n Address Y '+ this.addressY.toSignedString() +
- '\n Address Z '+ this.addressZ.toSignedString() +'\n'+
- '\n Engaged X '+ this.isEngagedX +
- '\n Engaged Y '+ this.isEngagedY +
- '\n Engaged Z '+ this.isEngagedZ +
- '\n Tweening '+ this.isTweening +'\n'+
-
- '\n%c 0 Front '+ getColorName( 'front', LEFT, 7 ) +'%c'+
- '\n%c 1 Up '+ getColorName( 'up', LEFT, 7 ) +'%c'+
- '\n%c 2 Right '+ getColorName( 'right', LEFT, 7 ) +'%c'+
- '\n%c 3 Down '+ getColorName( 'down', LEFT, 7 ) +'%c'+
- '\n%c 4 Left '+ getColorName( 'left', LEFT, 7 ) +'%c'+
- '\n%c 5 Back '+ getColorName( 'back', LEFT, 7 ) +'%c\n' +
- '\n ----------- %cback%c'+
- '\n / %cup%c /| %c5%c'+
- '\n / %c1%c / | %c'+ getColorName( 'back' ) +'%c'+
- '\n /%c'+ getColorName( 'up', CENTER, 11 ) +'%c/ |'+
- '\n %cleft%c ----------- %cright%c'+
- '\n %c4%c | | %c2%c'+
- '\n%c'+ getColorName( 'left', CENTER, 8 ) +'%c | %cfront%c | %c'+ getColorName( 'right' ) +'%c'+
- '\n | %c0%c | /'+
- '\n |%c'+ getColorName( 'front', CENTER, 11 ) +'%c| /'+
- '\n | |/'+
- '\n -----------'+
- '\n %cdown%c'+
- '\n %c3%c'+
- '\n %c'+ getColorName( 'down', CENTER, 11 ) +'%c\n',
- this.front.color.styleB, '',
- this.up.color.styleB, '',
- this.right.color.styleB, '',
- this.down.color.styleB, '',
- this.left.color.styleB, '',
- this.back.color.styleB, '',
- this.back.color.styleF, '',
- this.up.color.styleF, '',
- this.back.color.styleF, '',
- this.up.color.styleF, '',
- this.back.color.styleF, '',
- this.up.color.styleF, '',
- this.left.color.styleF, '',
- this.right.color.styleF, '',
- this.left.color.styleF, '',
- this.right.color.styleF, '',
- this.left.color.styleF, '',
- this.front.color.styleF, '',
- this.right.color.styleF, '',
- this.front.color.styleF, '',
- this.front.color.styleF, '',
- this.down.color.styleF, '',
- this.down.color.styleF, '',
- this.down.color.styleF, ''
- )
- }
- },
-
-
-
- hasColor: function( color ){
- var i, face
-
- for( i = 0; i < 6; i ++ ){
- if( this.faces[ i ].color === color ){
-
- face = i
- break
- }
- }
- if( face !== undefined ){
- return [
- 'front',
- 'up',
- 'right',
- 'down',
- 'left',
- 'back'
- ][ face ]
- }
- else return false
- },
-
-
- hasColors: function(){
- var
- cubelet = this,
- result = true,
- colors = Array.prototype.slice.call( arguments )
-
- colors.forEach( function( color ){
- result = result && !!cubelet.hasColor( color )
- })
- return result
- },
-
-
- rotate: function( rotation, degrees, cubeCallback, local ){
- var
- cubelet = this,
- cube = this.cube,
- xTarget = 0,
- yTarget = 0,
- zTarget = 0,
- rotationUpperCase = rotation.toUpperCase(),
- threshold = 0.001
-
-
-
- this.isTweening = true
-
-
-
- if( rotationUpperCase === 'X' ){
- cubelet.isEngagedX = true
- if( rotation === 'X' ) xTarget = degrees
- else xTarget = -degrees
- }
- else if( rotationUpperCase === 'Y' ){
- cubelet.isEngagedY = true
- if( rotation === 'Y' ) yTarget = degrees
- else yTarget = -degrees
- }
- else if( rotationUpperCase === 'Z' ){
- cubelet.isEngagedZ = true
- if( rotation === 'Z' ) zTarget = degrees
- else zTarget = -degrees
- }
-
- this.x += xTarget.round()
- this.y += yTarget.round()
- this.z += zTarget.round()
-
-
-
- let twistDurationScaled = 0.5
-
-
-
-
-
-
- if(!local){
- this.cube.kernel.callMethod(this.nodeID, "rotateCubelet", [
- [
- -xTarget,
- -yTarget,
- -zTarget
- ], twistDurationScaled, cubeCallback])
- } else {
- this.cube.remap(this.id, cubeCallback);
-
- }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- },
-
- show: function(){
- $( '.cubeletId-'+ this.id ).show()
- this.showing = true
- },
- hide: function(){
- $( '.cubeletId-'+ this.id ).hide()
- this.showing = false
- },
- showPlastics: function(){
- if( erno.renderMode === 'css' ) $( '.cubeletId-'+ this.id +' .face' ).removeClass( 'faceTransparent' )
- else this.plastic.material.opacity = 1
- this.showingPlastics = true
- },
- hidePlastics: function(){
- if( erno.renderMode === 'css' ) $( '.cubeletId-'+ this.id +' .face' ).addClass( 'faceTransparent' )
- else this.plastic.material.opacity = 0
- this.showingPlastics = false
- },
- showExtroverts: function(){
- $( '.cubeletId-'+ this.id + ' .faceExtroverted' ).show()
- this.showingExtroverts = true
- },
- hideExtroverts: function(){
- $( '.cubeletId-'+ this.id + ' .faceExtroverted' ).hide()
- this.showingExtroverts = false
- },
- showIntroverts: function(){
- $( '.cubeletId-'+ this.id + ' .faceIntroverted' ).show()
- this.showingIntroverts = true
- },
- hideIntroverts: function(){
- $( '.cubeletId-'+ this.id + ' .faceIntroverted' ).hide()
- this.showingIntroverts = false
- },
- showStickers: function(){
- if( erno.renderMode === 'css' ) $( '.cubeletId-'+ this.id + ' .sticker' ).show()
- else this.faces.forEach( function( face ){
- if( face.sticker ) face.sticker.material.opacity = 1
- })
- this.showingStickers = true
- },
- hideStickers: function(){
- if( erno.renderMode === 'css' ) $( '.cubeletId-'+ this.id + ' .sticker' ).hide()
- else this.faces.forEach( function( face ){
- if( face.sticker ) face.sticker.material.opacity = 0
- })
- this.showingStickers = false
- },
- showWireframes: function(){
- if( erno.renderMode === 'css' ) $( '.cubeletId-'+ this.id + ' .wireframe' ).show()
- else this.wireframe.material.opacity = 1
- this.showingWireframes = true
- },
- hideWireframes: function(){
- if( erno.renderMode === 'css' ) $( '.cubeletId-'+ this.id + ' .wireframe' ).hide()
- else this.wireframe.material.opacity = 0
- this.showingWireframes = false
- },
- showIds: function(){
- $( '.cubeletId-'+ this.id + ' .id' ).show()
- this.showingIds = true
- },
- hideIds: function(){
- $( '.cubeletId-'+ this.id + ' .id' ).hide()
- this.showingIds = false
- },
- showTexts: function(){
- $( '.cubeletId-'+ this.id + ' .text' ).show()
- this.showingTexts = true
- },
- hideTexts: function(){
- $( '.cubeletId-'+ this.id + ' .text' ).hide()
- this.showingTexts = false
- },
- getOpacity: function(){
- return this.opacity
- },
- setOpacity: function( opacityTarget, onComplete ){
- if( this.opacityTween ) this.opacityTween.stop()
- if( opacityTarget === undefined ) opacityTarget = 1
- if( opacityTarget !== this.opacity ){
- var
- that = this,
- tweenDuration = ( opacityTarget - this.opacity ).absolute().scale( 0, 1, 0, SECOND )
- this.opacityTween = new TWEEN.Tween({ opacity: this.opacity })
- .to({
- opacity: opacityTarget
-
- }, tweenDuration )
- .easing( TWEEN.Easing.Quadratic.InOut )
- .onUpdate( function(){
- $( '.cubeletId-'+ that.id ).css( 'opacity', this.opacity )
- that.opacity = this.opacity
- })
- .onComplete( function(){
- if( onComplete instanceof Function ) onComplete()
- })
- .start()
- }
- },
- getStickersOpacity: function( value ){
- return $( '.cubeletId-'+ this.id + ' .sticker' ).css( 'opacity' )
- },
- setStickersOpacity: function( value ){
- if( value === undefined ) value = 0.2
- $( '.cubeletId-'+ this.id + ' .sticker' ).css( 'opacity', value )
- },
- getRadius: function(){
- return this.radius
- },
- setRadius: function( radius, onComplete ){
-
-
-
-
-
-
-
-
- if( this.isTweening === false ){
-
- radius = radius || 0
- if( this.radius === undefined ) this.radius = 0
- if( this.radius !== radius ){
-
-
- var tweenDuration = ( this.radius - radius ).absolute().scale( 0, 100, 0, SECOND )
-
-
- var that = this
- new TWEEN.Tween( this.wrapper.position )
- .to({
- x: this.addressX.multiply( this.size + radius ),
- y: this.addressY.multiply( this.size + radius ),
- z: this.addressZ.multiply( this.size + radius )
-
- }, tweenDuration )
- .easing( TWEEN.Easing.Quartic.Out )
- .onComplete( function(){
- that.radius = radius
- if( onComplete instanceof Function ) onComplete()
- })
- .start()
- }
- }
- }
-
- })
- })
|