Skip to content

Commit 08dd3a3

Browse files
ecraxecrax
committed
home page content and raccoon sprite for webpages
1 parent b4e5eb8 commit 08dd3a3

4 files changed

Lines changed: 61 additions & 43 deletions

File tree

‎app/assets/raccoon.png‎

1.95 KB
Loading

‎app/lib/game/components/LevelCompleteDialog.tsx‎

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { DialogClose } from "@radix-ui/react-dialog";
22
import { NavLink } from "react-router";
33

4+
import raccoonImage from "~/assets/raccoon.png";
45
import { useGameStore } from "~/lib/zustand/game";
56
import { LEVELS } from "../core/levels";
67
import { getNeighborLevels } from "../utils/navigator";
@@ -34,22 +35,12 @@ const LevelCompleteDialog = () => {
3435
Next Level button.`}
3536
>
3637
<div className="flex flex-col gap-5">
37-
<div className="flex flex-1 flex-row">
38-
{/* Left side: Raccoon sprite */}
39-
<div className="my-auto w-1/3">
40-
<div
41-
style={{
42-
aspectRatio: "7 / 6",
43-
width: "100%",
44-
backgroundImage: "url('/game/sprites/raccoon_spritesheet.png')",
45-
backgroundPosition: "0 0",
46-
backgroundSize: "400% 400%",
47-
backgroundRepeat: "no-repeat",
48-
imageRendering: "pixelated",
49-
}}
50-
></div>
51-
</div>
52-
{/* Right side: Success text */}
38+
<div className="flex flex-1 flex-row items-center">
39+
<img
40+
src={raccoonImage}
41+
className="pixelate mr-8 aspect-square h-full w-1/3"
42+
/>
43+
5344
<div className="relative my-auto flex h-36 w-full flex-col items-center justify-center rounded-lg bg-slate-700 p-4 text-white shadow-lg">
5445
<div className="absolute top-1/2 -left-2.5 h-0 w-0 -translate-y-1/2 border-t-10 border-r-10 border-b-10 border-t-transparent border-r-slate-700 border-b-transparent"></div>
5546
<p className="mb-2 text-2xl font-bold">

‎app/lib/game/components/LevelDialog.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { DialogClose } from "@radix-ui/react-dialog";
22
import classNames from "classnames";
33
import React, { useEffect, useRef, useState } from "react";
44

5+
import raccoonImage from "~/assets/raccoon.png";
56
import { useGameStore } from "~/lib/zustand/game";
67
import { LEVELS } from "../core/levels";
78
import CustomDialog from "./CustomDialog";
@@ -81,23 +82,12 @@ const LevelDialog = ({
8182
pressing the escape key.`}
8283
>
8384
<div className="flex flex-col gap-5">
84-
<div className="flex flex-1 flex-row">
85-
{/* Left side: Raccoon sprite */}
86-
<div className="my-auto w-1/3">
87-
<div
88-
style={{
89-
aspectRatio: "7 / 6",
90-
width: "100%",
91-
backgroundImage: "url('/game/sprites/raccoon_spritesheet.png')",
92-
backgroundPosition: "0 0",
93-
backgroundSize: "400% 400%",
94-
backgroundRepeat: "no-repeat",
95-
imageRendering: "pixelated",
96-
}}
97-
></div>
98-
</div>
85+
<div className="flex flex-1 flex-row items-center">
86+
<img
87+
src={raccoonImage}
88+
className="pixelate mr-8 aspect-square h-full w-1/3"
89+
/>
9990

100-
{/* Right side: Description text */}
10191
<div className="relative my-auto h-36 w-full rounded-lg bg-slate-700 p-4 text-white shadow-lg">
10292
<div className="absolute top-1/2 -left-2.5 h-0 w-0 -translate-y-1/2 border-t-10 border-r-10 border-b-10 border-t-transparent border-r-slate-700 border-b-transparent"></div>
10393
<p className="h-full overflow-auto pr-2 text-lg italic [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-slate-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-slate-900">

‎app/routes/Home.tsx‎

Lines changed: 48 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import { useRef } from "react";
22
import { NavLink } from "react-router";
33

4+
import arrowDownIcon from "~/assets/arrow_down.svg";
5+
import caRaccoon from "~/assets/home/ca_raccoon.png";
6+
import eatingTrash from "~/assets/home/eating_trash.png";
7+
import raidTrash from "~/assets/home/raid_trash.png";
8+
import raccoonImage from "~/assets/raccoon.png";
49
import Footer from "~/lib/core/components/Footer";
510
import Header from "~/lib/core/components/Header";
611
import {
@@ -13,10 +18,6 @@ import {
1318
import LevelCard from "~/lib/core/home/components/LevelCard";
1419
import PlayButton from "~/lib/core/home/components/PlayButton";
1520
import { LEVELS } from "~/lib/game/core/levels";
16-
import arrowDownIcon from "../assets/arrow_down.svg";
17-
import ca_raccoon from "../assets/home/ca_raccoon.png";
18-
import eating_trash from "../assets/home/eating_trash.png";
19-
import raid_trash from "../assets/home/raid_trash.png";
2021

2122
const Home = () => {
2223
const scrollTargetRef = useRef<HTMLDivElement>(null);
@@ -82,39 +83,75 @@ const Home = () => {
8283
className="flex items-center justify-center bg-white"
8384
>
8485
<div className="flex h-full w-full flex-col items-center p-12">
85-
<h1 className="font-pixel pb-12 text-4xl font-bold">
86+
<h2 className="font-pixel pb-12 text-4xl font-bold">
8687
Learn these skills to become a dumpster diver
87-
</h1>
88+
</h2>
8889
<div className="flex flex-col items-start justify-center gap-10 md:flex-row md:gap-32">
8990
<div className="flex flex-col gap-4 text-center">
9091
<div className="bg-jam-600 h-32 w-32 rounded-full">
91-
<img className="rounded-b-full" src={ca_raccoon} alt="" />
92+
<img className="rounded-b-full" src={caRaccoon} alt="" />
9293
</div>
9394
Computer
9495
<br />
9596
Animation
9697
</div>
9798
<div className="flex flex-col gap-4 text-center">
9899
<div className="bg-jam-600 h-32 w-32 rounded-full">
99-
<img className="rounded-b-full" src={raid_trash} alt="" />
100+
<img className="rounded-b-full" src={raidTrash} alt="" />
100101
</div>
101102
Raiding The <br />
102103
Trash
103104
</div>
104105
<div className="flex flex-col gap-4 text-center">
105106
<div className="bg-jam-600 h-32 w-32 rounded-full">
106-
<img className="rounded-b-full" src={eating_trash} alt="" />
107+
<img className="rounded-b-full" src={eatingTrash} alt="" />
107108
</div>
108109
Eating Trash
109110
</div>
110111
</div>
111112
</div>
112113
</section>
114+
<section className="flex h-96 w-full items-center justify-around bg-slate-800">
115+
<div className="flex flex-col items-start justify-center gap-10 md:flex-row md:gap-32">
116+
<img
117+
className="pixelate hidden w-60 pl-10 md:flex"
118+
src={raccoonImage}
119+
alt=""
120+
/>
121+
</div>
122+
<div className="flex h-full w-full max-w-2xl flex-col items-start justify-center gap-4 p-4 text-white">
123+
<h2 className="font-pixel text-4xl font-bold">Welcome to the game</h2>
124+
<p>
125+
Welcome to our educational game about computer animation! This
126+
project is designed to help you explore and understand key concepts
127+
in animation, game logic, and interactive systems through hands-on
128+
experimentation.
129+
</p>
130+
</div>
131+
</section>
132+
<section className="flex h-96 w-full items-center justify-around bg-white">
133+
<div className="flex h-full w-full max-w-2xl flex-col items-start justify-center gap-4 p-4">
134+
<h2 className="font-pixel text-4xl font-bold">How to play</h2>
135+
<p>
136+
In this game, you use a visual node editor to build logic, control
137+
game objects, and solve creative puzzles. Each level introduces new
138+
mechanics and concepts, from basic value manipulation to more
139+
advanced topics such as conditional logic, movement, and more.
140+
</p>
141+
</div>
142+
<div className="flex flex-col items-start justify-center gap-10 md:flex-row md:gap-32">
143+
<img
144+
className="pixelate hidden w-60 -scale-x-100 pl-10 md:flex"
145+
src="/game/sprites/soap.png"
146+
alt=""
147+
/>
148+
</div>
149+
</section>
113150
<section className="flex h-96 items-center justify-center bg-slate-800">
114151
<div className="flex h-full w-full max-w-2xl flex-col items-center justify-center gap-4 p-4">
115-
<h1 className="font-pixel text-4xl font-bold text-white">
152+
<h2 className="font-pixel text-4xl font-bold text-white">
116153
Join the community
117-
</h1>
154+
</h2>
118155
<p className="text-center text-sm text-white">
119156
Join our student Discord to connect with other Mediatechnology
120157
students, share your experiences, and get help with the game.

0 commit comments

Comments
 (0)