Merged

webapp/src/App.tsx

@@ -5,6 +5,7 @@ import { loadData } from "./apiclient/apiclient";
 import { ComputerUpgradesPage } from "./components/ComputerUpgrades";
 import { FleischeRaceGame } from "./components/FleischeRaceGame";
 import { useDraggable } from "react-use-draggable-scroll";
+import { HelveticaPage } from "./components/HelveticaPage";
 
 function App() {
   const ref =
@@ -29,6 +30,8 @@ function App() {
       {pieces.map((piece) => {
         if (piece.name === "Fleisch Ski Race") {
           return <FleischeRaceGame />;
+        } else if (piece.name === "Helvetica") {
+          return <HelveticaPage />;
         } else {
           return <Room key={piece.id} piece={piece} />;
         }

webapp/src/components/HelveticaPage.tsx

@@ -0,0 +1,22 @@
+import { RoomWrapper } from "../templates/Room";
+
+export function HelveticaPage() {
+  return (
+    <RoomWrapper
+      style={{
+        background: "white",
+        fontFamily: "'Helvetica'",
+      }}
+    >
+      <div
+        className="container mx-auto pt-12"
+        style={{
+          maxWidth: "66rem",
+        }}
+      >
+        <h1 className="text-7xl font-semibold uppercase p-3 pb-0">Helvetica</h1>
+        <h1 className="text-3xl mb-4 p-3 pt-0">Helvetica todo todo todo</h1>
+      </div>
+    </RoomWrapper>
+  );
+}

webapp/src/index.css

@@ -27,6 +27,11 @@ html, body, #root {
     src: url("/Muloka Kerash.otf");
 }
 
+@font-face {
+    font-family: Helvetica;
+    src: url("/Helvetica Roman.ttf");
+}
+
 .font-title {
     font-family: 'Muloka Kerash';
 }

webapp/src/templates/Room.tsx

@@ -25,7 +25,6 @@ const Room = ({ piece }: { piece: Piece }) => {
     <RoomWrapper
       style={{
         backgroundImage: "url(/art-hall-1.jpg)",
-        position: "relative",
       }}
     >
       <ArtObject piece={piece} />