portfolio/src/GraphicsBlog.jsx

import { h, render, Component } from "preact";
import {
  Grid,
  Container,
  Card,
  CardHeader,
  CardMedia,
  CardActions,
  CardContent,
  Typography,
  Button,
  List,
  ListHeader,
  ListItemIcon,
  ListItem,
  Link,
} from "@material-ui/core";
import ArrowRightIcon from '@material-ui/icons/ArrowRight';
import Header from "./Header";

import Blog1 from "../static/images/GraphicsBlog/blog1.png";
const Blog2 = new URL("../static/video/graphics_blog/blog2.webm", import.meta.url);
import Blog3 from "../static/images/GraphicsBlog/blog3.png";

class GraphicsBlog extends Component {
  constructor(props) {
    super(props);
    this.content = [
      {
        header: "SDL/OpenGL boilerplate",
        subheader: "Note: this blog is a copy of a forum thread",
        mediaType: "img",
        image: Blog1,
        imageAltText: "Textured square",
        content: `Today I added textures to my game engine. Next up
        refactoring... But then camera movement (Or strangely enough world
        movement around the camera).`,
        buttonText: undefined,
        buttonLink: undefined,
      },
      {
        header: "Camera Movement",
        subheader: "Note: this blog is a copy of a forum thread",
        mediaType: "video",
        image: Blog2,
        imageAltText: "Textured square with camera movement",
        content: `The project is now officially 3D, with camera movement. Next
        up is more complex meshes.`,
        buttonText: undefined,
        buttonLink: undefined,
      },
      {
        header: "Multiple Meshes",
        subheader: "Note: this blog is a copy of a forum thread",
        mediaType: "img",
        image: Blog3,
        imageAltText: "2 textured squares",
        content: `Now that I have a mesh class it's pretty easy to make multiple objects reusing textures and indices. Next, it's giving those meshes their own relative position rather than hard coding every position on every triangle point to move it 🙃.`,
        buttonText: undefined,
        buttonLink: undefined,
      },
    ];
  }

  render = () => {
    return (
      <span>
        <Header />
        <Container>
          <p />
          <Card>
            <CardHeader title="Graphics Blog" />
            <CardContent>
              <Typography variant="p" >
                In this project, I plan to generate a cyberpunk cityscape with
                an infinite level of verticality to give it a large sense of
                scale. The project is written in C++ using SDL to manage
                windows and OpenGL to render the meshes.
              </Typography>
              <List dense>
                <ListHeader>
                  To Do:
                </ListHeader>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Give meshes their own relative location.
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Run a marching square implementation to generate a mesh for a
                  chunk based on test data.
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Handle loading chunks asynchronously as the game runs.
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Add a noise algorithm to vary the cityscape marching square
                  generation. (Looking at &nbsp;
                  <Link
                    component="span"
                    rel="noopener"
                    href="https://github.com/Aubrrn/FastNoise2"
                  > FastNoise2 </Link>
                  )
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Create a mesh data library to make the marching square
                  algorithm generate something that looks like a city. (May
                  require a method of importing models)
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Fancy lighting (Potentially bake some shadows into a chunks
                  texture during the generation phase).
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Design and create an interesting movement system for the
                  world created. (May need a physics engine like &nbsp;
                  <Link
                    component="span"
                    rel="noopener"
                    href="https://github.com/bulletphysics/bullet3"
                  > Bullet Engine </Link>
                  )
                </ListItem>
                <ListItem>
                  <ListItemIcon><ArrowRightIcon /></ListItemIcon>
                  Look into the potential implementation of mono-rails and
                  suspended trains as a stretch goal.
                </ListItem>
              </List>
            </CardContent>
          </Card>
          <p />
          <Grid container spacing={3}>
            {this.content.reverse().map((project) => {
              return (
                <Grid item xs="12" lg="6">
                  <Card>
                    <CardHeader
                      title={project.header}
                      subheader={project.subheader}
                    />
                    <CardMedia
                      component={project.mediaType}
                      image={project.image}
                      alt={project.imageAltText}
                      muted
                      loop
                      autoplay
                      controls
                    />
                    <CardContent>
                      <Typography variant="body1" >
                        {project.content}
                      </Typography>
                    </CardContent>
                    <CardActions>
                      <Button
                        target="_blank"
                        href={project.buttonLink}
                        color="primary"
                      >
                        {project.buttonText}
                      </Button>
                    </CardActions>
                  </Card>
                </Grid>
              );
            })}
          </Grid>
        </Container>
      </span>
    );
  };
}
export default GraphicsBlog;