0

My problem is that I haven't figure out how to align the spaces responsively. I've tried using vw/vh's and %s but both break consistency on different view sizes. Can anyone recommend a straight-forward way to lock down this board?

I didn't want to use multiple canvas bc of the cpu drain of 50+ spaces and don't want to use an image map because that's not responsive.

Board Game

Hi guys and gals,

I'm trying to port a board game into HTML via angular 1.x. I have an object with each board space, and have given each space a location origin via absolute positioning (top, left) and made a quick function that takes all the properties in a transform property and returns a string for css transform in ng-style.

Here's an example of the first few spaces:

1: {color: colors.blue, origin:{top:'65%', left:'13%'}, tForm: {rotate:'-21deg'}},
2: {color: colors.yellow, origin:{top:'66.5%', left:'8.5%'}, tForm: {rotate:'-35deg'}},
3: {color: colors.black, origin:{top:'70%', left:'6%'}, tForm: {rotate:'-72deg'}},
4: {color: colors.red, origin:{top:'75%', left:'5.5%'}, tForm: {rotate:'0deg'}},
5: {color: 'cool?', origin:{top:'80%', left:'6%'}, tForm: {rotate:'-21deg'}}

Here's the code that's processing those properties (mostly in ng-style):

<span id="space-{{space}}" ng-repeat="space in section" ng-init="bgColor = cool.di.models.spaces[space].color === 'trap' ? '#900020' : cool.di.models.spaces[space].color === 'cool?' ? 'rgba(230,232,234, 1)': cool.di.models.spaces[space].color === 'pass' ? 'green' : cool.di.models.spaces[space].color" 
ng-style="{padding:'.1em', color:'mintcream', background:bgColor, border:'1px solid rgba(0,0,0,.2)', position:'absolute', top: cool.di.models.spaces[space].origin.top, left: cool.di.models.spaces[space].origin.left, transform: cool.di.api.tForm(cool.di.models.spaces[space].tForm), height:'2em', width:'2em'}">

Here's my current progress on the "C" https://irthos.github.io/cool/#/board

Thanks for any suggestions!

irth
  • 1,696
  • 2
  • 15
  • 24
  • Is requirement to complete word "COOL?" using `html` elements ? – guest271314 Jan 23 '16 at 02:55
  • Yes, it may not need to have the same curves as the example image but the spaces should fit together to complete the string "COOL?". – irth Jan 23 '16 at 03:03
  • Try creating template of expected word , filling template with elements ; see http://stackoverflow.com/questions/33904472/clustering-elements-within-shape – guest271314 Jan 23 '16 at 03:05
  • Why not render the board on a canvas, Would save a lot of messing around will clunky CSS and HTML. – Blindman67 Jan 23 '16 at 11:49
  • @guest271314 thanks i'll look into that approach. – irth Jan 23 '16 at 14:21
  • @Blindman67 each space is a separate element. The way to render dom elements in a canvas is especially clunky with and svg manipulations due to browser security issues – irth Jan 23 '16 at 14:25
  • @irth Just a thought. I find it a lot easier on the canvas, no need for svg or DOM elements, just load one image that has each board location in a regularly spaced sprite sheet and render them with a single scaling factor to fit the available screen real estate. – Blindman67 Jan 23 '16 at 14:39
  • @Blindman67, thanks I'll consider that. Am hoping to do this in pure js/css bc the game mechanics rely on the dom element spaces (player position, actions, etc) – irth Jan 23 '16 at 15:03
  • i'm having good luck rendering the board with where the points() takes a string of polygon points, converts them to pixels after normalizing window.innerWidth and window.innerHeight, and am now searching for how to display other shapes and/or text on top of the spaces. if i figure out the last bit, i'll answer this question with this solution but still open to suggestions. Thanks again. – irth Jan 24 '16 at 02:24

1 Answers1

0

What worked fairly simply to make the complex collection of shapes was a repeated SVG element with polygon subelement.

The html:

<svg ng-style="{position:'absolute', background:'none', overflow: 'visible'}">
    <polygon points="{{points || '0,0 0,10 10,10 10,0 0,0'}}" stroke="black" fill="{{bgColor}}"></polygon>
 </svg>

Where points is a string generated from a helper function to normalize the view dimensions:

function(points){
    var pointsStr = '';
    points ?
    angular.forEach(points.split(' '), function (point) {
        var x = point.split(',')[0],
            y = point.split(',')[1];
        var hPx = Math.floor(($window.innerWidth / 100) * x),
            vPx = Math.floor(($window.innerHeight / 100) * y);
                pointsStr += hPx +','+vPx+' ';
            }) : null;
        return pointsStr.length > 0 ? pointsStr : null;
}

Which parses the 'poly' property string in a factory object:

1: {color: colors.blue, poly:'13,5 8,5 10,11 12,11 13,5'},
2: {color: colors.yellow, poly:'8,5 4,8 7,13 10,11 8,5'},
3: {color: colors.black, poly:'4,8 1.8,13 5.5,16 7,13 4,8'},
4: {color: colors.red, poly:'1.8,13 0,19 5,19 5.5,16 1.8,13'},
5: {color: 'cool?', poly:'0,19 1,26 5.3,22.5 5,19 0,19'},
6: {color: colors.blue, poly: '1,26 3.5,31, 7,25 5.3,22.5 1,26'},
7: {color: colors.yellow, poly: '3.5,31 9,33 10,26 7,25 3.5,31'},
8: {color: colors.black, poly: '9,33 13,32 12,25.5 10,26 9,33'},
9: {color: 'cool?', poly:'13,32 18,28 15,24 12,25.5 13,32'}

Full board rendering: https://irthos.github.io/cool/#/board

irth
  • 1,696
  • 2
  • 15
  • 24