feat: add cookie clicker channel (#35)

* Added Cookie Clicker Donation Channel

* fixed building issues

* cleanup

* full code refactoring

included more react.js native solutions. replaced alotta raw javascript

* Update package-lock.json

* chore(cookie-clicker): run eslint fix

* fix(cookie-clicker): hide scrollbars

On Windows, the scrollbars take up fixed size and have very clear
Windows stylings, which doesn't match the preview video on the PR which
shows overlay scrollbars. Since scrolling is ran programmatically anyway,
I've hidden the scrollbar.

---------

Co-authored-by: VodBox <dillon@vodbox.io>

src/assets/fonts.css

@@ -95,4 +95,9 @@
 @font-face {
 	font-family: NikoTamagotchi;
 	src: url('fonts/NikoTamagotchi.ttf') format('truetype');
-}
+}
+
+@font-face {
+	font-family: Merriweather;
+	src: url('fonts/Merriweather-Black.ttf') format('woff2');
+}

src/channels/cookie-clicker/buildings.tsx

@@ -0,0 +1,210 @@
+import grandmaBackground from './assets/bgGrandma.png';
+import farmBackground from './assets/bgFarm.png';
+import mineBackground from './assets/bgMine.png';
+import factoryBackground from './assets/bgFactory.png';
+import bankBackground from './assets/bgBank.png';
+import templeBackground from './assets/bgTemple.png';
+import towerBackground from './assets/bgTower.png';
+import shipmentBackground from './assets/bgShipment.png';
+import labBackground from './assets/bgLab.png';
+import portalBackground from './assets/bgPortal.png';
+import timeBackground from './assets/bgTime.png';
+import antimBackground from './assets/bgAntim.png';
+import prismBackground from './assets/bgPrism.png';
+import { RefObject } from 'react';
+
+export type Building = {
+	index: number; // gives location of building on sprite sheets
+	name: string;
+	total: number;
+	price: number;
+	background: string;
+	canvasRef: null | RefObject<HTMLCanvasElement>;
+	savedCanvas: undefined | ImageData;
+	storeRef: null | RefObject<HTMLDivElement>;
+	yRandomization: number;
+};
+
+// let cursor: Building = {
+//     index: 0,
+//     name: "Cursor",
+//     total: 0,
+//     price: 1,
+//     background: "",
+//     canvasRef: null,
+//     savedCanvas: null,
+//     storeRef: null,
+//     yRandomization: 0,
+// }
+
+const grandma: Building = {
+	index: 1,
+	name: 'Grandma',
+	total: 0,
+	price: 1,
+	background: grandmaBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 10,
+};
+
+const farm: Building = {
+	index: 2,
+	name: 'Farm',
+	total: 0,
+	price: 5,
+	background: farmBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 8,
+};
+
+const mine: Building = {
+	index: 3,
+	name: 'Mine',
+	total: 0,
+	price: 10,
+	background: mineBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 8,
+};
+
+const factory: Building = {
+	index: 4,
+	name: 'Factory',
+	total: 0,
+	price: 15,
+	background: factoryBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 0,
+};
+
+const bank: Building = {
+	index: 5,
+	name: 'Bank',
+	total: 0,
+	price: 30,
+	background: bankBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 4,
+};
+
+const temple: Building = {
+	index: 6,
+	name: 'Temple',
+	total: 0,
+	price: 50,
+	background: templeBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 2,
+};
+
+const tower: Building = {
+	index: 7,
+	name: 'Wizard Tower',
+	total: 0,
+	price: 75,
+	background: towerBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 5,
+};
+
+const shipment: Building = {
+	index: 8,
+	name: 'Shipment',
+	total: 0,
+	price: 100,
+	background: shipmentBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 3,
+};
+
+const lab: Building = {
+	index: 9,
+	name: 'Alchemy Lab',
+	total: 0,
+	price: 125,
+	background: labBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 4,
+};
+
+const portal: Building = {
+	index: 10,
+	name: 'Portal',
+	total: 0,
+	price: 150,
+	background: portalBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 4,
+};
+
+const timeMachine: Building = {
+	index: 11,
+	name: 'Time Machine',
+	total: 0,
+	price: 175,
+	background: timeBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 5,
+};
+
+const antimCondenser: Building = {
+	index: 12,
+	name: 'Antimatter',
+	total: 0,
+	price: 200,
+	background: antimBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 8,
+};
+
+const prism: Building = {
+	index: 13,
+	name: 'Prism',
+	total: 0,
+	price: 250,
+	background: prismBackground,
+	canvasRef: null,
+	savedCanvas: undefined,
+	storeRef: null,
+	yRandomization: 1,
+};
+
+export const buildings = [
+	grandma,
+	farm,
+	mine,
+	factory,
+	bank,
+	temple,
+	tower,
+	shipment,
+	lab,
+	portal,
+	timeMachine,
+	antimCondenser,
+	prism,
+];