juni/vtuber-stickers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

some fixes

Browse Source
This commit is contained in:
Ayaka
2022-10-16 21:25:03 +00:00
parent 49598678a4
commit 96dbbf8a6d
7 changed files with 182 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/index.html
View File

@@ -9,7 +9,7 @@
<link rel="manifest" href="/site.webmanifest" />
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#cf93d9" />
<meta name="description" content="Project sekai stickers maker" />
<title>Project Sekai Stickers</title>
@@ -22,6 +22,15 @@
<meta property="og:url" content="https://st.ayaka.one" />
<meta property="og:site_name" content="Project Sekai Stickers" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@OriginalAyaka" />
<meta name="twitter:creator" content="@OriginalAyaka" />
<meta name="twitter:title" content="Project Sekai Stickers" />
<meta
name="twitter:description"
content="Make your own Project sekai stickers!"
/>
<meta name="twitter:image" content="/og-image.png" />
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

9
public/static/js/main.12a1fd73.js Normal file
View File

@@ -0,0 +1,9 @@
//remove service worker and reload page
if ("serviceWorker" in navigator) {
navigator.serviceWorker.getRegistrations().then(function (registrations) {
for (let registration of registrations) {
registration.unregister();
}
window.location.reload();
});
}

10
src/App.css
View File

@@ -25,10 +25,14 @@
.horizontal {
width: 296px;
margin-left: -30px;
/* margin-left: -30px; */
}
.slider-horizontal {
margin-left: -30px;
}
.settings {
color: white;
font-family: "YurukaStd";
@@ -87,7 +91,7 @@
flex-direction: column;
}
.footer > a {
/* .footer > a {
color: rgb(199, 199, 199);
text-decoration: none;
margin-bottom: 0.5rem;
@@ -95,7 +99,7 @@
.footer > a:hover {
color: rgb(255, 255, 255);
}
} */
::-webkit-scrollbar {
width: 0.5rem;

23
src/App.jsx
View File

@@ -7,6 +7,7 @@ import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";
import Switch from "@mui/material/Switch";
import Picker from "./components/Picker";
import Info from "./components/Info";
const { ClipboardItem } = window;
@@ -22,6 +23,16 @@ function App() {
}
}, []);
const [infoOpen, setInfoOpen] = useState(false);
const handleClickOpen = () => {
setInfoOpen(true);
};
const handleClose = () => {
setInfoOpen(false);
};
const [character, setCharacter] = useState(49);
const [text, setText] = useState(characters[character].defaultText.text);
const [position, setPosition] = useState({
@@ -144,6 +155,7 @@ function App() {
return (
<div className="App">
<Info open={infoOpen} handleClose={handleClose} />
<div className="container">
<div className="vertical">
<div className="canvas">
@@ -167,6 +179,7 @@ function App() {
</div>
<div className="horizontal">
<Slider
className="slider-horizontal"
value={position.x}
onChange={(e, v) => setPosition({ ...position, x: v })}
min={0}
@@ -249,13 +262,9 @@ function App() {
</div>
</div>
<div className="footer">
<a href="https://github.com/theoriginalayaka/sekai-stickers">
GitHub
</a>
{/*powered by vercel */}
<a href="https://vercel.com?utm_source=theoriginalayaka&utm_campaign=oss">
<img src="/powered-by-vercel.svg" alt="powered by vercel" />
</a>
<Button color="secondary" onClick={handleClickOpen}>
Info
</Button>
</div>
</div>
</div>

131
src/components/Info.jsx Normal file
View File

@@ -0,0 +1,131 @@
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import List from "@mui/material/List";
import ListItem from "@mui/material/ListItem";
import ListItemText from "@mui/material/ListItemText";
import ListItemAvatar from "@mui/material/ListItemAvatar";
import Avatar from "@mui/material/Avatar";
import Typography from "@mui/material/Typography";
export default function Info({ open, handleClose }) {
return (
<div>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">Info</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
<Typography variant="h6" component="h3">
This tool made possible by:
</Typography>
<List>
<ListItem
button
onClick={() =>
(window.location.href = "https://github.com/theoriginalayaka")
}
>
<ListItemAvatar>
<Avatar
alt="Ayaka"
src="https://avatars.githubusercontent.com/theoriginalayaka"
/>
</ListItemAvatar>
<ListItemText
primary="Ayaka"
secondary="for the original idea"
/>
</ListItem>
<ListItem
button
onClick={() =>
(window.location.href = "https://github.com/modder4869")
}
>
<ListItemAvatar>
<Avatar
alt="Modder4869"
src="https://avatars.githubusercontent.com/modder4869"
/>
</ListItemAvatar>
<ListItemText
primary="Modder4869"
secondary="for the help with the code"
/>
</ListItem>
<ListItem
button
onClick={() =>
(window.location.href =
"https://www.reddit.com/r/ProjectSekai/comments/x1h4v1/after_an_ungodly_amount_of_time_i_finally_made/")
}
>
<ListItemAvatar>
<Avatar
alt="u/SherenPlaysGames"
src="https://styles.redditmedia.com/t5_mygft/styles/profileIcon_n1kman41j5891.jpg"
/>
</ListItemAvatar>
<ListItemText
primary="u/SherenPlaysGames"
secondary="for the original stamps"
/>
</ListItem>
<ListItem
button
onClick={() =>
(window.location.href =
"https://github.com/TheOriginalAyaka/sekai-stickers/graphs/contributors")
}
>
<ListItemAvatar>
<Avatar
alt="Contributors"
src="https://avatars.githubusercontent.com/u/583231"
/>
</ListItemAvatar>
<ListItemText
primary="Contributors"
secondary="for the help with the code"
/>
</ListItem>
</List>
<Typography variant="h6" component="h3">
You can find the source code or contribute here:
</Typography>
<List>
<ListItem
button
onClick={() =>
(window.location.href =
"https://github.com/TheOriginalAyaka/sekai-stickers")
}
>
<ListItemAvatar>
<Avatar
alt="GitHub"
src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
/>
</ListItemAvatar>
<ListItemText primary="GitHub" secondary="Source Code" />
</ListItem>
</List>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="secondary" autoFocus>
Close
</Button>
</DialogActions>
</Dialog>
</div>
);
}

14
src/components/Picker.jsx
View File

@@ -28,9 +28,11 @@ export default function Picker({ setCharacter }) {
const memoizedImageListItems = useMemo(() => {
const s = search.toLowerCase();
return characters.map((c, index) => {
if (s === c.id ||
if (
s === c.id ||
c.name.toLowerCase().includes(s) ||
c.character.toLowerCase().includes(s)) {
c.character.toLowerCase().includes(s)
) {
return (
<ImageListItem
key={index}
@@ -55,11 +57,11 @@ export default function Picker({ setCharacter }) {
loading="lazy"
/>
</ImageListItem>
)
);
}
return null;
})
}, [search, setCharacter])
});
}, [search, setCharacter]);
return (
<div>
@@ -84,7 +86,7 @@ export default function Picker({ setCharacter }) {
>
<div className="picker-search">
<TextField
label="Search"
label="Search character"
size="small"
color="secondary"
value={search}

2
src/index.jsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import App from "./App.dev";
import { ThemeProvider, createTheme } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";