feature(channels): add vampire-survivors

src/channels/index.ts

@@ -21,5 +21,6 @@ import './laser-sunset';
 import './here-comes-niko';
 import './pinball';
 import './cookie-clicker';
+import './vampire-survivors';
 
 export * from './channels';

src/channels/vampire-survivors/assets/Coin.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import coinsSprite from './coins.png';
+
+interface CoinContainerProps {
+	sprite: string;
+	index: number;
+	left?: string;
+	top?: string;
+}
+
+const CoinContainer = styled.div<CoinContainerProps>`
+	position: absolute;
+	left: ${(props) => props.left || '45%'};
+	top: ${(props) => props.top || '35%'};
+	width: 38px;
+	height: 38px;
+	background-image: url(${(props) => props.sprite});
+	background-repeat: no-repeat;
+	background-position: ${(props) => `-${props.index * 38}px 0`};
+`;
+
+export interface CoinProps {
+	/**
+	 * index determines which coin to show:
+	 * 0 -> first coin (gold),
+	 * 1 -> green gem, etc.
+	 */
+	index?: number;
+	className?: string;
+	left?: string;
+	top?: string;
+	collected: boolean;
+}
+
+export default function Coin({ index = 0, className, left, top }: CoinProps) {
+	return <CoinContainer sprite={coinsSprite} index={index} className={className} left={left} top={top} />;
+}

src/channels/vampire-survivors/assets/Enemy.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import batSprite from './bat.png';
+import { useEffect, useState } from 'react';
+
+interface EnemyContainerProps {
+	sprite: string;
+	frameX: number;
+	left?: string;
+	top?: string;
+}
+
+const EnemyContainer = styled.div<EnemyContainerProps>`
+	position: absolute;
+	left: ${(props) => props.left || '45%'};
+	top: ${(props) => props.top || '35%'};
+	width: 80px;
+	height: 80px;
+	background-image: url(${(props) => props.sprite});
+	background-repeat: no-repeat;
+	overflow: hidden;
+	background-position: ${(props) => `-${props.frameX * 80}px 0`};
+`;
+
+export interface EnemyProps {
+	left?: string;
+	top?: string;
+	sprite?: string;
+	collected: boolean;
+}
+
+function Enemy({ left, top, sprite }: EnemyProps) {
+	const [frame, setFrame] = useState(0);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setFrame((prevFrame) => (prevFrame + 1) % 2);
+		}, 1000 / 2);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	return <EnemyContainer sprite={sprite || batSprite} frameX={frame} left={left} top={top} />;
+}
+
+export default Enemy;

src/channels/vampire-survivors/assets/EventBar.tsx

@@ -0,0 +1,65 @@
+import styled from '@emotion/styled';
+import eventSprite from './event.png';
+
+interface EventBarContainerProps {
+	left?: string;
+	top?: string;
+}
+
+const EventBarContainer = styled.div<EventBarContainerProps>`
+	position: absolute;
+	left: ${(props) => props.left || '45%'};
+	top: ${(props) => props.top || '35%'};
+	width: 100%;
+	height: 48px;
+	background-image: url(${eventSprite});
+	background-repeat: no-repeat;
+`;
+
+const EventInnerContainer = styled.div`
+	position: relative;
+	left: 6px;
+	top: 7px;
+`;
+
+const EventBeneficiary = styled.span`
+	display: inline-block;
+	font-family: gdqpixel;
+	font-size: 18px;
+	color: white;
+	background-color: blue;
+	border-radius: 2px 0 0 2px;
+
+	padding: 8px 8px 8px 8px;
+	width: 768px;
+`;
+
+const EventName = styled.span`
+	display: inline-block;
+	font-family: gdqpixel;
+	font-size: 18px;
+	color: white;
+	background-color: black;
+	border-radius: 0 2px 2px 0;
+	text-align: right;
+
+	padding: 8px 8px 8px 8px;
+	width: 279px;
+`;
+
+export interface EventBarProps {
+	left?: string;
+	top?: string;
+	eventBeneficiary?: string;
+	eventName?: string;
+}
+export default function EventBar({ left, top, eventBeneficiary, eventName }: EventBarProps) {
+	return (
+		<EventBarContainer left={left} top={top}>
+			<EventInnerContainer>
+				<EventBeneficiary>{eventBeneficiary}</EventBeneficiary>
+				<EventName>{eventName}</EventName>
+			</EventInnerContainer>
+		</EventBarContainer>
+	);
+}

src/channels/vampire-survivors/assets/Guy.tsx

@@ -0,0 +1,43 @@
+import styled from '@emotion/styled';
+import guySprite from './guy.png';
+import { useEffect, useState } from 'react';
+
+interface GuyContainerProps {
+	sprite: string;
+	frameX: number;
+	left?: string;
+	top?: string;
+}
+
+const GuyContainer = styled.div<GuyContainerProps>`
+	position: absolute;
+	left: ${(props) => props.left || '50%'};
+	top: ${(props) => props.top || '35%'};
+	width: 101px;
+	height: 104px;
+	background-image: url(${(props) => props.sprite});
+	background-repeat: no-repeat;
+	overflow: hidden;
+	background-position: ${(props) => `-${props.frameX * 101}px 0`};
+`;
+
+interface GuyProps {
+	left?: string;
+	top?: string;
+}
+
+function Guy({ left, top }: GuyProps) {
+	const [frame, setFrame] = useState(0);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setFrame((prevFrame) => (prevFrame + 1) % 2);
+		}, 1000 / 2);
+
+		return () => clearInterval(interval);
+	}, []);
+
+	return <GuyContainer sprite={guySprite} frameX={frame} left={left} top={top} />;
+}
+
+export default Guy;

src/channels/vampire-survivors/assets/Sub.tsx

@@ -0,0 +1,72 @@
+import styled from '@emotion/styled';
+import subSprite from './sub.png';
+
+interface SubContainerProps {
+	left?: string;
+	top?: string;
+	height?: string;
+}
+
+const SubContainer = styled.div<SubContainerProps>`
+	position: absolute;
+	left: ${(props) => props.left || '45%'};
+	top: ${(props) => props.top || '35%'};
+	width: 320px;
+	height: ${(props) => props.height || '64px'};
+	font-family: gdqpixel;
+	background-image: url(${subSprite});
+	background-repeat: no-repeat;
+	overflow: hidden;
+`;
+
+const SubPlan = styled.span`
+	display: block;
+	position: absolute;
+	left: 16px;
+	top: 12px;
+	font-size: 12px;
+	color: white;
+`;
+
+const SubDisplayName = styled.span`
+	display: block;
+	position: absolute;
+	font-size: 14px;
+	color: yellow;
+	text-align: center;
+	margin-top: 26px;
+	width: 100%;
+`;
+
+export interface SubProps {
+	left?: string;
+	top?: string;
+	height?: string;
+	tick: number;
+	subPlan?: string;
+	displayName?: string;
+}
+
+function planToName(plan: string): string {
+	switch (plan) {
+		case '1000':
+			return 'Tier 1';
+		case '2000':
+			return 'Tier 2';
+		case '3000':
+			return 'Tier 3';
+		case 'Prime':
+			return 'Prime';
+		default:
+			return '';
+	}
+}
+
+export default function Sub({ left, top, height, subPlan, displayName }: SubProps) {
+	return (
+		<SubContainer left={left} top={top} height={height}>
+			<SubPlan>{planToName(subPlan ? subPlan : '')}</SubPlan>
+			<SubDisplayName>{displayName}</SubDisplayName>
+		</SubContainer>
+	);
+}

src/channels/vampire-survivors/assets/Whip.tsx

@@ -0,0 +1,34 @@
+import styled from '@emotion/styled';
+import whipSprite from './whip.png';
+
+interface WhipContainerProps {
+	sprite: string;
+	frameX: number;
+	left?: string;
+	top?: string;
+}
+
+const WhipContainer = styled.div<WhipContainerProps>`
+	position: absolute;
+	left: ${(props) => props.left || '45%'};
+	top: ${(props) => props.top || '35%'};
+	width: 523px;
+	height: 82px;
+	background-image: url(${(props) => props.sprite});
+	background-repeat: no-repeat;
+	overflow: hidden;
+	background-position: ${(props) => `-${props.frameX * 523}px 0`};
+`;
+
+export interface WhipProps {
+	left?: string;
+	top?: string;
+	frame: number;
+	done: boolean;
+}
+
+function Whip({ left, top, frame }: WhipProps) {
+	return <WhipContainer sprite={whipSprite} frameX={frame} left={left} top={top} />;
+}
+
+export default Whip;