ashe
/
drowning-among-stars
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CRT effects

Browse Source
main
Ashelyn Dawn 4 years ago
parent 8353e3aff7
commit ffb28e60a8
5 changed files with 266 additions and 6 deletions
Show Stats Download Patch File Download Diff File

14
src/components/App/App.js
Unescape Escape View File

@ -14,6 +14,11 @@ function App({promptVisible, onCommand, game}) {
const scaleY = height / 400
const scale = 0 || Math.min(scaleX, scaleY)
const fuzzing = true
const flickering = true
const scanLines = true
const imageBackground = true
useEffect(() => {
game.onChange(setState)
game.getState()
@ -22,11 +27,12 @@ function App({promptVisible, onCommand, game}) {
return (
<Provider value={state}>
<div style={{transform: `scale(${scale})`, overflow: 'hidden'}} className={styles.screen}>
<Screen promptVisible={promptVisible} handleCommand={onCommand}/>
<div className={styles.overlay}>
<div style={{transform: `scale(${scale})`, overflow: 'hidden'}} className={styles.screen + `${flickering && ' flickering' || ''}${fuzzing && ' fuzzing' || ''}`}>
<Screen promptVisible={promptVisible} handleCommand={onCommand} showReflection={imageBackground}/>
{imageBackground && <div className={styles.overlay}>
<img alt="" src={backgroundURL}/>
</div>
</div>}
{scanLines && <div className="scan"></div>}
</div>
</Provider>
);

4
src/components/Menu/Menu.js
Unescape Escape View File

@ -27,6 +27,10 @@ export default function ({containerRef}) {
<button className={styles.modalClose} onClick={() => setCurrentMenu(null)}>x</button>
</div>
<div className={styles.modalContent}>
<h3>You have:</h3>
<ul>
<li>Nothing</li>
</ul>
</div>
</div>
</>

4
src/components/Screen/Screen.js
Unescape Escape View File

@ -6,7 +6,7 @@ import Menu from '../Menu/Menu'
import useGameState from '../../hooks/useGameState'
import useSharedState from '../../hooks/useSharedState'
export default function Text({promptVisible, handleCommand}) {
export default function Text({promptVisible, handleCommand, showReflection}) {
const inputRef = useRef()
const outputRef = useRef()
const textRef = useRef()
@ -81,7 +81,7 @@ export default function Text({promptVisible, handleCommand}) {
<input autoFocus ref={inputRef} onChange={ev => setCurrentInput(ev.target.value)} id="gameInput"/>
</form>
</div>
<Reflection promptVisible={promptVisible} messages={messages} currentInput={currentInput} currentScroll={currentScroll}/>
{showReflection && <Reflection promptVisible={promptVisible} messages={messages} currentInput={currentInput} currentScroll={currentScroll}/>}
</>
)
}

223
src/index.css
Unescape Escape View File

@ -14,3 +14,226 @@ html, body {
font-family: 'Share Tech Mono', monospace;
overflow: hidden;
}
/**
* CRT Effects
*/
html {
--scan-width: 2px;
--scan-color: rgba(114, 24, 136, 0.068);
--big-scan-width: 150px;
--big-scan-color: rgba(108, 63, 117, 0.185);
--color-flicker: rgba(42, 102, 48, 0.08);
--crt-shadow-1: rgba(0,30,255,0.5);
--crt-shadow-2: rgba(255,0,80,0.3);
}
html.noeffects {
--scan-color: transparent;
--big-scan-color: transparent;
--color-flicker: transparent;
--crt-shadow-1: transparent;
--crt-shadow-2: transparent;
}
@keyframes flicker {
0% {
opacity: 0.27861;
}
5% {
opacity: 0.34769;
}
10% {
opacity: 0.23604;
}
15% {
opacity: 0.90626;
}
20% {
opacity: 0.18128;
}
25% {
opacity: 0.83891;
}
30% {
opacity: 0.65583;
}
35% {
opacity: 0.67807;
}
40% {
opacity: 0.26559;
}
45% {
opacity: 0.84693;
}
50% {
opacity: 0.96019;
}
55% {
opacity: 0.08594;
}
60% {
opacity: 0.20313;
}
65% {
opacity: 0.71988;
}
70% {
opacity: 0.53455;
}
75% {
opacity: 0.37288;
}
80% {
opacity: 0.71428;
}
85% {
opacity: 0.70419;
}
90% {
opacity: 0.7003;
}
95% {
opacity: 0.36108;
}
100% {
opacity: 0.24387;
}
}
@keyframes textShadow {
0% {
text-shadow: 0.4389924193300864px 0 1px var(--crt-shadow-1), -0.4389924193300864px 0 1px var(--crt-shadow-2), 0 0 3px;
}
5% {
text-shadow: 2.7928974010788217px 0 1px var(--crt-shadow-1), -2.7928974010788217px 0 1px var(--crt-shadow-2), 0 0 3px;
}
10% {
text-shadow: 0.02956275843481219px 0 1px var(--crt-shadow-1), -0.02956275843481219px 0 1px var(--crt-shadow-2), 0 0 3px;
}
15% {
text-shadow: 0.40218538552878136px 0 1px var(--crt-shadow-1), -0.40218538552878136px 0 1px var(--crt-shadow-2), 0 0 3px;
}
20% {
text-shadow: 3.4794037899852017px 0 1px var(--crt-shadow-1), -3.4794037899852017px 0 1px var(--crt-shadow-2), 0 0 3px;
}
25% {
text-shadow: 1.6125630401149584px 0 1px var(--crt-shadow-1), -1.6125630401149584px 0 1px var(--crt-shadow-2), 0 0 3px;
}
30% {
text-shadow: 0.7015590085143956px 0 1px var(--crt-shadow-1), -0.7015590085143956px 0 1px var(--crt-shadow-2), 0 0 3px;
}
35% {
text-shadow: 3.896914047650351px 0 1px var(--crt-shadow-1), -3.896914047650351px 0 1px var(--crt-shadow-2), 0 0 3px;
}
40% {
text-shadow: 3.870905614848819px 0 1px var(--crt-shadow-1), -3.870905614848819px 0 1px var(--crt-shadow-2), 0 0 3px;
}
45% {
text-shadow: 2.231056963361899px 0 1px var(--crt-shadow-1), -2.231056963361899px 0 1px var(--crt-shadow-2), 0 0 3px;
}
50% {
text-shadow: 0.08084290417898504px 0 1px var(--crt-shadow-1), -0.08084290417898504px 0 1px var(--crt-shadow-2), 0 0 3px;
}
55% {
text-shadow: 2.3758461067427543px 0 1px var(--crt-shadow-1), -2.3758461067427543px 0 1px var(--crt-shadow-2), 0 0 3px;
}
60% {
text-shadow: 2.202193051050636px 0 1px var(--crt-shadow-1), -2.202193051050636px 0 1px var(--crt-shadow-2), 0 0 3px;
}
65% {
text-shadow: 2.8638780614874975px 0 1px var(--crt-shadow-1), -2.8638780614874975px 0 1px var(--crt-shadow-2), 0 0 3px;
}
70% {
text-shadow: 0.48874025155497314px 0 1px var(--crt-shadow-1), -0.48874025155497314px 0 1px var(--crt-shadow-2), 0 0 3px;
}
75% {
text-shadow: 1.8948491305757957px 0 1px var(--crt-shadow-1), -1.8948491305757957px 0 1px var(--crt-shadow-2), 0 0 3px;
}
80% {
text-shadow: 0.0833037308038857px 0 1px var(--crt-shadow-1), -0.0833037308038857px 0 1px var(--crt-shadow-2), 0 0 3px;
}
85% {
text-shadow: 0.09769827255241735px 0 1px var(--crt-shadow-1), -0.09769827255241735px 0 1px var(--crt-shadow-2), 0 0 3px;
}
90% {
text-shadow: 3.443339761481782px 0 1px var(--crt-shadow-1), -3.443339761481782px 0 1px var(--crt-shadow-2), 0 0 3px;
}
95% {
text-shadow: 2.1841838852799786px 0 1px var(--crt-shadow-1), -2.1841838852799786px 0 1px var(--crt-shadow-2), 0 0 3px;
}
100% {
text-shadow: 2.6208764473832513px 0 1px var(--crt-shadow-1), -2.6208764473832513px 0 1px var(--crt-shadow-2), 0 0 3px;
}
}
/* Flickering overlay */
.flickering::after {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: var(--color-flicker);
opacity: 0;
z-index: 2;
pointer-events: none;
animation: flicker 0.15s infinite;
}
/* Text fuzzing */
.fuzzing, .fuzzing button {
animation: textShadow 1.6s infinite;
}
/* Scan lines */
.scan {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
overflow: hidden;
pointer-events: none;
}
.scan:before{
z-index:1;
position:absolute;
content:' ';
width:100%;
height:100%;
display:block;
background: linear-gradient(var(--scan-color) 50%, rgba(0,0,0,0) 50%);
background-size: 100% calc(var(--scan-width)*2);
background-repeat:repeat;
animation: allscan .1s linear infinite;
}
@keyframes allscan {
0% { background-position: center 0px }
100% { background-position: center calc(var(--scan-width)*2) }
}
.scan:after{
z-index:1;
content:' ';
width:100%;
height: var(--big-scan-width);
display:block;
position:absolute;
top: calc(-1 * var(--big-scan-width));
background: linear-gradient(rgba(0,0,0,0) 0, var(--big-scan-color) 50%,rgba(0,0,0,0) 100%);
background-position: center 0px;
background-size: 100%;
background-repeat:no-repeat;
animation: singlescan 10s linear infinite;
}
@keyframes singlescan{
0% { top: calc(-1 * var(--big-scan-width)) }
100% { top: 100% }
}

27
todo.md
Unescape Escape View File

@ -0,0 +1,27 @@
# Commands:
look around
check pockets
sleep?
go through [door]
# Bugs
Command input overflows on Chrome/Edge? (saw when Almyki tried)
Look should print what directions doors are in.
Looking a direction through an open door should print what room is past it
Unlocking an already unlocked door
Prints "you cannot go to the [direction]" twice
`go up`: "you cannot go to the up"
# Note
Almyki wants me to hide a teddy bear in the game for her.
Write Preview
Loading…
Cancel
Save