mirror of
https://github.com/He4eT/elseifplayer.git
synced 2026-05-04 17:07:22 +00:00
index.js: extract App.jsx
This commit is contained in:
parent
0d0e42a26a
commit
ceafed4a5c
2 changed files with 76 additions and 73 deletions
73
src/App.jsx
Normal file
73
src/App.jsx
Normal file
|
|
@ -0,0 +1,73 @@
|
||||||
|
import { Route, Router, Switch } from 'wouter-preact'
|
||||||
|
|
||||||
|
import {
|
||||||
|
useHashLocation,
|
||||||
|
extractView,
|
||||||
|
} from './routing'
|
||||||
|
import {
|
||||||
|
useThemeEngine,
|
||||||
|
} from '~/src/themes/themes'
|
||||||
|
|
||||||
|
import HomeView from '~/src/views/HomeView/HomeView'
|
||||||
|
import GamesView from '~/src/views/GamesView/GamesView'
|
||||||
|
import ThemesView from '~/src/views/ThemesView/ThemesView'
|
||||||
|
import PlayerView from '~/src/views/PlayerView/PlayerView'
|
||||||
|
import NotFoundView from '~/src/views/NotFoundView'
|
||||||
|
|
||||||
|
export default function App () {
|
||||||
|
const themeEngine = useThemeEngine()
|
||||||
|
const [currentLocation] = useHashLocation()
|
||||||
|
|
||||||
|
const playerView = (themeEngine, singleWindow) =>
|
||||||
|
function view (params) {
|
||||||
|
return (<PlayerView {...{
|
||||||
|
themeEngine,
|
||||||
|
singleWindow,
|
||||||
|
...params,
|
||||||
|
}} />)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Router hook={useHashLocation}>
|
||||||
|
<div className={[
|
||||||
|
'app',
|
||||||
|
extractView(currentLocation),
|
||||||
|
themeEngine.currentTheme].join(' ')}>
|
||||||
|
|
||||||
|
<Switch>
|
||||||
|
<Route path='/'>
|
||||||
|
<HomeView {...{
|
||||||
|
themeEngine,
|
||||||
|
}} />
|
||||||
|
</Route>
|
||||||
|
<Route path='/games/'>
|
||||||
|
<GamesView />
|
||||||
|
</Route>
|
||||||
|
<Route path='/themes/'>
|
||||||
|
<ThemesView {...{
|
||||||
|
themeEngine,
|
||||||
|
}} />
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route path='/play/:encodedUrl'>
|
||||||
|
{ playerView(themeEngine, false) }
|
||||||
|
</Route>
|
||||||
|
<Route path='/play/:encodedUrl/:theme'>
|
||||||
|
{ playerView(themeEngine, false) }
|
||||||
|
</Route>
|
||||||
|
<Route path='/focus/:encodedUrl'>
|
||||||
|
{ playerView(themeEngine, true) }
|
||||||
|
</Route>
|
||||||
|
<Route path='/focus/:encodedUrl/:theme'>
|
||||||
|
{ playerView(themeEngine, true) }
|
||||||
|
</Route>
|
||||||
|
|
||||||
|
<Route>
|
||||||
|
<NotFoundView />
|
||||||
|
</Route>
|
||||||
|
</Switch>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
}
|
||||||
76
src/index.js
76
src/index.js
|
|
@ -1,79 +1,9 @@
|
||||||
import { h, render } from 'preact'
|
import { render } from 'preact'
|
||||||
import { Route, Router, Switch } from 'wouter-preact'
|
|
||||||
|
|
||||||
import {
|
|
||||||
useHashLocation,
|
|
||||||
extractView,
|
|
||||||
} from './routing'
|
|
||||||
import {
|
|
||||||
useThemeEngine,
|
|
||||||
} from '~/src/themes/themes'
|
|
||||||
|
|
||||||
import HomeView from '~/src/views/HomeView/HomeView'
|
|
||||||
import GamesView from '~/src/views/GamesView/GamesView'
|
|
||||||
import ThemesView from '~/src/views/ThemesView/ThemesView'
|
|
||||||
import PlayerView from '~/src/views/PlayerView/PlayerView'
|
|
||||||
import NotFoundView from '~/src/views/NotFoundView'
|
|
||||||
|
|
||||||
import '@fontsource/open-sans'
|
import '@fontsource/open-sans'
|
||||||
|
|
||||||
import '~/src/style/base.css'
|
import '~/src/style/base.css'
|
||||||
|
|
||||||
function App () {
|
import App from './App'
|
||||||
const themeEngine = useThemeEngine()
|
|
||||||
const [currentLocation] = useHashLocation()
|
|
||||||
|
|
||||||
const playerView = (themeEngine, singleWindow) =>
|
|
||||||
function view (params) {
|
|
||||||
return (<PlayerView {...{
|
|
||||||
themeEngine,
|
|
||||||
singleWindow,
|
|
||||||
...params,
|
|
||||||
}} />)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Router hook={useHashLocation}>
|
|
||||||
<div className={[
|
|
||||||
'app',
|
|
||||||
extractView(currentLocation),
|
|
||||||
themeEngine.currentTheme].join(' ')}>
|
|
||||||
|
|
||||||
<Switch>
|
|
||||||
<Route path='/'>
|
|
||||||
<HomeView {...{
|
|
||||||
themeEngine,
|
|
||||||
}} />
|
|
||||||
</Route>
|
|
||||||
<Route path='/games/'>
|
|
||||||
<GamesView />
|
|
||||||
</Route>
|
|
||||||
<Route path='/themes/'>
|
|
||||||
<ThemesView {...{
|
|
||||||
themeEngine,
|
|
||||||
}} />
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route path='/play/:encodedUrl'>
|
|
||||||
{ playerView(themeEngine, false) }
|
|
||||||
</Route>
|
|
||||||
<Route path='/play/:encodedUrl/:theme'>
|
|
||||||
{ playerView(themeEngine, false) }
|
|
||||||
</Route>
|
|
||||||
<Route path='/focus/:encodedUrl'>
|
|
||||||
{ playerView(themeEngine, true) }
|
|
||||||
</Route>
|
|
||||||
<Route path='/focus/:encodedUrl/:theme'>
|
|
||||||
{ playerView(themeEngine, true) }
|
|
||||||
</Route>
|
|
||||||
|
|
||||||
<Route>
|
|
||||||
<NotFoundView />
|
|
||||||
</Route>
|
|
||||||
</Switch>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</Router>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
render(<App />, document.getElementById('root'))
|
render(<App />, document.getElementById('root'))
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue