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
|
||||
up stream to how to grow your audience!
|
||||
</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
|
||||
class="w-fit bg-white text-black
|
||||
rounded-full px-3 py-1 mr-1 my-1
|
||||
|
|
@ -337,7 +339,9 @@
|
|||
Easy to setup and the customization possibilities are
|
||||
endless!
|
||||
</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
|
||||
class="w-fit bg-[#E34F26] text-white
|
||||
rounded-full px-3 py-1 mr-1 my-1
|
||||
|
|
@ -558,7 +562,9 @@
|
|||
receive instant feedback! Built with Next.JS, TailwindCSS
|
||||
and TypeScript.
|
||||
</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
|
||||
class="w-fit bg-black text-white
|
||||
rounded-full px-3 py-1 mr-1 my-1
|
||||
|
|
@ -600,7 +606,9 @@
|
|||
and the Python program will trigger the corresponding
|
||||
keypresses.
|
||||
</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
|
||||
class="w-fit bg-[#3776AB] text-white
|
||||
rounded-full px-3 py-1 mr-1 my-1
|
||||
|
|
@ -624,7 +632,6 @@
|
|||
class="
|
||||
px-5 py-3 bg-blue-500 rounded-xl opacity-1
|
||||
font-bold
|
||||
hidden lg:block
|
||||
transition-colors duration-300
|
||||
hover:bg-white hover:text-blue-500
|
||||
">View repository</a
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import NavBar from "../components/sections/NavBar.astro";
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
||||
import MoreProjects from "../components/sections/MoreProjects.svelte";
|
||||
---
|
||||
|
||||
<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">
|
||||
<h1 class="text-5xl text-center mt-10">Projects</h1>
|
||||
<!-- other projects -->
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<MoreProjects client:load />
|
||||
</div>
|
||||
<div class="pb-20">
|
||||
<ProjectsComponent client:load />
|
||||
</div>
|
||||
|
||||
<ProjectsComponent />
|
||||
</Layout>
|
||||
|
||||
<style>
|
||||
|
|
@ -198,7 +65,7 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
|||
}
|
||||
</style>
|
||||
|
||||
<script is:inline lang="ts">
|
||||
<script is:inline>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const videos = document.querySelectorAll(".playable");
|
||||
|
||||
|
|
@ -217,6 +84,23 @@ import ProjectsComponent from "../components/sections/ProjectsComponent.svelte";
|
|||
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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue