xxxxxxxxxx
<html>
<head>
<style>
.block {
fill: white;
stroke-width: 4px;
stroke: lightgray;
}
.block.selected, .block.selected .symbol path {
fill: none;
stroke: none;
}
.moving-block {
display: none;
}
.moving-block.selected {
display: inherit;
fill: #e0e0e0;
stroke-width: 4px;
stroke: gray;
}
.selectable {
stroke: grey;
fill: #f6f6f6;
}
.path {
fill: #c9c9c9;
stroke: grey;
}
.path .symbol path {
fill: grey;
}
.endpoint {
fill: #a9a9a9;
stroke: #797979;
}
.symbol path {
fill: lightgrey;
stroke-width: 0;
}
.selectable .symbol path, .moving-block.selected .symbol path {
fill: gray;
}
.not-selected:not(.selected):not(.path) {
fill: white;
stroke: lightgray;
}
.not-selected:not(.selected):not(.path) .symbol path {
fill: lightgray;
}
.player {
fill: #f6f6f6;
stroke: grey;
stroke-opacity: 0.5;
stroke-width: 4px;
}
.player.active-player {
stroke-opacity: 1;
}
.player text, .player .symbol path {
stroke: none;
stroke-width: 0;
fill: grey;
fill-opacity: 0.5;
}
text {
font-family: Arial,serif;
font-size: xx-large;
stroke-width: 0;
stroke: none;
fill: grey;
cursor: default;
}
.player.active-player text, .player.active-player .symbol path {
fill-opacity: 1;
}
.winning-line, .winning-player {
fill: orange;
fill-opacity: 0.5;
stroke: darkorange;
stroke-opacity: 0.5;
}
.winning-line .symbol path, .player.winning-player .symbol path, .player.winning-player text {
fill: darkorange;
}
.menu {
fill: white;
stroke: grey;
stroke-width: 4px;
}
.button {
fill: lightgrey;
stroke: grey;
stroke-width: 3px;
text-anchor: middle;
}
.button:active {
fill: grey;
}
path {
stroke: none;
stroke-width: 0;
fill: none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js" charset="utf-8"></script>
<script src="pathseg.js"></script>
</head>
<body>
<div id="board"></div>
<script src="game.js"></script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min.js