refactor: YAGNI
This commit is contained in:
cha0s
parent
9a7870793a
commit
6bec013ddd
|
|
@ -54,7 +54,6 @@
|
|||
"@humus/core": "^2.0.0",
|
||||
"@humus/farm": "^2.0.0",
|
||||
"@humus/inventory": "^2.0.0",
|
||||
"@humus/scss": "^2.0.0",
|
||||
"@humus/universe": "^2.0.0",
|
||||
"@inlet/react-pixi": "^6.0.7",
|
||||
"pg": "^8.7.3",
|
||||
|
|
|
|||
|
|
@ -27,13 +27,18 @@
|
|||
"test.js.map"
|
||||
],
|
||||
"dependencies": {
|
||||
"@avocado/graphics": "^3.0.0",
|
||||
"@avocado/input": "^3.0.0",
|
||||
"@avocado/math": "^3.0.0",
|
||||
"@avocado/react": "^3.0.0",
|
||||
"@avocado/timing": "^3.0.0",
|
||||
"@avocado/topdown": "^3.0.0",
|
||||
"@flecks/core": "^1.4.1",
|
||||
"@flecks/react": "^1.4.1",
|
||||
"@flecks/redux": "^1.4.1",
|
||||
"@flecks/socket": "^1.4.1",
|
||||
"@flecks/user": "^1.4.1",
|
||||
"@humus/scss": "^2.0.0",
|
||||
"is-electron": "^2.2.0"
|
||||
"@humus/inventory": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@flecks/fleck": "^1.4.1"
|
||||
|
|
|
|||
|
|
@ -1,41 +1,86 @@
|
|||
import './index.scss';
|
||||
|
||||
import {
|
||||
classnames,
|
||||
hot,
|
||||
PropTypes,
|
||||
React,
|
||||
} from '@flecks/react';
|
||||
import {
|
||||
Navigate,
|
||||
Link,
|
||||
Outlet,
|
||||
Routes,
|
||||
Routes as ReactRouterRoutes,
|
||||
Route,
|
||||
} from '@flecks/react/router';
|
||||
import {useSelector} from '@flecks/redux';
|
||||
import {userIdSelector} from '@flecks/user';
|
||||
|
||||
import Ui from '../valent-ui';
|
||||
import Login from './login';
|
||||
import Overview from './overview';
|
||||
import Play from './play';
|
||||
|
||||
import Title from './title';
|
||||
import './scss/index.scss';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
const UiWrapped = () => (
|
||||
<Ui><Outlet /></Ui>
|
||||
);
|
||||
|
||||
const Humus = ({Components}) => (
|
||||
<div className="humus">
|
||||
<Routes>
|
||||
<Route path="/title" element={<UiWrapped />}>
|
||||
<Route index element={<Title />} />
|
||||
const Persea = () => {
|
||||
const userId = useSelector(userIdSelector);
|
||||
return (
|
||||
<ReactRouterRoutes>
|
||||
<Route
|
||||
element={(
|
||||
<Ui>
|
||||
<Outlet />
|
||||
</Ui>
|
||||
)}
|
||||
>
|
||||
<Route
|
||||
element={(
|
||||
<div className={styles.title}>
|
||||
<div className={styles.muted}>
|
||||
<Link to="/"><h1 className={styles.heading}>Humus</h1></Link>
|
||||
<ul className={styles.actions}><Outlet /></ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
>
|
||||
<Route
|
||||
path="/"
|
||||
element={(
|
||||
<>
|
||||
{
|
||||
userId === 0
|
||||
? (
|
||||
<li className={styles.action}>
|
||||
<Link to="/login" className={classnames('button', styles.button)}>
|
||||
Log in
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
: (
|
||||
<li className={styles.action}>
|
||||
<Link to="/overview" className={classnames('button', styles.button)}>
|
||||
Play
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path="/login"
|
||||
element={<li><Login /></li>}
|
||||
/>
|
||||
</Route>
|
||||
<Route
|
||||
path="/overview"
|
||||
element={<Overview />}
|
||||
/>
|
||||
<Route
|
||||
path="/play"
|
||||
element={<Play />}
|
||||
/>
|
||||
</Route>
|
||||
<Route path="/title/*" element={<></>} />
|
||||
<Route path="/universe/*" element={<></>} />
|
||||
<Route path="*" element={<Navigate to="/title" />} />
|
||||
</Routes>
|
||||
{Components}
|
||||
</div>
|
||||
);
|
||||
|
||||
Humus.propTypes = {
|
||||
Components: PropTypes.arrayOf(PropTypes.node).isRequired,
|
||||
</ReactRouterRoutes>
|
||||
);
|
||||
};
|
||||
|
||||
export default hot(module)(Humus);
|
||||
export default hot(module)(Persea);
|
||||
|
|
|
|||
|
|
@ -6,14 +6,15 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.title__muted {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
.muted {
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title__title {
|
||||
.heading {
|
||||
color: white;
|
||||
font-family: var(--rooted-font-family);
|
||||
font-size: 12em;
|
||||
left: 25%;
|
||||
|
|
@ -31,19 +32,20 @@
|
|||
width: 50%;
|
||||
}
|
||||
|
||||
.title__actions {
|
||||
.actions {
|
||||
font-family: var(--thick-title-font-family);
|
||||
position: absolute;
|
||||
top: 66%;
|
||||
top: 55%;
|
||||
transform: translate(-50%, -50%);
|
||||
left: 50%;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.title__action {
|
||||
.action {
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.title__button {
|
||||
.button[class] {
|
||||
display: block;
|
||||
font-size: 3em;
|
||||
padding: 0.5em 1.5em;
|
||||
|
|
@ -1,9 +1,20 @@
|
|||
import {React} from '@flecks/react';
|
||||
|
||||
import {UserLocalLogin} from '@flecks/user/local/client';
|
||||
|
||||
const Login = () => (
|
||||
<UserLocalLogin />
|
||||
);
|
||||
import styles from './index.module.scss';
|
||||
|
||||
function Login() {
|
||||
return (
|
||||
<div className={styles.login}>
|
||||
<UserLocalLogin />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Login.defaultProps = {};
|
||||
|
||||
Login.displayName = 'Login';
|
||||
|
||||
Login.propTypes = {};
|
||||
|
||||
export default Login;
|
||||
|
|
|
|||
67
packages/app/src/components/app/login/index.module.scss
Normal file
67
packages/app/src/components/app/login/index.module.scss
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
.login {
|
||||
font-size: 1.5em;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: 2em;
|
||||
|
||||
form {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid #555;
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 0.5rem;
|
||||
|
||||
input {
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
input[type="password"],
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
background-color: var(--color-active);
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
label > span {
|
||||
display: block;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
|
||||
[type="checkbox"] {
|
||||
margin-right: 0.5em;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
|
||||
input, span {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 1em;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Before Width: | Height: | Size: 594 KiB After Width: | Height: | Size: 594 KiB |
|
|
@ -1,49 +1,23 @@
|
|||
import './index.scss';
|
||||
import {classnames, React} from '@flecks/react';
|
||||
import {Link} from '@flecks/react/router';
|
||||
|
||||
import {useIsNative} from '@humus/app';
|
||||
import {React} from '@flecks/react';
|
||||
import {
|
||||
Link,
|
||||
Redirect,
|
||||
push,
|
||||
useLocation,
|
||||
useParams,
|
||||
} from '@flecks/react/router';
|
||||
import {useDispatch, useSelector} from '@flecks/redux';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
import {universesByLocalitySelector, universesSelector} from '../../state';
|
||||
|
||||
const Universe = () => {
|
||||
const {uuid} = useParams();
|
||||
const dispatch = useDispatch();
|
||||
const isNative = useIsNative();
|
||||
const {pathname} = useLocation();
|
||||
const universes = useSelector(universesSelector);
|
||||
const remoteUniverses = useSelector((state) => universesByLocalitySelector(state, false));
|
||||
const uuids = Object.keys(remoteUniverses);
|
||||
if (!uuid && uuids.length === 0) {
|
||||
return <Redirect to="/" />;
|
||||
}
|
||||
const universe = uuid ? universes[uuid] : universes[uuids.pop()];
|
||||
if (!universe) {
|
||||
return <Redirect to="/" />;
|
||||
}
|
||||
function Universe() {
|
||||
return (
|
||||
<div className="universe">
|
||||
<div className="universe__muted">
|
||||
{isNative && (
|
||||
<Link
|
||||
className="back"
|
||||
to={universe.address ? '/title/remote' : '/title/local'}
|
||||
>
|
||||
<span className="back__arrow"><-</span>
|
||||
{' '}
|
||||
Back
|
||||
</Link>
|
||||
)}
|
||||
<h2 className="universe__title">{universe.title}</h2>
|
||||
<span className="universe__online">5 / 10</span>
|
||||
<div className="universe__motd">
|
||||
<div className={styles.universe}>
|
||||
<div className={styles.muted}>
|
||||
<Link
|
||||
className={styles.back}
|
||||
to="/"
|
||||
>
|
||||
<span className={styles.arrow}><-</span>
|
||||
{' '}
|
||||
Back to title
|
||||
</Link>
|
||||
<h2 className={styles.title}>[UNIVERSE TITLE]</h2>
|
||||
<span className={styles.online}>5 / 10</span>
|
||||
<div className={styles.motd}>
|
||||
<p>
|
||||
This is placeholder text and will be replaced when the website goes live. This is
|
||||
placeholder text. This text is here to test that text can be displayed correctly on the
|
||||
|
|
@ -68,19 +42,16 @@ const Universe = () => {
|
|||
Have fun! <3
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="button universe__play"
|
||||
onClick={async () => {
|
||||
dispatch(push(`${pathname}/play`));
|
||||
}}
|
||||
type="button"
|
||||
<Link
|
||||
className={classnames('button', styles.play)}
|
||||
to="/play"
|
||||
>
|
||||
Play
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
Universe.propTypes = {};
|
||||
|
||||
|
|
@ -6,20 +6,36 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.universe__muted {
|
||||
.muted {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.universe__title {
|
||||
.back {
|
||||
color: white;
|
||||
font-family: var(--thick-title-font-family);
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
left: 3em;
|
||||
text-decoration: none;
|
||||
top: 3em;
|
||||
-webkit-text-stroke: 0.25px black;
|
||||
}
|
||||
|
||||
.arrow {
|
||||
letter-spacing: -0.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: var(--thick-title-font-family);
|
||||
font-size: 4em;
|
||||
margin: 2em 1em 0.5em;
|
||||
}
|
||||
|
||||
.universe__motd {
|
||||
.motd {
|
||||
font-size: 1.5em;
|
||||
margin: auto;
|
||||
width: 90%;
|
||||
|
|
@ -28,7 +44,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.universe__online {
|
||||
.online {
|
||||
bottom: 5rem;
|
||||
left: 5rem;
|
||||
font-size: 2em;
|
||||
|
|
@ -39,7 +55,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.universe__play {
|
||||
.play[class] {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
bottom: 4rem;
|
||||
font-family: var(--thick-title-font-family);
|
||||
23
packages/app/src/components/app/play/index.jsx
Normal file
23
packages/app/src/components/app/play/index.jsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import {React} from '@flecks/react';
|
||||
|
||||
import styles from './index.module.scss';
|
||||
|
||||
import Renderable from './renderable';
|
||||
import Ui from './ui';
|
||||
|
||||
function Play() {
|
||||
return (
|
||||
<div className={styles.play}>
|
||||
<Renderable />
|
||||
<Ui />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Play.defaultProps = {};
|
||||
|
||||
Play.displayName = 'Play';
|
||||
|
||||
Play.propTypes = {};
|
||||
|
||||
export default Play;
|
||||
|
|
@ -10,7 +10,8 @@ import {
|
|||
import {Container, Renderer, Stage} from '@avocado/graphics';
|
||||
import {Vector} from '@avocado/math';
|
||||
import {createLoop, destroyLoop} from '@avocado/timing';
|
||||
import {useRoom, useSelfEntity} from '@humus/app';
|
||||
|
||||
import {useRoom, useSelfEntity} from '../../../../hooks';
|
||||
|
||||
const renderer = new Renderer();
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import '@humus/scss/graphics.scss';
|
||||
@import '../../../scss/graphics.scss';
|
||||
|
||||
.hotbar {
|
||||
position: absolute;
|
||||
|
|
@ -3,11 +3,6 @@ import './index.scss';
|
|||
import {InputNormalizer} from '@avocado/input/client';
|
||||
import {Vector} from '@avocado/math';
|
||||
import {Room} from '@avocado/topdown';
|
||||
import {
|
||||
setSelfEntity,
|
||||
useRoom,
|
||||
useSelfEntity,
|
||||
} from '@humus/app';
|
||||
import {
|
||||
React,
|
||||
useEffect,
|
||||
|
|
@ -15,16 +10,21 @@ import {
|
|||
useRef,
|
||||
useState,
|
||||
} from '@flecks/react';
|
||||
import {useParams} from '@flecks/react/router';
|
||||
import {useDispatch} from '@flecks/redux';
|
||||
import {useSocket} from '@flecks/socket';
|
||||
|
||||
import {
|
||||
useRoom,
|
||||
useSelfEntity,
|
||||
} from '../../../../hooks';
|
||||
import {
|
||||
setSelfEntity,
|
||||
} from '../../../../state';
|
||||
import Hotbar from './hotbar';
|
||||
|
||||
const PlayUi = () => {
|
||||
const dispatch = useDispatch();
|
||||
const flecks = useFlecks();
|
||||
const {uuid} = useParams();
|
||||
const ref = useRef();
|
||||
const room = useRoom();
|
||||
const selfEntity = useSelfEntity();
|
||||
|
|
@ -55,14 +55,14 @@ const PlayUi = () => {
|
|||
}, [flecks, room, selfEntity]);
|
||||
useEffect(() => {
|
||||
const join = async () => {
|
||||
dispatch(setSelfEntity(await socket.send(['Join', uuid])));
|
||||
dispatch(setSelfEntity(await socket.send(['Join'])));
|
||||
};
|
||||
join();
|
||||
socket.on('reconnect', join);
|
||||
return () => {
|
||||
socket.off('reconnect', join);
|
||||
};
|
||||
}, [dispatch, socket, uuid]);
|
||||
}, [dispatch, socket]);
|
||||
useEffect(() => {
|
||||
if (!ref.current || !selfEntity) {
|
||||
return undefined;
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@import '@humus/scss/graphics.scss';
|
||||
@import '../../../scss/graphics.scss';
|
||||
|
||||
.item-slot {
|
||||
border: 4px dashed rgba(0, 0, 0, 0.5);
|
||||
|
Before Width: | Height: | Size: 581 KiB After Width: | Height: | Size: 581 KiB |
|
|
@ -1,9 +1,9 @@
|
|||
@import '~@humus/scss/colors.scss';
|
||||
@import '~@humus/scss/reset.scss';
|
||||
@import './reset.scss';
|
||||
|
||||
html {
|
||||
background-color: #212121;
|
||||
color: #FFFFFF;
|
||||
--color-active: rgb(0, 99, 112);
|
||||
--message-font-family: verdana, arial, helvetica, sans-serif;
|
||||
--rooted-font-family: Rooted, Ubuntu, "Droid Sans", sans-serif;
|
||||
--title-font-family: LatoLight, Ubuntu, "Droid Sans", sans-serif;
|
||||
|
|
@ -14,25 +14,8 @@ body {
|
|||
scrollbar-width: thin;
|
||||
scrollbar-color: #777 #333;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #333;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #777;
|
||||
border-radius: 20px;
|
||||
border: 3px solid #333;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
label {
|
||||
background-color: rgba(255, 255, 255, 0.025);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -49,18 +32,10 @@ label {
|
|||
}
|
||||
}
|
||||
|
||||
label:nth-of-type(2n+1) {
|
||||
background-color: rgba(0, 0, 0, 0.025);
|
||||
}
|
||||
|
||||
[contenteditable] {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
a {
|
||||
color: lighten($color-active, 20%);
|
||||
}
|
||||
|
||||
input {
|
||||
background: #333;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
|
@ -92,116 +67,6 @@ button, .button {
|
|||
}
|
||||
}
|
||||
|
||||
button, input[type="checkbox"], input[type="checkbox"] + label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
select {
|
||||
background: #222222;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
font-size: 0.75em;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
*:focus {
|
||||
box-shadow: 0 0 2px 0 $color-active;
|
||||
outline: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.react-tabs {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.react-tabs__tab-list {
|
||||
background-color: #272727;
|
||||
font-family: var(--title-font-family);
|
||||
font-size: 0.9em;
|
||||
overflow-x: hidden;
|
||||
scrollbar-width: thin;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: #2e1d1d;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #777;
|
||||
border-radius: 0;
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab {
|
||||
background-color: #2d2d2d;
|
||||
color: #aaaaaa;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
height: 3em;
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px solid #282828;
|
||||
}
|
||||
&:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
.wrapper {
|
||||
align-content: space-between;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 0.5em;
|
||||
justify-content: space-evenly;
|
||||
.text {
|
||||
height: 1.25em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
padding: 0 0.25em 0 0.5em;
|
||||
}
|
||||
.close {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #999999;
|
||||
padding: 0.25em;
|
||||
visibility: hidden;
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
&:hover .close {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.react-tabs__tab--selected[class] {
|
||||
background-color: #1e1e1e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel {
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
height: calc(100% - 2.7em);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.react-tabs__tab-panel--selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.muted {
|
||||
color: $color-muted;
|
||||
}
|
||||
|
||||
.humus {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
|
|
@ -209,22 +74,6 @@ select {
|
|||
width: 100vw;
|
||||
}
|
||||
|
||||
.back {
|
||||
color: white;
|
||||
font-family: var(--thick-title-font-family);
|
||||
font-size: 1.5em;
|
||||
position: absolute;
|
||||
left: 3em;
|
||||
text-decoration: none;
|
||||
top: 3em;
|
||||
-webkit-text-stroke: 0.25px black;
|
||||
}
|
||||
|
||||
.back__arrow {
|
||||
letter-spacing: -0.25em;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'LatoLight';
|
||||
src: url('./fonts/Lato-Light.eot');
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import './index.scss';
|
||||
|
||||
import {
|
||||
gatherComponents,
|
||||
React,
|
||||
useFlecks,
|
||||
} from '@flecks/react';
|
||||
|
||||
const Title = () => {
|
||||
const flecks = useFlecks();
|
||||
const Items = gatherComponents(flecks.invoke('@humus/app.title'));
|
||||
return (
|
||||
<div className="title">
|
||||
<div className="title__muted">
|
||||
<h1 className="title__title">Humus</h1>
|
||||
<ul className="title__actions">
|
||||
{Items}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Title;
|
||||
|
|
@ -1,3 +1,2 @@
|
|||
export {default as useIsNative} from './use-is-native';
|
||||
export {default as useRoom} from './use-room';
|
||||
export {default as useSelfEntity} from './use-self-entity';
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
import isElectron from 'is-electron';
|
||||
|
||||
export default () => true || isElectron();
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import {Hooks} from '@flecks/core';
|
||||
import {gatherComponents} from '@flecks/react';
|
||||
|
||||
import App from './components/app';
|
||||
import {selfEntity} from './state';
|
||||
|
|
@ -15,9 +14,7 @@ export default {
|
|||
'@flecks/core.config': () => ({
|
||||
resolution: [1600, 900],
|
||||
}),
|
||||
'@flecks/react.roots': (req, flecks) => (
|
||||
[App, {Components: gatherComponents(flecks.invoke('@humus/app.components'))}]
|
||||
),
|
||||
'@flecks/react.roots': () => App,
|
||||
'@flecks/react.providers': async (req, flecks) => [
|
||||
Context.Provider,
|
||||
{value: flecks.get('@humus/app.resolution')},
|
||||
|
|
|
|||
|
|
@ -43,7 +43,6 @@
|
|||
"@flecks/redux": "^1.4.1",
|
||||
"@flecks/socket": "^1.4.1",
|
||||
"@flecks/user": "^1.4.1",
|
||||
"@humus/scss": "^2.0.0",
|
||||
"debug": "4.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
116
packages/scss/.gitignore
vendored
116
packages/scss/.gitignore
vendored
|
|
@ -1,116 +0,0 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
const copy = require('@neutrinojs/copy');
|
||||
|
||||
module.exports = async (flecks) => {
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies, global-require
|
||||
const config = await require('@flecks/fleck/server/build/fleck.neutrinorc')(flecks);
|
||||
config.use.push(({config}) => {
|
||||
config.entryPoints.delete('colors');
|
||||
config.entryPoints.delete('graphics');
|
||||
config.entryPoints.delete('reset');
|
||||
});
|
||||
config.use.push(
|
||||
copy({
|
||||
copyUnmodified: true,
|
||||
patterns: [
|
||||
{
|
||||
from: 'src/colors.scss',
|
||||
to: 'colors.scss',
|
||||
},
|
||||
{
|
||||
from: 'src/graphics.scss',
|
||||
to: 'graphics.scss',
|
||||
},
|
||||
{
|
||||
from: 'src/reset.scss',
|
||||
to: 'reset.scss',
|
||||
},
|
||||
],
|
||||
}),
|
||||
);
|
||||
return config;
|
||||
};
|
||||
|
|
@ -1,36 +0,0 @@
|
|||
{
|
||||
"name": "@humus/scss",
|
||||
"version": "2.0.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://git.hq.cha0s.io/cha0s/humus.git",
|
||||
"directory": "packages/scss"
|
||||
},
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "flecks build",
|
||||
"clean": "flecks clean",
|
||||
"lint": "flecks lint",
|
||||
"postversion": "cp package.json dist",
|
||||
"test": "flecks test"
|
||||
},
|
||||
"files": [
|
||||
"build",
|
||||
"colors.scss",
|
||||
"graphics.scss",
|
||||
"index.js",
|
||||
"index.js.map",
|
||||
"reset.scss",
|
||||
"src",
|
||||
"test",
|
||||
"test.js",
|
||||
"test.js.map"
|
||||
],
|
||||
"dependencies": {
|
||||
"@flecks/core": "^1.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@flecks/fleck": "^1.4.1",
|
||||
"@neutrinojs/copy": "^9.5.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +0,0 @@
|
|||
$color-active: rgb(0, 99, 112);
|
||||
$color-muted: #bbbbbb;
|
||||
$color-owner: #d65130;
|
||||
$color-unread: rgb(180, 0, 0);
|
||||
|
|
@ -1 +0,0 @@
|
|||
// ...
|
||||
|
|
@ -33,22 +33,14 @@
|
|||
"test.js.map"
|
||||
],
|
||||
"dependencies": {
|
||||
"@avocado/graphics": "^3.0.0",
|
||||
"@avocado/input": "^3.0.0",
|
||||
"@avocado/math": "^3.0.0",
|
||||
"@avocado/react": "^3.0.0",
|
||||
"@avocado/resource": "^3.0.0",
|
||||
"@avocado/s13n": "^3.0.0",
|
||||
"@avocado/timing": "^3.0.0",
|
||||
"@avocado/topdown": "^3.0.0",
|
||||
"@avocado/traits": "^3.0.0",
|
||||
"@flecks/core": "^1.4.1",
|
||||
"@flecks/react": "^1.4.1",
|
||||
"@flecks/redux": "^1.4.1",
|
||||
"@flecks/socket": "^1.4.1",
|
||||
"@humus/app": "^2.0.0",
|
||||
"@humus/inventory": "^2.0.0",
|
||||
"@humus/scss": "^2.0.0",
|
||||
"debug": "4.3.1",
|
||||
"express": "^4.17.1",
|
||||
"glob": "^7.1.6"
|
||||
|
|
|
|||
|
|
@ -1,50 +0,0 @@
|
|||
import {Ui, useIsNative} from '@humus/app';
|
||||
import {React} from '@flecks/react';
|
||||
import {
|
||||
// Redirect,
|
||||
Route,
|
||||
Routes,
|
||||
// Switch,
|
||||
} from '@flecks/react/router';
|
||||
|
||||
import Overview from './overview';
|
||||
import PlayRenderable from './play/renderable';
|
||||
import PlayUi from './play/ui';
|
||||
import Local from './title/local';
|
||||
import Remote from './title/remote';
|
||||
|
||||
const Universe = () => {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const isNative = useIsNative();
|
||||
return (
|
||||
<Routes>
|
||||
<Route exact path="/title/local" element={<Local />} />
|
||||
<Route exact path="/title/remote" element={<Remote />} />
|
||||
<Route path="*" element={<></>} />
|
||||
{/* {!isNative && <Redirect to="/universe" />} */}
|
||||
<Route path="/universe">
|
||||
<Route
|
||||
path=":uuid/play"
|
||||
element={(
|
||||
<Ui>
|
||||
<PlayRenderable />
|
||||
<PlayUi />
|
||||
</Ui>
|
||||
)}
|
||||
/>
|
||||
<Route
|
||||
path=":uuid"
|
||||
element={(
|
||||
<Ui>
|
||||
<Overview />
|
||||
</Ui>
|
||||
)}
|
||||
/>
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
};
|
||||
|
||||
Universe.propTypes = {};
|
||||
|
||||
export default Universe;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
import {
|
||||
React,
|
||||
} from '@flecks/react';
|
||||
import {Link} from '@flecks/react/router';
|
||||
|
||||
const Title = () => (
|
||||
<>
|
||||
<li className="title__action">
|
||||
<Link to="/title/local" className="button title__button">Local play</Link>
|
||||
</li>
|
||||
<li className="title__action">
|
||||
<Link to="/title/remote" className="button title__button">Remote play</Link>
|
||||
</li>
|
||||
</>
|
||||
);
|
||||
|
||||
export default Title;
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import './index.scss';
|
||||
|
||||
import {Ui} from '@humus/app';
|
||||
import {React} from '@flecks/react';
|
||||
import {Link} from '@flecks/react/router';
|
||||
|
||||
import Universes from '../universes';
|
||||
|
||||
const Local = () => (
|
||||
<Ui>
|
||||
<div className="local">
|
||||
<Link
|
||||
className="back"
|
||||
to="/title"
|
||||
>
|
||||
<span className="back__arrow"><-</span>
|
||||
{' '}
|
||||
Back
|
||||
</Link>
|
||||
<h2 className="local__title">Local universes</h2>
|
||||
<Link
|
||||
className="local__create"
|
||||
to="/title/local/create"
|
||||
>
|
||||
+ Create a new universe
|
||||
</Link>
|
||||
<Universes isLocal />
|
||||
</div>
|
||||
</Ui>
|
||||
);
|
||||
|
||||
export default Local;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.local__title {
|
||||
font-family: var(--thick-title-font-family);
|
||||
font-size: 4em;
|
||||
margin-left: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.local__create {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-family: var(--title-font-family);
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
margin-left: 2.75em;
|
||||
padding: 0.5em;
|
||||
padding-left: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.local > .universes {
|
||||
margin: 4em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import './index.scss';
|
||||
|
||||
import {Ui} from '@humus/app';
|
||||
import {React} from '@flecks/react';
|
||||
import {Link} from '@flecks/react/router';
|
||||
|
||||
import Universes from '../universes';
|
||||
|
||||
const Remote = () => (
|
||||
<Ui>
|
||||
<div className="remote">
|
||||
<Link
|
||||
className="back"
|
||||
to="/title"
|
||||
>
|
||||
<span className="back__arrow"><-</span>
|
||||
{' '}
|
||||
Back
|
||||
</Link>
|
||||
<h2 className="remote__title">Remote universes</h2>
|
||||
<Link
|
||||
className="remote__connect"
|
||||
to="/title/remote/connect"
|
||||
>
|
||||
+ Connect to a new universe
|
||||
</Link>
|
||||
<Universes isLocal={false} />
|
||||
</div>
|
||||
</Ui>
|
||||
);
|
||||
|
||||
export default Remote;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
.remote__title {
|
||||
font-family: var(--thick-title-font-family);
|
||||
font-size: 4em;
|
||||
margin-left: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.remote__connect {
|
||||
color: white;
|
||||
display: inline-block;
|
||||
font-family: var(--title-font-family);
|
||||
font-size: 1.5em;
|
||||
margin-top: 1em;
|
||||
margin-left: 2.75em;
|
||||
padding: 0.5em;
|
||||
padding-left: 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.remote > .universes {
|
||||
margin: 4em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
import './index.scss';
|
||||
|
||||
import {useSelector} from '@flecks/redux';
|
||||
import {PropTypes, React} from '@flecks/react';
|
||||
|
||||
import {universesByLocalitySelector} from '../../../state';
|
||||
import Universe from './universe';
|
||||
|
||||
const Universes = ({isLocal}) => {
|
||||
const universes = useSelector((state) => universesByLocalitySelector(state, isLocal));
|
||||
return (
|
||||
<div className="universes">
|
||||
{Object.entries(universes).map(([uuid, universe]) => (
|
||||
<Universe key={uuid} universe={{...universe, uuid}} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Universes.propTypes = {
|
||||
isLocal: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default Universes;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
import './index.scss';
|
||||
|
||||
import {PropTypes, React} from '@flecks/react';
|
||||
import {Link} from '@flecks/react/router';
|
||||
|
||||
const Universe = ({
|
||||
universe: {
|
||||
address,
|
||||
isOnline,
|
||||
title,
|
||||
uuid,
|
||||
},
|
||||
}) => {
|
||||
const [host, port] = address.split(':');
|
||||
return (
|
||||
<Link className="button universes-universe" to={`/universe/${uuid}`}>
|
||||
<h3>{title}</h3>
|
||||
{address && (
|
||||
<span className="universes-universe__address">
|
||||
[
|
||||
<span className="universes-universe__host">{host}</span>
|
||||
{port && (
|
||||
<span className="universes-universe__port">
|
||||
:
|
||||
{port}
|
||||
</span>
|
||||
)}
|
||||
]
|
||||
</span>
|
||||
)}
|
||||
<span>{isOnline ? '✔️' : '❌'}</span>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
Universe.propTypes = {
|
||||
universe: PropTypes.shape({
|
||||
address: PropTypes.string,
|
||||
isOnline: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
uuid: PropTypes.string,
|
||||
}).isRequired,
|
||||
};
|
||||
|
||||
export default Universe;
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
@import '@humus/scss/colors.scss';
|
||||
|
||||
.universes-universe {
|
||||
align-items: baseline;
|
||||
color: lighten($color-active, 20%);
|
||||
display: flex;
|
||||
font-family: var(--thick-title-font-family);
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1em;
|
||||
padding: 2em;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.universes-universe__address {
|
||||
color: #fff;
|
||||
font-family: monospace;
|
||||
font-size: 1.5em;
|
||||
margin-right: auto;
|
||||
margin-left: 0.5em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.universes-universe__port {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
|
@ -1,7 +1,5 @@
|
|||
import {Hooks, Flecks} from '@flecks/core';
|
||||
|
||||
import Universe from './components';
|
||||
import Title from './components/title';
|
||||
import {universes} from './state';
|
||||
|
||||
export * from './state';
|
||||
|
|
@ -17,7 +15,5 @@ export default {
|
|||
'@flecks/redux.slices': () => ({
|
||||
universes,
|
||||
}),
|
||||
'@humus/app.components': () => Universe,
|
||||
'@humus/app.title': () => Title,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user