Skip to content

Commit 312e7b0

Browse files
thomasbringer-madboxthomasbringer-madbox
committed
nice page height
1 parent 2929290 commit 312e7b0

3 files changed

Lines changed: 251 additions & 21 deletions

File tree

‎src/Game.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.game-container {
2-
max-height: 100vh;
2+
/* max-height: 100vh;
33
overflow-y: auto;
4-
width: 100vw;
4+
width: 100vw; */
55
display: flex;
66
flex-direction: column;
77
align-items: center;
8-
cursor: url('public/cursor/cursor1.png') 25 25, auto;
8+
/* cursor: url('public/cursor/cursor1.png') 25 25, auto; */
99
}
1010

1111
.game-container2 {
@@ -15,13 +15,13 @@
1515
max-width: 1280px;
1616
}
1717

18-
.game-title {
18+
/* .game-title {
1919
cursor: url('https://thomasbringer.github.io/bleached/cursor/cursor2.png') 16 16, pointer;
20-
}
20+
} */
2121

22-
.game-title:hover {
22+
/* .game-title:hover {
2323
text-decoration: underline;
24-
}
24+
} */
2525

2626
::selection {
2727
background-color:#ffe07e;

‎src/Reveal.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,24 @@
1+
.layers{
2+
max-height: 100vh;
3+
overflow-y: auto;
4+
width: 100vw;
5+
}
6+
7+
.layers2{
8+
height: 2500px;
9+
}
10+
111
.hidden-layer {
2-
position: absolute;
12+
height: 2500px;
313
inset: 0;
414
background: #ffe07e;
515
}
616

717
.visible-layer {
18+
/* overflow: visible; */
19+
height: 2500px;
20+
transform: translateY(-2500px);
821
pointer-events: none;
9-
position: absolute;
1022
inset: 0;
1123
background: #ffe7d6;
1224
mask-image: radial-gradient(circle var(--circle-size) at var(--mouse-x) var(--mouse-y), transparent 100%, black);

‎src/Reveal.jsx‎

Lines changed: 230 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,51 @@
11
import { useState, useEffect, useRef } from 'react';
22
import './Reveal.css';
3-
import { useNavigate } from 'react-router-dom';
3+
import SocialMedia from './SocialMedia';
4+
import './Game.css';
5+
// import { useNavigate } from 'react-router-dom';
46

57
const easeInOutQuad = (t) => {
68
return t * t * (3. - 2. * t);
79
};
810

911
export default function Reveal() {
12+
const scrollRef = useRef(null); // Create a ref for the element
13+
const [scrollPosition, setScrollPosition] = useState(0);
14+
15+
useEffect(() => {
16+
const handleScroll = () => {
17+
if (scrollRef.current) {
18+
setScrollPosition(scrollRef.current.scrollTop); // Update scroll position
19+
}
20+
};
21+
22+
const element = scrollRef.current;
23+
if (element) {
24+
element.addEventListener('scroll', handleScroll); // Listen for scroll events
25+
}
26+
27+
return () => {
28+
if (element) {
29+
element.removeEventListener('scroll', handleScroll); // Cleanup the event listener
30+
}
31+
};
32+
}, []);
33+
1034
const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
1135
const [circleSize, setCircleSize] = useState(200.0); // Starting circle size
1236
// eslint-disable-next-line no-unused-vars
1337
const [circleT, setCircleT] = useState(0.0); // Starting circle size
1438
const animationRef = useRef(null);
1539

16-
const navigate = useNavigate();
40+
// const navigate = useNavigate();
41+
const [playing, setPlaying] = useState(false);
1742
const handlePlay = () => {
18-
navigate('/bleached/play/');
43+
setPlaying(true)
1944
};
2045

2146
useEffect(() => {
2247
const handleMouseMove = (e) => {
23-
setMousePos({ x: e.clientX, y: e.clientY });
48+
setMousePos({ x: e.clientX, y: scrollRef.current.scrollTop + e.clientY });
2449
};
2550

2651
// Add event listener for mouse move globally (on the document)
@@ -52,25 +77,218 @@ export default function Reveal() {
5277
}, []);
5378

5479
return (
55-
<div
80+
<div className='layers' ref={scrollRef}
5681
style={{
5782
'--mouse-x': `${mousePos.x}px`,
5883
'--mouse-y': `${mousePos.y}px`,
5984
'--circle-size': `${circleSize}px`, // Use animated circle size here
6085
}}
6186
>
62-
{/* Hidden Layer (Red) */}
87+
88+
<div className='layers2'>
89+
6390
<div className="hidden-layer">
64-
<h1>Hidden</h1>
65-
<div>Hidden</div>
91+
<>
92+
<div className="game-container">
93+
<div className="game-container2">
94+
<h1 className="game-title">
95+
Bleached
96+
</h1>
97+
<h3>A point-and-click story about life and color.</h3>
98+
99+
<div style={{ height: '15px' }}></div>
100+
101+
{!playing && (
102+
<>
66103
<button onClick={handlePlay}>Play the demo</button>
104+
<div style={{ height: '15px' }}></div></>
105+
)
106+
}
107+
{playing && (
108+
<div style={{ height: '740px' }}>
109+
</div>
110+
)}
111+
{/* {playing && (
112+
<div>
113+
<div style={{ width: '1280px', height: '740px', border: 'none' }}>
114+
<iframe
115+
frameBorder="0"
116+
src="https://itch.io/embed-upload/12820034?color=ffe7d6"
117+
allowFullScreen
118+
width="1280"
119+
height="740"
120+
>
121+
<a href="https://thomas-bringer.itch.io/bleached">Play Bleached on itch.io</a>
122+
</iframe>
123+
</div>
124+
</div>
125+
)} */}
126+
127+
<SocialMedia></SocialMedia>
128+
129+
{/* <h3>Bleached is a point-and-click interactive story about life and color.</h3>
130+
<h3>When every day looks the same, tints slowly fade.</h3>
131+
<h3>One day, your canvas is empty. Can you paint something new?</h3> */}
132+
133+
{/* <div style={{ height: '25px'}}></div> */}
134+
135+
<div className='gif-container'>
136+
<div className='gif-text-container' style = {{textAlign: 'right'}}>
137+
<h3 className='gif-title'>Recolor the world around you.</h3>
138+
<div className='gif-text'>Your environment is turning white... and painting new shades isn't so simple. With time, perhaps new strokes can bring new perspectives.</div>
139+
</div>
140+
<div style={{ width: '50px'}}></div>
141+
<img className='gif' src='https://thomasbringer.github.io/bleached/gifs/home.gif' />
142+
</div>
143+
144+
<div style={{ height: '35px'}}></div>
145+
146+
<div className='gif-container'>
147+
<img className='gif' src='https://thomasbringer.github.io/bleached/gifs/subway.gif' />
148+
<div style={{ width: '50px'}}></div>
149+
<div className='gif-text-container' style = {{textAlign: 'left'}}>
150+
<h3 className='gif-title'>Point and click on anything.</h3>
151+
<div className='gif-text'>Walk around, talk to friends and colleagues, take care of pets, play minigames. Everything in the scenery is interactive.</div>
152+
</div>
153+
</div>
154+
155+
<div className='gif-container'>
156+
<div className='gif-text-container' style = {{textAlign: 'right'}}>
157+
<h3 className='gif-title'>Wake up. Work. Sleep. Repeat.</h3>
158+
<div className='gif-text'>Each day is the exact same picture, except that your relationships—with yourself and others—evolve.</div>
159+
</div>
160+
<div style={{ width: '50px'}}></div>
161+
<img className='gif' src='https://thomasbringer.github.io/bleached/gifs/work.gif' />
162+
</div>
163+
164+
<div style={{ height: '25px'}}></div>
165+
<h2>Watch the Teaser Trailer for Bleached</h2>
166+
<div style={{ height: '10px'}}></div>
167+
168+
<iframe
169+
width="960"
170+
height="540"
171+
src={`https://www.youtube.com/embed/nqyUEa46Dhs`}
172+
title="Bleached Teaser Trailer"
173+
frameBorder="0"
174+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
175+
allowFullScreen
176+
></iframe>
177+
178+
<div style={{ height: '25px'}}></div>
179+
<h2>Play Bleached on itch.io</h2>
180+
<iframe
181+
frameBorder="0"
182+
src="https://itch.io/embed/3328660?border_width=0&amp;bg_color=ffe7d6&amp;fg_color=73464c&amp;link_color=ab5675&amp;border_color=ffe7d6"
183+
width="550"
184+
height="165"
185+
>
186+
<a href="https://thomas-bringer.itch.io/bleached">Bleached by Thomas Bringer</a>
187+
</iframe>
188+
189+
</div></div>
190+
</>
67191
</div>
68192

69-
{/* Visible Layer (Blue with Mask) */}
70193
<div className="visible-layer">
71-
<h1>Visible</h1>
72-
<div>Visible</div>
73-
<button>Play the demo</button>
194+
<>
195+
<div className="game-container">
196+
<div className="game-container2">
197+
<h1 className="game-title">
198+
Bleached
199+
</h1>
200+
<h3>A point-and-click story about life and color.</h3>
201+
202+
<div style={{ height: '15px' }}></div>
203+
204+
{!playing && (
205+
<>
206+
<button onClick={handlePlay}>Play the demo</button>
207+
<div style={{ height: '15px' }}></div></>
208+
)
209+
}
210+
{playing && (
211+
<div>
212+
<div style={{ width: '1280px', height: '740px', border: 'none' }}>
213+
<iframe
214+
frameBorder="0"
215+
src="https://itch.io/embed-upload/12820034?color=ffe7d6"
216+
allowFullScreen
217+
width="1280"
218+
height="740"
219+
>
220+
<a href="https://thomas-bringer.itch.io/bleached">Play Bleached on itch.io</a>
221+
</iframe>
222+
</div>
223+
</div>
224+
)}
225+
226+
<SocialMedia></SocialMedia>
227+
228+
{/* <h3>Bleached is a point-and-click interactive story about life and color.</h3>
229+
<h3>When every day looks the same, tints slowly fade.</h3>
230+
<h3>One day, your canvas is empty. Can you paint something new?</h3> */}
231+
232+
{/* <div style={{ height: '25px'}}></div> */}
233+
234+
<div className='gif-container'>
235+
<div className='gif-text-container' style = {{textAlign: 'right'}}>
236+
<h3 className='gif-title'>Recolor the world around you.</h3>
237+
<div className='gif-text'>Your environment is turning white... and painting new shades isn't so simple. With time, perhaps new strokes can bring new perspectives.</div>
238+
</div>
239+
<div style={{ width: '50px'}}></div>
240+
<img className='gif' src='https://thomasbringer.github.io/bleached/gifs/home.gif' />
241+
</div>
242+
243+
<div style={{ height: '35px'}}></div>
244+
245+
<div className='gif-container'>
246+
<img className='gif' src='https://thomasbringer.github.io/bleached/gifs/subway.gif' />
247+
<div style={{ width: '50px'}}></div>
248+
<div className='gif-text-container' style = {{textAlign: 'left'}}>
249+
<h3 className='gif-title'>Point and click on anything.</h3>
250+
<div className='gif-text'>Walk around, talk to friends and colleagues, take care of pets, play minigames. Everything in the scenery is interactive.</div>
251+
</div>
252+
</div>
253+
254+
<div className='gif-container'>
255+
<div className='gif-text-container' style = {{textAlign: 'right'}}>
256+
<h3 className='gif-title'>Wake up. Work. Sleep. Repeat.</h3>
257+
<div className='gif-text'>Each day is the exact same picture, except that your relationships—with yourself and others—evolve.</div>
258+
</div>
259+
<div style={{ width: '50px'}}></div>
260+
<img className='gif' src='https://thomasbringer.github.io/bleached/gifs/work.gif' />
261+
</div>
262+
263+
<div style={{ height: '25px'}}></div>
264+
<h2>Watch the Teaser Trailer for Bleached</h2>
265+
<div style={{ height: '10px'}}></div>
266+
267+
<iframe
268+
width="960"
269+
height="540"
270+
src={`https://www.youtube.com/embed/nqyUEa46Dhs`}
271+
title="Bleached Teaser Trailer"
272+
frameBorder="0"
273+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
274+
allowFullScreen
275+
></iframe>
276+
277+
<div style={{ height: '25px'}}></div>
278+
<h2>Play Bleached on itch.io</h2>
279+
<iframe
280+
frameBorder="0"
281+
src="https://itch.io/embed/3328660?border_width=0&amp;bg_color=ffe7d6&amp;fg_color=73464c&amp;link_color=ab5675&amp;border_color=ffe7d6"
282+
width="550"
283+
height="165"
284+
>
285+
<a href="https://thomas-bringer.itch.io/bleached">Bleached by Thomas Bringer</a>
286+
</iframe>
287+
288+
</div></div>
289+
</>
290+
</div>
291+
74292
</div>
75293
</div>
76294
);

0 commit comments

Comments
 (0)