mirror of
https://github.com/liyunze-coding/RythonDev.git
synced 2026-09-22 07:44:26 +00:00
fixed video bugs
This commit is contained in:
liyunze
parent
e1a9f20d9b
commit
8a0e5dc356
3 changed files with 226 additions and 144 deletions
191
src/components/sections/MoreProjects.svelte
Normal file
191
src/components/sections/MoreProjects.svelte
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
const videos = document.querySelectorAll<HTMLVideoElement>(".playable");
|
||||||
|
|
||||||
|
videos.forEach((video) => {
|
||||||
|
// Ensure the video element supports play and pause methods
|
||||||
|
if (
|
||||||
|
typeof video.play === "function" &&
|
||||||
|
typeof video.pause === "function"
|
||||||
|
) {
|
||||||
|
video.addEventListener("mouseenter", () => {
|
||||||
|
video.play();
|
||||||
|
});
|
||||||
|
|
||||||
|
video.addEventListener("mouseleave", () => {
|
||||||
|
video.pause();
|
||||||
|
video.currentTime = 0;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
videos.forEach((video) => {
|
||||||
|
if (window.innerWidth < 1025) {
|
||||||
|
video.muted = true;
|
||||||
|
video.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// On screen size change
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
videos.forEach((video) => {
|
||||||
|
if (window.innerWidth < 1025) {
|
||||||
|
video.muted = true;
|
||||||
|
video.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="h-fit pt-20 [perspective:1000px] flex flex-col items-center">
|
||||||
|
<div class="w-full max-w-[1440px]">
|
||||||
|
<div
|
||||||
|
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
|
>
|
||||||
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
|
<video
|
||||||
|
class="absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
||||||
|
border-2 border-solid border-white rounded-xl"
|
||||||
|
width="700"
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src="/videos/chess_opencv_demo.webm"
|
||||||
|
type="video/webm"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
|
<video
|
||||||
|
width="700"
|
||||||
|
class="playable absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
||||||
|
border-2 border-solid border-white rounded-xl"
|
||||||
|
>
|
||||||
|
<source
|
||||||
|
src="/videos/chess_opencv_demo.webm"
|
||||||
|
type="video/webm"
|
||||||
|
/>
|
||||||
|
</video>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold mb-5 text-center lg:text-left">
|
||||||
|
Computer Vision Chess bot
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
||||||
|
>
|
||||||
|
A script that plays against opponents on lichess. Uses
|
||||||
|
OpenCV to detect the board and pieces, and the Stockfish
|
||||||
|
chess engine to determine the best moves. Then uses
|
||||||
|
PyAutoGUI to play the moves on the browser.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap lg:justify-start justify-center mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3776AB] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Python
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3178C6] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
OpenCV
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-black text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
PyAutoGUI
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
||||||
|
>
|
||||||
|
<h2 class="text-3xl font-bold mb-5 lg:text-right text-center">
|
||||||
|
Computer Vision AimLab Bot
|
||||||
|
</h2>
|
||||||
|
<p
|
||||||
|
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
|
||||||
|
>
|
||||||
|
A script that plays AimLab, a game that helps improve your
|
||||||
|
aim in FPS games. Uses OpenCV to detect the targets and
|
||||||
|
win32API to move the mouse and click.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#3776AB] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
Python
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="w-fit bg-[#0078D4] text-white
|
||||||
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
transition-colors duration-300"
|
||||||
|
>
|
||||||
|
win32API
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
||||||
|
>
|
||||||
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
|
<video
|
||||||
|
src="/videos/aim_lab_demo.webm"
|
||||||
|
class="absolute max-w-full
|
||||||
|
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
|
||||||
|
border-2 border-solid border-white rounded-xl"
|
||||||
|
width="700"
|
||||||
|
>
|
||||||
|
<source src="/videos/aim_lab_demo.webm" /></video
|
||||||
|
>
|
||||||
|
<!-- svelte-ignore a11y-media-has-caption -->
|
||||||
|
<video
|
||||||
|
width="700"
|
||||||
|
class="playable absolute max-w-full
|
||||||
|
top-1/2 left-1/2
|
||||||
|
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
|
||||||
|
border-2 border-solid border-white rounded-xl"
|
||||||
|
><source src="/videos/aim_lab_demo.webm" /></video
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.image-container video {
|
||||||
|
transition: transform 0.5s ease-in-out;
|
||||||
|
}
|
||||||
|
@media (min-width: 1025px) {
|
||||||
|
.image-container:hover > video {
|
||||||
|
transform: rotateY(0deg) rotateX(0deg) translateZ(0px)
|
||||||
|
translateX(-50%) translateY(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -295,7 +295,9 @@
|
||||||
range of topics from tips on how to get started with setting
|
range of topics from tips on how to get started with setting
|
||||||
up stream to how to grow your audience!
|
up stream to how to grow your audience!
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap mt-5">
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-left mt-5"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-white text-black
|
class="w-fit bg-white text-black
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
|
@ -337,7 +339,9 @@
|
||||||
Easy to setup and the customization possibilities are
|
Easy to setup and the customization possibilities are
|
||||||
endless!
|
endless!
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-end mt-5">
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-[#E34F26] text-white
|
class="w-fit bg-[#E34F26] text-white
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
|
@ -558,7 +562,9 @@
|
||||||
receive instant feedback! Built with Next.JS, TailwindCSS
|
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||||
and TypeScript.
|
and TypeScript.
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-start mt-5">
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-start mt-5"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-black text-white
|
class="w-fit bg-black text-white
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
|
@ -600,7 +606,9 @@
|
||||||
and the Python program will trigger the corresponding
|
and the Python program will trigger the corresponding
|
||||||
keypresses.
|
keypresses.
|
||||||
</p>
|
</p>
|
||||||
<div class="w-full flex flex-row flex-wrap justify-end mt-5">
|
<div
|
||||||
|
class="w-full flex flex-row flex-wrap justify-center lg:justify-end mt-5"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
class="w-fit bg-[#3776AB] text-white
|
class="w-fit bg-[#3776AB] text-white
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
rounded-full px-3 py-1 mr-1 my-1
|
||||||
|
|
@ -624,7 +632,6 @@
|
||||||
class="
|
class="
|
||||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||||
font-bold
|
font-bold
|
||||||
hidden lg:block
|
|
||||||
transition-colors duration-300
|
transition-colors duration-300
|
||||||
hover:bg-white hover:text-blue-500
|
hover:bg-white hover:text-blue-500
|
||||||
">View repository</a
|
">View repository</a
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
import NavBar from "../components/sections/NavBar.astro";
|
import NavBar from "../components/sections/NavBar.astro";
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
||||||
|
import MoreProjects from "../components/sections/MoreProjects.svelte";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Projects" description="View what projects RythonDev has made">
|
<Layout title="Projects" description="View what projects RythonDev has made">
|
||||||
|
|
@ -9,145 +10,11 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
||||||
<div id="projects" class="pt-20">
|
<div id="projects" class="pt-20">
|
||||||
<h1 class="text-5xl text-center mt-10">Projects</h1>
|
<h1 class="text-5xl text-center mt-10">Projects</h1>
|
||||||
<!-- other projects -->
|
<!-- other projects -->
|
||||||
<div
|
<MoreProjects client:load />
|
||||||
class="h-fit pt-20 [perspective:1000px] flex flex-col items-center"
|
</div>
|
||||||
>
|
<div class="pb-20">
|
||||||
<div class="w-full max-w-[1440px]">
|
<ProjectsComponent client:load />
|
||||||
<div
|
|
||||||
class="flex flex-col lg:flex-row justify-center h-fit w-full px-10 lg:px-20"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
|
||||||
>
|
|
||||||
<video
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-45%)_translateY(-50%)] opacity-40
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
width="700"
|
|
||||||
>
|
|
||||||
<source
|
|
||||||
src="/videos/chess_opencv_demo.webm"
|
|
||||||
type="video/webm"
|
|
||||||
/></video
|
|
||||||
>
|
|
||||||
<video
|
|
||||||
width="700"
|
|
||||||
class="playable absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:rotateY(5deg)_rotateX(0deg)_translateZ(-50px)_translateX(-43%)_translateY(-52%)] opacity-1
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
>
|
|
||||||
<source
|
|
||||||
src="/videos/chess_opencv_demo.webm"
|
|
||||||
type="video/webm"
|
|
||||||
/>
|
|
||||||
</video>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-start"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
class="text-3xl font-bold mb-5 text-center lg:text-left"
|
|
||||||
>
|
|
||||||
Computer Vision Chess bot
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-xl text-center lg:text-left lg:max-w-none max-w-lg text-balance"
|
|
||||||
>
|
|
||||||
A script that plays against opponents on lichess.
|
|
||||||
Uses OpenCV to detect the board and pieces, and the
|
|
||||||
Stockfish chess engine to determine the best moves.
|
|
||||||
Then uses PyAutoGUI to play the moves on the
|
|
||||||
browser.
|
|
||||||
</p>
|
|
||||||
<div class="w-full flex flex-row flex-wrap mt-5">
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#3776AB] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Python
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#3178C6] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
OpenCV
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-black text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
PyAutoGUI
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-col-reverse lg:flex-row justify-center h-fit w-full px-10 lg:px-16 mt-10"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit lg:w-1/2 lg:h-[340px] flex flex-col justify-center lg:px-10 items-center lg:items-end"
|
|
||||||
>
|
|
||||||
<h2
|
|
||||||
class="text-3xl font-bold mb-5 lg:text-right text-center"
|
|
||||||
>
|
|
||||||
Computer Vision AimLab Bot
|
|
||||||
</h2>
|
|
||||||
<p
|
|
||||||
class="text-xl text-center lg:text-right lg:max-w-none max-w-lg text-balance"
|
|
||||||
>
|
|
||||||
A script that plays AimLab, a game that helps
|
|
||||||
improve your aim in FPS games. Uses OpenCV to detect
|
|
||||||
the targets and win32API to move the mouse and
|
|
||||||
click.
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
class="w-full flex flex-row flex-wrap justify-end mt-5"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#3776AB] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
Python
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-fit bg-[#0078D4] text-white
|
|
||||||
rounded-full px-3 py-1 mr-1 my-1
|
|
||||||
transition-colors duration-300"
|
|
||||||
>
|
|
||||||
win32API
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="image-container flex w-full lg:ml-auto lg:w-1/2 mb-5 lg:mb-0 aspect-video [perspective:200px] relative lg:mr-5"
|
|
||||||
>
|
|
||||||
<video
|
|
||||||
src="/videos/aim_lab_demo.webm"
|
|
||||||
class="absolute max-w-full
|
|
||||||
top-1/2 left-1/2 [transform:translateX(-48%)_translateY(-48%)_translateZ(-50px)_rotateY(-3deg)] opacity-40
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
width="700"></video>
|
|
||||||
<video
|
|
||||||
src="/videos/aim_lab_demo.webm"
|
|
||||||
width="700"
|
|
||||||
class="playable absolute max-w-full
|
|
||||||
top-1/2 left-1/2
|
|
||||||
[transform:translateX(-50%)_translateY(-50%)_translateZ(-50px)_rotateY(-3deg)] opacity-1
|
|
||||||
border-2 border-solid border-white rounded-xl"
|
|
||||||
></video>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ProjectsComponent />
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -198,7 +65,7 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script is:inline lang="ts">
|
<script is:inline>
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
const videos = document.querySelectorAll(".playable");
|
const videos = document.querySelectorAll(".playable");
|
||||||
|
|
||||||
|
|
@ -217,6 +84,23 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
||||||
video.currentTime = 0;
|
video.currentTime = 0;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
videos.forEach((video) => {
|
||||||
|
if (window.innerWidth < 1025) {
|
||||||
|
video.muted = true;
|
||||||
|
video.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// on screensize change
|
||||||
|
window.addEventListener("resize", () => {
|
||||||
|
videos.forEach((video) => {
|
||||||
|
if (window.innerWidth < 1025) {
|
||||||
|
video.muted = true;
|
||||||
|
// video.play();
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue