104 lines
3.5 KiB
TypeScript
104 lines
3.5 KiB
TypeScript
import React from 'react'
|
|
import { Line, Rect } from 'react-konva';
|
|
import ColorPolygon from './ColorPolygon';
|
|
|
|
const S1 = 4;
|
|
|
|
export const Window1: React.FC<{
|
|
rect: number[];
|
|
}> = ({ rect }) => {
|
|
const [x1, y1, x2, y2] = rect;
|
|
|
|
const w1 = (x2 - x1 - S1) / 2;
|
|
const w2 = (x2 - x1 - S1 * 2) / 3;
|
|
|
|
return (
|
|
<>
|
|
<Rect fill='#b1c3cf' x={x1} y={y1} width={w1} height={16} />
|
|
<Rect fill='#b1c3cf' x={x1 + w1 + S1} y={y1} width={w1} height={16} />
|
|
|
|
<Rect fill='#b1c3cf' x={x1} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
|
|
<Rect fill='#b1c3cf' x={x1 + w2 + S1} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
|
|
<Rect fill='#b1c3cf' x={x1 + (w2 + S1) * 2} y={y1 + 16 + S1} width={w2} height={y2 - y1 - 16 - S1} />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export const WindowSep: React.FC<{
|
|
rect: number[];
|
|
}> = ({ rect }) => {
|
|
const [x1, y1, x2, y2] = rect;
|
|
|
|
return (
|
|
<Rect fill='#b1c3cf' x={x1} y={y1 - 8} width={x2 - x1} height={y2 - y1 + 8} />
|
|
)
|
|
}
|
|
|
|
export const RoomWindows: React.FC<{
|
|
rect: number[];
|
|
}> = ({ rect }) => {
|
|
const [x1, y1, x2, y2] = rect;
|
|
|
|
const u = (x2 - x1) / 10;
|
|
const v = (y2 - y1) / 6;
|
|
|
|
const c1 = x1 - 10 + 1;
|
|
const c2 = x1 - 10 + 7 * u;
|
|
const dc = (c2 - c1) / 10;
|
|
|
|
return (
|
|
<>
|
|
<Rect fill='#c1d3d5' x={x1 + u} y={y1 + v} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u, y1 + v, x1 + 2 * u, y1 + v]} />
|
|
<Rect fill='#c1d3d5' x={x1 + u * 2 + 2} y={y1 + v} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u * 2 + 2, y1 + v, x1 + 3 * u + 2, y1 + v]} />
|
|
|
|
|
|
<Rect fill='#c1d3d5' x={x1 + u * 5} y={y1 + v} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u * 5, y1 + v, x1 + 6 * u, y1 + v]} />
|
|
<Rect fill='#c1d3d5' x={x1 + u * 6 + 2} y={y1 + v} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u * 6 + 2, y1 + v, x1 + 7 * u + 2, y1 + v]} />
|
|
|
|
|
|
|
|
<Rect fill='#c1d3d5' x={x1 + u} y={y1 + v * 4} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u, y1 + v * 4, x1 + 2 * u, y1 + v * 4]} />
|
|
<Rect fill='#c1d3d5' x={x1 + u * 2 + 2} y={y1 + v * 4} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u * 2 + 2, y1 + v * 4, x1 + 3 * u + 2, y1 + v * 4]} />
|
|
|
|
|
|
<Rect fill='#c1d3d5' x={x1 + u * 5} y={y1 + v * 4} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u * 5, y1 + v * 4, x1 + 6 * u, y1 + v * 4]} />
|
|
<Rect fill='#c1d3d5' x={x1 + u * 6 + 2} y={y1 + v * 4} width={u} height={v} />
|
|
<Line stroke='#fff' points={[x1 + u * 6 + 2, y1 + v * 4, x1 + 7 * u + 2, y1 + v * 4]} />
|
|
|
|
<Rect fill='#8fa7a7' x={x1 - 10} y={y1 + 3 * v} width={7 * u} height={v * 0.6} />
|
|
<ColorPolygon
|
|
fill='#4a5c5e'
|
|
pts={[
|
|
[x1 - 10, y1 + 3.6 * v],
|
|
[x1 - 10 + 4, y1 + 3.6 * v + 2],
|
|
[x1 - 10 + 7 * u + 3, y1 + 3.6 * v + 2],
|
|
[x1 - 10 + 7 * u + 3, y1 + 3 * v + 2],
|
|
[x1 - 10 + 7 * u, y1 + 3 * v],
|
|
[x1 - 10 + 7 * u, y1 + 3.6 * v + 2],
|
|
[x1 - 10 + 7 * u, y1 + 3.6 * v],
|
|
]}
|
|
/>
|
|
<Line stroke='#8fa7a7' lineJoin='round' points={[
|
|
x1, y1 + 2.5 * v + 2,
|
|
x1 - 10 + 4, y1 + 2.5 * v + 2,
|
|
x1 - 10, y1 + 2.5 * v, x1 - 10 + 7 * u, y1 + 2.5 * v,
|
|
x1 - 10 + 7 * u + 3, y1 + 2.5 * v + 2,
|
|
]} />
|
|
<Line stroke='#8fa7a7' points={[x1 - 10 + 4, y1 + 2.5 * v + 2, x1 - 10 + 4, y1 + 3 * v]} />
|
|
{
|
|
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => (
|
|
<Line key={i} stroke='#8fa7a7' points={[c1 + dc * i, y1 + 2.5 * v, c1 + dc * i, y1 + 3 * v]} />
|
|
))
|
|
}
|
|
|
|
</>
|
|
|
|
)
|
|
} |