Skip to content

Commit a865d1a

Browse files
skyrimskyrim
committed
switch from typestyle to plain css
1 parent 7dac3ad commit a865d1a

File tree

36 files changed

+529
-575
lines changed

36 files changed

+529
-575
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@
3131
"dependencies": {
3232
"gl-matrix": "^3.4.3",
3333
"nanoevents": "^9.0.0",
34-
"solid-js": "^1.8.22",
35-
"typestyle": "^2.0.4"
34+
"solid-js": "^1.8.22"
3635
},
3736
"devDependencies": {
3837
"@types/gl-matrix": "^3.2.0",

‎src/PlayerInterface/Root.tsx‎ renamed to ‎src/PlayerInterface/App/index.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import { createSignal, onCleanup, onMount, Show } from 'solid-js'
22
import { createStore } from 'solid-js/store'
3-
import { Loading } from './Loading'
4-
import { FreeMode } from './FreeMode'
5-
import { ReplayMode } from './ReplayMode'
6-
import { Fullscreen } from '../Fullscreen'
7-
import { GameStateContext } from './GameState'
8-
import { type Game, PlayerMode } from '../Game'
9-
import { RootStyle as s } from './Root.style'
10-
11-
export function Root(props: { game: Game; root: Element }) {
3+
import { Loading } from '../Loading'
4+
import { FreeMode } from '../FreeMode'
5+
import { ReplayMode } from '../ReplayMode'
6+
import { Fullscreen } from '../../Fullscreen'
7+
import { GameStateContext } from '../GameState'
8+
import { type Game, PlayerMode } from '../../Game'
9+
import './style.css'
10+
11+
export function App(props: { game: Game; root: Element }) {
1212
let screen: HTMLButtonElement | null = null
1313
let fadeOut: ReturnType<typeof setTimeout> | undefined = undefined
1414

@@ -45,11 +45,11 @@ export function Root(props: { game: Game; root: Element }) {
4545
window.addEventListener('click', onWindowClick)
4646
window.addEventListener('keydown', onKeyDown)
4747
document.addEventListener('pointerlockchange', onPointerLockChange, false)
48-
48+
4949
root.addEventListener('click', onRootClick)
5050
root.addEventListener('mouseover', onMouseEnter)
5151
root.addEventListener('mousemove', onMouseMove)
52-
root.addEventListener('mouseout', onMouseLeave)
52+
// root.addEventListener('mouseout', onMouseLeave)
5353
root.addEventListener('contextmenu', onContextMenu)
5454

5555
onCleanup(() => {
@@ -187,11 +187,11 @@ export function Root(props: { game: Game; root: Element }) {
187187
setIsVisible(true)
188188
}
189189

190-
clearTimeout(fadeOut)
191-
fadeOut = setTimeout(() => {
192-
setIsVisible(false)
193-
fadeOut = undefined
194-
}, 5000)
190+
// clearTimeout(fadeOut)
191+
// fadeOut = setTimeout(() => {
192+
// setIsVisible(false)
193+
// fadeOut = undefined
194+
// }, 5000)
195195
}
196196

197197
const onScreenClick = () => {
@@ -223,14 +223,21 @@ export function Root(props: { game: Game; root: Element }) {
223223

224224
return (
225225
<GameStateContext.Provider value={gameState}>
226-
<div class={isVisible() ? s.rootVisible : s.root}>
227-
<div class={isVisible() ? s.titleVisible : s.title}>{title()}</div>
226+
<div
227+
classList={{
228+
'hlv-app': true,
229+
visible: isVisible(),
230+
'mode-free': gameState.mode === PlayerMode.FREE,
231+
'mode-replay': gameState.mode === PlayerMode.REPLAY
232+
}}
233+
>
234+
<div class="hlv-title">{title()}</div>
228235

229236
<Loading game={props.game} visible={isLoading()} />
230237

231238
<button
232239
type="button"
233-
class={s.screen}
240+
class="hlv-screen"
234241
ref={(node) => {
235242
screen = node
236243
}}
@@ -239,16 +246,11 @@ export function Root(props: { game: Game; root: Element }) {
239246
/>
240247

241248
<Show when={gameState.mode === PlayerMode.FREE}>
242-
<FreeMode class={isVisible() ? s.controlsVisible : s.controls} game={props.game} root={props.root} />
249+
<FreeMode class="hlv-controls" game={props.game} root={props.root} />
243250
</Show>
244251

245252
<Show when={gameState.mode === PlayerMode.REPLAY}>
246-
<ReplayMode
247-
class={isVisible() ? s.controlsVisible : s.controls}
248-
game={props.game}
249-
root={props.root}
250-
visible={isMouseOver()}
251-
/>
253+
<ReplayMode class="hlv-controls" game={props.game} root={props.root} visible={isMouseOver()} />
252254
</Show>
253255
</div>
254256
</GameStateContext.Provider>

‎src/PlayerInterface/App/style.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
.hlv-app {
2+
position: relative;
3+
color: white;
4+
width: 100%;
5+
height: 100%;
6+
cursor: none;
7+
user-select: none;
8+
}
9+
10+
.hlv-app, .hlv-app * {
11+
box-sizing: border-box;
12+
}
13+
14+
.hlv-app.visible {
15+
cursor: default;
16+
}
17+
18+
.hlv-title {
19+
position: absolute;
20+
top: 20px;
21+
left: 0;
22+
z-index: 20;
23+
padding: 10px;
24+
padding-left: 20px;
25+
padding-right: 16px;
26+
background-color: rgba(0, 0, 0, 0.4);
27+
font-size: 13pt;
28+
font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
29+
opacity: 0;
30+
transition: opacity 0.2s;
31+
}
32+
33+
.visible .hlv-title {
34+
opacity: 1;
35+
}
36+
37+
.hlv-controls {
38+
z-index: 30;
39+
position: absolute;
40+
width: 100%;
41+
bottom: 0;
42+
padding: 8px 16px;
43+
background-color: rgba(0, 0, 0, 0.4);
44+
user-select: none;
45+
opacity: 0;
46+
transition: opacity 0.2s;
47+
}
48+
49+
.visible .hlv-controls {
50+
opacity: 1;
51+
}
52+
53+
.hlv-screen {
54+
position: absolute;
55+
top: 0;
56+
left: 0;
57+
width: 100%;
58+
height: 100%;
59+
padding: 0;
60+
z-index: 10;
61+
border: none;
62+
background: none;
63+
}
64+
65+
.hlv-controlsx {
66+
z-index: 30;
67+
position: absolute;
68+
width: 100%;
69+
bottom: 0;
70+
padding: 0 16px;
71+
background-color: rgba(0, 0, 0, 0.4);
72+
user-select: none;
73+
opacity: 0;
74+
transition: opacity 0.2s;
75+
}
76+
77+
.visible .hlv-controlsx {
78+
opacity: 1;
79+
}
80+
81+
.hlv-buttons {
82+
height: 100%;
83+
display: flex;
84+
justify-content: space-between;
85+
align-items: center;
86+
}
87+
88+
.hlv-button {
89+
width: 32px;
90+
height: 32px;
91+
padding: 7px;
92+
cursor: pointer;
93+
border: none;
94+
color: #fff;
95+
background: none;
96+
}
97+
98+
.hlv-buttons-left {
99+
display: flex;
100+
align-items: center;
101+
}
102+
103+
.hlv-buttons-left .hlv-button {
104+
margin-right: 8px;
105+
}
106+
107+
.hlv-buttons-right {
108+
display: flex;
109+
align-items: center;
110+
width: 70px;
111+
height: 100%;
112+
justify-content: space-between;
113+
}

‎src/PlayerInterface/Buttons/FullscreenButton/index.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { createSignal, onCleanup, onMount } from 'solid-js'
2-
import { classes } from 'typestyle'
32
import { Fullscreen } from '../../../Fullscreen'
4-
import { FullscreenButtonStyle as s } from './style'
5-
import { ControlsStyle as cs } from '../../Controls.style'
3+
import './style.css'
64

75
export function FullscreenButton(props: { active: boolean; root: Element }) {
86
const [isInFullscreen, setIsInFullscreen] = createSignal(Fullscreen.isInFullscreen())
@@ -28,7 +26,7 @@ export function FullscreenButton(props: { active: boolean; root: Element }) {
2826
}
2927

3028
return (
31-
<button type="button" class={classes(cs.button, s.button)} onClick={onClick}>
29+
<button type="button" class="hlv-button hlv-fullscreen-button" onClick={() => onClick()}>
3230
{isInFullscreen() ? (
3331
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
3432
<title>Exit fullscreen</title>

‎src/PlayerInterface/Buttons/FullscreenButton/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.hlv-fullscreen-button {
2+
width: 30px;
3+
min-width: 30px;
4+
height: 30px;
5+
padding: 5px;
6+
}

‎src/PlayerInterface/Buttons/FullscreenButton/style.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/PlayerInterface/Buttons/PauseButton/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { ControlsStyle as cs } from '../../Controls.style'
2-
31
export function PauseButton(props: { onClick(): void }) {
42
return (
5-
<button type="button" class={cs.button} onClick={props.onClick}>
3+
<button type="button" class="hlv-button" onClick={() => props.onClick()}>
64
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
75
<title>Pause</title>
86
<path d="M0 0 L0 64 L20 64 L20 0 M44 0 L64 0 L64 64 L44 64 Z" />

‎src/PlayerInterface/Buttons/PlayButton/index.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import { ControlsStyle as cs } from '../../Controls.style'
2-
31
export function PlayButton(props: { onClick(): void }) {
42
return (
5-
<button type="button" class={cs.button} onClick={() => props.onClick()}>
3+
<button type="button" class="hlv-button" onClick={() => props.onClick()}>
64
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="currentcolor">
75
<title>Play</title>
86
<path d="M0 0 L0 64 L64 32 Z" />

‎src/PlayerInterface/Buttons/SettingsButton/index.tsx‎

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { createSignal } from 'solid-js'
2-
import { classes } from 'typestyle'
32
import { type Game, PlayerMode } from '../../../Game'
4-
import { ControlsStyle as cs } from '../../Controls.style'
5-
import { SettingsButtonStyle as s } from './style'
3+
import './style.css'
64

75
export function SettingsButton(props: { game: Game }) {
86
const [isOpen, setIsOpen] = createSignal(false)
@@ -26,8 +24,8 @@ export function SettingsButton(props: { game: Game }) {
2624
}
2725

2826
return (
29-
<div class={s.settings}>
30-
<button type="button" class={classes(cs.button, s.button)} onClick={() => setIsOpen(!isOpen())}>
27+
<div class="hlv-settings">
28+
<button type="button" class="hlv-button" onClick={() => setIsOpen(!isOpen())}>
3129
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
3230
<title>Toggle</title>
3331
<path
@@ -39,12 +37,20 @@ export function SettingsButton(props: { game: Game }) {
3937
</svg>
4038
</button>
4139

42-
<div class={isOpen() ? s.menuOpen : s.menu}>
43-
<span class={s.menuItemTitle}>Mode</span>
40+
<div
41+
classList={{
42+
'hlv-settings-menu': true,
43+
open: isOpen()
44+
}}
45+
>
46+
<span class="hlv-settings-menu-title">Mode</span>
4447
{hasReplay ? (
4548
<button
4649
type="button"
47-
class={props.game.mode === PlayerMode.REPLAY ? s.menuItemSelected : s.menuItem}
50+
classList={{
51+
'hlv-settings-menu-item': true,
52+
selected: props.game.mode === PlayerMode.REPLAY
53+
}}
4854
onClick={() => onReplayModeClick()}
4955
>
5056
Replay
@@ -54,7 +60,10 @@ export function SettingsButton(props: { game: Game }) {
5460
)}
5561
<button
5662
type="button"
57-
class={props.game.mode === PlayerMode.FREE ? s.menuItemSelected : s.menuItem}
63+
classList={{
64+
'hlv-settings-menu-item': true,
65+
selected: props.game.mode === PlayerMode.FREE
66+
}}
5867
onClick={() => onFreeModeClick()}
5968
>
6069
Free

0 commit comments

Comments
 (0)