Merge pull request #180 from WildCodeSchool/feature/daily-gift

Feature/daily gift

Author: YDrogen

packages/backend/api/src/game/get.gift.ts

@@ -0,0 +1,241 @@
+import { type Request, Router } from 'express';
+import { sql } from 'kysely';
+
+import { db } from '@app/backend-shared';
+import { generateName } from '@app/shared';
+
+const getGiftRoute = Router();
+
+//check if last received gift more than 24h
+function getLastGift(parkId: number) {
+  return db
+    .selectFrom('park_gifts')
+    .select(['gift_date'])
+    .where('park_id', '=', parkId)
+    .where('gift_date', '>', sql<Date>`NOW() - INTERVAL 24 HOUR`)
+    .execute();
+}
+
+//function insert into parks_gift
+async function insertGift(parkId: number, type: string, value: string) {
+  await db
+    .insertInto('park_gifts')
+    .values({
+      type,
+      gift_date: sql`NOW()`,
+      value,
+      park_id: parkId,
+    })
+    .executeTakeFirst();
+}
+
+//function updateWllet
+async function updateWallet(parkId: number, amount: number) {
+  await db
+    .updateTable('parks')
+    .set((eb) => ({
+      wallet: eb('wallet', '+', amount),
+    }))
+    .where('id', '=', parkId)
+    .executeTakeFirst();
+}
+
+type Creature = {
+  id: number;
+  feed_timer: number | null;
+  src_image: string | null;
+  species: string;
+};
+
+//function insert creature into park_creatures
+async function insertCreatureToPark(parkId: number, creature: Creature) {
+  const name = generateName();
+  const gender = Math.random() < 0.5 ? 'male' : 'female';
+
+  await db
+    .insertInto('park_creatures')
+    .values({
+      name,
+      gender,
+      is_adult: 1,
+      is_parent: 0,
+      feed_date: sql`NOW() + INTERVAL ${creature.feed_timer} MINUTE`,
+      adult_at: sql`NOW()`,
+      park_id: parkId,
+      creature_id: creature.id,
+    })
+    .executeTakeFirst();
+}
+
+type Visitor = {
+  id: number;
+  category: string;
+  src_image: string | null;
+};
+
+//function insert visitor into park_visitors
+async function insertVisitorToPark(parkId: number, visitor: Visitor) {
+  await db
+    .insertInto('park_visitors')
+    .values({
+      entry_time: sql`NOW()`,
+      exit_time: sql`NOW() + INTERVAL 4 HOUR`,
+      park_id: parkId,
+      visitor_id: visitor.id,
+    })
+    .executeTakeFirst();
+}
+
+getGiftRoute.get('/gift', async (req: Request, res) => {
+  const parkId = req.parkId;
+  if (parkId === undefined) {
+    res.json({
+      ok: false,
+    });
+    return;
+  }
+
+  const lastGift = await getLastGift(parkId);
+
+  //if last gift less than 24H
+  if (lastGift.length > 0) {
+    res.json({
+      ok: false,
+      message: 'Too soon for a new gift.',
+    });
+    return;
+  }
+
+  const gifts = ['creature', 'visitor', 'moons'];
+  const giftType = gifts[Math.floor(Math.random() * gifts.length)];
+
+  //if creature is drawn
+  if (giftType === 'creature') {
+    //check unlocked creatures
+    const creatures = await db
+      .selectFrom('park_creatures')
+      .innerJoin('creatures', 'creatures.id', 'park_creatures.creature_id')
+      .select([
+        'creatures.id',
+        'creatures.feed_timer',
+        'creatures.src_image',
+        'creatures.species',
+      ])
+      .where('park_id', '=', parkId)
+      .distinct()
+      .execute();
+
+    //if no creature unlocked yet insert a default creature
+    if (creatures.length === 0) {
+      const defaultCreature = await db
+        .selectFrom('creatures')
+        .select(['id', 'species', 'feed_timer', 'src_image'])
+        .where('id', '=', 1)
+        .executeTakeFirst();
+
+      if (defaultCreature === undefined) {
+        res.json({
+          ok: false,
+          message: 'no creature available',
+        });
+        return;
+      }
+
+      await insertGift(parkId, 'creature', defaultCreature.species);
+      await insertCreatureToPark(parkId, defaultCreature);
+    }
+
+    //else draw a creature from the unlocked ones
+    const chosen = creatures[Math.floor(Math.random() * creatures.length)];
+
+    await insertGift(parkId, 'creature', chosen.species);
+    await insertCreatureToPark(parkId, chosen);
+
+    res.json({
+      ok: true,
+      gift: {
+        type: 'creature',
+        creatureId: chosen.id,
+        image: chosen.src_image,
+      },
+    });
+    return;
+  }
+
+  //if visitor is drawn
+  if (giftType === 'visitor') {
+    //check unlocked visitors
+    const visitors = await db
+      .selectFrom('park_visitors')
+      .innerJoin('visitors', 'visitors.zone_id', 'park_visitors.visitor_id')
+      .select([
+        'visitors.id',
+        'visitors.category',
+        'visitors.src_image',
+        'visitors.entry_price',
+      ])
+      .where('park_id', '=', parkId)
+      .distinct()
+      .execute();
+
+    //if no visitors unlocked yet insert a default visitor
+    if (visitors.length === 0) {
+      const defaultVisitor = await db
+        .selectFrom('visitors')
+        .select(['id', 'category', 'src_image', 'entry_price'])
+        .where('id', '=', 1)
+        .executeTakeFirst();
+
+      if (defaultVisitor === undefined) {
+        res.json({
+          ok: false,
+          message: 'no creature available',
+        });
+        return;
+      }
+
+      await insertGift(parkId, 'visitor', `visitor-${defaultVisitor.category}`);
+      await insertVisitorToPark(parkId, defaultVisitor);
+      await updateWallet(parkId, defaultVisitor.entry_price);
+    }
+
+    //else draw a visitor from the unlocked ones
+    const chosen = visitors[Math.floor(Math.random() * visitors.length)];
+
+    await insertGift(parkId, 'visitor', `visitor- ${chosen.category}`);
+    await insertVisitorToPark(parkId, chosen);
+    await updateWallet(parkId, chosen.entry_price);
+
+    res.json({
+      ok: true,
+      gift: {
+        type: 'visitor',
+        creatureId: chosen.category,
+        image: chosen.src_image,
+      },
+    });
+    return;
+  }
+
+  //if moons is drawn
+  if (giftType === 'moons') {
+    const amounts = [500, 1000, 1500, 2000];
+    const prize = amounts[Math.floor(Math.random() * amounts.length)];
+
+    await insertGift(parkId, 'moons', String(prize));
+    await updateWallet(parkId, prize);
+
+    res.json({
+      ok: true,
+      gift: {
+        type: 'moons',
+        moons: prize,
+      },
+    });
+    return;
+  }
+
+  res.json({ ok: false });
+});
+
+export default getGiftRoute;

packages/backend/api/src/game/index.ts

@@ -8,6 +8,7 @@ import getAvatars from './get.avatars';
 import getCreaturesMenuRoute from './get.creatures-menu';
 import getDecorations from './get.decorations';
 import getEnclosures from './get.enclosures';
+import getGiftRoute from './get.gift';
 import getLeaderboardRoute from './get.leaderboard';
 import getParkUser from './get.park-user';
 import getWallet from './get.wallet';
@@ -30,5 +31,6 @@ gameRouter.use('/visitors', visitorRouter);
 gameRouter.use(getLeaderboardRoute);
 gameRouter.use(getAvatars);
 gameRouter.use(getCreaturesMenuRoute);
+gameRouter.use(getGiftRoute);
 
 export default gameRouter;

packages/frontend/web/src/components/daily-gift.tsx

@@ -0,0 +1,52 @@
+import type { PropsWithChildren } from 'react';
+
+import Chest from '../assets/images/deco/chest.png';
+import Moons from '../assets/images/icons-buttons/moon.png';
+
+type DailyGiftProps = PropsWithChildren<{
+  readonly src_image?: string;
+  readonly type: 'creature' | 'visitor' | 'moons';
+  readonly amount?: number;
+  readonly onClick: () => void;
+}>;
+
+export default function DailyGift({
+  src_image,
+  type,
+  amount,
+  onClick,
+}: DailyGiftProps) {
+  return (
+    <div
+      onClick={onClick}
+      className='fixed inset-0 flex justify-center bg-black/70'
+    >
+      <div className='animate-lights-on h-screen w-70 bg-gradient-to-b from-white/50 to-white/0 [clip-path:polygon(45%_0%,55%_0%,100%_100%,0%_100%)]' />
+      <img
+        src={Chest}
+        alt='chest'
+        className='animate-scale absolute mt-25 w-25 drop-shadow-[0_5px_10px_white] md:mt-35 md:w-40'
+      />
+
+      {type === 'moons' ? (
+        <div className='absolute mt-85 flex flex-col items-center gap-3 text-white md:mt-120'>
+          <p className='text-3xl font-bold drop-shadow-[0_2px_4px_black] md:text-4xl'>
+            {amount}
+          </p>
+          <img src={Moons} alt='moons' className='w-10 md:w-16' />
+        </div>
+      ) : (
+        <img
+          src={`/images/creatures/${src_image}`}
+          alt='gift'
+          className='animate-drop absolute mt-85 w-18 drop-shadow-[0_5px_10px_white] md:mt-120 md:w-25'
+          style={{
+            animationDelay: '2s',
+            animationFillMode: 'forwards',
+            opacity: 0,
+          }}
+        />
+      )}
+    </div>
+  );
+}

packages/frontend/web/src/globals.css

@@ -70,6 +70,15 @@ body {
 
   /* wallet */
   --animate-wallet-up: walletUp 2s ease-in-out forwards;
+
+  /* gifts light */
+  --animate-lights-on: lightsOn 3s ease-in-out;
+
+  /* chest apparition */
+  --animate-scale: chestApparition 2s ease-in-out;
+
+  /* drop gift */
+  --animate-drop: dropGift 1s ease-out forwards;
 }
 
 @keyframes typing1 {
@@ -201,6 +210,64 @@ body {
 }
 /* End animation wallet */
 
+/* Daily gift animations */
+/* lights on */
+@keyframes lightsOn {
+  0% {
+    opacity: 0;
+  }
+  5% {
+    opacity: 0;
+  }
+  7% {
+    opacity: 1;
+  }
+  10% {
+    opacity: 0;
+  }
+  15% {
+    opacity: 0;
+  }
+  18% {
+    opacity: 1;
+  }
+  20% {
+    opacity: 0;
+  }
+  33% {
+    opacity: 0;
+  }
+  35% {
+    opacity: 1;
+  }
+}
+
+/* Chest apparition */
+@keyframes chestApparition {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* Drop gift */
+@keyframes dropGift {
+  0% {
+    transform: translateY(-200px);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* End of Daily gift animations */
+
 .text-outline-purple {
   -webkit-text-stroke-width: 4px;
   -webkit-text-stroke-color: #4d40a8;