diff --git a/src/assets/fonts.css b/src/assets/fonts.css index efdd0ad..4c8a2af 100644 --- a/src/assets/fonts.css +++ b/src/assets/fonts.css @@ -85,3 +85,14 @@ src: url('fonts/Cabin/Cabin-Medium.ttf') format('truetype'); font-weight: 500; } + +@font-face { + font-family: NikoDialogue; + src: url('fonts/NikoDialogue.ttf') format('truetype'); + font-weight: 500; +} + +@font-face { + font-family: NikoTamagotchi; + src: url('fonts/NikoTamagotchi.ttf') format('truetype'); +} \ No newline at end of file diff --git a/src/assets/fonts/NikoDialogue.ttf b/src/assets/fonts/NikoDialogue.ttf new file mode 100644 index 0000000..9ae765d Binary files /dev/null and b/src/assets/fonts/NikoDialogue.ttf differ diff --git a/src/assets/fonts/NikoTamagotchi.ttf b/src/assets/fonts/NikoTamagotchi.ttf new file mode 100644 index 0000000..f5cbfc0 Binary files /dev/null and b/src/assets/fonts/NikoTamagotchi.ttf differ diff --git a/src/channels/here-comes-niko/assets/dialogue_box.png b/src/channels/here-comes-niko/assets/dialogue_box.png new file mode 100644 index 0000000..d773410 Binary files /dev/null and b/src/channels/here-comes-niko/assets/dialogue_box.png differ diff --git a/src/channels/here-comes-niko/assets/frog.gif b/src/channels/here-comes-niko/assets/frog.gif new file mode 100644 index 0000000..0844c46 Binary files /dev/null and b/src/channels/here-comes-niko/assets/frog.gif differ diff --git a/src/channels/here-comes-niko/assets/gaming.gif b/src/channels/here-comes-niko/assets/gaming.gif new file mode 100644 index 0000000..2bb4aab Binary files /dev/null and b/src/channels/here-comes-niko/assets/gaming.gif differ diff --git a/src/channels/here-comes-niko/assets/glimmer_01.gif b/src/channels/here-comes-niko/assets/glimmer_01.gif new file mode 100644 index 0000000..e688dc2 Binary files /dev/null and b/src/channels/here-comes-niko/assets/glimmer_01.gif differ diff --git a/src/channels/here-comes-niko/assets/glimmer_02.gif b/src/channels/here-comes-niko/assets/glimmer_02.gif new file mode 100644 index 0000000..08c599d Binary files /dev/null and b/src/channels/here-comes-niko/assets/glimmer_02.gif differ diff --git a/src/channels/here-comes-niko/assets/handsome.gif b/src/channels/here-comes-niko/assets/handsome.gif new file mode 100644 index 0000000..ae44a69 Binary files /dev/null and b/src/channels/here-comes-niko/assets/handsome.gif differ diff --git a/src/channels/here-comes-niko/assets/home_background.png b/src/channels/here-comes-niko/assets/home_background.png new file mode 100644 index 0000000..e1b2f1a Binary files /dev/null and b/src/channels/here-comes-niko/assets/home_background.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/sprites/bowl_empty.png b/src/channels/here-comes-niko/assets/tamagotchi/sprites/bowl_empty.png new file mode 100644 index 0000000..8c8226f Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/sprites/bowl_empty.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/sprites/bowl_full.png b/src/channels/here-comes-niko/assets/tamagotchi/sprites/bowl_full.png new file mode 100644 index 0000000..83c2eac Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/sprites/bowl_full.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/sprites/kitchen.png b/src/channels/here-comes-niko/assets/tamagotchi/sprites/kitchen.png new file mode 100644 index 0000000..f31d36c Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/sprites/kitchen.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/sprites/snail.gif b/src/channels/here-comes-niko/assets/tamagotchi/sprites/snail.gif new file mode 100644 index 0000000..3a26260 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/sprites/snail.gif differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/sprites/snailSad.gif b/src/channels/here-comes-niko/assets/tamagotchi/sprites/snailSad.gif new file mode 100644 index 0000000..38b8521 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/sprites/snailSad.gif differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/sprites/speechbubble.png b/src/channels/here-comes-niko/assets/tamagotchi/sprites/speechbubble.png new file mode 100644 index 0000000..3e55599 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/sprites/speechbubble.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_action_button.png b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_action_button.png new file mode 100644 index 0000000..d2abb61 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_action_button.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_arrow_button.png b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_arrow_button.png new file mode 100644 index 0000000..629fcbf Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_arrow_button.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_body.png b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_body.png new file mode 100644 index 0000000..eda71f1 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_body.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_kc_caterpillar.png b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_kc_caterpillar.png new file mode 100644 index 0000000..88123a2 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_kc_caterpillar.png differ diff --git a/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_kc_helix.png b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_kc_helix.png new file mode 100644 index 0000000..8fa8cf7 Binary files /dev/null and b/src/channels/here-comes-niko/assets/tamagotchi/tamagotchi_kc_helix.png differ diff --git a/src/channels/here-comes-niko/assets/vignette.png b/src/channels/here-comes-niko/assets/vignette.png new file mode 100644 index 0000000..8de4141 Binary files /dev/null and b/src/channels/here-comes-niko/assets/vignette.png differ diff --git a/src/channels/here-comes-niko/index.tsx b/src/channels/here-comes-niko/index.tsx new file mode 100644 index 0000000..e5a9bb7 --- /dev/null +++ b/src/channels/here-comes-niko/index.tsx @@ -0,0 +1,666 @@ +/* +Here Comes Niko! Handsome Frog Widget +By: Naomi @ twitch.tv/naomiiiplays +With permission from: Frog Vibes +*/ + +//Import Defaults +import type { FormattedDonation, Total } from '@gdq/types/tracker'; +import { ChannelProps, registerChannel } from '../channels'; + +import { useListenFor, useReplicant } from 'use-nodecg'; +import styled from '@emotion/styled'; +import TweenNumber from '@gdq/lib/components/TweenNumber'; + +//Import Custom +//Modules +import { useState, useRef } from 'react'; +import { keyframes } from '@emotion/react'; + +//Image Assets +//Background +import homeBackground from './assets/home_background.png'; + +//Frogs +import frogNormal from './assets/frog.gif'; +import frogHandsome from './assets/handsome.gif'; +import frogGaming from './assets/gaming.gif'; + +//Tamagotchi Body +import tamagotchiBody from './assets/tamagotchi/tamagotchi_body.png'; +import tamagotchiLRButton from './assets/tamagotchi/tamagotchi_arrow_button.png'; +import tamagotchiMainButton from './assets/tamagotchi/tamagotchi_action_button.png'; +import tamagotchiKC01 from './assets/tamagotchi/tamagotchi_kc_caterpillar.png'; +import tamagotchiKC02 from './assets/tamagotchi/tamagotchi_kc_helix.png'; + +//Tamagotchi Game +import snailPet from './assets/tamagotchi/sprites/snail.gif'; +import snailSad from './assets/tamagotchi/sprites/snailSad.gif'; +import speechBubble from './assets/tamagotchi/sprites/speechbubble.png'; +import snailFoodEmpty from './assets/tamagotchi/sprites/bowl_empty.png'; +import snailFoodFull from './assets/tamagotchi/sprites/bowl_full.png'; +import snailKitchen from './assets/tamagotchi/sprites/kitchen.png'; + +//FX +import vignette from './assets/vignette.png'; +import glimmer_01 from './assets/glimmer_01.gif'; +import glimmer_02 from './assets/glimmer_02.gif'; +import dialogueBox from './assets/dialogue_box.png'; + +//Channel +registerChannel('Here Comes Niko', 31, Niko, { + position: 'bottomLeft', + site: 'Twitch', + handle: 'NaomiiiPlays', +}); + +//Variables +let DIALOGUE_ACTIVE = false; +let DIALOGUE_COUNTER = 0; +let TAMAGOTCHI_ACTIVE = false; +let PREVIOUS_DLG_TO_PLAY = -1; + +function Niko(props: ChannelProps) { + //Donation Total + const [total] = useReplicant('total', null); + + //Dialogue + const dlg = useRef(null); + const tdlg = useRef(null); + + //UseStates + const [FROG_CURRENT_SPRITE, setCurrentSprite] = useState(frogNormal); + const [FONT_SIZE, setFontSize] = useState('45px'); + const [VIGNETTE_STATE, enableVignette] = useState(false); + + //Tamagotchi UseStates + const [TAMAGOTCHI_STATE, enableTamagotchi] = useState(false); + const [SNAIL_PET, setSnailSprite] = useState(snailSad); + const [SNAIL_CENTER, showSnailCenter] = useState(true); + const [SNAIL_LEFT, moveSnailLeft] = useState(false); + const [SNAIL_RIGHT, moveSnailRight] = useState(false); + const [SNAIL_SPEECH_CENTER, showSnailSpeechCenter] = useState(false); + const [SNAIL_FOOD, setSpriteFoodBowl] = useState(snailFoodEmpty); + const [SNAIL_FOOD_CENTER, showFoodCenter] = useState(false); + const [SNAIL_FOOD_RIGHT_TO_CENTER, moveFoodRightToCenter] = useState(false); + const [SNAIL_FOOD_CENTER_TO_RIGHT, moveFoodCenterToRight] = useState(false); + const [SNAIL_KITCHEN_CENTER, showKitchenCenter] = useState(false); + const [SNAIL_KITCHEN_RIGHT_TO_CENTER, moveKitchenRightToCenter] = useState(false); + const [SNAIL_KITCHEN_CENTER_TO_RIGHT, moveKitchenCenterToRight] = useState(false); + + useListenFor('donation', (donation: FormattedDonation) => { + if (!DIALOGUE_ACTIVE && !TAMAGOTCHI_ACTIVE && Math.random() > 0.1 && DIALOGUE_COUNTER < 3) { + (async () => { + //Lock dialogue, displays the dialogue box + DIALOGUE_ACTIVE = true; + props.lock(); + + let DLG_TO_PLAY = Math.floor(Math.random() * playDialogue.length); + + //Don't play the same dialogue twice in succession + if (DLG_TO_PLAY == PREVIOUS_DLG_TO_PLAY) { + while (DLG_TO_PLAY == PREVIOUS_DLG_TO_PLAY) { + DLG_TO_PLAY = Math.floor(Math.random() * playDialogue.length); + } + } + + //Play dialogue + await playDialogue[DLG_TO_PLAY](dlg, donation.amount); + setCurrentSprite(frogHandsome); + setFontSize('50px'); + enableVignette(true); + + await playPunchline[DLG_TO_PLAY](dlg, donation.amount); + setCurrentSprite(frogNormal); + setFontSize('45px'); + enableVignette(false); + + PREVIOUS_DLG_TO_PLAY = DLG_TO_PLAY; + DIALOGUE_COUNTER = DIALOGUE_COUNTER + 1; + DIALOGUE_ACTIVE = false; + props.unlock(); + })(); + } + + //If no dialogue is triggered, Handsome Frog opens the Tamagotchi, cares for its snail, then returns to charming. + //This is guaranteed to happen after 3 dialogues have been triggered + if (!DIALOGUE_ACTIVE && !TAMAGOTCHI_ACTIVE) { + (async () => { + TAMAGOTCHI_ACTIVE = true; + props.lock(); + + setCurrentSprite(frogGaming); + setSnailSprite(snailSad); + enableTamagotchi(true); + + await delay(1100); + showSnailSpeechCenter(true); + await dialog(tdlg, `I am hungry!`, 2000, 0); + + //Move Snail to Left + showSnailCenter(false); + showSnailSpeechCenter(false); + moveSnailLeft(true); + moveFoodRightToCenter(true); + moveKitchenRightToCenter(true); + + await delay(1000); + moveFoodRightToCenter(false); + moveKitchenRightToCenter(false); + showFoodCenter(true); + showKitchenCenter(true); + moveSnailLeft(false); + + await delay(500); + setSpriteFoodBowl(snailFoodFull); + setSnailSprite(snailPet); + + await delay(2000); + moveFoodCenterToRight(true); + moveKitchenCenterToRight(true); + showFoodCenter(false); + showKitchenCenter(false); + moveSnailRight(true); + + await delay(1000); + moveFoodCenterToRight(false); + moveKitchenCenterToRight(false); + moveSnailRight(false); + showSnailCenter(true); + showSnailSpeechCenter(true); + await dialog(tdlg, `Hello friend!`, 2000, 0); + + setSpriteFoodBowl(snailFoodEmpty); + showSnailSpeechCenter(false); + enableTamagotchi(false); + setCurrentSprite(frogNormal); + TAMAGOTCHI_ACTIVE = false; + DIALOGUE_COUNTER = 0; + props.unlock(); + })(); + } + }); + + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + $ + + + ); +} + +//Display handsome dialogue +const dialog = ( + dlg: React.RefObject, + text: string, + duration: number, + delay: number, +): Promise => { + return new Promise((resolve) => { + setTimeout(() => { + const ref = dlg.current; + if (ref) ref.innerText = text; + + setTimeout(() => { + const ref = dlg.current; + if (ref) ref.innerText = ''; + resolve(); + }, duration); + }, delay); + }); +}; + +const playDialogue: ((dlg: React.RefObject, amount: string) => Promise)[] = [ + async (dlg, amount) => { + await dialog(dlg, `Wow! A ${amount} donation!`, 4000, 0); + await dialog(dlg, `There is a special name for a person who donates.`, 4000, 0); + await dialog(dlg, 'It is spelled with just two letters.', 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `Another ${amount} donation for charity!`, 4000, 0); + await dialog(dlg, `To me - you're like a rare coin.`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `You're amazing for donating ${amount} to charity.`, 4000, 0); + await dialog(dlg, `Did you know frogs have a lifespan up to 30 years?`, 4000, 0); + await dialog(dlg, `I wish I was a cat, they get 9 lives...`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `${amount} for charity!`, 4000, 0); + await dialog(dlg, `If I could...`, 3000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `A ${amount} donation for a good cause!`, 4000, 0); + await dialog(dlg, `Just between you and me.`, 4000, 0); + await dialog(dlg, `If I could rearrange the alphabet...`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `Your ${amount} donation just revealed something magical!`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `Your ${amount} donation is turning my world upside down.`, 4000, 0); + await dialog(dlg, `I never believed in love at first sight...`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `Because you donated ${amount}, I will share a fun frog fact!`, 4000, 0); + await dialog(dlg, `Did you know frogs eat butterflies?`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `You donating ${amount} is a day to remember.`, 4000, 0); + await dialog(dlg, `I'm learning about other important dates as well!`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `What a generous ${amount} donation!`, 4000, 0); + await dialog(dlg, `I don't know your name, but...`, 4000, 0); + }, +]; + +const playPunchline: ((dlg: React.RefObject, amount: string) => Promise)[] = [ + async (dlg, amount) => { + await dialog(dlg, 'QT!', 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, 'Unique and special!', 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, 'And I would spend all 9 lives with you.', 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `I'd donate a dollar every time I thought of you.`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `I would put U next to I.`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, 'Whenever I look at you, everyone else disappears.', 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `But that's before I saw you.`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `I still get butterflies in my stomach when I think about you.`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `Do you want to be one of them?`, 4000, 0); + }, + async (dlg, amount) => { + await dialog(dlg, `I'm sure it is just as beautiful as you are.`, 4000, 0); + }, +]; + +function delay(ms: number) { + return new Promise((resolve) => setTimeout(resolve, ms)); +} + +//Styled Elements +//Default +const Container = styled.div` + position: absolute; + width: 100%; + height: 100%; + padding: 0; + margin: 0; + overflow: hidden; +`; + +const BG = styled.div` + position: absolute; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-image: url('${homeBackground}'); +`; + +//Donation Total +const TotalEl = styled.div` + font-family: gdqpixel; + font-size: 46px; + color: white; + + position: absolute; + text-shadow: -3px 0 black, 0 -3px black, 3px 0 black, 0 3px black, -3px -3px black, -3px 3px black, 3px -3px black, + 3px 3px black; + + right: 30px; + bottom: 30px; +`; + +//Handsome Frog +const Frog = styled.img` + position: absolute; + height: 192px; + width: 192px; + left: 25%; + top: 75%; + transform: translate(-128px, -128px); +`; + +const DialogBox = styled.img<{ DIALOGUE_ACTIVE: boolean }>` + position: absolute; + width: 100%; + height: 100%; + display: ${({ DIALOGUE_ACTIVE }) => (DIALOGUE_ACTIVE ? 'block' : 'none')}; +`; + +const DialogueWrapper = styled.div<{ FONT_SIZE: string }>` + font-family: NikoDialogue; + font-size: ${({ FONT_SIZE }) => FONT_SIZE || '38px'}; + line-height: 38px; + position: absolute; + width: 100%; + left: 87%; + top: 45%; + font-weight: bold; + overflow-wrap: break-word; + transform: translate(-50%, -50%) rotate(1deg); +`; + +const DialogueText = styled.span` + color: #4c3573; + display: inline-block; + text-align: center; + padding-right: 500px; + width: 100%; + box-sizing: border-box; +`; + +const Vignette = styled.img<{ VIGNETTE_STATE: boolean }>` + position: absolute; + width: 100%; + height: 100%; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + background-image: url('${vignette}'); + display: ${({ VIGNETTE_STATE }) => (VIGNETTE_STATE ? 'block' : 'none')}; +`; + +const Glimmer = styled.img<{ VIGNETTE_STATE: boolean; POS_LEFT: string; POS_TOP: string }>` + position: absolute; + height: 128px; + width: 128px; + left: ${({ POS_LEFT }) => POS_LEFT || '100%'}; + top: ${({ POS_TOP }) => POS_TOP || '100%'}; + display: ${({ VIGNETTE_STATE }) => (VIGNETTE_STATE ? 'block' : 'none')}; +`; + +//Tamagotchi Body +const slideUp = keyframes` + from {top: 200%} + to {top: 40%} +`; + +const TamagotchiActiveWrapper = styled.div<{ TAMAGOTCHI_ACTIVE: boolean }>` + position: absolute; + height: 384px; + width: 384px; + left: 45%; + top: 40%; + transform: translate(-128px, -128px); + display: ${({ TAMAGOTCHI_ACTIVE }) => (TAMAGOTCHI_ACTIVE ? 'block' : 'none')}; + animation: ${slideUp} 1s; + animation-timing-function: cubic-bezier(0, -2, 0.8, 2); +`; + +const TamagotchiInactiveWrapper = styled.div<{ TAMAGOTCHI_ACTIVE: boolean }>` + position: absolute; + height: 384px; + width: 384px; + left: 45%; + top: 200%; + transform: translate(-128px, -128px); + display: ${({ TAMAGOTCHI_ACTIVE }) => (TAMAGOTCHI_ACTIVE ? 'none' : 'block')}; + animation: ${slideUp} 1s; + animation-direction: reverse; + animation-timing-function: cubic-bezier(0, -2, 0.8, 2); +`; + +const TamagotchiBody = styled.img` + position: absolute; + height: 100%; + width: 100%; +`; + +const TamagotchiKeychain = styled.img` + position: absolute; + height: 384px; + width: 192px; + left: 71%; + top: 48%; +`; + +const TamagotchiLRButton = styled.img<{ POS_LEFT: string; POS_TOP: string; TRANSFORM: string }>` + position: absolute; + height: 44px; + width: 59px; + left: ${({ POS_LEFT }) => POS_LEFT || '15%'}; + top: ${({ POS_TOP }) => POS_TOP || '70%'}; + transform: ${({ TRANSFORM }) => TRANSFORM || 'translate(50%, 50%) scaleX(1)'}; +`; + +const TamagotchiMainButton = styled.img` + position: absolute; + height: 66px; + width: 66px; + left: 50%; + top: 80%; + transform: translate(-33px, -33px); +`; + +//Tamagotchi Game Styled +//Game Screen - acts as wrapper for the game +const TamagotchiGameScreen = styled.div` + position: absolute; + background-color: #90c3a9; + height: 160px; + width: 160px; + left: 63%; + top: 61%; + transform: translate(-128px, -128px); + overflow: hidden; +`; + +const TamagotchiDlgWrapper = styled.div` + font-family: NikoTamagotchi; + font-size: 20px; + line-height: 15px; + position: absolute; + width: 100%; + left: 50%; + top: 15%; + overflow-wrap: break-word; + transform: translate(-50%, -50%); +`; + +const TamagotchiDlgText = styled.span` + color: #20453b; + display: inline-block; + text-align: center; + padding-right: 0px; + width: 100%; + box-sizing: border-box; +`; + +//Animation to move the screen to the left or the right +const screenSlideRightToCenter = keyframes` + from {left: 150%} + to {left: 15%} +`; + +const screenSlideCenterToLeft = keyframes` + from {left: 15%} + to {left: -150%} +`; + +const screenSlideCenterToLeftSpeechBubble = keyframes` + from {left: 0%} + to {left: -150%} +`; + +//Screen 01, Snail Pet +const SnailPetCenter = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 68%; + width: 68%; + left: 15%; + top: 34%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; +`; + +const SnailPetLeft = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 68%; + width: 68%; + left: -150%; + top: 34%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; + animation: ${screenSlideCenterToLeft} linear 1s; +`; + +const SnailPetRight = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 68%; + width: 68%; + left: -150%; + top: 34%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; + animation: ${screenSlideCenterToLeft} linear 1s; + animation-direction: reverse; +`; + +//Screen 01, Snail Speech Bubble above the snail +//Includes the text as well +const SpeechBubbleCenter = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 18.75%; + width: 100%; + left: 0%; + top: 20%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; +`; + +//Screen 02, Snail Pet Food +const FoodCenter = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 68%; + width: 68%; + left: 15%; + top: 34%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; +`; + +const FoodCenterToRight = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 68%; + width: 68%; + left: 150%; + top: 34%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; + animation: ${screenSlideRightToCenter} linear 1s; + animation-direction: reverse; +`; + +const FoodRightToCenter = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 68%; + width: 68%; + left: 150%; + top: 34%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; + animation: ${screenSlideRightToCenter} linear 1s; +`; + +const TamagotchiKitchenCenter = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 13.33%; + width: 70%; + left: 15%; + top: 5%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; +`; + +const TamagotchiKitchenCenterToRight = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 13.33%; + width: 70%; + left: 150%; + top: 5%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; + animation: ${screenSlideRightToCenter} linear 1s; + animation-direction: reverse; +`; + +const TamagotchiKitchenRightToCenter = styled.img<{ VISIBLE: boolean }>` + position: absolute; + height: 13.33%; + width: 70%; + left: 150%; + top: 5%; + display: ${({ VISIBLE }) => (VISIBLE ? 'block' : 'none')}; + animation: ${screenSlideRightToCenter} linear 1s; +`; diff --git a/src/channels/index.ts b/src/channels/index.ts index 19cb3bb..449c66e 100644 --- a/src/channels/index.ts +++ b/src/channels/index.ts @@ -17,5 +17,6 @@ import './ff-shop'; import './papers-please'; import './minesweeper'; import './qwop'; +import './here-comes-niko'; export * from './channels';