2021-02-14 22:13:27 +00:00
|
|
|
import React, { useState } from "react";
|
2021-03-27 11:14:42 +00:00
|
|
|
import { ColorWidget } from "../color-widget";
|
2021-03-27 11:24:15 +00:00
|
|
|
import { NumericSlider } from "../numeric-slider";
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
import { Page } from "../page";
|
2021-02-14 21:39:10 +00:00
|
|
|
|
2021-02-14 22:29:37 +00:00
|
|
|
const WAVE_STROKE = "#79beda";
|
|
|
|
const WAVE_FILL = "#2b7c9e";
|
|
|
|
|
|
|
|
const Wave: React.FC<{
|
|
|
|
stroke: string;
|
|
|
|
fill: string;
|
|
|
|
}> = ({ stroke, fill }) => (
|
2021-02-14 21:39:10 +00:00
|
|
|
<>
|
|
|
|
{/* Generator: Moho 13.0.3 build 635 */}
|
|
|
|
<path
|
2021-02-14 22:29:37 +00:00
|
|
|
fill={fill}
|
2021-02-15 14:14:17 +00:00
|
|
|
fillRule="evenodd"
|
2021-02-14 22:29:37 +00:00
|
|
|
stroke={stroke}
|
2021-02-15 14:14:17 +00:00
|
|
|
strokeWidth="4"
|
|
|
|
strokeLinecap="round"
|
|
|
|
strokeLinejoin="round"
|
2021-02-14 21:39:10 +00:00
|
|
|
d="M 1272.978 220.566 C 1272.852 220.566 12.696 217.473 12.570 217.473 C 12.570 217.454 12.307 27.724 12.307 27.705 C 12.311 27.706 35.916 41.496 51.663 41.496 C 67.409 41.496 75.272 27.705 91.018 27.705 C 106.764 27.705 114.627 41.496 130.373 41.496 C 146.120 41.496 153.982 27.705 169.729 27.705 C 185.475 27.705 193.338 41.496 209.085 41.496 C 224.831 41.496 232.694 27.705 248.440 27.705 C 264.186 27.705 272.049 41.496 287.795 41.496 C 303.542 41.496 311.405 27.705 327.151 27.705 C 342.898 27.705 350.760 41.496 366.507 41.496 C 382.253 41.496 390.116 27.705 405.862 27.705 C 421.609 27.705 429.471 41.496 445.218 41.496 C 460.964 41.496 468.827 27.705 484.573 27.705 C 500.320 27.705 508.182 41.496 523.929 41.496 C 539.675 41.496 547.538 27.705 563.284 27.705 C 579.031 27.705 586.893 41.496 602.640 41.496 C 618.386 41.496 626.249 27.705 641.995 27.705 C 657.742 27.705 665.604 41.496 681.351 41.496 C 697.097 41.496 704.960 27.705 720.707 27.705 C 736.453 27.705 744.316 41.496 760.062 41.496 C 775.808 41.496 783.671 27.705 799.417 27.705 C 815.164 27.705 823.026 41.496 838.773 41.496 C 854.519 41.496 862.382 27.705 878.129 27.705 C 893.875 27.705 901.738 41.496 917.484 41.496 C 933.230 41.496 941.093 27.705 956.839 27.705 C 972.586 27.705 980.449 41.496 996.195 41.496 C 1011.942 41.496 1019.804 27.705 1035.551 27.705 C 1051.297 27.705 1059.160 41.496 1074.906 41.496 C 1090.652 41.496 1098.515 27.705 1114.261 27.705 C 1130.008 27.705 1137.871 41.496 1153.617 41.496 C 1169.364 41.496 1177.226 27.705 1192.973 27.705 C 1208.719 27.705 1216.582 41.496 1232.328 41.496 C 1248.075 41.496 1271.680 27.706 1271.684 27.705 C 1271.684 27.724 1272.978 220.547 1272.978 220.566 Z"
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="none"
|
2021-02-14 22:29:37 +00:00
|
|
|
stroke={stroke}
|
2021-02-15 14:14:17 +00:00
|
|
|
strokeWidth="4"
|
|
|
|
strokeLinecap="round"
|
|
|
|
strokeLinejoin="round"
|
2021-02-14 21:39:10 +00:00
|
|
|
d="M 12.307 37.713 C 12.311 37.714 35.916 51.504 51.663 51.504 C 67.409 51.504 75.272 37.713 91.018 37.713 C 106.764 37.713 114.627 51.504 130.373 51.504 C 146.120 51.504 153.982 37.713 169.729 37.713 C 185.475 37.713 193.338 51.504 209.085 51.504 C 224.831 51.504 232.694 37.713 248.440 37.713 C 264.186 37.713 272.049 51.504 287.795 51.504 C 303.542 51.504 311.405 37.713 327.151 37.713 C 342.898 37.713 350.760 51.504 366.507 51.504 C 382.253 51.504 390.116 37.713 405.862 37.713 C 421.609 37.713 429.471 51.504 445.218 51.504 C 460.964 51.504 468.827 37.713 484.573 37.713 C 500.320 37.713 508.182 51.504 523.929 51.504 C 539.675 51.504 547.538 37.713 563.284 37.713 C 579.031 37.713 586.893 51.504 602.640 51.504 C 618.386 51.504 626.249 37.713 641.995 37.713 C 657.742 37.713 665.604 51.504 681.351 51.504 C 697.097 51.504 704.960 37.713 720.707 37.713 C 736.453 37.713 744.316 51.504 760.062 51.504 C 775.808 51.504 783.671 37.713 799.417 37.713 C 815.164 37.713 823.026 51.504 838.773 51.504 C 854.519 51.504 862.382 37.713 878.129 37.713 C 893.875 37.713 901.738 51.504 917.484 51.504 C 933.230 51.504 941.093 37.713 956.839 37.713 C 972.586 37.713 980.449 51.504 996.195 51.504 C 1011.942 51.504 1019.804 37.713 1035.551 37.713 C 1051.297 37.713 1059.160 51.504 1074.906 51.504 C 1090.652 51.504 1098.515 37.713 1114.261 37.713 C 1130.008 37.713 1137.871 51.504 1153.617 51.504 C 1169.364 51.504 1177.226 37.713 1192.973 37.713 C 1208.719 37.713 1216.582 51.504 1232.328 51.504 C 1248.075 51.504 1271.680 37.714 1271.684 37.713 "
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="none"
|
2021-02-14 22:29:37 +00:00
|
|
|
stroke={stroke}
|
2021-02-15 14:14:17 +00:00
|
|
|
strokeWidth="4"
|
|
|
|
strokeLinecap="round"
|
|
|
|
strokeLinejoin="round"
|
2021-02-14 21:39:10 +00:00
|
|
|
d="M 12.307 47.544 C 12.311 47.546 35.916 61.335 51.663 61.335 C 67.409 61.335 75.272 47.544 91.018 47.544 C 106.764 47.544 114.627 61.335 130.373 61.335 C 146.120 61.335 153.982 47.544 169.729 47.544 C 185.475 47.544 193.338 61.335 209.085 61.335 C 224.831 61.335 232.694 47.544 248.440 47.544 C 264.186 47.544 272.049 61.335 287.795 61.335 C 303.542 61.335 311.405 47.544 327.151 47.544 C 342.898 47.544 350.760 61.335 366.507 61.335 C 382.253 61.335 390.116 47.544 405.862 47.544 C 421.609 47.544 429.471 61.335 445.218 61.335 C 460.964 61.335 468.827 47.544 484.573 47.544 C 500.320 47.544 508.182 61.335 523.929 61.335 C 539.675 61.335 547.538 47.544 563.284 47.544 C 579.031 47.544 586.893 61.335 602.640 61.335 C 618.386 61.335 626.249 47.544 641.995 47.544 C 657.742 47.544 665.604 61.335 681.351 61.335 C 697.097 61.335 704.960 47.544 720.707 47.544 C 736.453 47.544 744.316 61.335 760.062 61.335 C 775.808 61.335 783.671 47.544 799.417 47.544 C 815.164 47.544 823.026 61.335 838.773 61.335 C 854.519 61.335 862.382 47.544 878.129 47.544 C 893.875 47.544 901.738 61.335 917.484 61.335 C 933.230 61.335 941.093 47.544 956.839 47.544 C 972.586 47.544 980.449 61.335 996.195 61.335 C 1011.942 61.335 1019.804 47.544 1035.551 47.544 C 1051.297 47.544 1059.160 61.335 1074.906 61.335 C 1090.652 61.335 1098.515 47.544 1114.261 47.544 C 1130.008 47.544 1137.871 61.335 1153.617 61.335 C 1169.364 61.335 1177.226 47.544 1192.973 47.544 C 1208.719 47.544 1216.582 61.335 1232.328 61.335 C 1248.075 61.335 1271.680 47.546 1271.684 47.544 "
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="none"
|
2021-02-14 22:29:37 +00:00
|
|
|
stroke={stroke}
|
2021-02-15 14:14:17 +00:00
|
|
|
strokeWidth="4"
|
|
|
|
strokeLinecap="round"
|
|
|
|
strokeLinejoin="round"
|
2021-02-14 21:39:10 +00:00
|
|
|
d="M 12.307 57.012 C 12.311 57.014 35.916 70.804 51.663 70.804 C 67.409 70.804 75.272 57.012 91.018 57.012 C 106.764 57.012 114.627 70.804 130.373 70.804 C 146.120 70.804 153.982 57.013 169.729 57.012 C 185.475 57.012 193.338 70.804 209.085 70.804 C 224.831 70.804 232.694 57.012 248.440 57.012 C 264.186 57.012 272.049 70.804 287.795 70.804 C 303.542 70.804 311.405 57.012 327.151 57.012 C 342.898 57.013 350.760 70.804 366.507 70.804 C 382.253 70.804 390.116 57.013 405.862 57.012 C 421.609 57.012 429.471 70.804 445.218 70.804 C 460.964 70.804 468.827 57.012 484.573 57.012 C 500.320 57.012 508.182 70.804 523.929 70.804 C 539.675 70.804 547.538 57.013 563.284 57.012 C 579.031 57.012 586.893 70.804 602.640 70.804 C 618.386 70.804 626.249 57.012 641.995 57.012 C 657.742 57.012 665.604 70.804 681.351 70.804 C 697.097 70.804 704.960 57.012 720.707 57.012 C 736.453 57.013 744.316 70.804 760.062 70.804 C 775.808 70.804 783.671 57.012 799.417 57.012 C 815.164 57.012 823.026 70.804 838.773 70.804 C 854.519 70.804 862.382 57.012 878.129 57.012 C 893.875 57.013 901.738 70.804 917.484 70.804 C 933.230 70.804 941.093 57.013 956.839 57.012 C 972.586 57.012 980.449 70.804 996.195 70.804 C 1011.942 70.804 1019.804 57.012 1035.551 57.012 C 1051.297 57.012 1059.160 70.804 1074.906 70.804 C 1090.652 70.804 1098.515 57.013 1114.261 57.012 C 1130.008 57.012 1137.871 70.804 1153.617 70.804 C 1169.364 70.804 1177.226 57.012 1192.973 57.012 C 1208.719 57.012 1216.582 70.804 1232.328 70.804 C 1248.075 70.804 1271.680 57.014 1271.684 57.012 "
|
|
|
|
/>
|
|
|
|
<path
|
|
|
|
fill="none"
|
2021-02-14 22:29:37 +00:00
|
|
|
stroke={stroke}
|
2021-02-15 14:14:17 +00:00
|
|
|
strokeWidth="4"
|
|
|
|
strokeLinecap="round"
|
|
|
|
strokeLinejoin="round"
|
2021-02-14 21:39:10 +00:00
|
|
|
d="M 12.307 66.844 C 12.311 66.845 35.916 80.635 51.663 80.635 C 67.409 80.635 75.272 66.844 91.018 66.844 C 106.764 66.844 114.627 80.635 130.373 80.635 C 146.120 80.635 153.982 66.844 169.729 66.844 C 185.475 66.844 193.338 80.635 209.085 80.635 C 224.831 80.635 232.694 66.844 248.440 66.844 C 264.186 66.844 272.049 80.635 287.795 80.635 C 303.542 80.635 311.405 66.844 327.151 66.844 C 342.898 66.844 350.760 80.635 366.507 80.635 C 382.253 80.635 390.116 66.844 405.862 66.844 C 421.609 66.844 429.471 80.635 445.218 80.635 C 460.964 80.635 468.827 66.844 484.573 66.844 C 500.320 66.844 508.182 80.635 523.929 80.635 C 539.675 80.635 547.538 66.844 563.284 66.844 C 579.031 66.844 586.893 80.635 602.640 80.635 C 618.386 80.635 626.249 66.844 641.995 66.844 C 657.742 66.844 665.604 80.635 681.351 80.635 C 697.097 80.635 704.960 66.844 720.707 66.844 C 736.453 66.844 744.316 80.635 760.062 80.635 C 775.808 80.635 783.671 66.844 799.417 66.844 C 815.164 66.844 823.026 80.635 838.773 80.635 C 854.519 80.635 862.382 66.844 878.129 66.844 C 893.875 66.844 901.738 80.635 917.484 80.635 C 933.230 80.635 941.093 66.844 956.839 66.844 C 972.586 66.844 980.449 80.635 996.195 80.635 C 1011.942 80.635 1019.804 66.844 1035.551 66.844 C 1051.297 66.844 1059.160 80.635 1074.906 80.635 C 1090.652 80.635 1098.515 66.844 1114.261 66.844 C 1130.008 66.844 1137.871 80.635 1153.617 80.635 C 1169.364 80.635 1177.226 66.844 1192.973 66.844 C 1208.719 66.844 1216.582 80.635 1232.328 80.635 C 1248.075 80.635 1271.680 66.845 1271.684 66.844 "
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
|
|
|
|
const NUM_WAVES = 8;
|
2021-02-14 22:13:27 +00:00
|
|
|
const WAVE_DURATION = 1;
|
|
|
|
const WAVE_PARALLAX_SCALE_START = 1.2;
|
2021-02-14 21:39:10 +00:00
|
|
|
const WAVE_PARALLAX_TRANSLATE_START = 10;
|
2021-02-14 22:19:01 +00:00
|
|
|
const WAVE_PARALLAX_SCALE_VELOCITY = 1.25;
|
2021-02-14 21:39:10 +00:00
|
|
|
const WAVE_PARALLAX_TRANSLATE_VELOCITY = 30;
|
|
|
|
const WAVE_PARALLAX_TRANSLATE_ACCEL = 10;
|
|
|
|
|
|
|
|
const Waves: React.FC<{}> = () => {
|
2021-02-14 22:29:37 +00:00
|
|
|
const [stroke, setStroke] = useState(WAVE_STROKE);
|
|
|
|
const [fill, setFill] = useState(WAVE_FILL);
|
2021-02-14 22:13:27 +00:00
|
|
|
const [numWaves, setNumWaves] = useState(NUM_WAVES);
|
|
|
|
const [duration, setDuration] = useState(WAVE_DURATION);
|
|
|
|
const [initialYVel, setInitialYVel] = useState(
|
|
|
|
WAVE_PARALLAX_TRANSLATE_VELOCITY
|
|
|
|
);
|
|
|
|
const [yAccel, setYAccel] = useState(WAVE_PARALLAX_TRANSLATE_ACCEL);
|
|
|
|
const [scaleVel, setScaleVel] = useState(WAVE_PARALLAX_SCALE_VELOCITY);
|
|
|
|
|
2021-02-14 21:39:10 +00:00
|
|
|
let scale = WAVE_PARALLAX_SCALE_START;
|
2021-02-14 22:13:27 +00:00
|
|
|
let y = WAVE_PARALLAX_TRANSLATE_START;
|
|
|
|
let yVel = initialYVel;
|
2021-02-14 21:39:10 +00:00
|
|
|
let waves: JSX.Element[] = [];
|
|
|
|
|
2021-02-14 22:13:27 +00:00
|
|
|
for (let i = 0; i < numWaves; i++) {
|
2021-02-14 21:39:10 +00:00
|
|
|
waves.push(
|
2021-02-14 22:13:27 +00:00
|
|
|
<g key={i} transform={`translate(0 ${y}) scale(${scale} ${scale})`}>
|
2021-02-14 21:39:10 +00:00
|
|
|
<g>
|
2021-02-14 22:29:37 +00:00
|
|
|
<Wave fill={fill} stroke={stroke} />
|
2021-02-14 21:39:10 +00:00
|
|
|
<animateTransform
|
|
|
|
attributeName="transform"
|
|
|
|
type="translate"
|
|
|
|
from="-179 0"
|
|
|
|
to="-100 0"
|
2021-02-14 22:13:27 +00:00
|
|
|
dur={`${duration}s`}
|
2021-02-14 21:39:10 +00:00
|
|
|
begin="0s"
|
|
|
|
fill="freeze"
|
|
|
|
repeatCount="indefinite"
|
|
|
|
/>
|
|
|
|
</g>
|
|
|
|
</g>
|
|
|
|
);
|
2021-02-14 22:13:27 +00:00
|
|
|
y += yVel;
|
2021-02-14 22:19:01 +00:00
|
|
|
scale *= scaleVel;
|
2021-02-14 22:13:27 +00:00
|
|
|
yVel += yAccel;
|
2021-02-14 21:39:10 +00:00
|
|
|
}
|
|
|
|
|
2021-02-14 22:13:27 +00:00
|
|
|
return (
|
|
|
|
<>
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<div className="canvas">
|
|
|
|
<svg width="1280px" height="720px" viewBox="0 0 1280 720">
|
|
|
|
{waves}
|
|
|
|
</svg>
|
|
|
|
</div>
|
|
|
|
<div className="sidebar">
|
|
|
|
<div className="thingy">
|
|
|
|
<ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
|
|
|
|
<ColorWidget value={fill} onChange={setFill} label="Fill" />
|
|
|
|
</div>
|
|
|
|
<NumericSlider
|
|
|
|
label="Number of waves"
|
|
|
|
min={1}
|
|
|
|
max={NUM_WAVES * 2}
|
|
|
|
value={numWaves}
|
|
|
|
step={1}
|
|
|
|
onChange={setNumWaves}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
label="Cycle duration"
|
|
|
|
min={0.1}
|
|
|
|
max={3}
|
|
|
|
value={duration}
|
|
|
|
step={0.1}
|
|
|
|
onChange={setDuration}
|
|
|
|
valueSuffix="s"
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
label="Initial y-velocity"
|
|
|
|
min={1}
|
|
|
|
max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
|
|
|
|
value={initialYVel}
|
|
|
|
step={1}
|
|
|
|
onChange={setInitialYVel}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
label="Y-acceleration"
|
|
|
|
min={1}
|
|
|
|
max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
|
|
|
|
value={yAccel}
|
|
|
|
step={1}
|
|
|
|
onChange={setYAccel}
|
|
|
|
/>
|
|
|
|
<NumericSlider
|
|
|
|
label="Scale velocity"
|
|
|
|
min={1.0}
|
|
|
|
max={2}
|
|
|
|
value={scaleVel}
|
|
|
|
step={0.025}
|
|
|
|
onChange={setScaleVel}
|
|
|
|
/>
|
|
|
|
</div>
|
2021-02-14 22:13:27 +00:00
|
|
|
</>
|
|
|
|
);
|
2021-02-14 21:39:10 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
export const WavesPage: React.FC<{}> = () => (
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
<Page title="Waves!">
|
2021-02-14 22:13:27 +00:00
|
|
|
<Waves />
|
Improve layout (#74)
This improves the layout of all our pages to look more like the mandala page.
Additionally, some form widgets now have better layout, and the header takes up less vertical space.
At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc).
I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`.
It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 23:00:29 +00:00
|
|
|
</Page>
|
2021-02-14 21:39:10 +00:00
|
|
|
);
|