TLDR
Testing out HTML and CSS for the hexagon grid that Catan uses. JSFiddle was great for prototyping without any setup time.
Main work
- Reviewing / reading about CSS methods for drawing non-standard shapes.
- Reviewing layout of Catan board and determining the different graphics, shapes, and layouts required for play.
Challenges
- Want a responsive board of hexagons, but complicate math / CSS to achieve.
- As far as I can tell, using
display: absolute;is the only way I’ll be able to position board pieces. - (Tangential) Just built my own computer and am using Ubuntu / Linux for development for the first time. Lots of little learning curves like switching windows with shortcuts, installing applications, troubleshooting drivers.
Learnings
- CSS Tricks has a great article I took most of the CSS from. We’re able to use
repeat-linear-gradientandclip-path.