Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed styled to be more subdued, added bear image and icons

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-03-20 20:29:35 +11:00
parent d1b1780763
commit 980462b109
14 changed files with 90 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 107 KiB

4
public/index.html
View File

@ -7,7 +7,7 @@
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Web site for table top game session sharing"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Owlbear Rodeo</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/logo192.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/logo512.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 28 KiB

2
src/components/AddPartyMemberButton.js
View File

@ -30,7 +30,7 @@ function AddPartyMemberButton({ streamId }) {
</Flex> </Flex>
<Modal isOpen={isAddModalOpen} onRequestClose={closeModal}> <Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>
<Box> <Box>
<Label p={2}>Other people can join using your ID (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Label> <Label p={2}>Other people can join using your ID › ʕ•ᴥ•ʔ</Label>
<Box p={2} bg="hsla(230, 20%, 0%, 20%)"> <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
<Text>{streamId}</Text> <Text>{streamId}</Text>
</Box> </Box>

22
src/components/GameViewSwitch.js
View File

@ -1,7 +1,5 @@
import React from "react"; import React from "react";
import { Flex, IconButton, Box } from "theme-ui"; import { Flex, IconButton } from "theme-ui";
import AddPartyMemberButton from "./AddPartyMemberButton";
function SocialIcon() { function SocialIcon() {
return ( return (
@ -70,22 +68,32 @@ function GameViewSwitch({ view, onViewChange }) {
return ( return (
<Flex sx={{ width: "128px", height: "32px" }} m={2}> <Flex sx={{ width: "128px", height: "32px" }} m={2}>
<Flex <Flex
bg={view === "social" ? "primary" : "highlight"} color={view === "social" ? "text" : "highlight"}
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
borderRadius: "32px 0 0 32px", borderRadius: "32px 0 0 32px",
justifyContent: "center" justifyContent: "center",
borderWidth: "1px",
borderStyle: "solid",
borderColor: "text",
alignItems: "center",
transform: "translate(0.5px, 0)"
}} }}
onClick={() => onViewChange("social")} onClick={() => onViewChange("social")}
> >
<SocialIcon /> <SocialIcon />
</Flex> </Flex>
<Flex <Flex
bg={view === "encounter" ? "primary" : "highlight"} color={view === "encounter" ? "text" : "highlight"}
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
borderRadius: "0 32px 32px 0", borderRadius: "0 32px 32px 0",
justifyContent: "center" justifyContent: "center",
borderWidth: "1px",
borderStyle: "solid",
borderColor: "text",
alignItems: "center",
transform: "translate(-0.5px, 0)"
}} }}
onClick={() => onViewChange("encounter")} onClick={() => onViewChange("encounter")}
> >

2
src/components/Modal.js
View File

@ -24,7 +24,7 @@ function StyledModal({ isOpen, onRequestClose, children }) {
> >
{children} {children}
<Close <Close
m={1} m={0}
sx={{ position: "absolute", top: 0, right: 0 }} sx={{ position: "absolute", top: 0, right: 0 }}
onClick={onRequestClose} onClick={onRequestClose}
/> />

BIN
src/images/Owlington.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

1
src/index.css Normal file
View File

@ -0,0 +1 @@
@import url("https://fonts.googleapis.com/css?family=Bree+Serif|Pacifico&display=swap");

2
src/index.js
View File

@ -5,6 +5,8 @@ import Modal from "react-modal";
import * as serviceWorker from "./serviceWorker"; import * as serviceWorker from "./serviceWorker";
import "./index.css";
ReactDOM.render(<App />, document.getElementById("root")); ReactDOM.render(<App />, document.getElementById("root"));
Modal.setAppElement("#root"); Modal.setAppElement("#root");

1
src/routes/Game.js
View File

@ -15,7 +15,6 @@ import useSession from "../helpers/useSession";
import Party from "../components/Party"; import Party from "../components/Party";
import Tokens from "../components/Tokens"; import Tokens from "../components/Tokens";
import Map from "../components/Map"; import Map from "../components/Map";
import GameViewSwitch from "../components/GameViewSwitch";
function Game() { function Game() {
const { gameId } = useContext(GameContext); const { gameId } = useContext(GameContext);

8
src/routes/Home.js
View File

@ -1,9 +1,11 @@
import React, { useContext } from "react"; import React, { useContext } from "react";
import { navigate } from "hookrouter"; import { navigate } from "hookrouter";
import { Container, Flex, Button } from "theme-ui"; import { Container, Flex, Button, Image, Heading } from "theme-ui";
import GameContext from "../contexts/GameContext"; import GameContext from "../contexts/GameContext";
import owlington from "../images/Owlington.png";
function Home() { function Home() {
const { setGameId } = useContext(GameContext); const { setGameId } = useContext(GameContext);
@ -25,6 +27,10 @@ function Home() {
justifyContent: "center" justifyContent: "center"
}} }}
> >
<Heading sx={{ textAlign: "center", fontSize: "48px" }}>
Owlbear Rodeo
</Heading>
<Image src={owlington} m={2} />
<Button m={2} onClick={handleStartGame}> <Button m={2} onClick={handleStartGame}>
Start Game Start Game
</Button> </Button>

4
src/routes/Join.js
View File

@ -26,7 +26,7 @@ function Join() {
}} }}
> >
<Box as="form" onSubmit={handleSubmit}> <Box as="form" onSubmit={handleSubmit}>
<Label htmlFor="id">Shove an ID in me</Label> <Label htmlFor="id">Let me see your identification</Label>
<Input <Input
my={4} my={4}
id="id" id="id"
@ -34,7 +34,7 @@ function Join() {
value={gameId || ""} value={gameId || ""}
onChange={handleChange} onChange={handleChange}
/> />
<Button>Go ʕ•ᴥ•ʔ</Button> <Button>Join › (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧</Button>
</Box> </Box>
</Flex> </Flex>
</Container> </Container>

64
src/theme.js
View File

@ -10,15 +10,14 @@ export default {
gray: "hsl(210, 50%, 60%)" gray: "hsl(210, 50%, 60%)"
}, },
fonts: { fonts: {
body: body: "'Bree Serif', serif",
'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif', heading: "'Pacifico', cursive",
heading: "inherit",
monospace: "Menlo, monospace" monospace: "Menlo, monospace"
}, },
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72], fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
fontWeights: { fontWeights: {
body: 400, body: 400,
heading: 700, heading: 400,
display: 900 display: 900
}, },
lineHeights: { lineHeights: {
@ -150,7 +149,62 @@ export default {
}, },
forms: { forms: {
label: { label: {
fontWeight: 700 fontWeight: 400
},
input: {
"&:focus": {
outlineColor: "primary"
}
}
},
buttons: {
primary: {
color: "text",
bg: "transparent",
borderStyle: "solid",
borderWidth: "1px",
borderColor: "text",
"&:hover": {
borderColor: "highlight",
cursor: "pointer"
},
fontFamily: "body",
"&:focus": {
outline: "none"
},
"&:active": {
borderColor: "primary"
}
},
secondary: {
color: "secondary",
bg: "transparent",
borderStyle: "solid",
borderWidth: "1px",
borderColor: "text",
fontFamily: "body"
},
icon: {
"&:hover": {
cursor: "pointer"
},
"&:focus": {
outline: "none"
},
"&:active": {
color: "primary"
}
},
close: {
"&:hover": {
cursor: "pointer"
},
"&:focus": {
outline: "none"
},
"&:active": {
color: "primary"
}
} }
} }
}; };