randyjc/Rahoot
1
0
Fork 0
mirror of https://github.com/randyjc/Rahoot.git synced 2026-03-14 04:25:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add Prepared Animation

Browse Source
This commit is contained in:
Ralex91
2024-02-01 16:35:10 +01:00
parent 1839f31a21
commit c2db3810ac
10 changed files with 95 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/game/GameWrapper.jsx
View File

@@ -1,6 +1,6 @@
import Image from "next/image"
import Button from "@/components/Button"
import background from "@/assets/2238431_1694.jpg"
import background from "@/assets/background.webp"
import { usePlayerContext } from "@/context/player"
import { useSocketContext } from "@/context/socket"
import { useState } from "react"

2
src/components/game/states/Answers.jsx
View File

@@ -102,7 +102,7 @@ export default function Answers({
<div className="max-w-7xl mx-auto mb-4 w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
<div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
<span className="text-sm translate-y-1">Time</span>
<span>{cooldown}</span>
<span className="anim-timer">{cooldown}</span>
</div>
<div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
<span className="text-sm translate-y-1">Answers</span>

31
src/components/game/states/Prepared.jsx Normal file
View File

@@ -0,0 +1,31 @@
import Circle from "@/components/icons/Circle"
import CricleCheck from "@/components/icons/CricleCheck"
import CricleXmark from "@/components/icons/CricleXmark"
import Rhombus from "@/components/icons/Rhombus"
import Square from "@/components/icons/Square"
import Triangle from "@/components/icons/Triangle"
import { usePlayerContext } from "@/context/player"
import { useEffect } from "react"
/*{ data: { number, total, question } }*/
export default function Prepared() {
const { dispatch } = usePlayerContext()
return (
<section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
<div className="anim-quizz bg-gray-700 p-5 gap-4 rounded-2xl w-80 h-[400px] grid grid-cols-2 shadow-[10px_10px_0_rgba(20,24,29,1)] ">
<div className="button flex justify-center items-center bg-red-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Triangle className="h-14" />
</div>
<div className="button flex justify-center items-center bg-blue-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Rhombus className="h-14" />
</div>
<div className="button flex justify-center items-center bg-yellow-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Square className="h-14" />
</div>
<div className="button flex justify-center items-center bg-green-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Circle className="h-14" />
</div>
</div>
</section>
)
}

3
src/components/game/states/Question.jsx
View File

@@ -1,5 +1,4 @@
import { useSocketContext } from "@/context/socket"
import { useEffect, useRef } from "react"
import { useRef } from "react"
export default function Question({ data: { question } }) {
const barRef = useRef(null)