Add tree copse to mapsheet1
This commit is contained in:
parent
dedc6fed1b
commit
a2d136e7c5
@ -197,6 +197,22 @@
|
||||
/* opacity: 0.2 */
|
||||
}
|
||||
|
||||
#tree .trunk {
|
||||
fill: brown;
|
||||
}
|
||||
|
||||
#tree .branches {
|
||||
fill: rgb(141, 202, 141);
|
||||
stroke: green;
|
||||
}
|
||||
|
||||
#bush {
|
||||
fill: rgb(141, 202, 141);
|
||||
stroke: green;
|
||||
stroke-width: 0.5px;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
.select-elevation {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@ -260,7 +276,7 @@
|
||||
<body>
|
||||
<!-- <svg viewBox="-150 -130 300 260" xmlns="http://www.w3.org/2000/svg"> -->
|
||||
<!-- <svg viewBox="-300 -250 600 500" xmlns="http://www.w3.org/2000/svg"> -->
|
||||
<svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="-900 -600 1800 1200" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<polygon id="hex" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
|
||||
<line id="ast-line" stroke="#000000" stroke-width="0.3" x1="-1.2" y1="0" x2="1.2" y2="0" />
|
||||
@ -304,14 +320,6 @@
|
||||
d="m -21.650003,3e-6 h -8.659995 m 34.640005,-37.5 v 45 m 0,30 v -15 m -8.66,30.000001 V 37.500003 m 34.64,0 h -60.620005 m 60.620005,15 v -90 h -60.620005 v 90 z" />
|
||||
</g>
|
||||
|
||||
<!-- <g id="building4" class="building">
|
||||
<rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309999" y="-67.5" />
|
||||
<path id="building4-outer-wall" class="outer-wall"
|
||||
d="M -30.310008,37.5 H -12.99001 M 21.65,-7.500004 l -10e-6,-30 M 38.96999,37.5 h -34.64 M 38.97,-7.500004 H 4.33 L 4.32999,52.5 m 34.64,-90.000004 h -34.64 m 1e-5,-30 -1e-5,45 h -34.639998 m 0,-45 H 38.96999 V 52.5 h -69.279998 z" />
|
||||
<path id="building4-inner-wall" class="inner-wall"
|
||||
d="M -30.310008,37.5 H -12.99001 M 21.65,-7.500004 l -10e-6,-30 M 38.96999,37.5 h -34.64 M 38.97,-7.500004 H 4.33 L 4.32999,52.5 m 34.64,-90.000004 h -34.64 m 1e-5,-30 -1e-5,45 h -34.639998 m 0,-45 H 38.96999 V 52.5 h -69.279998 z" />
|
||||
</g> -->
|
||||
|
||||
<g id="building4" class="building">
|
||||
<rect id="building4-floor" class="floor" width="69.279999" height="120" x="-30.309992" y="-52.499996" />
|
||||
<path id="building4-outer-wall" class="outer-wall"
|
||||
@ -353,6 +361,69 @@
|
||||
<path id="building8-inner-wall" class="inner-wall"
|
||||
d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z m 77.94,30 v 15 h 69.28 v -15 m -86.6,37.5 v 7.5 m 0,-60 V -75 M 73.61,-112.5 V -75 M -90.93,-37.5 H 90.93 m 0,45 H -90.93 m 173.2,45 v -15 h 43.3 m -112.58,0 h -43.3 v 60 m 43.3,-45 v -45 m -69.28,30 h -60.62 m 60.62,30 h -60.62 m 60.62,-60 v 90" />
|
||||
</g>
|
||||
|
||||
<g id="terrain">
|
||||
<rect id="terrain-floor" class="floor" x="-52.75" y="-68" width="105.5" height="136" id="rect3415" />
|
||||
<g id="terrain-trees">
|
||||
<use href="#tree" transform="translate(-27,-45.25)" />
|
||||
<use href="#tree" transform="translate(-40.25,-38)" />
|
||||
<use href="#tree" transform="translate(-9.5,-45.5)" />
|
||||
<use href="#tree" transform="translate(12,-53.25)" />
|
||||
<use href="#tree" transform="translate(24.75,-45.5)" />
|
||||
<use href="#tree" transform="translate(-0.75,-30.5)" />
|
||||
<use href="#tree" transform="translate(20.5,-23)" />
|
||||
<use href="#tree" transform="translate(42.25,-15.25)" />
|
||||
<use href="#tree" transform="translate(-31.25,-8.25)" />
|
||||
<use href="#tree" transform="translate(-5,-8)" />
|
||||
<use href="#tree" transform="translate(-22.75,6.5)" />
|
||||
<use href="#tree" transform="translate(11.75,7)" />
|
||||
<use href="#tree" transform="translate(-40.25,21)" />
|
||||
<use href="#tree" transform="translate(-5.5,21.5)" />
|
||||
<use href="#tree" transform="translate(29,21.5)" />
|
||||
<use href="#tree" transform="translate(-5.25,36.75)" />
|
||||
<use href="#tree" transform="translate(20.5,36.25)" />
|
||||
<use href="#tree" transform="translate(-39.5,52.25)" />
|
||||
<use href="#tree" transform="translate(-13.75,51.75)" />
|
||||
<use href="#tree" transform="translate(37.5,51.5)" />
|
||||
</g>
|
||||
<g id="terrain-bushes">
|
||||
<use href="#bush" transform="rotate(28,94.297823,-93.802885)" />
|
||||
<use href="#bush" transform="rotate(-145,-21.545946,-8.1860959)" />
|
||||
<use href="#bush" transform="rotate(110,19.693337,-28.125)" />
|
||||
<use href="#bush" transform="rotate(-140,5.1953223,-33.175546)" />
|
||||
<use href="#bush" transform="rotate(110,36.642507,-10.295901)" />
|
||||
<use href="#bush" transform="rotate(-150,17.875472,-25.287831)" />
|
||||
<use href="#bush" transform="rotate(100,27.428408,1.0750314)" />
|
||||
<use href="#bush" transform="rotate(-110,-18.174792,14.216417)" />
|
||||
<use href="#bush" transform="rotate(165,-8.34839,-5.1684159)" />
|
||||
<use href="#bush" transform="rotate(-175,16.86356,-3.867236)" />
|
||||
<use href="#bush" transform="rotate(110,21.661955,19.079877)" />
|
||||
<use href="#bush" transform="rotate(-130,-2.6600386,7.0232498)" />
|
||||
<use href="#bush" transform="rotate(-70,2.1777775,2.589074)" />
|
||||
<use href="#bush" transform="rotate(-80,17.633507,-16.174242)" />
|
||||
<use href="#bush" transform="rotate(120,15.001016,20.494174)" />
|
||||
<use href="#bush" transform="rotate(170,-23.574796,16.075249)" />
|
||||
<use href="#bush" transform="rotate(145,-21.801544,10.304333)" />
|
||||
<use href="#bush" transform="rotate(-170,-10.050204,19.017056)" />
|
||||
<use href="#bush" transform="rotate(100,-19.214308,4.1133284)" />
|
||||
<use href="#bush" transform="translate(7,45.75)" />
|
||||
<use href="#bush" transform="translate(17.5,59.75)" />
|
||||
<use href="#bush" transform="translate(25,50.75)" />
|
||||
<use href="#bush" transform="rotate(-70,42.278146,-6.0464791)" />
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<g id="tree">
|
||||
<mask id="trunk-outline">
|
||||
<circle r="6.5" fill="white" />
|
||||
<circle r="2.5" fill="black" />
|
||||
</mask>
|
||||
<circle class="branches" r="6.5" mask="url(#trunk-outline)" />
|
||||
<circle class="trunk" r="2" />
|
||||
</g>
|
||||
|
||||
<path id="bush"
|
||||
d="m -4.8419646,1.6815712 c -0.2224,-0.58797 0.0373,-1.22438 -0.11465,-1.82718 -0.13335,-0.57348 -0.0486,-1.19322 0.31662,-1.6677 0.37485,-0.58981 0.9292504,-1.02199 1.5203804,-1.37775 0.37791,-0.29058 0.8322,-0.69438 1.3447,-0.48093 0.52883,0.22124 1.11777002,0.36526 1.69168002,0.27538 0.45164,-0.13122 0.78493,-0.50193 1.10890998,-0.82213 0.23823,-0.4706 0.79876,-0.76529 1.26021,-0.37753 0.75174,0.33698 1.53457,0.94104 1.60186,1.82553 0.009,0.47845 0.33305,0.83858 0.6865,1.11902 0.3949,0.43049 0.5194497,1.08616 0.39622,1.64816 -0.12486,0.51765 -0.59592,0.79391 -1.00538,1.0662 -0.3993,0.35161 -0.92629,0.72761 -0.88679,1.32791 0.0351,0.43819 -0.044,0.93411 -0.4491,1.18369 -0.75886,0.59794 -1.65352998,1.04869 -2.62829997769,1.12983 C -0.59642418,4.8046512 -1.2461242,4.8453312 -1.7811342,4.5051412 c -0.38949,-0.19045 -0.66499,-0.546 -0.75306,-0.96928 -0.19955,-0.51044 -0.67924,-0.93234 -1.24126,-0.95844 -0.4601204,-0.10269 -0.8649404,-0.47575 -1.0665104,-0.89585 z" />
|
||||
</defs>
|
||||
|
||||
<g class="gameboard" data-view-elevation="0"></g>
|
||||
|
||||
@ -327,12 +327,6 @@ mapsheet4BuildingCoords.forEach(building => {
|
||||
const gameboard = svg.querySelector('.gameboard');
|
||||
|
||||
let mapsheet1 = {
|
||||
id: 'mapsheet1',
|
||||
grid: new Map(mapsheetHexCoords),
|
||||
buildings: mapsheet1BuildingCoords
|
||||
};
|
||||
|
||||
let mapsheet10 = {
|
||||
id: 'mapsheet1',
|
||||
grid: new Map(mapsheetHexCoords),
|
||||
buildings: [
|
||||
@ -366,10 +360,19 @@ let mapsheet10 = {
|
||||
grid: new Map(buildingHexes.bld6),
|
||||
position: rotate180({ q: -13, r: 7, s: 6 })
|
||||
},
|
||||
{
|
||||
type: 'terrain',
|
||||
grid: generateRadialCoords(
|
||||
new Map(),
|
||||
{ q: 0, r: 0, s: 0 },
|
||||
{ left: 3, top: 5, right: 3, bottom: 5 }
|
||||
),
|
||||
position: ({ q, r, s }) => ({ q: q, r: r, s: s })
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
let mapsheet20 = {
|
||||
let mapsheet2 = {
|
||||
id: 'mapsheet2',
|
||||
grid: new Map(mapsheetHexCoords),
|
||||
buildings: [
|
||||
@ -411,7 +414,7 @@ let mapsheet20 = {
|
||||
]
|
||||
};
|
||||
|
||||
let mapsheet30 = {
|
||||
let mapsheet3 = {
|
||||
id: 'mapsheet3',
|
||||
grid: new Map(mapsheetHexCoords),
|
||||
buildings: [
|
||||
@ -453,7 +456,7 @@ let mapsheet30 = {
|
||||
]
|
||||
};
|
||||
|
||||
let mapsheet40 = {
|
||||
let mapsheet4 = {
|
||||
id: 'mapsheet4',
|
||||
grid: new Map(mapsheetHexCoords),
|
||||
buildings: [
|
||||
@ -476,24 +479,6 @@ function rotate180(coords) {
|
||||
};
|
||||
}
|
||||
|
||||
let mapsheet2 = {
|
||||
id: 'mapsheet2',
|
||||
grid: mapsheet2hexCoords,
|
||||
buildings: mapsheet2BuildingCoords
|
||||
};
|
||||
|
||||
let mapsheet3 = {
|
||||
id: 'mapsheet3',
|
||||
grid: mapsheet3hexCoords,
|
||||
buildings: mapsheet3BuildingCoords
|
||||
};
|
||||
|
||||
let mapsheet4 = {
|
||||
id: 'mapsheet4',
|
||||
grid: mapsheet4hexCoords,
|
||||
buildings: mapsheet4BuildingCoords
|
||||
};
|
||||
|
||||
function drawMapsheet(gameboard, { id, grid, buildings }, { q: pq, r: pr, s: ps }) {
|
||||
const container = document.createElementNS(xmlns, 'g');
|
||||
container.id = id;
|
||||
@ -603,41 +588,17 @@ function findScalar(arr) {
|
||||
});
|
||||
}
|
||||
|
||||
// mapsheet10 = drawMapsheet(gameboard, mapsheet10, { q: -1, r: 0, s: 1 });
|
||||
|
||||
let sheets = [];
|
||||
|
||||
// sheets = [[mapsheet30]];
|
||||
// sheets = [[mapsheet1]];
|
||||
// sheets = [[mapsheet3]];
|
||||
// sheets = [[mapsheet2], [mapsheet3]];
|
||||
sheets = [[mapsheet2], [mapsheet1], [mapsheet3]];
|
||||
|
||||
// drawHexes(gameboard, buildingHexes.bld8, true);
|
||||
// drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: -9, r: -6, s: 15 })), true);
|
||||
// drawHexes(gameboard, translateCoords(buildingHexes.bld4, rotate180({ q: 0, r: 0, s: 0 })), true);
|
||||
|
||||
const buildingTemplate = document.querySelector(`defs #building4`);
|
||||
const { x, y } = radialToScreenCoords({ q: 0, r: 0, s: 0 });
|
||||
|
||||
const buildingStructure = document.createElementNS(xmlns, 'g');
|
||||
buildingStructure.classList.add('structure');
|
||||
buildingStructure.classList.add('building');
|
||||
buildingStructure.setAttributeNS(null, 'transform', `translate(${x}, ${y}) rotate(180)`);
|
||||
// gameboard.appendChild(buildingStructure);
|
||||
|
||||
for (let child of buildingTemplate.children) {
|
||||
const use = document.createElementNS(xmlns, 'use');
|
||||
use.setAttributeNS(null, 'href', `#${child.id}`);
|
||||
child.classList.forEach(className => use.classList.add(className));
|
||||
buildingStructure.appendChild(use);
|
||||
}
|
||||
|
||||
|
||||
// sheets = [[mapsheet20], [mapsheet30]];
|
||||
// sheets = [[mapsheet20], [mapsheet10], [mapsheet30]];
|
||||
// sheets = [[mapsheet10]];
|
||||
|
||||
sheets = [
|
||||
[mapsheet20, mapsheet10],
|
||||
[mapsheet30, mapsheet40]
|
||||
];
|
||||
// sheets = [
|
||||
// [mapsheet2, mapsheet1],
|
||||
// [mapsheet3, mapsheet4]
|
||||
// ];
|
||||
|
||||
findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
|
||||
const vertMapVect = function(coords) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user