i miss otachan
This commit is contained in:
parent
21ffad6026
commit
fa8f60dcdd
7 changed files with 375 additions and 277 deletions
471
src/App.css
471
src/App.css
|
|
@ -1,403 +1,406 @@
|
|||
:root {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
/* browsers agreeing on stuff challenge (impossible) */
|
||||
background-color: #121212;
|
||||
font-family: monospace;
|
||||
overflow-x: hidden;
|
||||
color: #ffc8dd;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
/* browsers agreeing on stuff challenge (impossible) */
|
||||
background-color: #121212;
|
||||
font-family: monospace;
|
||||
overflow-x: hidden;
|
||||
color: #ffc8dd;
|
||||
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #cdb4db;
|
||||
color: #cdb4db;
|
||||
}
|
||||
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 10px;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.musicartist {
|
||||
font-weight: bolder;
|
||||
margin-bottom: .5em;
|
||||
font-weight: bolder;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.musicbutton {
|
||||
background-color: #272525;
|
||||
color: pink;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 10px 30px;
|
||||
box-shadow: none;
|
||||
border-radius: 5px;
|
||||
transition: 639ms;
|
||||
transform: translateY(0);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
margin: 1em;
|
||||
background-color: #272525;
|
||||
color: pink;
|
||||
font-family: Roboto, sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
padding: 10px 30px;
|
||||
box-shadow: none;
|
||||
border-radius: 5px;
|
||||
transition: 639ms;
|
||||
transform: translateY(0);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
|
||||
.musicdiv {
|
||||
background-color: rgba(0, 0, 0, 0.731);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1500;
|
||||
background-color: rgba(0, 0, 0, 0.731);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1500;
|
||||
}
|
||||
|
||||
.music-close-button-div {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: 2;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
background-color: #5e5a5a;
|
||||
text-decoration: none;
|
||||
color: pink;
|
||||
cursor: pointer;
|
||||
margin: 1em;
|
||||
padding: 2;
|
||||
border: none;
|
||||
background: none;
|
||||
border-radius: 2px;
|
||||
background-color: #5e5a5a;
|
||||
text-decoration: none;
|
||||
color: pink;
|
||||
cursor: pointer;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.musiclist {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: larger;
|
||||
flex-wrap: wrap;
|
||||
height: 80%;
|
||||
overflow-x: scroll;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
font-size: larger;
|
||||
flex-wrap: wrap;
|
||||
height: 80%;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.innermusic {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 2%;
|
||||
background: #121212;
|
||||
z-index: 1000;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
border-radius: 2%;
|
||||
background: #121212;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.musicbutton:hover {
|
||||
border-radius: 5px;
|
||||
transition: 639ms;
|
||||
padding: 10px 30px;
|
||||
transform: translateY(-1px);
|
||||
border: none;
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
background-color: #5e5a5a;
|
||||
animation: big 500ms infinite;
|
||||
transform: translateY(-0.3em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
border-radius: 5px;
|
||||
transition: 639ms;
|
||||
padding: 10px 30px;
|
||||
transform: translateY(-1px);
|
||||
border: none;
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
background-color: #5e5a5a;
|
||||
animation: big 500ms infinite;
|
||||
transform: translateY(-0.3em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
}
|
||||
|
||||
|
||||
.actualreviewdiv {
|
||||
overflow-y: scroll;
|
||||
height: 18em;
|
||||
overflow-y: scroll;
|
||||
height: 18em;
|
||||
}
|
||||
|
||||
.cardchild:hover+.actualreviewdiv {
|
||||
transition: 1s;
|
||||
transform: rotateY(100);
|
||||
.cardchild:hover + .actualreviewdiv {
|
||||
transition: 1s;
|
||||
transform: rotateY(100);
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-top: 6em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 6em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.cardchild h1 {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
.cardchild h1:not(:has(.listeningto)) {
|
||||
font-size: 3em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.reviewheadertext {
|
||||
margin-bottom: -.2em;
|
||||
margin-bottom: -.2em;
|
||||
}
|
||||
|
||||
.cardchild p {
|
||||
margin-bottom: -1.5em;
|
||||
margin-bottom: -1.5em;
|
||||
}
|
||||
|
||||
.cardchild a {
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
color: pink;
|
||||
text-decoration: underline;
|
||||
margin-bottom: 0%;
|
||||
animation: spawntop 1s;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
color: pink;
|
||||
text-decoration: underline;
|
||||
margin-bottom: 0%;
|
||||
.fadein {
|
||||
animation: spawntop 1s;
|
||||
}
|
||||
}
|
||||
|
||||
.cardchild span {
|
||||
font-size: 1.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.cardchild img {
|
||||
max-width: 5em;
|
||||
margin: 0.5em;
|
||||
max-width: 5em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.cardchild:hover::-webkit-scrollbar {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* CAN BROWSERS JUST AGREE ON ONE FUCKING THING */
|
||||
|
||||
.cardchild {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
cursor: default;
|
||||
background-color: #272525;
|
||||
border-radius: 5%;
|
||||
width: 25em;
|
||||
height: 25em;
|
||||
margin-top: 1em;
|
||||
padding: 0.5em 5em 2em 5em;
|
||||
transform: translateY(-0em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
cursor: default;
|
||||
background-color: #272525;
|
||||
border-radius: 5%;
|
||||
width: 25em;
|
||||
height: 25em;
|
||||
margin-top: 1em;
|
||||
padding: 0.5em 5em 2em 5em;
|
||||
transform: translateY(-0em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
}
|
||||
|
||||
.theeaster {
|
||||
color: pink;
|
||||
padding: 8px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
border-width: 0;
|
||||
background-color: #5555557a;
|
||||
border-style: solid;
|
||||
border-radius: 11px;
|
||||
color: pink;
|
||||
padding: 8px;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
border-width: 0;
|
||||
background-color: #5555557a;
|
||||
border-style: solid;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.theeaster:focus {
|
||||
border-color: pink;
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
transition: .5s;
|
||||
border-color: pink;
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.easteregg {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.easteregginner {
|
||||
width: 70%;
|
||||
background-color: #272525;
|
||||
height: 10em;
|
||||
width: 70%;
|
||||
background-color: #272525;
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.cardchild:hover {
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
background-color: #5e5a5a;
|
||||
animation: big 500ms infinite;
|
||||
transform: translateY(-0.3em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-webkit-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
-moz-box-shadow: 0 0 534px -3px rgba(250, 236, 236, 0.4);
|
||||
background-color: #5e5a5a;
|
||||
animation: big 500ms infinite;
|
||||
transform: translateY(-0.3em);
|
||||
transition: background-color 1s, transform .5s, box-shadow .5s, -webkit-box-shadow .5s, -moz-box-shadow 0.5s;
|
||||
}
|
||||
|
||||
.linktree {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.linktree img {
|
||||
cursor: pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.singlereview img {
|
||||
border-radius: 12%;
|
||||
border-radius: 12%;
|
||||
}
|
||||
|
||||
.singlereview {
|
||||
margin: 1em;
|
||||
border-radius: 3%;
|
||||
background-color: #00000040;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin: 1em;
|
||||
border-radius: 3%;
|
||||
background-color: #00000040;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.cssishard {
|
||||
background-color: #121212;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.singlemusic {
|
||||
cursor: pointer;
|
||||
min-width: 15em;
|
||||
max-width: 15em;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
border-radius: 3%;
|
||||
background-color: #272525;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
cursor: pointer;
|
||||
min-width: 15em;
|
||||
max-width: 15em;
|
||||
word-wrap: anywhere;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
border-radius: 3%;
|
||||
background-color: #272525;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.singlemusic img {
|
||||
max-width: 5em;
|
||||
max-width: 5em;
|
||||
}
|
||||
|
||||
.innermusic {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reviewname {
|
||||
margin-bottom: 0.1em;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 0.1em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
|
||||
.reviewinfo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.reviewname {
|
||||
margin-bottom: 0.1em;
|
||||
font-weight: bolder;
|
||||
margin-bottom: 0.1em;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.parent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: 3.6em;
|
||||
color: blanchedalmond;
|
||||
display: inline-table;
|
||||
font-size: 3.6em;
|
||||
color: blanchedalmond;
|
||||
display: inline-table;
|
||||
}
|
||||
|
||||
.cardchild h2 {
|
||||
display: inline-table;
|
||||
vertical-align: text-bottom;
|
||||
display: inline-table;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
.header h1:not(:active) {
|
||||
animation: slide-right 1.5s;
|
||||
animation: slide-right 1.5s;
|
||||
}
|
||||
|
||||
.header h1:hover {
|
||||
animation: shake 10ms infinite;
|
||||
animation: shake 10ms infinite;
|
||||
}
|
||||
|
||||
.header img {
|
||||
border-radius: 25%;
|
||||
margin-right: 1em;
|
||||
vertical-align: middle;
|
||||
border-radius: 25%;
|
||||
margin-right: 1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.initialanim {
|
||||
animation: slide-left 1.5s;
|
||||
animation: slide-left 1.5s;
|
||||
}
|
||||
|
||||
.gaybackground {
|
||||
background-image: url("/gaybackground.png");
|
||||
background-image: url("/gaybackground.png");
|
||||
}
|
||||
|
||||
.animate {
|
||||
z-index: 10000000;
|
||||
transform: scale(10000);
|
||||
transition: 20s;
|
||||
z-index: 10000000;
|
||||
transform: scale(10000);
|
||||
transition: 20s;
|
||||
}
|
||||
|
||||
@keyframes slide-left {
|
||||
from {
|
||||
transform: translateX(-10000em);
|
||||
}
|
||||
from {
|
||||
transform: translateX(-10000em);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-right {
|
||||
from {
|
||||
transform: translateX(10000em);
|
||||
}
|
||||
from {
|
||||
transform: translateX(10000em);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bigsmall {
|
||||
0% {
|
||||
max-width: 10em;
|
||||
}
|
||||
0% {
|
||||
max-width: 10em;
|
||||
}
|
||||
|
||||
50% {
|
||||
width: 10.5em;
|
||||
max-width: 10.5em;
|
||||
}
|
||||
50% {
|
||||
width: 10.5em;
|
||||
max-width: 10.5em;
|
||||
}
|
||||
|
||||
100% {
|
||||
max-width: 10em;
|
||||
}
|
||||
100% {
|
||||
max-width: 10em;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spawntop {
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(100em);
|
||||
}
|
||||
0% {
|
||||
opacity: 0%;
|
||||
transform: translateY(1em);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0);
|
||||
}
|
||||
100% {
|
||||
opacity: 100%;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
0% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
|
||||
25% {
|
||||
transform: translate(5px, 5px) rotate(5deg);
|
||||
}
|
||||
25% {
|
||||
transform: translate(5px, 5px) rotate(5deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: translate(0, 0) rotate(0eg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0, 0) rotate(0eg);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: translate(-5px, 5px) rotate(-5deg);
|
||||
}
|
||||
75% {
|
||||
transform: translate(-5px, 5px) rotate(-5deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -121,7 +121,7 @@ function App() {
|
|||
</div>
|
||||
</div>
|
||||
<AdvancedBr count={2} />
|
||||
<div class='easteregg'>
|
||||
<div class='easteregg' style={{opacity: isAnimating() || animatedwoem() ? "0%" : "100%"}}>
|
||||
<div class="musicbutton" onclick={() => { setpopup(!shouldpopup()) }}>
|
||||
<p>typa shit ive been on</p><img style={{
|
||||
"margin-left": "0.3em",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import { createSignal, onMount } from "solid-js"
|
||||
import { ishover } from "../App";
|
||||
import {createSignal, onMount} from "solid-js"
|
||||
import {ishover} from "../App";
|
||||
|
||||
interface Review {
|
||||
reviewID: number;
|
||||
|
|
@ -44,8 +44,9 @@ export default function Reviews() {
|
|||
<>
|
||||
<a style={{
|
||||
display: ishover() ? "inline" : "none"
|
||||
}} href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify">
|
||||
<p>add your reviews here</p>
|
||||
}}
|
||||
href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify">
|
||||
<p class="fadein">add your reviews here</p>
|
||||
</a>
|
||||
<h1 class="reviewheadertext">Reviews</h1>
|
||||
<div
|
||||
|
|
@ -69,30 +70,31 @@ export default function Reviews() {
|
|||
export const theImager = async (id: string): Promise<string> => (await fetch(`https://dc-lookup.mono.exhq.dev/v1/user/${id}`)
|
||||
.then(res => res.json()).then(data => data.avatar.link).catch(() => "https://http.cat/status/100"));
|
||||
|
||||
function SingleReview(props: NeoReview) {
|
||||
const [imageSrc, setImageSrc] = createSignal("");
|
||||
function SingleReview(props: NeoReview) {
|
||||
const [imageSrc, setImageSrc] = createSignal("");
|
||||
|
||||
onMount(async () => {
|
||||
const url = await theImager(props.discordID);
|
||||
setImageSrc(url);
|
||||
});
|
||||
onMount(async () => {
|
||||
const url = await theImager(props.discordID);
|
||||
setImageSrc(url);
|
||||
});
|
||||
|
||||
return (
|
||||
<div class="singlereview">
|
||||
<img
|
||||
src={imageSrc()}
|
||||
alt="User Avatar"
|
||||
style={{ "max-width": "3em", "border-radius": "30%" }}
|
||||
/>
|
||||
<div class="reviewinfo">
|
||||
<div class="reviewname">
|
||||
{props.global_name === null ? props.username : props.global_name}
|
||||
</div>
|
||||
<div class="reviewtext">{props.reviewText}</div>
|
||||
return (
|
||||
<div class="singlereview">
|
||||
<img
|
||||
src={imageSrc()}
|
||||
alt="User Avatar"
|
||||
style={{"max-width": "3em", "border-radius": "30%"}}
|
||||
/>
|
||||
<div class="reviewinfo">
|
||||
<div class="reviewname">
|
||||
{props.global_name === null ? props.username : props.global_name}
|
||||
</div>
|
||||
<div class="reviewtext">{props.reviewText}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export async function sendReview(review: string, token: string): Promise<boolean> {
|
||||
try {
|
||||
const response = await fetch(`https://backendreview.mono.exhq.dev/sendreview?review=${review}`, {
|
||||
|
|
|
|||
6
src/components/cumbrainz.css
Normal file
6
src/components/cumbrainz.css
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.listeningto {
|
||||
font-size: smaller;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
65
src/components/cumbrainz.tsx
Normal file
65
src/components/cumbrainz.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import {createSignal, onMount, Show} from "solid-js";
|
||||
import "./cumbrainz.css"
|
||||
|
||||
|
||||
interface ListenPayload {
|
||||
payload: {
|
||||
count: number;
|
||||
listens: Listen[];
|
||||
playing_now: boolean;
|
||||
user_id: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface Listen {
|
||||
playing_now: boolean;
|
||||
track_metadata: TrackMetadata;
|
||||
}
|
||||
|
||||
interface TrackMetadata {
|
||||
additional_info: AdditionalInfo;
|
||||
artist_name: string;
|
||||
release_name: string;
|
||||
track_name: string;
|
||||
}
|
||||
|
||||
interface AdditionalInfo {
|
||||
duration: number;
|
||||
music_service_name: string;
|
||||
origin_url: string;
|
||||
submission_client: string;
|
||||
submission_client_version: string;
|
||||
}
|
||||
|
||||
export function Cumbrainz() {
|
||||
const [musicInfo, setMusicInfo] = createSignal({} as ListenPayload);
|
||||
const [isLoading, setIsLoading] = createSignal(true);
|
||||
onMount(async () => {
|
||||
try {
|
||||
const the = await fetch("https://api.listenbrainz.org/1/user/exhq/playing-now")
|
||||
const thejson = await the.json()
|
||||
setMusicInfo(thejson)
|
||||
} catch (error) {
|
||||
console.error("Error fetching music data from song.link:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
})
|
||||
return <div class="listeningto">
|
||||
<h2 >Listening to</h2>
|
||||
<Show when={isLoading()} fallback={
|
||||
<Show when={musicInfo().payload.listens.length > 0} fallback={<span>nothing</span>}>
|
||||
<Thesong song={musicInfo()} />
|
||||
</Show>
|
||||
}>
|
||||
<span>loading</span>
|
||||
</Show>
|
||||
</div>
|
||||
}
|
||||
|
||||
function Thesong({song}: { song: ListenPayload }) {
|
||||
return <a
|
||||
href={song.payload.listens[0].track_metadata.additional_info.origin_url.replace(/\?.*/, m => `?v=${new URLSearchParams(m).get('v') ?? ''}`).replace(/(\?v=)$/, '')}>
|
||||
<div> {song.payload.listens[0].track_metadata.artist_name} - {song.payload.listens[0].track_metadata.track_name} </div>
|
||||
</a>
|
||||
}
|
||||
11
src/components/middlecard.css
Normal file
11
src/components/middlecard.css
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.middleparent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.middlechild {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -1,22 +1,33 @@
|
|||
import { Cumbrainz } from "./cumbrainz"
|
||||
import "./middlecard.css"
|
||||
export interface InfoCardProps {
|
||||
bd: boolean
|
||||
}
|
||||
|
||||
export function InfoCard(props: InfoCardProps) {
|
||||
return props.bd ? <>
|
||||
<h1>hi :3</h1>
|
||||
<span>its my birthday
|
||||
<br />
|
||||
please buy me stuff
|
||||
</span>
|
||||
</> :
|
||||
<>
|
||||
<h1>hi :3</h1>
|
||||
<span>silly goober who does silly stuff
|
||||
<br />
|
||||
self proclaimed programmer and progamer
|
||||
<br />
|
||||
shitposts for fun
|
||||
</span>
|
||||
</>
|
||||
|
||||
return <div class="middleparent">
|
||||
<div class="middlechild">{
|
||||
props.bd ?
|
||||
<>
|
||||
<span>
|
||||
its my birthday
|
||||
<br />
|
||||
please buy me stuff
|
||||
</span>
|
||||
</> : <>
|
||||
<span>silly goober who does silly stuff
|
||||
<br />
|
||||
self proclaimed programmer and progamer
|
||||
<br />
|
||||
shitposts for fun
|
||||
</span>
|
||||
</>}</div>
|
||||
<div style={{"background-color": "gray", height: "1px"}}>
|
||||
<br/>
|
||||
</div>
|
||||
<div class="middlechild">
|
||||
<Cumbrainz></Cumbrainz>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
Loading…
Reference in a new issue