@ -1,70 +1,80 @@
class Svg {
static makeNode ( n , v = null ) {
n = document . createElementNS ( "http://www.w3.org/2000/svg" , n ) ;
if ( v ) {
for ( let p in v ) {
if ( v . hasOwnProperty ( p ) ) {
n . setAttributeNS ( null , p , v [ p ] ) ;
/ * *
* Build a node from XML
*
* @ param { String } code
* @ param { String | null } wrapper - wrapper element , by default no wrapper .
* @ param { Object | null } wrapperOpts - opts to add to the wrapper
* @ returns { Node }
* /
static fromXML ( code , wrapper = null , wrapperOpts = null ) {
let n = document . createElementNS ( "http://www.w3.org/2000/svg" , wrapper || 'g' ) ;
if ( wrapperOpts ) {
for ( let p in wrapperOpts ) {
if ( wrapperOpts . hasOwnProperty ( p ) ) {
n . setAttribute ( p , wrapperOpts [ p ] ) ;
}
}
}
return n
n . innerHTML = code . trim ( ) ;
if ( wrapper === null ) {
return n . childNodes [ 0 ] ;
} else {
return n ;
}
}
/ * *
* Build a node from XML , wrapped in ` <g> `
*
* @ param { String } code
* @ param { Object | null } wrapperOpts - opts to add to the wrapper
* @ returns { Node }
* /
static fromXMLg ( code , wrapperOpts = null ) {
return Svg . fromXML ( code , 'g' , wrapperOpts ) ;
}
}
/ * *
* Game board
*
* Orb grid coordinates :
* x - grid X coordinate ( counted from the left edge of a triangle starting in the top left corner )
* y - grid Y coordinate ( row )
* /
class Board {
constructor ( ) {
this . $boardbg = document . getElementById ( 'boardbg' ) ;
this . $bg = document . getElementById ( 'boardbg' ) ;
this . $orbs = document . getElementById ( 'orbs' ) ;
this . $svg = document . getElementById ( 'board' ) ;
this . $root = document . getElementById ( 'root' ) ;
this . initOrb ( ) ;
this . initGlyphs ( ) ;
this . initCell ( ) ;
// background
const { rx , ry } = this . xyToCoord ( 5 , 5 ) ;
let polygon = Svg . makeNode ( "polygon" , {
points : "43,-25 0,-50 -43,-25 -43,25 0,50 43,25" ,
transform : "translate(" + rx + "," + ry + "),scale(10.7),rotate(30)" ,
fill : '#7e6c56' , //'#AE9B79'
} ) ;
this . $boardbg . appendChild ( polygon ) ;
// build the board
this . TILE _W = 91 ;
this . TILE _H = 79 ;
this . SCREEN _PAD = 20 ;
this . buf0 = [ ] ;
this . buf1 = [ ] ;
// Orb grid
this . gameGrid = { } ;
for ( let y = 0 ; y < 6 ; y ++ ) {
for ( let x = 0 ; x < 6 + y ; x ++ ) {
this . placeCell ( x , y ) ;
}
}
for ( let y = 0 ; y < 5 ; y ++ ) {
for ( let x = 0 ; x < 10 - y ; x ++ ) {
this . placeCell ( x + y + 1 , 6 + y ) ;
}
}
this . buf0 . forEach ( ( elem ) => {
this . $boardbg . appendChild ( elem ) ;
} ) ;
this . initOrb ( ) ;
this . initGlyphs ( ) ;
this . initTile ( ) ;
this . buf1 . forEach ( ( elem ) => {
this . $boardbg . appendChild ( elem ) ;
} ) ;
this . buildBackground ( ) ;
this . buf0 = [ ] ;
this . buf1 = [ ] ;
this . initAutoScaling ( ) ;
// XXX test content
let o ;
this . placeOrb ( 0 , 0 , 'salt' ) ;
this . placeOrb ( 1 , 0 , 'air' ) ;
this . placeOrb ( 2 , 0 , 'fire' ) ;
o = this . placeOrb ( 3 , 0 , 'water' ) ;
o . classList . add ( 'selected' ) ;
o . node . classList . add ( 'selected' ) ;
this . placeOrb ( 4 , 0 , 'earth' ) ;
this . placeOrb ( 5 , 0 , 'mercury' ) ;
this . placeOrb ( 0 , 1 , 'lead' ) ;
@ -77,200 +87,344 @@ class Board {
this . placeOrb ( 0 , 2 , 'mors' ) ;
o = this . placeOrb ( 1 , 2 , 'copper' ) ;
o . classList . add ( 'disabled' ) ;
o . node . classList . add ( 'disabled' ) ;
o = this . placeOrb ( 2 , 2 , 'copper' ) ;
o . classList . add ( 'disabled' ) ;
o . classList . add ( 'highlight' ) ;
o . node . classList . add ( 'disabled' ) ;
this . highlight ( 'copper' ) ;
}
/ * *
* Resize to window and set up window resize event handler .
* /
initAutoScaling ( ) {
this . rescaleTimeout = null ;
window . addEventListener ( 'resize' , ( ) => {
console . log ( 'window resize' ) ;
if ( this . rescaleTimeout === null ) {
this . rescaleTimeout = setTimeout ( ( ) => this . rescaleCanvas ( ) , 60 )
}
} ) ;
this . rescaleCanvas ( ) ;
}
o = this . placeOrb ( 3 , 2 , 'copper' ) ;
o . classList . add ( 'highlight' ) ;
/ * *
* Resize to current window size
* /
rescaleCanvas ( ) {
let w = window . innerWidth ;
let h = window . innerHeight ;
const pad = this . SCREEN _PAD ;
let scaleX = w / ( 1066 + pad * 2 ) ;
let scaleY = h / ( 926 + pad * 2 ) ;
let scale = Math . min ( scaleX , scaleY ) ;
this . $root . setAttribute ( 'transform' , ` translate( ${ w / 2 } , ${ h / 2 } ) scale( ${ scale } ) ` )
this . rescaleTimeout = null ;
}
highlight ( symbol = null ) {
/ * *
* Highlight a symbol . All other highlights are removed .
*
* @ param { String | null } symbol - symbol to highlight , null to hide highlights
* /
highlight ( symbol = null ) {
this . $svg . setAttribute ( 'class' , '' ) ;
if ( symbol !== null ) {
//this.$svg
this . $svg . classList . add ( ` highlight- ${ symbol } ` ) ;
}
}
xyToIndex ( x , y ) {
/ * *
* Convert grid coordinates to gameGrid array index
*
* @ param x
* @ param y
* @ returns { Number }
* /
gridXyToArrayIndex ( x , y ) {
return y * 11 + x
}
xyToCoord ( x , y ) {
const gap = 6 ;
const xstep = 86 + gap ;
const ystep = 75 + gap ;
const xbase = ( this . $svg . getAttribute ( 'width' ) - 5.5 * ystep - gap * 2 ) / 2 ;
const ybase = ( this . $svg . getAttribute ( 'height' ) - 10 * ystep - gap * 2 ) / 2 ;
let rx = xbase + xstep * x - y * Math . floor ( xstep / 2 ) ;
let ry = ybase + ystep * y ;
/ * *
* Convert grid coordinates to graphic coordinates
*
* @ param x
* @ param y
* @ returns { { rx : number , ry : number } }
* /
gridXyToCoord ( x , y ) {
let rx = this . TILE _W * ( - 2.5 + x - y * 0.5 ) ;
let ry = this . TILE _H * ( - 5 + y ) ;
return { rx , ry } ;
}
return { rx , ry }
/ * *
* Remove an orb from the grid at the given coordinates .
*
* @ param x - board X
* @ param y - board Y
* /
removeOrb ( x , y ) {
const arrayIndex = this . gridXyToArrayIndex ( x , y ) ;
if ( this . gameGrid [ arrayIndex ] ) {
this . $orbs . removeChild ( this . gameGrid [ arrayIndex ] . node ) ;
this . gameGrid [ arrayIndex ] = null ;
}
}
/ * *
* Place an orb on the grid
*
* @ param x - board X
* @ param y - board Y
* @ param symbol - alchemical symbol name
* @ returns { object } - orb object
* /
placeOrb ( x , y , symbol ) {
const { rx , ry } = this . xyToCoord ( x , y ) ;
const { rx , ry } = this . gridXyToCoord ( x , y ) ;
this . removeOrb ( x , y ) ;
let template ;
if ( this . metals . includes ( symbol ) ) {
template = this . metallicOrbNode ;
template = this . metallicOrbTpl ;
} else {
template = this . orbNode ;
template = this . orbTpl ;
}
let o = template . cloneNode ( true ) ;
o . classList . add ( ` element- ${ symbol } ` ) ;
o . setAttributeNS ( null , 'transform' , ` translate( ${ rx } , ${ ry } ),scale(0.75) ` ) ;
o . querySelector ( '.orb-fill' ) . setAttributeNS ( null , 'fill' , this . orbColors [ symbol ] ) ;
o . appendChild ( this . symbolNodes [ symbol ] . cloneNode ( true ) ) ;
o . setAttribute ( 'transform' , ` translate( ${ rx } , ${ ry } ) ` ) ;
o . querySelector ( '.orb-fill' )
. setAttribute ( 'fill' , this . orbColors [ symbol ] ) ;
o . appendChild ( this . symbolTpls [ symbol ] . cloneNode ( true ) ) ;
this . $orbs . appendChild ( o ) ;
return o ;
const arrayIndex = this . gridXyToArrayIndex ( x , y ) ;
let object = {
node : o ,
symbol
} ;
this . gameGrid [ arrayIndex ] = object ;
return object ;
}
/ * *
* Build board background
* /
buildBackground ( ) {
// Background hexagon
let polygon = Svg . fromXML ( `
< polygon
points = "43,-25 0,-50 -43,-25 -43,25 0,50 43,25"
transform = "translate(0,0) scale(10.7) rotate(30)"
fill = "#7e6c56" / >
` );
this . $bg . appendChild ( polygon ) ;
// -- Tile grid --
// Grid is built in two passes - shadows must be placed first
this . buf0 = [ ] ;
this . buf1 = [ ] ;
for ( let y = 0 ; y < 6 ; y ++ ) {
for ( let x = 0 ; x < 6 + y ; x ++ ) {
this . placeTile ( x , y ) ;
}
}
for ( let y = 0 ; y < 5 ; y ++ ) {
for ( let x = 0 ; x < 10 - y ; x ++ ) {
this . placeTile ( x + y + 1 , 6 + y ) ;
}
}
this . buf0 . forEach ( ( elem ) => {
this . $bg . appendChild ( elem ) ;
} ) ;
this . buf1 . forEach ( ( elem ) => {
this . $bg . appendChild ( elem ) ;
} ) ;
delete this . buf0 ;
delete this . buf1 ;
}
/ * *
* Init the orb template
* /
initOrb ( ) {
this . orbNode = Svg . makeNode ( "g" , {
"class" : "orb" ,
this . orbTpl = Svg . fromXMLg ( `
< g transform = "scale(0.75)" >
< circle
r = "50" cy = "5" cx = "0"
fill = "black"
class = "orb-shadow"
filter = "url('#filterDropshadow')"
opacity = "1"
fill - opacity = "0.7" / >
< circle
r = "55" cy = "2" cx = "0"
fill = "white"
class = "orb-glow"
opacity = "0"
filter = "url('#filterDropshadow')" / >
< circle
r = "49" cy = "0" cx = "0"
fill = "#9F9F9F"
class = "orb-background" / >
< circle
r = "50" cy = "0" cx = "0"
fill = "red"
class = "orb-fill"
fill - opacity = "0.80" / >
< circle
cx = "0" cy = "0" r = "50"
fill = "url(#radGradOrbDark)" / >
< ellipse
cx = "0" cy = "36.5" rx = "28" ry = "13"
fill = "url(#radGradOrbBottom)" / >
< ellipse
ry = "24" rx = "35" cy = "-23" cx = "0"
fill = "url(#radGradOrbTop)" / >
< / g >
` , {
'class' : 'orb' ,
} ) ;
this . orbNode . innerHTML = `
< circle
r = "50" cy = "5" cx = "0"
fill = "black"
class = "orb-shadow"
filter = "url('#filterDropshadow')"
fill - opacity = "0.7" / >
< circle
r = "55" cy = "2" cx = "0"
fill = "white"
class = "orb-glow"
filter = "url('#filterDropshadow')"
fill - opacity = "0" / >
< circle
r = "49" cy = "0" cx = "0"
fill = "#9F9F9F"
class = "orb-background" / >
< circle
r = "50" cy = "0" cx = "0"
fill = "red"
class = "orb-fill"
fill - opacity = "0.80" / >
< circle
cx = "0" cy = "0" r = "50"
fill = "url(#radGradOrbDark)" / >
< ellipse
cx = "0" cy = "36.5" rx = "28" ry = "13"
fill = "url(#radGradOrbBottom)" / >
< ellipse
ry = "24" rx = "35" cy = "-23" cx = "0"
fill = "url(#radGradOrbTop)" / >
` ;
let metallicInlay = Svg . makeNode ( "g" ) ;
//fill:url(#linearGradient1400);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1
metallicInlay . innerHTML = `
< g fill - opacity = "0.3" transform = "translate(-3,0)" >
let metallicEffect = Svg . fromXML ( `
< g fill - opacity = "0.3" transform = "translate(-3,0) scale(0.75)" >
< path
id = "path1392"
d = "M -43.75,9.2857139 C -30.010378,16.025483 26.753132,-7.8871183 45.535714,11.964285 15.246713,-2.1819387 -29.821429,19.702381 -43.75,9.2857139 Z"
fill = "url(#linGradMetallicInlay)" / >
< path
id = "path1392-0"
d = "M -45.357143,-2.8766642 C -31.617521,3.8631045 25.145989,-20.049496 43.928571,-0.19809327 13.63957,-14.344317 -31.428572,7.5400025 -45.357143,-2.8766642 Z"
fill = "url(#linGradMetallicInlay)" / >
< path
id = "path1392-1"
d = "m -41.071429,-14.222551 c 13.08012,5.7255132 67.118982,-14.588524 85,2.275477 -28.835129,-12.017384 -71.74,6.5736044 -85,-2.275477 z"
fill = "url(#linGradMetallicInlay)" / >
< path
id = "path1392-2"
d = "M -41.785714,21.6174 C -28.925428,27.053125 24.205217,7.7672504 41.785714,23.777708 13.435209,12.368564 -28.748572,30.018599 -41.785714,21.6174 Z"
fill = "url(#linGradMetallicInlay)" / >
< path
id = "path1392-7"
d = "m -35.178572,32.540035 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.746577,-8.672064 -59.08,4.743688 -70,-1.642045 z"
fill = "url(#linGradMetallicInlay)" / >
< path
id = "path1392-1-2"
d = "m -39.107144,-24.427576 c 12.33818,5.58062 63.311813,-14.219337 80.178571,2.217893 -27.199522,-11.713264 -67.670714,6.407248 -80.178571,-2.217893 z"
fill = "url(#linGradMetallicInlay)" / >
< path
id = "path1392-7-3"
d = "m -36.428571,-35.852822 c 10.771863,4.131683 55.274455,-10.527466 70,1.642045 -23.7465774,-8.672064 -59.08,4.743688 -70,-1.642045 z"
fill = "url(#linGradMetallicInlay)" / >
< / g >
` ;
` );
this . metallicOrbNode = this . orbNode . cloneNode ( true ) ;
this . metallicOrbNode . appendChild ( metallicInlay ) ;
this . metallicOrbTpl = this . orbTpl . cloneNode ( true ) ;
this . metallicOrbTpl . appendChild ( metallicEffect ) ;
}
initCell ( ) {
this . tileShadow = Svg . makeNode ( "polygon" , {
'points' : "43,-25 0,-50 -43,-25 -43,25 0,50 43,25" ,
// 'transform': `scale(1.1)`,
'fill' : '#000000' ,
'filter' : "url('#filterDropshadow')" ,
} ) ;
let tile = Svg . makeNode ( "g" ) ;
const bdr = 5 ;
tile . appendChild ( Svg . makeNode ( "polygon" , {
'points' : "43,-25 0,-50 -43,-25 -43,25 0,50 43,25" ,
'fill' : '#C8B898' ,
} ) ) ;
tile . appendChild ( Svg . makeNode ( "polyline" , {
'points' : "-43,-24 -43,24" ,
'stroke' : '#B6A986' ,
'stroke-width' : bdr ,
'fill' : 'transparent' ,
'stroke-linecap' : 'square' ,
} ) ) ;
tile . appendChild ( Svg . makeNode ( "polyline" , {
'points' : "-42,25 0,50 42,25" ,
'stroke' : '#9E906D' ,
'stroke-width' : bdr ,
'fill' : 'transparent' ,
'stroke-linecap' : 'square' ,
} ) ) ;
tile . appendChild ( Svg . makeNode ( "polyline" , {
'points' : "43,25 43,-25 0,-50 -43,-25" ,
'stroke' : '#CCC3AA' ,
'stroke-width' : bdr ,
'fill' : 'transparent' ,
'stroke-linecap' : 'none' ,
} ) ) ;
tile . appendChild ( Svg . makeNode ( "ellipse" , {
'cx' : 0 ,
'cy' : 0 ,
'rx' : 39 ,
'ry' : 39 ,
'fill' : 'url(#linGradSlotBg)' ,
} ) ) ;
this . tile = tile ;
/ * *
* Init the tile template
* /
initTile ( ) {
const offsetX = - 13.25 ;
const offsetY = - 283.75 ;
const scale = 3.9 ;
const scaleShadow = scale + 0.1 ;
this . tileShadowTpl = Svg . fromXMLg ( `
< g transform = "scale(${scaleShadow}) translate(${offsetX},${offsetY})" >
< path
transform = "matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d = "M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
fill = "#000000"
fill - opacity = "0.6"
filter = "url('#filterDropshadow')" / >
< / g >
` );
/ *
paths :
back - and - bottom
top - left _right
left
top - right
inner
circle
* /
this . tileTpl = Svg . fromXMLg ( `
< g transform = "scale(${scale}) translate(${offsetX},${offsetY})" >
< path
transform = "matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d = "M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z"
fill = "#9e9272" / >
< path
transform = "matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d = "M 28.028064,282.66339 21.029591,294.7851 7.0326457,270.54168 H 21.029591 Z"
fill = "#d0c6ab" / >
< path
transform = "matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d = "M 14.031114,282.66339 H 0.03417301 L 7.0326457,270.54168 Z"
fill = "#b4a682" / >
< path
transform = "matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)"
d = "m 28.028064,282.66339 h -13.99695 l 6.998477,-12.12171 z"
fill = "#d7d3c1" / >
< path
transform = "matrix(0.74967562,-0.43282542,0.43578949,0.75480954,-120.47135,76.486841)"
d = "m 28.343049,282.66339 -7.155965,12.3945 H 6.8751531 L -0.28081226,282.66339 6.8751531,270.2689 H 21.187084 Z"
fill = "#ab9f7e" / >
< circle
r = "10.155904"
cy = "283.77084"
cx = "13.229166"
fill = "url(#radGradSlotBg)" / >
< / g >
` );
}
placeCell ( x , y ) {
const { rx , ry } = this . xyToCoord ( x , y ) ;
/ * *
* Add a board tile to the image .
*
* @ param x
* @ param y
* /
placeTile ( x , y ) {
const { rx , ry } = this . gridXyToCoord ( x , y ) ;
/ *
// Debug circle
this . $svg . appendChild ( Svg . makeNode ( 'circle' , {
r : this . TILE _W / 2 ,
cy : ry , cx : rx ,
fill : 'none' ,
stroke : 'black' ,
'stroke-width' : 2 ,
} ) ) ;
* /
let polygon _shadow = this . tileShadow . cloneNode ( true ) ;
polygon _shadow . setAttributeNS ( null , 'transform' , ` translate( ${ rx } , ${ ry } ),scale(1.1) ` ) ;
let polygon _shadow = this . tileShadowTpl . cloneNode ( true ) ;
polygon _shadow . setAttribute ( 'transform' , ` translate( ${ rx } , ${ ry } ),scale(1.1) ` ) ;
this . buf0 . push ( polygon _shadow ) ;
let tile = this . tile . cloneNode ( true ) ;
tile . setAttributeNS ( null , 'transform' , ` translate( ${ rx } , ${ ry } ) ` ) ;
let tile = this . tileTpl . cloneNode ( true ) ;
tile . setAttribute ( 'transform' , ` translate( ${ rx } , ${ ry } ) ` ) ;
this . buf1 . push ( tile ) ;
}
/ * *
* Init the orb glyph templates
* /
initGlyphs ( ) {
//font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:'Trebuchet MS';-inkscape-font-specification:'Trebuchet MS';fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-opacity:1
let symbolPaths = {
salt : 'm 13.229166,291.52894 c -3.193365,0.056 -6.2293596,-2.11498 -7.2925669,-5.11388 -1.1013996,-2.92841 -0.2242509,-6.48596 2.1908174,-8.50166 2.5380605,-2.28864 6.6278455,-2.54558 9.4211355,-0.56925 2.346844,1.54401 3.721353,4.41788 3.400731,7.21296 -0.300944,3.62792 -3.485132,6.74361 -7.122041,6.95045 -0.19901,0.0144 -0.398548,0.0214 -0.598076,0.0214 z m -6.1435917,-8.51297 c 4.0957287,0 8.1914567,0 12.2871847,0 -0.315436,-3.07409 -3.239662,-5.6097 -6.336645,-5.4279 -2.970056,0.0389 -5.6195586,2.4852 -5.9505397,5.4279 z m 6.1435917,6.94037 c 2.96606,0.0757 5.716029,-2.30671 6.114844,-5.23796 0.09389,-0.3732 -0.542301,-0.11772 -0.794471,-0.19272 -3.821322,0 -7.642643,0 -11.4639647,0 0.352809,3.02068 3.0769237,5.49713 6.1435917,5.43068 z' ,
air : 'm 5.1145913,291.51845 c 2.7048586,-5.16509 5.4097167,-10.33018 8.1145757,-15.49527 2.704858,5.16509 5.409717,10.33018 8.114575,15.49527 -5.409717,0 -10.819434,0 -16.2291507,0 z m 6.0387527,-7.84199 c 1.383881,0 2.767763,0 4.151644,0 -0.69194,-1.35592 -1.383881,-2.71185 -2.075821,-4.06777 -0.691941,1.35592 -1.383882,2.71185 -2.075823,4.06777 z m -3.1661517,6.18553 c 3.4946497,0 6.9892987,0 10.4839477,0 -0.789791,-1.54463 -1.579581,-3.08927 -2.369372,-4.6339 -1.915068,0 -3.830136,0 -5.745204,0 -0.7897906,1.54463 -1.5795811,3.08927 -2.3693717,4.6339 z' ,
@ -284,11 +438,11 @@ class Board {
copper : 'm 13.229167,276.61943 c -2.112981,-0.0765 -4.0685271,1.78337 -4.04295,3.90894 -0.1277359,1.92476 1.447325,3.68809 3.331873,3.93182 2.025344,0.379 4.29148,-0.9459 4.680309,-3.02816 0.350755,-1.61444 -0.419466,-3.36035 -1.832442,-4.20966 -0.633357,-0.40672 -1.386458,-0.60708 -2.13679,-0.60294 z m -4.1567215,8.05748 c -2.3050816,-2.02524 -2.2795847,-5.96633 -0.1160579,-8.08364 2.0292494,-2.23826 5.8431584,-2.42533 8.0888084,-0.41068 1.604759,1.29217 2.357262,3.46519 1.988157,5.48009 -0.363367,2.37123 -2.511902,4.28305 -4.882744,4.48852 0,0.90097 0,1.80194 0,2.70291 0.928266,0 1.856531,0 2.784797,0 0,0.42318 0,0.84635 0,1.26953 -0.928266,0 -1.856531,0 -2.784797,0 0,0.87708 0,1.75415 0,2.63123 -0.614294,0 -1.228589,0 -1.842883,0 0,-0.87708 0,-1.75415 0,-2.63123 -0.928266,0 -1.856532,0 -2.7847978,0 0,-0.42318 0,-0.84635 0,-1.26953 0.9282658,0 1.8565318,0 2.7847978,0 0,-0.90438 0,-1.80876 0,-2.71314 -1.207048,-0.10173 -2.3584982,-0.63012 -3.2352805,-1.46406 z' ,
silver : 'm 9.9755063,275.73179 c -0.6014253,0.18082 -1.8508344,-0.12736 -1.9078968,0.74722 0.1176844,0.4442 0.7067667,0.30018 1.0195284,0.4996 2.4102181,0.84689 4.3760261,3.03219 4.6611691,5.61268 0.329015,2.2322 -0.292857,4.61262 -1.845188,6.27899 -0.950816,1.0625 -2.3118271,1.60982 -3.6314341,2.04088 -0.3010461,0.22955 -0.1186419,0.78 0.2735733,0.75652 2.3443258,0.46012 4.8961488,-0.14011 6.7090618,-1.72152 1.916707,-1.49245 3.236515,-3.83656 3.14282,-6.30499 -0.01445,-1.96756 -0.864897,-3.88727 -2.285751,-5.24448 -1.577433,-1.67996 -3.811286,-2.7316 -6.1358827,-2.6649 z m 2.7602927,2.03153 c 1.072404,0.39734 1.870102,1.27809 2.623097,2.10375 1.308542,1.47534 1.847166,3.59612 1.292761,5.50102 -0.534285,1.8245 -1.854209,3.45004 -3.574828,4.26864 -0.191682,0.0234 0.647922,-0.682 0.817217,-1.00958 1.833102,-2.3961 2.027928,-5.83879 0.732872,-8.5234 -0.452679,-0.90448 -1.108696,-1.7015 -1.891119,-2.34043 z' ,
gold : 'm 13.219492,275.7189 c -2.986621,0.01 -5.9729442,1.75519 -7.2157492,4.51399 -1.4447671,2.86838 -0.9743467,6.60206 1.2502049,8.94534 1.6486642,1.87365 4.2016723,2.85934 6.6817843,2.61607 3.746213,-0.22926 7.026658,-3.46775 7.307955,-7.20938 0.345627,-3.27431 -1.477563,-6.74322 -4.539965,-8.07025 -1.086444,-0.51129 -2.281439,-0.79866 -3.48423,-0.79577 z m 0,1.55427 c 2.485623,0.002 4.974789,1.48839 5.934079,3.82276 1.125698,2.44571 0.57943,5.58664 -1.449826,7.40023 -2.35696,2.37064 -6.611547,2.37064 -8.9685065,0 -2.1169053,-1.88824 -2.608931,-5.21179 -1.3089579,-7.69696 1.0280707,-2.17935 3.4218714,-3.51551 5.7932114,-3.52603 z m 0.0066,4.19203 c -1.370356,-0.0494 -2.523547,1.30386 -2.277873,2.64791 0.150011,1.3618 1.658854,2.29772 2.951679,1.86852 1.391568,-0.36367 2.080533,-2.14843 1.33192,-3.36846 -0.389128,-0.716 -1.20151,-1.14581 -2.005726,-1.14797 z' ,
vitae : 'm 11.975898,274.8189 0.358077,0.35808 v 2.86461 H 9.4693607 v 1.79038 h 2.8646143 v 3.93885 H 6.9628227 l 6.4453823,8.95192 6.087306,-8.95192 H 14.12436 v -3.93885 h 2.864613 v -1.79038 H 14.12436 v -2.86461 l 0.358076,-0.35808 z m -1.790384,10.38422 h 6.445383 l -3.222692,4.65501 z' ,
mors : 'm 14.482436,292.72274 -0.358077,-0.35808 v -2.86461 h 2.864614 v -1.79038 h -2.864614 v -3.93885 h 5.371152 l -6.445382,-8.95192 -6.0873063,8.95192 h 5.3711513 v 3.93885 H 9.4693607 v 1.79038 h 2.8646133 v 2.86461 l -0.358076,0.35808 z M 16.27282,282.33852 H 9.8274367 l 3.2226923,-4.65501 z' ,
vitae : 'm 11.975898,274.8189 0.358077,0.35808 v 2.86461 H 9.4693607 v 1.79038 h 2.8646143 v 3.93885 H 6.9628227 l 6.4453823,8.95192 6.087306,-8.95192 H 14.12436 v -3.93885 h 2.864613 v -1.79038 H 14.12436 v -2.86461 l 0.358076,-0.35808 z m -1.790384,10.38422 h 6.445383 l -3.222692,4.65501 z' ,
} ;
this . metals = [ 'mercury' , 'lead' , 'tin' , 'iron' , 'copper' , 'silver' , 'gold' ] ;
this . metals = [ 'mercury' , 'lead' , 'tin' , 'iron' , 'copper' , 'silver' , 'gold' ] ;
this . orbColors = {
salt : '#f2e7b4' ,
@ -306,24 +460,31 @@ class Board {
silver : '#cfcac3' ,
gold : '#ffba50' ,
mors : '#433c29' ,
vitae : '#F5A79E' ,
mort : '#433c29' ,
} ;
this . symbolNode s = { } ;
this . symbolTpl s = { } ;
for ( let s in symbolPaths ) {
if ( symbolPaths . hasOwnProperty ( s ) ) {
let path = symbolPaths [ s ] ;
this . symbolNodes [ s ] = Svg . makeNode ( 'path' , {
d : path ,
// weird magic numbers
transform : "scale(2.5),translate(-13,-283)" ,
fill : 'white' ,
} )
this . symbolTpls [ s ] = Svg . fromXMLg ( `
< path
d = "${path}"
transform = "scale(2) translate(-13,-283.5)"
stroke = "black"
stroke - width = "2"
stroke - opacity = "0.3"
paint - order = "stroke"
fill = "white"
/ >
` );
}
}
}
}
new Board ( ) ;
/* Start */
window . board = new Board ( ) ;
