Streamer272/reaction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Adds logic

Browse Source
This commit is contained in:
Daniel Svitan 2023-05-16 18:06:22 -07:00
parent aa93ebdbf3
commit 3f57963be7
5 changed files with 76 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Center.astro
View File

@ -1,14 +0,0 @@
---
export interface Props {
direction: "row" | "column" | "row-reverse" | "column-reverse";
}
const { direction = "column" } = Astro.props;
---
<div
class="w-full h-full flex items-center justify-center"
style={`flex-direction: ${direction};`}
>
<slot />
</div>

68
src/components/Home.vue Normal file
View File

@ -0,0 +1,68 @@
<template>
<div
:data-state="state"
:data-error="error"
class="w-full h-full flex items-center justify-center flex-col group data-[state=false]:bg-primary data-[state=true]:bg-accent data-[error=true]:!bg-error"
>
<p v-if="error" class="text-on-accent text-xl">You pressed too early</p>
<p
v-else-if="!captured"
class="group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-xl"
>
When the background turns green, press
<code class="font-dm-bold">Space</code>
</p>
<p v-else class="text-on-accent text-xl">You took {{ captured }} ms</p>
<p
class="fixed bottom-4 right-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent text-lg"
>
Press <code class="font-dm-bold">R</code> to restart
</p>
<a
href="https://github.com/Streamer272/reaction"
class="fixed bottom-4 left-8 group-data-[state=false]:text-on-primary group-data-[state=true]:text-on-accent hover:scale-125 transition-transform text-xl"
>
repo
</a>
</div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
let start = Date.now();
let time = Math.floor(Math.random() * 5_000) + 1_000;
const state = ref(false);
const error = ref(false);
const captured = ref();
let timeoutId: number | undefined;
onMounted(() => {
timeoutId = setTimeout(() => {
state.value = true;
}, time);
document.addEventListener("keydown", (e) => {
if (e.code === "Space" && !captured.value) {
if (state.value && !error.value) {
captured.value = Date.now() - start - time;
} else {
error.value = true;
}
} else if (e.code === "KeyR") {
start = Date.now();
time = Math.floor(Math.random() * 5_000) + 1_000;
state.value = false;
error.value = false;
captured.value = undefined;
if (timeoutId) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
state.value = true;
}, time);
}
});
});
</script>

6
src/layouts/Page.astro
View File

@ -15,10 +15,8 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
</head>
<body class="w-screen h-screen overflow-auto">
<main class="w-full h-full">
<slot />
</main>
<body class="w-screen h-screen overflow-auto font-dm">
<slot />
</body>
</html>

8
src/pages/index.astro
View File

@ -1,10 +1,8 @@
---
import Center from "../components/Center.astro";
import Home from "../components/Home.vue";
import Page from "../layouts/Page.astro";
---
<Page title="Index">
<Center>
<h1>lmao</h1>
</Center>
<Page title="Reaction">
<Home client:load />
</Page>

5
tailwind.config.cjs
View File

@ -3,14 +3,15 @@ module.exports = {
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
theme: {
fontFamily: {
dm: ["DM Sans", "sans-serif"],
"dm-bold": ["DM Sans Bold", "sans-serif"],
dm: ["'DM Sans'", "sans-serif"],
"dm-bold": ["'DM Sans Bold'", "sans-serif"],
},
colors: {
transparent: "transparent",
primary: "#121212",
surface: "#232323",
accent: "#1ed760",
error: "#ff1245",
"on-primary": "#eeeeee",
"on-surface": "#e0e0e0",
"on-accent": "#121212",