typescript more like gayscript

This commit is contained in:
amy 2024-06-23 22:11:02 +03:30
parent 9cdcae11d2
commit a8bf4b8a5a
19 changed files with 246 additions and 114 deletions

View file

@ -2,11 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="https://dp.nea.moe/avatar/712639419785412668.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ECHO</title>
<title>Vite + Solid + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

View file

@ -5,13 +5,14 @@
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"build": "tsc -b && vite build",
"preview": "vite preview"
},
"dependencies": {
"solid-js": "^1.8.17"
},
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^5.3.1",
"vite-plugin-solid": "^2.10.2"
}

View file

@ -12,6 +12,9 @@ importers:
specifier: ^1.8.17
version: 1.8.17
devDependencies:
typescript:
specifier: ^5.2.2
version: 5.5.2
vite:
specifier: ^5.3.1
version: 5.3.1
@ -541,6 +544,11 @@ packages:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
typescript@5.5.2:
resolution: {integrity: sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==}
engines: {node: '>=14.17'}
hasBin: true
update-browserslist-db@1.0.16:
resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
hasBin: true
@ -1080,6 +1088,8 @@ snapshots:
to-fast-properties@2.0.0: {}
typescript@5.5.2: {}
update-browserslist-db@1.0.16(browserslist@4.23.1):
dependencies:
browserslist: 4.23.1

BIN
public/gaybackground.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.3 KiB

View file

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -1,6 +1,6 @@
:root {
background-color: #121212;
font-family: 'Courier New', Courier, monospace;
font-family: monospace;
overflow-x: hidden;
color: pink;
}
@ -12,13 +12,22 @@
justify-content: center;
}
.header img:hover{
animation: bigsmall .5s infinite;
}
.cardchild h1 {
font-size: 3em;
text-align: center;
}
.cardchild span {
font-size: 1.5em;
}
.cardchild img {
max-width: 4em;
margin: 1em;
max-width: 5em;
margin: 0.5em;
}
.cardchild {
@ -32,31 +41,41 @@
cursor: default;
background-color: #272525;
border-radius: 5%;
margin: 1em 1em .5em .5em;
width: 20em;
padding: 0.5em 2em 2em 2em;
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;
}
.cardchild:hover {
box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
-webkit-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
-moz-box-shadow: 0 0 234px -3px rgba(250, 236, 236, 0.75);
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;
}
.linktree img {
cursor: pointer;
}
.parent {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.header h1 {
font-size: 2.5em;
font-size: 3.6em;
color: blanchedalmond;
display: inline-table;
}
@ -82,6 +101,16 @@
animation: slide-left 1.5s;
}
.gaybackground {
background-image: url("/gaybackground.png");
}
.animate {
z-index: 10000000;
transform: scale(10000);
transition: 20s;
}
@keyframes slide-left {
from {
transform: translateX(-10000em);
@ -102,6 +131,19 @@
}
}
@keyframes bigsmall {
0% {
max-width: 10em;
}
50% {
width: 10.5em;
max-width: 10.5em;
}
100% {
max-width: 10em;
}
}
@keyframes shake {
0% {
transform: translate(0, 0) rotate(0deg);

View file

@ -1,46 +0,0 @@
import { createSignal } from 'solid-js'
import './App.css'
import HoverComponent from './components/name'
import AdvancedBr from './components/comps'
import Review from './components/api'
function App() {
return (
<>
<div class='header'>
<img src="https://dp.nea.moe/avatar/712639419785412668" class="logo-pfp" alt="Vite logo" />
<HoverComponent />
</div>
<p style={{ display: "none" }}>AdvancedBr my beloved</p>
<AdvancedBr count={10}/>
<div className='parent'>
<div className='cardchild'>
<h1>link tree</h1>
<img src="https://openpgpjs.org/images/logo_proton_mail.png" alt="LMAO IMAGINE BEING BLIND" />
<img src="https://git.gay/assets/img/logo.png" alt="" />
<img src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="" />
</div>
<div className='cardchild'>
<h1>hi :3</h1>
<span style={{
fontSize: "15em",
fontFamily: "monospace"
}}>silly goober who does silly stuff <br/> self proclaimed programmer and progamer <br /> shitposts for fun</span>
</div>
<div className='cardchild'>
<h1>reviews</h1>
<Review/>
</div>
</div>
<AdvancedBr count={10}/>
</>
)
}
export default App

79
src/App.tsx Normal file
View file

@ -0,0 +1,79 @@
import './App.css'
import HoverComponent from './components/name.tsx'
import AdvancedBr from './components/comps.tsx'
import { createSignal } from 'solid-js';
function App() {
function remov() {
for (let i = 0; i < document.styleSheets.length; i++) {
let styleSheet = document.styleSheets[i];
let rules = styleSheet.cssRules || styleSheet.rules;
for (let j = 0; j < rules.length; j++) {
let rule = rules[j];
if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-left")) {
styleSheet.deleteRule(j);
}
}
}
}
const [isAnimating, setIsAnimating] = createSignal(false);
const [animatedwoem, setanimatedwoem] = createSignal(false);
let gitgay = <img onClick={() => {
setIsAnimating(true)
setTimeout(() => {
window.location.href = "https://git.gay/exhq"
}, 200);
gitgay.src = "/gaybackground.png"
}} classList={{ 'gitgayimg': true, 'animate': isAnimating(), 'gaybackground': isAnimating() }} src="https://git.gay/assets/img/logo.png" alt="LMAO IMAGINE BEING BLIND" /> as HTMLImageElement
return (
<>
<div class='header'>
<img onmouseenter={remov} src="https://dp.nea.moe/avatar/712639419785412668.png" class="logo-pfp" alt="LMAO IMAGINE BEING BLIND" />
<HoverComponent />
</div>
<p style={{ display: "none" }}>AdvancedBr my beloved</p>
<AdvancedBr count={6} />
<div class='parent'>
<div class='cardchild'>
<h1>link tree</h1>
<div class='linktree'>
{gitgay}
<img onClick={() => {
setanimatedwoem(true)
setTimeout(() => {
window.location.href = "https://woem.men/@exhq"
}, 200);
}} classList={{ 'woemimg': true, 'animate': animatedwoem() }} src="https://woem.men/files/356134d8-df3b-41dc-ac73-c4420442bf3a" alt="LMAO IMAGINE BEING BLIND" />
</div>
<br />
<div class='linktree'>
<span class='gitgaytext' >Git</span>
<span class='woemtext' >Fedi</span>
</div>
</div>
<div style={{
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
}} class='cardchild'>
<h1>hi :3</h1>
<span>silly goober who does silly stuff <br /> self proclaimed programmer and progamer <br /> shitposts for fun</span>
</div>
<div style={{
opacity: isAnimating() || animatedwoem() ? "0%" : "100%"
}} class='cardchild'>
<h1>reviews</h1>
{/* <Review/> */}
</div>
</div>
<AdvancedBr count={10} />
</>
)
}
export default App

View file

@ -1,38 +0,0 @@
import { createSignal, createEffect } from 'solid-js';
const Review = () => {
// State to store the fetched data
const [data, setData] = createSignal([]);
const [name, setName] = createSignal([]);
let colontree = {}
createEffect(() => {
fetch('https://api.review.exhq.dev/getreviews/')
.then(res => res.json())
.then(jsonData => {
setData(jsonData);
})
.catch(error => {
console.error('Error fetching data:', error);
});
for (let i = 0; i < data().length; i++) {
fetch(`https://discordlookup.mesalytic.moe/v1/user/${data()[i].discordID}`)
.then(res => res.json()).then(console.log)
}
});
return (
<div>
{data().reverse().map(i => (
<li>{i.discordID}</li>
))}
</div>
);
};
export default Review;

View file

@ -1,6 +1,6 @@
// warning: this IS horrible code. its a joke. DO NOT try this at home because
// your local senior programmer CAN and WILL hunt you down
// you have been warned.
export default function AdvancedBr({ count }) {
export default function AdvancedBr({count}: any) {
return new Array(count).fill(null).map(_=>(<br/>))
}

View file

@ -4,12 +4,11 @@ import { removethething } from "./utils";
function HoverComponent() {
let timerId;
const [isHovered, setIsHovered] = createSignal(false);
const [name, setname] = createSignal(true)
const startTimer = () => {
timerId = setTimeout(() => {
executeFunction();
setname(!name())
}, 3000);
};
@ -19,22 +18,12 @@ function HoverComponent() {
timerId = null;
}
};
const executeFunction = () => {
setname(!name())
};
const handleMouseEnter = () => {
removethething()
setIsHovered(true);
startTimer();
};
const handleMouseLeave = () => {
setIsHovered(false);
clearTimer();
};
onCleanup(() => {
clearTimer();
});
@ -43,7 +32,7 @@ function HoverComponent() {
<h1
className="removethisinstantly"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onMouseLeave={clearTimer}
>
{name() ? "ECHO" : "exhq"}
</h1>

42
src/components/name.tsx Normal file
View file

@ -0,0 +1,42 @@
import { createSignal, onCleanup } from "solid-js";
import { removethething } from "./utils.ts";
function HoverComponent() {
let timerId: number|null;
const [name, setname] = createSignal(true)
const startTimer = () => {
timerId = setTimeout(() => {
setname(!name())
}, 3000);
};
const clearTimer = () => {
if (timerId) {
clearTimeout(timerId);
timerId = null;
}
};
const handleMouseEnter = () => {
removethething()
startTimer();
};
onCleanup(() => {
clearTimer();
});
return (
<h1
class="removethisinstantly"
onMouseEnter={handleMouseEnter}
onMouseLeave={clearTimer}
>
{name() ? "ECHO" : "exhq"}
</h1>
);
}
export default HoverComponent;

View file

@ -4,14 +4,14 @@ export function removethething() {
let rules = styleSheet.cssRules || styleSheet.rules;
for (let j = 0; j < rules.length; j++) {
let rule = rules[j];
if (rule.type === CSSRule.KEYFRAMES_RULE && rule.name === "slide-right") {
if (rule.type === CSSRule.KEYFRAMES_RULE && ((rule as CSSKeyframesRule).name === "slide-right" )) {
styleSheet.deleteRule(j);
}
}
}
}
export async function getLatestItems(apiUrl) {
export async function getLatestItems(apiUrl: string) {
try {
const response = await fetch(apiUrl);
if (!response.ok) {

View file

@ -5,4 +5,4 @@ import App from './App'
const root = document.getElementById('root')
render(() => <App />, root)
render(() => <App />, root!)

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

28
tsconfig.app.json Normal file
View file

@ -0,0 +1,28 @@
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"module": "ESNext",
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"]
}

11
tsconfig.json Normal file
View file

@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
]
}

13
tsconfig.node.json Normal file
View file

@ -0,0 +1,13 @@
{
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"skipLibCheck": true,
"module": "ESNext",
"moduleResolution": "bundler",
"allowSyntheticDefaultImports": true,
"strict": true,
"noEmit": true
},
"include": ["vite.config.ts"]
}