portfolio/src/Monq.jsx

import { h, render, Component } from "preact";
import Header from "./Header";
import {
  Button,
  Container,
  Card,
  CardHeader,
  CardContent,
  Typography,
  Grid,
  Box
} from "@material-ui/core";


const tigerPicture = new URL("../static/images/MonqPage/TigerAI.png", import.meta.url);
const tigerDiagram = new URL("../static/images/MonqPage/TigerDiagram.png", import.meta.url);
const sandPicture = new URL("../static/images/MonqPage/Sand.png", import.meta.url);
const mirrorPicture = new URL("../static/images/MonqPage/MirrorReflection.png", import.meta.url);

class Monq extends Component {
  render() {
    return (
      <span>
        <Header />
        <p />
        <Container maxWidth="md">
          <Card>
            <CardHeader title="Monq" />
            <CardContent>
              <Typography variant="p">
                This is my most complete game project. I made it in my second
                year of university with some friends, and we were going to use
                it to form a successful startup. I learned a lot about how a
                multidisciplinary team works and tinkered with creating
                frameworks in C++ with inheritance both to blueprints and
                further C++ sub-classes, covering concepts such as all the AI
                using unreal's tools, puzzle implementation, shader
                implementation using noise and more. Most of the mechanics for
                which I was responsible, used a variety of vector and
                positional mathematics to implement.
              </Typography>
              <p />
              <Typography variant="h5"> Project and Team </Typography>
              <Grid container spacing={2}>
                <Grid item sm={6} xs={12}>
                  <Typography variant="h6"> Programming: </Typography>
                  <Typography variant="p"> Warwick New, </Typography>
                  <Typography variant="p"> James Hellman </Typography>

                  <Typography variant="h6"> Designers: </Typography>
                  <Typography variant="p"> James Hellman, </Typography>
                  <Typography variant="p"> Nicholas Stankowski </Typography>

                  <Typography variant="h6"> Art: </Typography>
                  <Typography variant="p"> Harri Slee, </Typography>
                  <Typography variant="p"> Robert Adolfson </Typography>

                  <Typography variant="h6"> Music: </Typography>
                  <Typography variant="p"> Jason Read </Typography>

                  <Typography variant="h6"> Writing: </Typography>
                  <Typography variant="p"> Michael Wheatley </Typography>

                  <Typography variant="h6"> Animation: </Typography>
                  <Typography variant="p"> George Evans, </Typography>
                  <Typography variant="p"> Ross Everson </Typography>
                </Grid>
                <Grid item sm={6}>
                  <iframe
                    style={{ display: "block", margin: "auto", float: "right" }}
                    width="560" height="315"
                    src="https://www.youtube-nocookie.com/embed/fRSD64D0LUw"
                    title="YouTube video player" frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media;
                    gyroscope; picture-in-picture" allowfullscreen>
                  </iframe>
                </Grid>
              </Grid>
              <p />
              <iframe
                style={{ display: "block", margin: "0 auto" }}
                src="https://itch.io/embed/131406" height="167" width="552"
                frameborder="0">
                <a
                  href="https://d-tail-entertainment.itch.io/monq">MONQ by
                  dtailent
                </a>
              </iframe>
              <p />
              <Typography variant="h5"> Stuff I worked on </Typography>
              <Typography variant="h6"> Tiger AI </Typography>
              <Grid container spacing={2}>
                <Grid item sm={6} xs={12}>
                  Here I created an AI that guards an arena. The puzzle part
                  of this boss was based on trying to get the ai to get a
                  chain stuck on pillars left around the arena reducing the
                  range it could navigate. I did this by calculating the
                  distance between the previous attachment point and the next
                  and reducing the available navigatable circumference of the
                  tiger appropriately. Since this was my first more
                  complicated AI, I now know that It would have been far
                  easier to restrict the AI's movement through the use of a
                  more complex steering system rather than calculating where
                  the actor should target moving towards.
                </Grid>
                <Grid item sm={6}>
                  <Box
                    component="img"
                    alt="Image of Tiger AI"
                    src={tigerPicture}
                    style={{ width: "100%", "float": "right" }}
                  />
                </Grid>
              </Grid>
              <Box
                component="img"
                alt="Diagram of Tiger AI"
                src={tigerDiagram}
                style={{ width: "100%", "float": "right" }}
              />
              <Typography variant="h6"> Mirror Reflections </Typography>
              <Grid container spacing={2}>
                <Grid item sm={6}>
                  <Box
                    component="img"
                    alt="Image of mirror reflection"
                    src={mirrorPicture}
                    style={{ width: "100%", "float": "left" }}
                  />
                </Grid>
                <Grid item sm={6} xs={12}>
                  Here is an example of me simulating reflections in monq to
                  create a light bounce puzzle. Each mirror triggers the next
                  to recursively make light reflection beams. Here I had to
                  work out angles of reflection before creating a new cast to
                  attach a beam particle.
                  <p />
                  I also worked on the sand texture in this image mixing
                  various forms of noise to create the ripples based on
                  changes in topography.
                </Grid>
              </Grid>
              <p />
            </CardContent>
          </Card>
        </Container>
      </span>
    );
  }
}

export default Monq;