Skip to content

Commit

Permalink
full code refactoring
Browse files Browse the repository at this point in the history 
included more react.js native solutions. replaced alotta raw javascript
  • Loading branch information
@satasatalight
satasatalight committed Oct 3, 2024
1 parent 8cc56d9 commit 262870a
Show file tree
Hide file tree
Showing 4 changed files with 171 additions and 227 deletions.
60 changes: 30 additions & 30 deletions src/channels/cookie-clicker/buildings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import prismBackground from './assets/bgPrism.png'
import { RefObject } from 'react';

export type Building = {
id: number;
index: number; // gives location of building on sprite sheets
name: string;
total: number;
price: number;
Expand All @@ -25,8 +25,8 @@ export type Building = {
yRandomization: number;
}

// export let cursor: Building = {
// id: 0,
// let cursor: Building = {
// index: 0,
// name: "Cursor",
// total: 0,
// price: 1,
Expand All @@ -37,8 +37,8 @@ export type Building = {
// yRandomization: 0,
// }

export let grandma: Building = {
id: 1,
let grandma: Building = {
index: 1,
name: "Grandma",
total: 0,
price: 1,
Expand All @@ -49,8 +49,8 @@ export let grandma: Building = {
yRandomization: 10,
}

export let farm: Building = {
id: 2,
let farm: Building = {
index: 2,
name: "Farm",
total: 0,
price: 5,
Expand All @@ -61,8 +61,8 @@ export let farm: Building = {
yRandomization: 8,
}

export let mine: Building = {
id: 3,
let mine: Building = {
index: 3,
name: "Mine",
total: 0,
price: 10,
Expand All @@ -73,8 +73,8 @@ export let mine: Building = {
yRandomization: 8,
}

export let factory: Building = {
id: 4,
let factory: Building = {
index: 4,
name: "Factory",
total: 0,
price: 15,
Expand All @@ -85,8 +85,8 @@ export let factory: Building = {
yRandomization: 0,
}

export let bank: Building = {
id: 5,
let bank: Building = {
index: 5,
name: "Bank",
total: 0,
price: 30,
Expand All @@ -97,8 +97,8 @@ export let bank: Building = {
yRandomization: 4,
}

export let temple: Building = {
id: 6,
let temple: Building = {
index: 6,
name: "Temple",
total: 0,
price: 50,
Expand All @@ -109,8 +109,8 @@ export let temple: Building = {
yRandomization: 2,
}

export let tower: Building = {
id: 7,
let tower: Building = {
index: 7,
name: "Wizard Tower",
total: 0,
price: 75,
Expand All @@ -121,8 +121,8 @@ export let tower: Building = {
yRandomization: 5,
}

export let shipment: Building = {
id: 8,
let shipment: Building = {
index: 8,
name: "Shipment",
total: 0,
price: 100,
Expand All @@ -133,8 +133,8 @@ export let shipment: Building = {
yRandomization: 3,
}

export let lab: Building = {
id: 9,
let lab: Building = {
index: 9,
name: "Alchemy Lab",
total: 0,
price: 125,
Expand All @@ -145,8 +145,8 @@ export let lab: Building = {
yRandomization: 4,
}

export let portal: Building = {
id: 10,
let portal: Building = {
index: 10,
name: "Portal",
total: 0,
price: 150,
Expand All @@ -157,8 +157,8 @@ export let portal: Building = {
yRandomization: 4,
}

export let timeMachine: Building = {
id: 11,
let timeMachine: Building = {
index: 11,
name: "Time Machine",
total: 0,
price: 175,
Expand All @@ -169,8 +169,8 @@ export let timeMachine: Building = {
yRandomization: 5,
}

export let antimCondenser: Building = {
id: 12,
let antimCondenser: Building = {
index: 12,
name: "Antimatter",
total: 0,
price: 200,
Expand All @@ -181,8 +181,8 @@ export let antimCondenser: Building = {
yRandomization: 8,
}

export let prism: Building = {
id: 13,
let prism: Building = {
index: 13,
name: "Prism",
total: 0,
price: 250,
Expand All @@ -193,4 +193,4 @@ export let prism: Building = {
yRandomization: 1,
}

export let buildings = [prism, antimCondenser, timeMachine, portal, lab, shipment, tower, temple, bank, factory, mine, farm, grandma];
export let buildings = [grandma, farm, mine, factory, bank, temple, tower, shipment, lab, portal, timeMachine, antimCondenser, prism];
111 changes: 95 additions & 16 deletions src/channels/cookie-clicker/components.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import { useRef, FC } from 'react';
import { css } from '@emotion/react';
import { css, keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { Building } from './buildings';
import { random } from 'lodash';

// images
import background from './assets/bgBlue.png';
import vignette from './assets/shadedBordersSoft.png';
import panelVertical from './assets/panelVertical.png';
Expand All @@ -12,6 +14,7 @@ import cookieShadow from './assets/cookieShadow.png';
import perfectCookie from './assets/perfectCookie.png';
import cookieParticle from './assets/cookieParticle.png'

// sprite sheets
import storeBackground from './assets/storeTile.png'
import buildingIcons from './assets/buildingIcons.png'

Expand All @@ -32,8 +35,8 @@ export let StoreSection: FC<{buildingObject : Building}> = ({buildingObject}) =>
buildingObject.storeRef = useRef<HTMLDivElement>(null)

return <>
<div css={css`${StoreWindow}; background: url('${storeBackground}') 0 ${(buildingObject.id % 4) * 64}px;`} ref={buildingObject.storeRef}>
<div css={css`${StoreIcon}; background: url('${buildingIcons}') 0 ${-buildingObject.id * 64}px;`}/>
<div css={css`${StoreWindow}; background: url('${storeBackground}') 0 ${(buildingObject.index % 4) * 64}px;`} ref={buildingObject.storeRef}>
<div css={css`${StoreIcon}; background: url('${buildingIcons}') 0 ${-buildingObject.index * 64}px;`}/>
<FormattedText>
<TotalText>{buildingObject.total}</TotalText>
<Store>{buildingObject.name}</Store>
Expand Down Expand Up @@ -101,28 +104,104 @@ let Price = styled.div`
width: calc(100% - 64px);
`

export let FloatText = (locationX : number, locationY : number) => {
export function ParticleAnimation(locationX : number, locationY : number){
let flipped = (random(0,1) == 0) ? 1 : -1;

return (
keyframes`
from{
left: ${locationX}%;
top: ${locationY}%;
transform: rotate(0);
opacity: 1;
}
20%{
left: ${locationX + (1 * flipped)}%;
top: ${locationY - 2}%;
transform: rotate(5deg);
opacity: 0.8;
}
40%{
left: ${locationX + (2.5 * flipped)}%;
top: ${locationY - 3}%;
transform: rotate(10deg);
opacity: 0.6;
}
60%{
left: ${locationX + (4 * flipped)}%;
top: ${locationY - 2}%;
transform: rotate(15deg);
opacity: 0.4;
}
80%{
left: ${locationX + (5 * flipped)}%;
top: ${locationY}%;
transform: rotate(20deg);
opacity: 0.2;
}
100%:{
left: ${locationX + (6 * flipped)}%;
top: ${locationY + 3}%
transform: rotate(20deg);
opacity: 0;
}`);
}

export let FadeUpAnimation = (locationY: number) => {
return keyframes`
from{
top: ${locationY}%;
opacity: 1;
}
to{
top: ${locationY - 10}%;
opacity: 0;
}`;
}

export let FloatText = (locationX : number) => {
return css`
position: absolute;
font-family: Merriweather;
font-size: 100%;
text-shadow: 0px 1px 5px black;
left: ${locationX + "%"};
animation: fadeUp 1.5s linear;
@keyframes fadeUp{
from{
top: ${locationY}%;
opacity: 1;
}
to{
top: ${locationY - 10}%;
opacity: 0;
};
}
`;
}

export let CookieClicked = keyframes`
from{
transform: scale(1)
}
15%{
transform: scale(0.9)
}
25%{
transform: scale(1)
}
65%{
transform: scale(0.95)
}
to{
transform: scale(1)
}
`;

export let staticFadeUp = keyframes`
from{
top: 25%;
opacity: 1;
}
90%{
top: 25%;
opacity: 1;
}
to{
top: 0%;
opacity: 0;
}
`

export let CookieParticle = styled.img`
position: absolute;
content:url(${cookieParticle});
Expand Down
Loading

0 comments on commit 262870a

Please sign in to comment.