add screenshots

ucsd-cse125-sp24 · Jun 14, 2024 · ddd69da · ddd69da
1 parent 0a9d296
commit ddd69da
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 9 deletions.
diff --git a/final.css b/final.css
@@ -107,7 +107,7 @@ h2::after {
 .content table {
   margin: 0 40px;
 }
-.content img {
+.content > img {
   max-width: 100%;
   margin: 0 40px;
   border-radius: 20px;
@@ -167,7 +167,6 @@ h2::after {
 .name {
   position: absolute;
   pointer-events: none;
-  user-select: none;
   color: transparent;
   font-size: 1px;
   top: 0;
@@ -199,9 +198,10 @@ h2::after {
   }
   .content > ol > li > p:not(.question):not(.has-name),
   .content table,
-  .content img,
+  .content > img,
   .content > ol > li > ol,
-  .content > ol > li > ul {
+  .content > ol > li > ul,
+  .screenshots {
     margin-left: 0;
     margin-right: 0;
   }
@@ -214,3 +214,23 @@ h2::after {
     margin-left: 0;
   }
 }
+
+.screenshots {
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  border-radius: 20px;
+  margin: 0 40px;
+}
+.screenshots img {
+  width: 0;
+  flex-basis: 350px;
+  flex-grow: 1;
+  aspect-ratio: 1920 / 1080;
+  object-fit: cover;
+}
+
+.home {
+  align-self: flex-start;
+}
diff --git a/final.html b/final.html
@@ -23,7 +23,8 @@
     />
     <link rel="stylesheet" href="./final.css" />
   </head>
-  <body class="content">
+  <body class="content" role="main">
+    <a class="home" href="./">Return to home page</a>
     <h1>Final Project Review</h1>
     <p>Pending responses from Marcelo and Nick.</p>
     <h2 id="main" data-char="A">Main Questions</h2>
@@ -322,7 +323,19 @@ <h2 id="general" data-char="B">General questions</h2>
           What was the most difficult software problem you faced, and how did
           you overcome it (if you did)?
         </p>
-        <p>TODO</p>
+        <p>
+          git merge conflicts, the physics library not checking collisions
+          great, or webgl not liking it when you don't unbind everything
+        </p>
+        <p class="has-name" data-name="Sean">
+          <span class="name">[Sean]</span> Debugging shadows was really
+          difficult because it was hard to see what was inside the framebuffers
+          when the point lights were casting shadows. I wrote many different
+          shaders to try to see the values of various variables, and output the
+          shadow cubemaps to a canvas to see its contents. After a lot of
+          investigating, I eventually found three issues that seemed to solve
+          the more obvious issues, but not all of them.
+        </p>
       </li>
       <li>
         <p class="question">
@@ -743,6 +756,12 @@ <h2 id="general" data-char="B">General questions</h2>
           Please post four final screenshots of your game on your group pages
           for posterity. I will display them on the group web page.
         </p>
+        <div class="screenshots">
+          <img src="./images/screen/menu-card-ui.png" />
+          <img src="./images/screen/gameplay5.png" />
+          <img src="./images/screen/gameplay1.png" />
+          <img src="./images/screen/resources.png" />
+        </div>
       </li>
     </ol>
     <h2 id="feedback" data-char="D">Feedback</h2>

diff --git a/images/screen/gameplay1.png b/images/screen/gameplay1.png
diff --git a/images/screen/gameplay2.png b/images/screen/gameplay2.png
diff --git a/images/screen/gameplay3.png b/images/screen/gameplay3.png
diff --git a/images/screen/gameplay4.png b/images/screen/gameplay4.png
diff --git a/images/screen/gameplay5.png b/images/screen/gameplay5.png
diff --git a/images/screen/menu-card-ui.png b/images/screen/menu-card-ui.png
diff --git a/images/screen/ui-options.png b/images/screen/ui-options.png
diff --git a/images/screen/ui.png b/images/screen/ui.png
diff --git a/index.css b/index.css
@@ -194,8 +194,12 @@ p {
   width: 100%;
   border-radius: 10px;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
+  aspect-ratio: 1920 / 1080;
+  object-fit: cover;
 }
-.span-2 {
+.screenshots .span-2 {
   grid-column: span 2;
   grid-row: span 2;
+  aspect-ratio: auto;
+  height: 100%;
 }
diff --git a/index.html b/index.html
@@ -132,15 +132,23 @@ <h1 class="prevent-scroll">CSE 125 2024 Group 1</h1>
           </p>
         </a>
       </div>
-      <!-- <div class="screenshots">
+      <div class="screenshots">
         <img src="./images/screen/boss.png" />
         <img src="./images/screen/map.png" />
         <img src="./images/screen/minecart.png" />
         <img src="./images/screen/resources.png" class="span-2" />
         <img src="./images/screen/hole.png" />
         <img src="./images/screen/cave.png" />
         <img src="./images/screen/rocks.png" />
-      </div> -->
+        <img src="./images/screen/gameplay5.png" class="span-2" />
+        <img src="./images/screen/gameplay1.png" />
+        <img src="./images/screen/gameplay2.png" />
+        <img src="./images/screen/gameplay3.png" />
+        <img src="./images/screen/gameplay4.png" />
+        <img src="./images/screen/ui.png" />
+        <img src="./images/screen/ui-options.png" />
+        <img src="./images/screen/menu-card-ui.png" />
+      </div>
       <div class="links-row">
         <a href="../groups.html">Return to CSE 125 2024 groups</a>
       </div>