Added Monq page to portfolio.

src/GameProjects.jsx

@@ -48,8 +48,8 @@ class GameProjects extends Component {
         to the nature of working in a small team I was able to contribute to
         puzzle design and texture generation through shaders.`,
         buttonText: "Learn More",
-        buttonLink: "https://d-tail-entertainment.itch.io/monq",
+        buttonLink: "/monq",
-        newtab: true
+        newtab: false
       },
       {
         header: "University Graphics Project",

src/Monq.jsx

@@ -0,0 +1,145 @@
+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 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"> What 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
+                  it should end up.
+                </Grid>
+                <Grid item sm={6}>
+                  <Box
+                    component="img"
+                    alt="Image of Tiger AI"
+                    src={tigerPicture}
+                    style={{ width: "100%", "float": "right" }}
+                  />
+                </Grid>
+              </Grid>
+              <Typography variant="h6"> Mirror Reflections </Typography>
+              <Grid container spacing={2}>
+                <Grid item sm={6}>
+                  <Box
+                    component="img"
+                    alt="Image of Tiger AI"
+                    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;

src/Ramble.jsx

@@ -20,7 +20,7 @@ class Ramble extends Component {
           <Card>
             <CardHeader title="Ramble" />
             <CardContent>
-              <Typography varient="p">
+              <Typography variant="p">
                 Ramble was a web project I created during my master's degree to
                 create a startup. In this project, I was the CTO and built a
                 website that allowed users to stream their podcasts live and
@@ -29,13 +29,13 @@ class Ramble extends Component {
                 streaming to DevOps in order to make it a reality.
               </Typography>
               <p />
-              <Typography varient="p">
+              <Typography variant="p">
                 It also had chatroom functionality with the ability to
                 re-stream to audiences much like other apps that came out in
                 the time since, such as Clubhouse.
               </Typography>
               <p />
-              <Typography varient="p">
+              <Typography variant="p">
                 During the project's lifespan of just under two years, I mostly
                 worked on creating the streaming functionality of the project
                 and managing how the project was designed to function behind
@@ -45,7 +45,7 @@ class Ramble extends Component {
                 today.
               </Typography>
               <p />
-              <Typography varient="p">
+              <Typography variant="p">
                 Here's a demo of the project I took before we moved on.
               </Typography>
               <p />

src/UniGraphics.jsx

@@ -21,7 +21,7 @@ class UniGraphics extends Component {
           <Card>
             <CardHeader title="University Graphics Project" />
             <CardContent>
-              <Typography varient="p">
+              <Typography variant="p">
                 I made this project for a module at uni. It's a terrain map
                 based on Perlin noise with flat face lighting, It was the first
                 project where I picked up a lot of the 3D maths used in games
@@ -32,7 +32,7 @@ class UniGraphics extends Component {
                 design.
               </Typography>
               <p />
-              <Typography varient="p">
+              <Typography variant="p">
                 Here's a build and a video demo: &#8194;
                 <Button
                   variant="contained"

src/index.jsx

@@ -23,6 +23,10 @@ class App extends Component {
             import("./Ramble").then((module) => module.default)
           }
           />
+          <AsyncRoute path="/monq" getComponent={() =>
+            import("./Monq").then((module) => module.default)
+          }
+          />
           <AsyncRoute path="/uni-graphics" getComponent={() =>
             import("./UniGraphics").then((module) => module.default)
           }