@ -1,39 +1,77 @@
import Svg from "./svg.js"
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 ] ) ;
}
}
}
return n
}
}
class Board {
constructor ( ) {
this . $board = document . getElementById ( 'board' ) ;
// this.cells = [];
this . $boardbg = document . getElementById ( 'boardbg ' ) ;
this . $orbs = document . getElementById ( 'orbs' ) ;
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'
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 . $board . appendChild ( polygon ) ;
this . $boardbg . appendChild ( polygon ) ;
// build the board
this . buf0 = [ ] ;
this . buf1 = [ ] ;
for ( let y = 0 ; y < 6 ; y ++ ) {
for ( let x = 0 ; x < 6 + y ; x ++ ) {
this . mak eCell( x , y ) ;
this . plac eCell( x , y ) ;
}
}
for ( let y = 0 ; y < 5 ; y ++ ) {
for ( let x = 0 ; x < 10 - y ; x ++ ) {
this . mak eCell( x + y + 1 , 6 + y ) ;
this . plac eCell( x + y + 1 , 6 + y ) ;
}
}
this . buf0 . forEach ( ( elem ) => {
this . $board . appendChild ( elem ) ;
this . $boardbg . appendChild ( elem ) ;
} ) ;
this . buf1 . forEach ( ( elem ) => {
this . $board . appendChild ( elem ) ;
this . $boardbg . appendChild ( elem ) ;
} ) ;
this . buf0 = [ ] ;
this . buf1 = [ ] ;
this . placeOrb ( 0 , 0 , 'salt' ) ;
this . placeOrb ( 1 , 0 , 'air' ) ;
this . placeOrb ( 2 , 0 , 'fire' ) ;
this . placeOrb ( 3 , 0 , 'water' ) ;
this . placeOrb ( 4 , 0 , 'earth' ) ;
this . placeOrb ( 5 , 0 , 'mercury' ) ;
this . placeOrb ( 0 , 1 , 'lead' ) ;
this . placeOrb ( 1 , 1 , 'tin' ) ;
this . placeOrb ( 2 , 1 , 'iron' ) ;
this . placeOrb ( 3 , 1 , 'copper' ) ;
this . placeOrb ( 4 , 1 , 'silver' ) ;
this . placeOrb ( 5 , 1 , 'gold' ) ;
this . placeOrb ( 6 , 1 , 'vitae' ) ;
this . placeOrb ( 0 , 2 , 'mors' ) ;
}
xyToIndex ( x , y ) {
@ -53,68 +91,164 @@ class Board {
return { rx , ry }
}
makeCell ( x , y , color = 'gray' ) {
const bdr = 5 ;
const idx = this . xyToIndex ( x , y ) ;
placeOrb ( x , y , symbol ) {
const { rx , ry } = this . xyToCoord ( x , y ) ;
let polygon _shadow = Svg . makeNode ( "polygon" , {
let o = this . orb . cloneNode ( true ) ;
o . setAttributeNS ( null , 'transform' , ` translate( ${ rx } , ${ ry } ),scale(0.75) ` ) ;
o . querySelector ( '.orb-fill' ) . setAttributeNS ( null , 'fill' , this . orbColors [ symbol ] ) ;
o . appendChild ( this . symbols [ symbol ] . cloneNode ( true ) ) ;
this . $orbs . appendChild ( o ) ;
return o ;
}
initOrb ( ) {
this . orb = Svg . makeNode ( "g" ) ;
this . orb . innerHTML = `
< 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"
fill = "url(#radGradOrbBottom)"
rx = "28"
ry = "13" / >
< ellipse
ry = "24"
rx = "35"
cy = "-23"
cx = "0"
fill = "url(#radGradOrbTop)"
/ >
` ;
}
initCell ( ) {
this . tileShadow = Svg . makeNode ( "polygon" , {
'points' : "43,-25 0,-50 -43,-25 -43,25 0,50 43,25" ,
'transform' : "translate(" + rx + "," + ry + "),scale(1.1)" ,
// 'transform': `scale(1.1)`,
'fill' : '#000000' ,
'filter' : "url('#dropshadow')" ,
'filter' : "url('#filterD ropshadow')" ,
} ) ;
let polygon = Svg . makeNode ( "polygon" , {
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" ,
'transform' : "translate(" + rx + "," + ry + ")" ,
'fill' : '#C8B898' ,
} ) ;
} ) ) ;
let left _line = Svg . makeNode ( "polyline" , {
tile . appendChild ( Svg . makeNode ( "polyline" , {
'points' : "-43,-24 -43,24" ,
'transform' : "translate(" + rx + "," + ry + ")" ,
'stroke' : '#B6A986' ,
'stroke-width' : bdr ,
'fill' : 'transparent' ,
'stroke-linecap' : 'square' ,
} ) ;
} ) ) ;
let bottom _line = Svg . makeNode ( "polyline" , {
tile . appendChild ( Svg . makeNode ( "polyline" , {
'points' : "-42,25 0,50 42,25" ,
'transform' : "translate(" + rx + "," + ry + ")" ,
'stroke' : '#9E906D' ,
'stroke-width' : bdr ,
'fill' : 'transparent' ,
'stroke-linecap' : 'square' ,
} ) ;
} ) ) ;
let up _line = Svg . makeNode ( "polyline" , {
tile . appendChild ( Svg . makeNode ( "polyline" , {
'points' : "43,25 43,-25 0,-50 -43,-25" ,
'transform' : "translate(" + rx + "," + ry + ")" ,
'stroke' : '#CCC3AA' ,
'stroke-width' : bdr ,
'fill' : 'transparent' ,
'stroke-linecap' : 'none' ,
} ) ;
} ) ) ;
let circle = Svg . makeNode ( "ellipse" , {
'transform' : "translate(" + rx + "," + ry + ")" ,
tile . appendChild ( Svg . makeNode ( "ellipse" , {
'cx' : 0 ,
'cy' : 0 ,
'rx' : 39 ,
'ry' : 39 ,
'fill' : 'url(#slotb g)' ,
} ) ;
'fill' : 'url(#linGradSlotB g)' ,
} ) ) ;
// this.cells[idx] = polygon;
this . tile = tile ;
}
placeCell ( x , y ) {
const { rx , ry } = this . xyToCoord ( x , y ) ;
let polygon _shadow = this . tileShadow . cloneNode ( true ) ;
polygon _shadow . setAttributeNS ( null , 'transform' , ` translate( ${ rx } , ${ ry } ),scale(1.1) ` ) ;
this . buf0 . push ( polygon _shadow ) ;
this . buf1 . push ( polygon ) ;
this . buf1 . push ( left _line ) ;
this . buf1 . push ( bottom _line ) ;
this . buf1 . push ( up _line ) ;
this . buf1 . push ( circle ) ;
return polygon ;
let tile = this . tile . cloneNode ( true ) ;
tile . setAttributeNS ( null , 'transform' , ` translate( ${ rx } , ${ ry } ) ` ) ;
this . buf1 . push ( tile ) ;
}
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 symbols = {
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' ,
fire : 'm 5.1145923,291.51845 c 2.7048582,-5.16509 5.4097167,-10.33018 8.1145747,-15.49527 2.704858,5.16509 5.409716,10.33018 8.114574,15.49527 -5.409716,0 -10.819432,0 -16.2291487,0 z m 2.872601,-1.65646 c 3.4946487,0 6.9892977,0 10.4839467,0 -1.747324,-3.41777 -3.494649,-6.83553 -5.241973,-10.2533 -1.747325,3.41777 -3.4946491,6.83553 -5.2419737,10.2533 z' ,
water : 'm 13.229169,291.51845 c -2.704859,-5.16509 -5.409717,-10.33018 -8.1145755,-15.49527 5.4097155,0 10.8194315,0 16.2291465,0 -2.704857,5.16509 -5.409714,10.33018 -8.114571,15.49527 z m 0,-3.58551 c 1.747323,-3.41777 3.494647,-6.83553 5.24197,-10.2533 -3.494648,0 -6.989296,0 -10.4839445,0 1.7473248,3.41777 3.4946495,6.83553 5.2419745,10.2533 z' ,
earth : 'm 13.229167,291.51845 c -2.704858,-5.16509 -5.409717,-10.33018 -8.1145755,-15.49527 5.4097165,0 10.8194335,0 16.2291505,0 -2.704858,5.16509 -5.409717,10.33018 -8.114575,15.49527 z m -2.872601,-9.2049 c 1.915068,0 3.830135,0 5.745203,0 0.789791,-1.54464 1.579581,-3.08927 2.369372,-4.63391 -3.494649,0 -6.989298,0 -10.4839475,0 0.7897908,1.54464 1.5795817,3.08927 2.3693725,4.63391 z m 2.872601,5.61939 c 0.691941,-1.35592 1.383881,-2.71185 2.075822,-4.06777 -1.383881,0 -2.767762,0 -4.151643,0 0.69194,1.35592 1.383881,2.71185 2.075821,4.06777 z' ,
mercury : 'm 15.732407,279.01472 c 1.457188,0.91755 2.327793,2.6639 2.118676,4.38195 -0.130888,2.01739 -1.899178,3.73377 -3.900128,3.89053 0,0.71327 0,1.42654 0,2.13981 0.737153,-0.007 1.474306,-0.0132 2.211459,-0.0198 0,0.34126 0,0.68253 0,1.02379 -0.750804,0.003 -1.501607,0.007 -2.252411,0.01 0.0034,0.68938 0.0068,1.37875 0.01024,2.06813 -0.440244,0 -0.880489,0 -1.320733,0 -0.0034,-0.69279 -0.0068,-1.38558 -0.01024,-2.07837 -0.689374,0 -1.378747,0 -2.068121,0 0,-0.33444 0,-0.66888 0,-1.00332 0.689374,0 1.378747,0 2.068121,0 -0.0068,-0.71327 -0.01365,-1.42654 -0.02047,-2.13981 -2.15006,-0.13324 -4.015907,-2.07311 -3.9813417,-4.24183 -0.084702,-1.60894 0.7922593,-3.17204 2.1384617,-4.03065 -1.3321084,-0.8479 -2.2089181,-2.39019 -2.1397915,-3.98265 0.4846095,0 0.969219,0 1.4538285,0 -0.129447,1.801 1.552959,3.41833 3.338775,3.2762 1.681768,-0.0229 3.155505,-1.58904 3.039642,-3.2762 0.48461,0 0.969221,0 1.453831,0 0.06599,1.601 -0.803406,3.12723 -2.139798,3.98222 z m -2.303602,0.71667 c -1.758778,-0.16425 -3.4619579,1.37986 -3.388854,3.16361 -0.083477,1.71263 1.535734,3.14586 3.204567,3.07148 1.719365,0.0703 3.342464,-1.48587 3.170211,-3.23621 -0.02747,-1.57245 -1.423299,-2.948 -2.985924,-2.99888 z' ,
lead : 'm 9.5126894,279.50182 c -0.3617507,0 -0.7235013,0 -1.085252,0 0,-0.51532 0,-1.03065 0,-1.54597 0.3617507,0 0.7235013,0 1.085252,0 0,-0.6143 0,-1.2286 0,-1.8429 0.5187366,0 1.0374736,0 1.5562106,0 0,0.6143 0,1.2286 0,1.8429 0.607468,0 1.214936,0 1.822404,0 0,0.51532 0,1.03065 0,1.54597 -0.607468,0 -1.214936,0 -1.822404,0 0,1.32073 0,2.64145 0,3.96218 1.537514,-1.62806 4.417116,-1.42308 5.808997,0.28791 1.184192,1.31365 1.566419,3.41483 0.604294,4.96063 -0.519367,0.80942 -0.90468,1.73924 -0.884648,2.71614 -0.515324,0 -1.030647,0 -1.545971,0 -0.04659,-1.19876 0.527295,-2.27553 1.100009,-3.28428 0.92482,-1.59336 -0.125612,-3.92412 -1.965862,-4.19999 -1.635761,-0.31517 -3.124345,1.21479 -3.11374,2.80432 -0.0071,1.55992 -0.0011,3.11998 -0.0031,4.67995 -0.518737,0 -1.037474,0 -1.5562106,0 0,-3.97562 0,-7.95124 0,-11.92686 z' ,
tin : 'm 11.836769,285.99296 c 1.581694,0.0451 3.054161,-1.39068 2.989562,-2.99956 0.06903,-1.76826 -1.701886,-3.28981 -3.441524,-2.95861 -1.4247698,0.18442 -2.5932003,1.53599 -2.5376015,2.97841 -0.5119117,0 -1.0238233,0 -1.535735,0 -0.085695,-2.3801 2.0195976,-4.57675 4.4081085,-4.55471 2.311495,-0.14461 4.495576,1.78385 4.652567,4.08999 0.127445,1.23443 -0.250024,2.52397 -1.095332,3.44405 0.774693,0 1.549385,0 2.324078,0 0,-3.2933 0,-6.58661 0,-9.87991 0.515324,0 1.030647,0 1.545971,0 0,5.10547 0,10.21093 0,15.3164 -0.515324,0 -1.030647,0 -1.545971,0 0,-1.29684 0,-2.59368 0,-3.89052 -3.429807,0 -6.859614,0 -10.2894215,0 0,-0.51532 0,-1.03065 0,-1.54597 1.5084328,1.4e-4 3.0168655,2.9e-4 4.5252985,4.3e-4 z' ,
iron : 'm 11.237833,281.77434 c -2.1129725,-0.0765 -4.0685065,1.7834 -4.0429529,3.90895 -0.1246246,1.8905 1.3843212,3.64089 3.2341329,3.92585 1.98814,0.41339 4.242048,-0.80512 4.735939,-2.82798 0.42126,-1.59401 -0.247897,-3.38375 -1.626517,-4.29444 -0.666348,-0.47624 -1.483823,-0.71835 -2.300602,-0.71238 z m 4.218149,8.01654 c -2.219729,2.26802 -6.2673049,2.23092 -8.4717123,-0.0411 -2.1829952,-2.03247 -2.1495359,-5.81571 -0.085686,-7.91896 1.2047257,-1.38003 3.0857918,-2.10369 4.9042713,-1.84319 1.04112,0.0976 2.126139,0.37802 2.915975,1.10076 1.232001,-1.18763 2.464001,-2.37526 3.696002,-3.56289 -1.266128,0 -2.532257,0 -3.798385,0 0.477784,-0.48461 0.955568,-0.96921 1.433352,-1.45382 1.685895,0 3.371789,0 5.057684,0 0,1.67906 0,3.35812 0,5.03718 -0.488023,0.48803 -0.976045,0.97606 -1.464068,1.46409 0,-1.27296 0,-2.54591 0,-3.81887 -1.221761,1.18763 -2.443522,2.37526 -3.665283,3.56289 1.692564,2.15746 1.51732,5.5939 -0.52215,7.47392 z' ,
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' ,
} ;
this . orbColors = {
salt : '#f2ebda' ,
air : '#b3eeff' ,
fire : '#ff540b' ,
water : '#0fdac3' ,
earth : '#99ff11' ,
// TODO metals need color adjust + ideally should have different visuals
mercury : '#f2ebda' ,
lead : '#728686' ,
tin : '#c5be9b' ,
iron : '#b59e97' ,
copper : '#f5a581' ,
silver : '#cfcac3' ,
gold : '#ffba50' ,
vitae : '#F5A79E' ,
mort : '#433c29' ,
} ;
this . symbols = { } ;
for ( let s in symbols ) {
if ( symbols . hasOwnProperty ( s ) ) {
let path = symbols [ s ] ;
this . symbols [ s ] = Svg . makeNode ( 'path' , {
d : path ,
// weird magic numbers
transform : "scale(2.5),translate(-13,-283)" ,
fill : 'white' ,
} )
}
}
}
}
