Lots of changes
This commit is contained in:
Rike-Benjamin Schuppner
parent
931534b990
commit
42baea3403
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
:root {
|
||||
--foreground-rgb: 0, 0, 0;
|
||||
--background-start-rgb: 214, 219, 220;
|
||||
--background-start-rgb: 255, 255, 255;
|
||||
--background-end-rgb: 255, 255, 255;
|
||||
}
|
||||
|
||||
|
|
@ -24,6 +24,43 @@ body {
|
|||
rgb(var(--background-end-rgb))
|
||||
)
|
||||
rgb(var(--background-start-rgb));
|
||||
background: white;
|
||||
}
|
||||
|
||||
.crt {
|
||||
background: linear-gradient(to top, #000000, #000000, #333333, #333333);
|
||||
background-size: cover;
|
||||
background-size: 100% 2px;
|
||||
|
||||
color: #00ff00;
|
||||
font-size: 50px;
|
||||
/* text-align: center; */
|
||||
text-shadow: 0 0 10px #00ff00;
|
||||
|
||||
filter: blur(.8px);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.red-bot {
|
||||
color: rgb(235, 90, 90);
|
||||
}
|
||||
|
||||
.blue-bot {
|
||||
color: rgb(94, 158, 217);
|
||||
}
|
||||
|
||||
@media screen{
|
||||
.crt {
|
||||
animation: scanlines infinite 55s linear ;
|
||||
}
|
||||
}
|
||||
@keyframes scanlines {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 0 -10px;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
|
|
|||
366
app/maze.tsx
366
app/maze.tsx
|
|
@ -1,14 +1,18 @@
|
|||
"use client"
|
||||
|
||||
import React, {
|
||||
useEffect
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from "react";
|
||||
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
import { AnimatePresence, motion } from "framer-motion"
|
||||
|
||||
type Pos = [number, number];
|
||||
|
||||
const cellSize = 32; // Size of each cell in the SVG
|
||||
const cellSize = 26; // Size of each cell in the SVG
|
||||
const offset = 0.2 * cellSize; // Offset for the outline
|
||||
let radius = 0.5 * cellSize - offset;
|
||||
let radius_inner = offset;
|
||||
|
|
@ -235,12 +239,89 @@ const createPath = (cluster: Pos[]) => {
|
|||
return paths;
|
||||
});
|
||||
|
||||
console.log(pathCommands);
|
||||
return pathCommands.join(" ");
|
||||
};
|
||||
|
||||
function usePrevious(value: any) {
|
||||
const ref = useRef();
|
||||
useEffect(() => {
|
||||
ref.current = value; //assign the value of ref to the argument
|
||||
}, [value]); //this code will run when the value of 'value' changes
|
||||
return ref.current; //in the end, return the current ref value.
|
||||
}
|
||||
|
||||
function Bot({ position, color, width }: { position: Pos, color: string, width: number }) {
|
||||
function Food({ position, color }: { position: Pos, color: string }) {
|
||||
const [x, y] = position;
|
||||
return (
|
||||
<motion.circle
|
||||
cx={(0.5 + x) * cellSize}
|
||||
cy={(0.5 + y) * cellSize}
|
||||
|
||||
r={cellSize / 5}
|
||||
opacity={1}
|
||||
className={color}
|
||||
// transition={{ duration: 1 }}
|
||||
// initial={{ opacity: 0 }}
|
||||
// animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0, r: cellSize }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
// // from https://www.30secondsofcode.org/react/s/use-interval-explained/
|
||||
// const useInterval = (callback: any, delay: number) => {
|
||||
// const savedCallback = React.useRef();
|
||||
|
||||
// React.useEffect(() => {
|
||||
// savedCallback.current = callback;
|
||||
// }, [callback]);
|
||||
|
||||
// React.useEffect(() => {
|
||||
// function tick() {
|
||||
// savedCallback?.current();
|
||||
// }
|
||||
// if (delay !== null) {
|
||||
// let id = setInterval(tick, delay);
|
||||
// return () => clearInterval(id);
|
||||
// }
|
||||
// }, [delay]);
|
||||
// };
|
||||
|
||||
function Pacman({ direction, mouthAngle, color }: { direction: number, mouthAngle: number, color: string }) {
|
||||
|
||||
const pacmanPath = (angle: number) => {
|
||||
const angle_rad = angle / 180 * Math.PI;
|
||||
const radius = 8;
|
||||
const x = radius * Math.cos(angle_rad / 2);
|
||||
const y = radius * Math.sin(angle_rad / 2);
|
||||
return `M 0,0 L ${x},${-y} A ${radius},${radius} 0 1 0 ${x},${y} Z`;
|
||||
}
|
||||
|
||||
return (
|
||||
<g transform={ `rotate(${direction})` }
|
||||
// style={{
|
||||
// transform: `rotate(${direction})`
|
||||
// }}
|
||||
// animate={{
|
||||
// rotate: direction
|
||||
// }}
|
||||
// transition={{ type: "spring", stiffness: 100 }}
|
||||
className={color}>
|
||||
<path
|
||||
d={pacmanPath(mouthAngle)}
|
||||
stroke="black"
|
||||
strokeWidth={0.2}
|
||||
/>
|
||||
<motion.circle cx={2.7} cy={direction < 160 ? -4.5 : 4.5} r={1.5}
|
||||
className={`eye`}
|
||||
stroke="black"
|
||||
fill="yellow"
|
||||
strokeWidth={0.2}
|
||||
/>
|
||||
</g>)
|
||||
}
|
||||
|
||||
function Bot({ position, color, say, width, turnsAgo }: { position: Pos, color: string, say: string, width: number, turnsAgo: number }) {
|
||||
const leftSide = position[0] < width / 2;
|
||||
const inHomezone = () => {
|
||||
switch (color) {
|
||||
|
|
@ -251,6 +332,24 @@ function Bot({ position, color, width }: { position: Pos, color: string, width:
|
|||
return !leftSide;
|
||||
}
|
||||
}
|
||||
const [direction, setDirection] = useState(leftSide ? 0 : 180);
|
||||
const oldPosition = usePrevious(position);
|
||||
|
||||
// const [mouthAngleTL, setMouthAngleTL] = useState(0);
|
||||
// useInterval(() => setMouthAngleTL(mouthAngleTL + 0.08), 10);
|
||||
|
||||
const mouthAngle = 50; // Math.abs(50 * Math.sin(mouthAngleTL));
|
||||
|
||||
useEffect(() => {
|
||||
if (oldPosition) {
|
||||
const dx = position[0] - oldPosition[0];
|
||||
const dy = position[1] - oldPosition[1];
|
||||
if (dx < 0) setDirection(180);
|
||||
else if (dy < 0) setDirection(270);
|
||||
else if (dx > 0) setDirection(0);
|
||||
else if (dy > 0) setDirection(90);
|
||||
}
|
||||
}, [oldPosition]);
|
||||
|
||||
useEffect(() => {
|
||||
anime.timeline()
|
||||
|
|
@ -269,27 +368,121 @@ function Bot({ position, color, width }: { position: Pos, color: string, width:
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<use transform={`translate(${(position[0]) * cellSize}, ${(position[1]) * cellSize}) scale(3)`} href={inHomezone() ? `#ghost` : `#pacman`} className={color} />
|
||||
<motion.g
|
||||
style={{
|
||||
transform: `translateX(${(position[0] + 0.5) * cellSize}) translateY(${(position[0] + 0.5) * cellSize}) scale(${cellSize / 16})`,
|
||||
zIndex: 50 - turnsAgo
|
||||
}}
|
||||
animate={{
|
||||
x: (position[0] + 0.5) * cellSize,
|
||||
y: (position[1] + 0.5) * cellSize,
|
||||
scale: cellSize / 16
|
||||
}}
|
||||
transition={{ duration: 0.1 }}
|
||||
>
|
||||
{
|
||||
inHomezone() ? (
|
||||
<g
|
||||
id="ghost"
|
||||
className={`${color} ghost`}
|
||||
>
|
||||
|
||||
{/* Round path: // M -8 0 C -8 -4.4 -4.4 -8 0 -8 C 4.4 -8 8 -4.4 8 0 L 8 8 C 8 9 6.6667 5.6 6 5.6 S 4.6667 8.19 4 8.19 S 2.6667 5.6 2 5.6 S 0.6667 8.19 0 8.19 S -1.3333 5.6 -2 5.6 S -3.3333 8.19 -4 8.19 S -5.3333 5.6 -6 5.6 S -8 9 -8 8 C -8 5.3333 -8 2.6667 -8 0 Z */}
|
||||
{/* Straight path: // M -8 0 C -8 -4.4 -4.4 -8 0 -8 C 4.4 -8 8 -4.4 8 0 L 8 8 L 6 5.6 L 4 8 L 2 5.6 L 0 8 L -2 5.6 L -4 8 L -6 5.6 L -8 8 L -8 0 Z */}
|
||||
|
||||
<path d="M -8 0 C -8 -4.4 -4.4 -8 0 -8 C 4.4 -8 8 -4.4 8 0 L 8 8 C 8 9 6.6667 5.6 6 5.6 S 4.6667 8.19 4 8.19 S 2.6667 5.6 2 5.6 S 0.6667 8.19 0 8.19 S -1.3333 5.6 -2 5.6 S -3.3333 8.19 -4 8.19 S -5.3333 5.6 -6 5.6 S -8 9 -8 8 C -8 5.3333 -8 2.6667 -8 0 Z"
|
||||
|
||||
|
||||
stroke="black"
|
||||
strokeWidth={0.2}
|
||||
opacity={0.9}
|
||||
></path>
|
||||
<path d="M -3.2 1.1 C -2.2 1.1 -1.4 0.1 -1.4 -1.2 C -1.4 -2.5 -2.2 -3.6 -3.2 -3.6 C -4.2 -3.6 -5.1 -2.5 -5.1 -1.2 C -5.1 0.1 -4.2 1.1 -3.2 1.1 Z
|
||||
M 1.8 1.1 C 2.8 1.1 3.6 0.1 3.6 -1.2 C 3.6 -2.5 2.8 -3.6 1.8 -3.6 C 0.8 -3.6 -0 -2.5 -0 -1.2 C -0 0.1 0.8 1.1 1.8 1.1 Z"
|
||||
stroke="black"
|
||||
strokeWidth={0.2}
|
||||
fill="white"
|
||||
></path>
|
||||
<path d="M -3.5 0 C -3.1 0 -2.8 -0.4 -2.8 -0.9 C -2.8 -1.5 -3.1 -1.9 -3.5 -1.9 C -3.9 -1.9 -4.2 -1.5 -4.2 -0.9 C -4.2 -0.4 -3.9 0 -3.5 0 Z
|
||||
M 1.5 0 C 1.9 0 2.2 -0.4 2.2 -0.9 C 2.2 -1.5 1.9 -1.9 1.5 -1.9 C 1.1 -1.9 0.8 -1.5 0.8 -0.9 C 0.8 -0.4 1.1 0 1.5 0 Z"
|
||||
stroke="black"
|
||||
strokeWidth={0.2}
|
||||
fill="black"
|
||||
>
|
||||
</path>
|
||||
</g>
|
||||
) : (
|
||||
<Pacman direction={direction} mouthAngle={mouthAngle} color={`${color} pacman`}></Pacman>
|
||||
)
|
||||
}
|
||||
<text y="-10" className="sayBg">{say}</text>
|
||||
<text y="-10" className="say">{say}</text>
|
||||
</motion.g>
|
||||
)
|
||||
}
|
||||
|
||||
function Walls({ shape, walls }: { shape: Pos, walls: Pos[] }) {
|
||||
const clusters = useMemo(() => findClusters(shape, walls), [shape, walls]);
|
||||
const [width, height] = shape;
|
||||
|
||||
function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
||||
return (
|
||||
<g id="maze">
|
||||
<line x1={(width) * cellSize / 2} y1={0.3 * cellSize}
|
||||
x2={width * cellSize / 2} y2={(height - 0.3) * cellSize} className="middleLine blackLine" />
|
||||
<line x1={(width - 0.1) * cellSize / 2} y1={0.3 * cellSize}
|
||||
x2={(width - 0.1) * cellSize / 2} y2={(height - 0.3) * cellSize} className="middleLine blueLine" />
|
||||
<line x1={(width + 0.1) * cellSize / 2} y1={0.3 * cellSize}
|
||||
x2={(width + 0.1) * cellSize / 2} y2={(height - 0.3) * cellSize} className="middleLine redLine" />
|
||||
{walls.map(([x, y], index) => (
|
||||
<rect
|
||||
key={`${x},${y}`}
|
||||
x={x * cellSize}
|
||||
y={y * cellSize}
|
||||
width={cellSize}
|
||||
height={cellSize}
|
||||
opacity="0"
|
||||
// fill="lightblue"
|
||||
stroke="lightgrey"
|
||||
/>
|
||||
))}
|
||||
{clusters.map((cluster, index) => (
|
||||
<path
|
||||
className="maze"
|
||||
key={`${cluster[0]},${cluster[1]}-${cluster.length}`}
|
||||
d={createPath(cluster)}
|
||||
// stroke="lightblue"
|
||||
// stroke={ dark_mode ? "url(#grad)" : "black" }
|
||||
stroke="url(#grad)"
|
||||
strokeWidth="2"
|
||||
//fill={ dark_mode ? "#ffa" : "black" }
|
||||
fill="black"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function Maze({ game_uuid, shape, walls, food, bots, team_names, say, whowins, gameover, round, turn }:
|
||||
{
|
||||
game_uuid: string,
|
||||
shape: Pos,
|
||||
walls: Pos[],
|
||||
food: Pos[],
|
||||
a: Pos,
|
||||
b: Pos,
|
||||
x: Pos,
|
||||
y: Pos,
|
||||
bots: [Pos, Pos, Pos, Pos],
|
||||
team_names: [string, string],
|
||||
say: [string, string, string, string],
|
||||
whowins: number | null,
|
||||
gameover: boolean
|
||||
gameover: boolean,
|
||||
round: number,
|
||||
turn: number,
|
||||
}
|
||||
) {
|
||||
const [width, height] = shape;
|
||||
const clusters = findClusters(shape, walls);
|
||||
const [a, x, b, y] = bots;
|
||||
const [sayA, sayX, sayB, sayY] = say;
|
||||
|
||||
useEffect(() => {
|
||||
if (game_uuid) {
|
||||
|
|
@ -310,6 +503,12 @@ function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
|||
easing: 'linear',
|
||||
duration: 2000
|
||||
}, 2000)
|
||||
.add({
|
||||
targets: '#mazebox #maze path',
|
||||
strokeWidth: 0,
|
||||
easing: 'linear',
|
||||
duration: 2000
|
||||
}, 4000)
|
||||
.add({
|
||||
targets: '#mazebox .foodblue',
|
||||
opacity: [0, 1],
|
||||
|
|
@ -333,6 +532,12 @@ function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
|||
opacity: [0, 1],
|
||||
easing: 'linear',
|
||||
duration: 2000,
|
||||
}, 3500)
|
||||
.add({
|
||||
targets: '#mazebox .middleLine',
|
||||
opacity: [0, 1],
|
||||
easing: 'linear',
|
||||
duration: 2000,
|
||||
}, 3500);
|
||||
}
|
||||
}, [walls, game_uuid]);
|
||||
|
|
@ -371,12 +576,13 @@ function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
|||
|
||||
|
||||
return (
|
||||
<div id="mazebox">
|
||||
<div id="mazebox" className="object-fill">
|
||||
<svg
|
||||
width={width * cellSize}
|
||||
height={height * cellSize}
|
||||
// width={width * cellSize}
|
||||
// height={height * cellSize}
|
||||
viewBox={`0 0 ${width * cellSize} ${height * cellSize}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ overflow: "visible" }}
|
||||
>
|
||||
<style type="text/css">{`
|
||||
line {
|
||||
|
|
@ -385,11 +591,11 @@ function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
|||
stroke-width: 3;
|
||||
}
|
||||
.foodblue {
|
||||
stroke: black;
|
||||
// stroke: black;
|
||||
fill: rgb(94, 158, 217);
|
||||
}
|
||||
.foodred {
|
||||
stroke: black;
|
||||
// stroke: black;
|
||||
fill: rgb(235, 90, 90);
|
||||
}
|
||||
.blue {
|
||||
|
|
@ -398,6 +604,28 @@ function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
|||
.red {
|
||||
fill: rgb(235, 90, 90);
|
||||
}
|
||||
.blueLine {
|
||||
stroke: rgb(94, 158, 217);
|
||||
}
|
||||
.redLine {
|
||||
stroke: rgb(235, 90, 90);
|
||||
}
|
||||
.sayBg {
|
||||
stroke-width: 1.7px;
|
||||
stroke: white;
|
||||
font-size: 7px;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
z-index: 90;
|
||||
}
|
||||
.say {
|
||||
// stroke-width: 0.2px;
|
||||
// stroke: white;
|
||||
font-size: 7px;
|
||||
text-anchor: middle;
|
||||
dominant-baseline: middle;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.gameover {
|
||||
fill: #FFC903;
|
||||
|
|
@ -416,101 +644,37 @@ function Maze({ game_uuid, shape, walls, food, a, b, x, y, whowins, gameover }:
|
|||
<stop stopColor="red" offset="50%" />
|
||||
<stop stopColor="red" offset="100%" />
|
||||
</linearGradient>
|
||||
<g id="pacman">
|
||||
<path d="M 9.98 7.73
|
||||
A 4.38 4.38 0 1 1 9.98 3.8
|
||||
L 6.05 5.8
|
||||
Z"
|
||||
/>
|
||||
</g>
|
||||
|
||||
<g id="ghost">
|
||||
<path d="M 2 6
|
||||
C 2 3.79 3.8 2 6 2
|
||||
C 8.21 2 10 3.8 10 6
|
||||
L 10 10
|
||||
L 9.01 8.81
|
||||
L 8.01 10
|
||||
L 7 8.81
|
||||
L 6.01 10
|
||||
L 5.01 8.81
|
||||
L 4 10
|
||||
L 3 8.81
|
||||
L 2 10
|
||||
L 2 6
|
||||
Z
|
||||
M 4.39 6.54
|
||||
C 4.9 6.54 5.31 6.03 5.31 5.38
|
||||
C 5.31 4.74 4.9 4.22 4.39 4.22
|
||||
C 3.88 4.22 3.47 4.74 3.47 5.38
|
||||
C 3.47 6.03 3.88 6.54 4.39 6.54
|
||||
Z
|
||||
M 6.9 6.54
|
||||
C 7.41 6.54 7.82 6.03 7.82 5.38
|
||||
C 7.82 4.74 7.41 4.22 6.9 4.22
|
||||
C 6.39 4.22 5.98 4.74 5.98 5.38
|
||||
C 5.98 6.03 6.39 6.54 6.9 6.54
|
||||
Z
|
||||
M 4.25 6
|
||||
C 4.44 6 4.6 5.79 4.6 5.53
|
||||
C 4.6 5.27 4.44 5.05 4.25 5.05
|
||||
C 4.05 5.05 3.89 5.27 3.89 5.53
|
||||
C 3.89 5.79 4.05 6 4.25 6
|
||||
Z
|
||||
M 6.76 6
|
||||
C 6.95 6 7.11 5.79 7.11 5.53
|
||||
C 7.11 5.27 6.95 5.05 6.76 5.05
|
||||
C 6.56 5.05 6.4 5.27 6.4 5.53
|
||||
C 6.4 5.79 6.56 6 6.76 6
|
||||
Z"></path>
|
||||
</g>
|
||||
|
||||
</defs>
|
||||
|
||||
<g id="maze">
|
||||
{walls.map(([x, y], index) => (
|
||||
<rect
|
||||
key={`${x},${y}`}
|
||||
x={x * cellSize}
|
||||
y={y * cellSize}
|
||||
width={cellSize}
|
||||
height={cellSize}
|
||||
opacity="0"
|
||||
// fill="lightblue"
|
||||
stroke="lightgrey"
|
||||
/>
|
||||
))}
|
||||
{clusters.map((cluster, index) => (
|
||||
<path
|
||||
className="maze"
|
||||
key={`${cluster[0]},${cluster[1]}-${cluster.length}`}
|
||||
d={createPath(cluster)}
|
||||
// stroke="lightblue"
|
||||
stroke="url(#grad)"
|
||||
strokeWidth="2"
|
||||
fill="#ffa"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="bevel"
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
<Walls shape={shape} walls={walls}></Walls>
|
||||
<AnimatePresence>
|
||||
{food.map(([x, y], index) => (
|
||||
<circle key={index} cx={(0.5 + x) * cellSize} cy={(0.5 + y) * cellSize} r={cellSize / 5} className={x < width / 2 ? "foodblue" : "foodred"}></circle>
|
||||
<Food key={`${x},${y}`} position={[x, y]} color={x < width / 2 ? "foodblue" : "foodred"}></Food>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
|
||||
<Bot position={a} key="botA" color="blue" width={width}></Bot>
|
||||
<Bot position={b} key="botB" color="blue" width={width}></Bot>
|
||||
<Bot position={x} key="botX" color="red" width={width}></Bot>
|
||||
<Bot position={y} key="botY" color="red" width={width}></Bot>
|
||||
<Bot position={a} key="botA" color="blue" say={sayA} width={width} turnsAgo={turn}></Bot>
|
||||
<Bot position={x} key="botX" color="red" say={sayX} width={width} turnsAgo={(turn + 3) % 4}></Bot>
|
||||
<Bot position={b} key="botB" color="blue" say={sayB} width={width} turnsAgo={(turn + 2) % 4}></Bot>
|
||||
<Bot position={y} key="botY" color="red" say={sayY} width={width} turnsAgo={(turn + 1) % 4}></Bot>
|
||||
|
||||
{
|
||||
gameover ? (<text fontSize="100" className="gameover"
|
||||
x="50%" y="50%"
|
||||
gameover ? (<>
|
||||
<text fontSize="100" className="gameover"
|
||||
x="50%" y="25%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
>
|
||||
GAME OVER
|
||||
</text>) : null
|
||||
</text>
|
||||
<text fontSize="100" className="gameover"
|
||||
x="50%" y="75%"
|
||||
dominantBaseline="middle"
|
||||
textAnchor="middle"
|
||||
>
|
||||
{ whowins == 2 ? "DRAW" : `${team_names[whowins]} wins!` }
|
||||
</text>
|
||||
</>) : null
|
||||
}
|
||||
|
||||
</svg>
|
||||
|
|
|
|||
16
app/page.tsx
16
app/page.tsx
|
|
@ -1,17 +1,7 @@
|
|||
import Image from "next/image";
|
||||
import Pelita from "./pelita";
|
||||
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col items-center justify-between p-24">
|
||||
<div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
|
||||
|
||||
<Pelita>
|
||||
|
||||
</Pelita>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
return (<>
|
||||
<Pelita></Pelita>
|
||||
</>);
|
||||
}
|
||||
|
|
|
|||
255
app/pelita.tsx
255
app/pelita.tsx
|
|
@ -1,9 +1,9 @@
|
|||
"use client"
|
||||
|
||||
import React, {
|
||||
ReactNode,
|
||||
Reducer,
|
||||
useEffect,
|
||||
useRef
|
||||
useReducer
|
||||
} from "react";
|
||||
|
||||
|
||||
|
|
@ -11,130 +11,207 @@ import Maze from "./maze";
|
|||
import ZMQReceiver from "./zmqreceiver";
|
||||
import TypewriterText from "./typewritertext";
|
||||
import { GameState } from "./zmqreceiver";
|
||||
import anime from "animejs";
|
||||
|
||||
interface GameStats {
|
||||
points: [number, number];
|
||||
errors: [number, number];
|
||||
kills: [number, number, number, number];
|
||||
deaths: [number, number, number, number];
|
||||
time: [number, number];
|
||||
type PelitaState = "initial" | "movie" | "intro" | "match" | "faulted";
|
||||
type PelitaEvent = "start-movie" | "start-intro" | "game-playing" | "clear-page" | "fail";
|
||||
|
||||
const MAX_LINES = 20;
|
||||
|
||||
const reducer: Reducer<PelitaState, PelitaEvent> = (state, event) => {
|
||||
switch (state) {
|
||||
case "initial":
|
||||
if (event === "start-movie") return "movie";
|
||||
break;
|
||||
case "movie":
|
||||
if (event === "start-intro") return "intro";
|
||||
break;
|
||||
case "intro":
|
||||
if (event === "game-playing") return "match";
|
||||
if (event === "clear-page") return "intro";
|
||||
break;
|
||||
case "match":
|
||||
if (event === "game-playing") return "match";
|
||||
if (event === "clear-page") return "intro";
|
||||
break;
|
||||
}
|
||||
return state;
|
||||
};
|
||||
|
||||
function PelitaMain({ gameState }: { gameState: GameState }) {
|
||||
const [team1, team2] = gameState.team_names;
|
||||
|
||||
return <div id="main">
|
||||
<h2 className="flex flex-row text-lg p-2">
|
||||
<span className="basis-1/2 text-right w-64 blue-bot"><b>{team1}</b> {gameState.game_stats.score[0]}</span>
|
||||
<span className="basis-1 px-2">:</span>
|
||||
<span className="basis-1/2 text-left w-64 red-bot">{gameState.game_stats.score[1]} <b>{team2}</b></span>
|
||||
</h2>
|
||||
<div className="flex flex-row text-xs">
|
||||
<div className="basis-1/2 w-64 px-2">Errors: {gameState.game_stats.num_errors[0]}, Kills: {gameState.game_stats.kills[0] + gameState.game_stats.kills[2]}, Deaths: {gameState.game_stats.deaths[0] + gameState.game_stats.deaths[2]}, Time: {gameState.game_stats.team_time[0].toFixed(2)} </div>
|
||||
<div className="basis-1/2 text-right w-64 px-2">Errors: {gameState.game_stats.num_errors[1]}, Kills: {gameState.game_stats.kills[1] + gameState.game_stats.kills[3]}, Deaths: {gameState.game_stats.deaths[1] + gameState.game_stats.deaths[3]}, Time: {gameState.game_stats.team_time[1].toFixed(2)} </div>
|
||||
</div>
|
||||
|
||||
<Maze
|
||||
key={gameState.game_uuid}
|
||||
game_uuid={gameState.game_uuid}
|
||||
shape={gameState.shape}
|
||||
walls={gameState.walls}
|
||||
food={gameState.food}
|
||||
bots={gameState.bots}
|
||||
team_names={gameState.team_names}
|
||||
say={gameState.say}
|
||||
whowins={gameState.whowins}
|
||||
gameover={gameState.gameover}
|
||||
round={gameState.round}
|
||||
turn={gameState.turn}
|
||||
>
|
||||
</Maze>
|
||||
|
||||
<div className="flex flex-row text-xs text-slate-600">
|
||||
<div className="basis-1/2 w-64 px-2">ᗧ Pelita Tournament, ASPP 2024 Ηράκλειο</div>
|
||||
<div className="basis-1/2 text-right w-64 px-2">Round {gameState.round ?? "-"}/{gameState.max_rounds}</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
function Pelita() {
|
||||
const initialState: PelitaState = "initial";
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
|
||||
const [showPre, setShowPre] = React.useState(true);
|
||||
const [showMain, setShowMain] = React.useState(true);
|
||||
const [getText, setText] = React.useState<string[]>([]);
|
||||
const [typewriterText, setTypewriterText] = React.useState<string[]>([]);
|
||||
|
||||
const [gameUUID, setGameUUID] = React.useState("");
|
||||
const [shape, setShape] = React.useState<[number, number]>([0, 0]);
|
||||
const [walls, setWalls] = React.useState<[number, number][]>([]);
|
||||
const [food, setFood] = React.useState<[number, number][]>([]);
|
||||
const [bots, setBots] = React.useState<[number, number][]>([[0, 0], [0, 0], [0, 0], [0, 0]]);
|
||||
const [gameState, setGameState] = React.useState<GameState>();
|
||||
|
||||
const [team1, setTeam1] = React.useState("");
|
||||
const [team2, setTeam2] = React.useState("");
|
||||
const bg_color = ((state) => {
|
||||
switch (state) {
|
||||
case "initial":
|
||||
case "movie":
|
||||
case "intro":
|
||||
return "#000"
|
||||
|
||||
const [stats, setStats] = React.useState<GameStats | null>(null);
|
||||
const [whoWins, setWhoWins] = React.useState<number | null>(null);
|
||||
const [gameOver, setGameOver] = React.useState<boolean>(false);
|
||||
case "match":
|
||||
default:
|
||||
return "#fff";
|
||||
}
|
||||
|
||||
})(state);
|
||||
|
||||
|
||||
const crt = ((state) => {
|
||||
switch (state) {
|
||||
case "initial":
|
||||
case "movie":
|
||||
case "intro":
|
||||
return "crt"
|
||||
|
||||
case "match":
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
|
||||
})(state);
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
anime.timeline()
|
||||
.add({
|
||||
targets: 'body',
|
||||
background: bg_color,
|
||||
easing: 'linear',
|
||||
duration: 2000,
|
||||
}, 3000)
|
||||
}, [bg_color]);
|
||||
|
||||
const flip = () => {
|
||||
//setShowMain(!showMain);
|
||||
//setShowPre(!showPre);
|
||||
};
|
||||
|
||||
const updateGameState = (gameState: { '__data__': GameState }) => {
|
||||
if (gameState['__data__']) {
|
||||
// if (gameUUID != gameState['__data__']['game_uuid']) {
|
||||
setGameUUID((oldUUID) => {
|
||||
if (oldUUID != gameState['__data__']['game_uuid']) {
|
||||
console.log("UUID changed", gameState['__data__']['game_uuid'], oldUUID);
|
||||
setShape(gameState['__data__']['shape'])
|
||||
setWalls(gameState['__data__']['walls']);
|
||||
}
|
||||
return gameState['__data__']['game_uuid'];
|
||||
})
|
||||
// }
|
||||
setFood(gameState['__data__']['food']);
|
||||
setBots(gameState['__data__']['bots']);
|
||||
setTeam1(gameState['__data__']['team_names'][0]);
|
||||
setTeam2(gameState['__data__']['team_names'][1]);
|
||||
setStats(
|
||||
{
|
||||
"deaths": gameState['__data__']['deaths'],
|
||||
"kills": gameState['__data__']['kills'],
|
||||
"errors": gameState['__data__']['num_errors'],
|
||||
"points": gameState['__data__']['score'],
|
||||
"time": gameState['__data__']['team_time'],
|
||||
}
|
||||
);
|
||||
setWhoWins(gameState['__data__']['whowins']);
|
||||
setGameOver(gameState['__data__']['gameover']);
|
||||
const updateGameState = (gameState: GameState) => {
|
||||
dispatch("game-playing");
|
||||
setGameState((oldState) => {
|
||||
if (oldState?.game_uuid === gameState.game_uuid) {
|
||||
// we keep the walls array so that the effects are not re-run
|
||||
// TODO: Maybe the effect should depend on only the game_uuid having changed?
|
||||
const newState = {
|
||||
...gameState,
|
||||
"walls": oldState.walls,
|
||||
};
|
||||
return newState;
|
||||
}
|
||||
return gameState;
|
||||
});
|
||||
}
|
||||
|
||||
const updateMessage = (msg: string) => {
|
||||
setText(oldText => [...oldText, msg]);
|
||||
let split_str = msg.split(/\r?\n/);
|
||||
setTypewriterText(oldText => [...oldText, ...split_str]);
|
||||
}
|
||||
|
||||
const clearPage = () => {
|
||||
setText([]);
|
||||
dispatch("clear-page");
|
||||
setTypewriterText([]);
|
||||
}
|
||||
|
||||
const a = bots[0];
|
||||
const b = bots[2];
|
||||
const x = bots[1];
|
||||
const y = bots[3];
|
||||
const handleClick = async () => {
|
||||
switch (state) {
|
||||
case "initial":
|
||||
dispatch("start-movie");
|
||||
break;
|
||||
case "movie":
|
||||
dispatch("start-intro");
|
||||
break
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
function showIntro() {
|
||||
return <TypewriterText text={typewriterText} lines={MAX_LINES}></TypewriterText>;
|
||||
}
|
||||
|
||||
function inner() {
|
||||
|
||||
if (state == "initial") {
|
||||
return <button onClick={handleClick}>Start Movie</button>;
|
||||
} else if (state == "movie") {
|
||||
return <video autoPlay controls onEnded={handleClick}>
|
||||
<source src={"Pelita Supercut ASPP Heraklion 2024.mp4"} type="video/mp4" />
|
||||
</video>;
|
||||
} else if (state == "intro" || state == "match") {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 className="fixed top-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
|
||||
<h1 className="fixed top-0 left-0 z-20 w-full px-24 py-4 text-xl">
|
||||
ᗧ Pelita Tournament 2024
|
||||
</h1>
|
||||
|
||||
{showPre ?
|
||||
getText.map((t, i) => (<TypewriterText key={i} text={t}></TypewriterText>))
|
||||
: null}
|
||||
{state === "intro" ? showIntro() : null}
|
||||
|
||||
|
||||
{showMain ?
|
||||
<div id="main">
|
||||
{gameUUID ?
|
||||
(<>
|
||||
<h2 className="flex flex-row text-lg">
|
||||
<span className="basis-1/2"><b>{team1}</b> ({stats.points[0]})</span>
|
||||
<span className="basis-1/2 text-right"><b>{team2}</b> ({stats.points[1]})</span>
|
||||
</h2>
|
||||
<div className="flex flex-row">
|
||||
<div className="basis-1/2">Errors: {stats.errors[0]}, Kills: {stats.kills[0] + stats.kills[2]}, Deaths: {stats.deaths[0] + stats.deaths[2]}, Time: {stats.time[0].toFixed(2)} </div>
|
||||
<div className="basis-1/2 text-right">Errors: {stats.errors[1]}, Kills: {stats.kills[1] + stats.kills[3]}, Deaths: {stats.deaths[1] + stats.deaths[3]}, Time: {stats.time[1].toFixed(2)} </div>
|
||||
</div>
|
||||
</>)
|
||||
: null}
|
||||
|
||||
<Maze
|
||||
key={gameUUID}
|
||||
game_uuid={gameUUID}
|
||||
shape={shape}
|
||||
walls={walls}
|
||||
food={food}
|
||||
a={a}
|
||||
b={b}
|
||||
x={x}
|
||||
y={y}
|
||||
whowins={whoWins}
|
||||
gameover={gameOver}>
|
||||
</Maze>
|
||||
<p className='text-xs text-slate-600 text-right'>{gameUUID}</p>
|
||||
|
||||
</div>
|
||||
{state === "match" ?
|
||||
<PelitaMain gameState={gameState}></PelitaMain>
|
||||
: null
|
||||
}
|
||||
|
||||
<ZMQReceiver url='ws://127.0.0.1:5556' sendGameState={updateGameState} sendMessage={updateMessage} sendClearPage={clearPage}></ZMQReceiver>
|
||||
<ZMQReceiver url='ws://localhost:5556' sendGameState={updateGameState} sendMessage={updateMessage} sendClearPage={clearPage}></ZMQReceiver>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<main className={`min-h-screen flex-col items-center justify-between px-24 py-12 ${crt}`}>
|
||||
<div className="z-10 w-full max-w-screen items-center justify-between font-mono text-sm">
|
||||
|
||||
{ inner() }
|
||||
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
export default Pelita;
|
||||
|
|
|
|||
66
app/pelita_msg.ts
Normal file
66
app/pelita_msg.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
import type { Tuple4 } from './typeutils';
|
||||
|
||||
// export interface RootMsg {
|
||||
// __action__: string;
|
||||
// __data__: ObserveData|null;
|
||||
// }
|
||||
|
||||
type RootMsg = {
|
||||
__action__: "observe",
|
||||
__data__: ObserveData
|
||||
} | {
|
||||
__action__: "SPEAK",
|
||||
__data__: string
|
||||
} | {
|
||||
__action__: "CLEAR",
|
||||
__data__: null
|
||||
} | {
|
||||
__action__: "INIT",
|
||||
__data__: null
|
||||
};
|
||||
|
||||
type Pos = [number, number];
|
||||
|
||||
export type { RootMsg };
|
||||
|
||||
export interface ObserveData {
|
||||
game_uuid: string;
|
||||
walls: Pos[];
|
||||
shape: Pos;
|
||||
food: Pos[];
|
||||
food_age: (number[] | number)[][];
|
||||
turn: number;
|
||||
round: number;
|
||||
gameover: boolean;
|
||||
whowins?: any;
|
||||
bots: Tuple4<Pos>;
|
||||
score: [number, number];
|
||||
fatal_errors: any[][];
|
||||
errors: null[];
|
||||
max_rounds: number;
|
||||
timeout: number;
|
||||
noise_radius: number;
|
||||
sight_distance: number;
|
||||
max_food_age: number;
|
||||
shadow_distance: number;
|
||||
layout_name: string;
|
||||
team_names: [string, string];
|
||||
team_infos: null[];
|
||||
team_time: [number, number];
|
||||
deaths: Tuple4<number>;
|
||||
kills: Tuple4<number>;
|
||||
bot_was_killed: boolean[];
|
||||
noisy_positions: (number[] | null)[];
|
||||
requested_moves: RequestedMove[];
|
||||
say: Tuple4<string>;
|
||||
timeout_length: number;
|
||||
error_limit: number;
|
||||
num_errors: [number, number];
|
||||
}
|
||||
|
||||
export interface RequestedMove {
|
||||
previous_position: number[];
|
||||
requested_position: number[];
|
||||
success: boolean;
|
||||
}
|
||||
6
app/typeutils.ts
Normal file
6
app/typeutils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
type TupleOf<T, N extends number> = N extends N ? number extends N ? T[] : _TupleOf<T, N, []> : never;
|
||||
type _TupleOf<T, N extends number, R extends unknown[]> = R['length'] extends N ? R : _TupleOf<T, N, [T, ...R]>;
|
||||
|
||||
type Tuple4<T> = TupleOf<T, 4>;
|
||||
|
||||
export type { Tuple4 }
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
|
||||
.text_animation {
|
||||
display: none;
|
||||
/* display: none; */
|
||||
position: relative;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -9,16 +9,20 @@
|
|||
|
||||
.text_animation .letter {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
/* opacity: 0; */
|
||||
/* color: white; */
|
||||
}
|
||||
|
||||
.text_animation .cursor {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
/* top: 0; */
|
||||
/* bottom: 0; */
|
||||
width: 0.55em;
|
||||
/* height: 1em; */
|
||||
height: 1em;
|
||||
/* background: #f5f5f5; */
|
||||
background: black;
|
||||
/* color: white; */
|
||||
/* background: #ffffff; */
|
||||
/* background: green; */
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,141 @@
|
|||
import React, { ReactNode, useEffect, useRef } from "react";
|
||||
import React, { ReactNode, useEffect, useRef, useState } from "react";
|
||||
|
||||
import anime from "animejs/lib/anime.es.js";
|
||||
import styles from "./typewritertext.module.css";
|
||||
|
||||
function TypewriterText({ text }: { text: string }) {
|
||||
// IMPORTANT: This code chokes on an empty string. Logic needs to be refactored
|
||||
const lettersHtml: ReactNode[] = (text ? text : " ").split("").map((c, i) => {
|
||||
return (
|
||||
<span className={`letter ${styles.letter}`} key={`letter,${i}`}>
|
||||
{c == " " ? "\u00A0" : c}
|
||||
</span>
|
||||
);
|
||||
|
||||
function Cursor() {
|
||||
const self = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const blink = anime({
|
||||
targets: self.current,
|
||||
loop: true,
|
||||
duration: 750,
|
||||
opacity: [{ value: [1, 1] }, { value: [0, 0] }],
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (<span ref={self} className={`cursor ${styles.cursor}`}>█</span>)
|
||||
}
|
||||
|
||||
function FadingLetter({ char }: { char: string }) {
|
||||
const letter = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
anime({
|
||||
targets: letter.current,
|
||||
loop: false,
|
||||
//opacity: [{ value: [1, 1] }, { value: [0, 0] }],
|
||||
color: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', '#eeeeee'],
|
||||
duration: 100,
|
||||
});
|
||||
}, []);
|
||||
|
||||
return (<span ref={letter} className={`letter ${styles.letter}`}>
|
||||
{char == " " ? "\u00A0" : char}
|
||||
</span>);
|
||||
}
|
||||
|
||||
function TypewriterLine( { text, cursor, lineFinished }: { text: string, cursor: boolean, lineFinished: () => any }) {
|
||||
const TYPE_AFTER_MS = 1_000;
|
||||
const JUMP_AFTER_MS = 80;
|
||||
|
||||
const [index, setIndex] = useState(0);
|
||||
const [hasCursor, setHasCursor] = useState(true);
|
||||
|
||||
const current = text.slice(0, index) || "";
|
||||
const lettersHtml = (!current) ? (<br/>) : current.split("").map((c, i) => {
|
||||
return (<FadingLetter key={`letter,${i}`} char={c}></FadingLetter>);
|
||||
});
|
||||
|
||||
const lineHtml = (
|
||||
<>
|
||||
<div className="letters">{lettersHtml}</div>
|
||||
<span className={`cursor ${styles.cursor}`}></span>
|
||||
<p className="letters">{lettersHtml}{
|
||||
(hasCursor || cursor) ? (<Cursor></Cursor>) : null
|
||||
}</p>
|
||||
</>
|
||||
);
|
||||
const text_animation_ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const el = text_animation_ref.current!;
|
||||
el.style.display = "block";
|
||||
const letters = Array.from(el.querySelectorAll(".letter")) as HTMLElement[];
|
||||
const interval = setInterval(() => {
|
||||
setIndex(oldIndex => {
|
||||
if (oldIndex < text.length) {
|
||||
return oldIndex + 1;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
setHasCursor(false);
|
||||
//lineFinished();
|
||||
// const cursorRemove = setInterval(() => { setHasCursor(false); return () => clearInterval(cursorRemove); }, 500);
|
||||
return oldIndex;
|
||||
}
|
||||
})
|
||||
}, JUMP_AFTER_MS);
|
||||
|
||||
//Clearing the interval
|
||||
return () => clearInterval(interval);
|
||||
}, [index]);
|
||||
|
||||
if (current === "")
|
||||
return (<div><br/></div>);
|
||||
|
||||
return (
|
||||
<div ref={text_animation_ref} className={styles.text_animation}>
|
||||
{lineHtml}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TypewriterText({ text, lines }: { text: string[], lines: number }) {
|
||||
// IMPORTANT: This code chokes on an empty string. Logic needs to be refactored
|
||||
const len = text.length;
|
||||
return text.map((v, idx) => <TypewriterLine key={idx} text={v} cursor={idx + 1 === len} lineFinished={() => {}}></TypewriterLine>).slice(-lines);
|
||||
/*
|
||||
const TYPE_AFTER_MS = 1_000;
|
||||
const JUMP_AFTER_MS = 80;
|
||||
|
||||
const blink = anime({
|
||||
targets: el.querySelectorAll(".cursor"),
|
||||
loop: true,
|
||||
duration: 750,
|
||||
opacity: [{ value: [1, 1] }, { value: [0, 0] }],
|
||||
const [index, setIndex] = useState(0);
|
||||
const [hasCursor, setHasCursor] = useState(true);
|
||||
|
||||
const current = text.slice(0, index) || "";
|
||||
const lettersHtml: ReactNode[] = (!current) ? (<br/>) : current.split("").map((c, i) => {
|
||||
return (<FadingLetter key={`letter,${i}`} char={c}></FadingLetter>);
|
||||
});
|
||||
|
||||
const tl = anime
|
||||
.timeline()
|
||||
.add(
|
||||
{
|
||||
targets: el.querySelectorAll(".cursor"),
|
||||
translateX: letters.map((letter, i) => ({
|
||||
value: letter.offsetLeft + letter.offsetWidth,
|
||||
duration: 1,
|
||||
delay: i === 0 ? 0 : JUMP_AFTER_MS,
|
||||
})),
|
||||
},
|
||||
TYPE_AFTER_MS
|
||||
)
|
||||
.add(
|
||||
{
|
||||
targets: el.querySelectorAll(".letter"),
|
||||
opacity: [0, 1],
|
||||
duration: 1,
|
||||
delay: anime.stagger(JUMP_AFTER_MS),
|
||||
changeBegin: () => {
|
||||
blink.restart();
|
||||
blink.pause();
|
||||
},
|
||||
changeComplete: () => {
|
||||
blink.restart();
|
||||
},
|
||||
},
|
||||
TYPE_AFTER_MS
|
||||
const lineHtml = (
|
||||
<>
|
||||
<div className="letters">{lettersHtml}{
|
||||
hasCursor ? (<Cursor></Cursor>) : null
|
||||
}</div>
|
||||
</>
|
||||
);
|
||||
}, []);
|
||||
const text_animation_ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
//Implementing the setInterval method
|
||||
const interval = setInterval(() => {
|
||||
setIndex(oldIndex => {
|
||||
if (oldIndex < text.length) {
|
||||
return oldIndex + 1;
|
||||
} else {
|
||||
clearInterval(interval);
|
||||
// const cursorRemove = setInterval(() => { setHasCursor(false); return () => clearInterval(cursorRemove); }, 500);
|
||||
return oldIndex;
|
||||
}
|
||||
})
|
||||
}, 100);
|
||||
|
||||
//Clearing the interval
|
||||
return () => clearInterval(interval);
|
||||
}, [index]);
|
||||
|
||||
return (
|
||||
<div ref={text_animation_ref} className={styles.text_animation}>
|
||||
<h1>{lineHtml}</h1>
|
||||
</div>
|
||||
);
|
||||
*/
|
||||
}
|
||||
|
||||
export default TypewriterText;
|
||||
|
|
|
|||
|
|
@ -1,21 +1,69 @@
|
|||
'use client'
|
||||
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import type { Tuple4 } from './typeutils';
|
||||
import { ObserveData } from './pelita_msg';
|
||||
import type { RootMsg } from './pelita_msg';
|
||||
import * as zmq from 'jszmq';
|
||||
|
||||
|
||||
interface GameStats {
|
||||
score: [number, number];
|
||||
num_errors: [number, number];
|
||||
kills: [number, number, number, number];
|
||||
deaths: [number, number, number, number];
|
||||
team_time: [number, number];
|
||||
}
|
||||
|
||||
interface GameState {
|
||||
game_uuid: string;
|
||||
shape: [number, number];
|
||||
walls: [number, number][];
|
||||
food: [number, number][];
|
||||
bots: [number, number][];
|
||||
bots: Tuple4<[number, number]>;
|
||||
team_names: [string, string];
|
||||
game_stats: GameStats;
|
||||
whowins: number;
|
||||
gameover: boolean;
|
||||
say: Tuple4<string>;
|
||||
round: number;
|
||||
max_rounds: number;
|
||||
turn: number;
|
||||
}
|
||||
|
||||
export type { GameState };
|
||||
|
||||
function conv_game_state(gs: ObserveData): GameState {
|
||||
// const bot_directions = gs.bots.map((pos, idx) => {
|
||||
//
|
||||
// });
|
||||
|
||||
return {
|
||||
"game_uuid": gs.game_uuid,
|
||||
"shape": gs.shape,
|
||||
"walls": gs.walls,
|
||||
"food": gs.food,
|
||||
"bots": gs.bots,
|
||||
// "bot_directions": bot_directions,
|
||||
"say": gs.say,
|
||||
"turn": gs.turn,
|
||||
"round": gs.round,
|
||||
"max_rounds": gs.max_rounds,
|
||||
"team_names": gs.team_names,
|
||||
"game_stats": {
|
||||
"score": gs.score,
|
||||
"num_errors": gs.num_errors,
|
||||
"kills": gs.kills,
|
||||
"deaths": gs.deaths,
|
||||
"team_time": gs.team_time,
|
||||
},
|
||||
"whowins": gs.whowins,
|
||||
"gameover": gs.gameover
|
||||
};
|
||||
}
|
||||
|
||||
const ZMQReceiver = ({ url, sendGameState, sendMessage, sendClearPage }: { url: string,
|
||||
sendGameState: (gs: {"__data__": GameState}) => any,
|
||||
sendGameState: (gs: GameState) => any,
|
||||
sendMessage: (msg: string) => any,
|
||||
sendClearPage: () => any
|
||||
}
|
||||
|
|
@ -32,14 +80,17 @@ const ZMQReceiver = ({ url, sendGameState, sendMessage, sendClearPage }: { url:
|
|||
|
||||
socket.on('message', (message) => {
|
||||
setMessages((prevMessages) => [/*...prevMessages, */message.toString()]);
|
||||
let parsed = JSON.parse(message);
|
||||
let parsed = JSON.parse(message) as RootMsg;
|
||||
console.log(parsed);
|
||||
if (parsed['__action__'] && parsed['__action__'] === 'SPEAK') {
|
||||
sendMessage(parsed['__data__']);
|
||||
} else if (parsed['__action__'] && parsed['__action__'] === 'CLEAR') {
|
||||
if (parsed.__action__ === 'SPEAK') {
|
||||
sendMessage(parsed['__data__'].replaceAll(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, ''));
|
||||
} else if (parsed.__action__ === 'CLEAR') {
|
||||
sendClearPage();
|
||||
} else if (parsed.__action__ === 'observe') {
|
||||
let conv = conv_game_state(parsed.__data__);
|
||||
sendGameState(conv);
|
||||
} else if (parsed.__action__ === 'INIT') {
|
||||
sendClearPage();
|
||||
} else {
|
||||
sendGameState(parsed);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -49,15 +100,15 @@ const ZMQReceiver = ({ url, sendGameState, sendMessage, sendClearPage }: { url:
|
|||
};
|
||||
}, [url]);
|
||||
|
||||
return (
|
||||
<footer className="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
|
||||
<h2 className='text-xs text-slate-300'>ZeroMQ Messages:</h2>
|
||||
<ul>
|
||||
{messages.map((message, index) => (
|
||||
<li key={index} className='text-xs text-slate-300' style={{fontSize: 0.45 + 'rem', lineHeight: 0.5 + 'rem'}}>{message}</li>
|
||||
))}
|
||||
</ul>
|
||||
</footer>
|
||||
return (<></>
|
||||
// <footer className="fixed bottom-0 left-0 z-20 w-full p-4 bg-white border-t border-gray-200 shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800 dark:border-gray-600">
|
||||
// <h2 className='text-xs text-slate-300'>ZeroMQ Messages:</h2>
|
||||
// <ul>
|
||||
// {messages.map((message, index) => (
|
||||
// <li key={index} className='text-xs text-slate-300' style={{fontSize: 0.45 + 'rem', lineHeight: 0.5 + 'rem'}}>{message}</li>
|
||||
// ))}
|
||||
// </ul>
|
||||
// </footer>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
821
package-lock.json
generated
821
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -4,12 +4,16 @@
|
|||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev-remote": "next dev -H 0.0.0.0 -p 3000",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vercel/nft": "^0.27.3",
|
||||
"animejs": "^3.2.2",
|
||||
"framer-motion": "^11.3.17",
|
||||
"http-proxy-middleware": "^3.0.0",
|
||||
"jszmq": "^0.1.2",
|
||||
"next": "^14.2.5",
|
||||
"react": "^18",
|
||||
|
|
|
|||
Loading…
Reference in a new issue