From 635cee8bf421f821859876ca652c89c86aeb4a7a Mon Sep 17 00:00:00 2001
From: Maggie Bauer <maggie@sentry.io>
Date: Tue, 22 Aug 2023 14:38:19 -0700
Subject: [PATCH] hackweek tamagotchi project

---
 static/app/icons/tamagotchi/tamagotchi.tsx    | 130 ++++++++++++++++++
 .../app/views/projectDetail/projectDetail.tsx |   2 +
 static/images/tamagotchi/egg.gif              | Bin 0 -> 4058 bytes
 static/images/tamagotchi/happy.gif            | Bin 0 -> 1136 bytes
 static/images/tamagotchi/meh.gif              | Bin 0 -> 1056 bytes
 static/images/tamagotchi/sad.gif              | Bin 0 -> 1123 bytes
 6 files changed, 132 insertions(+)
 create mode 100644 static/app/icons/tamagotchi/tamagotchi.tsx
 create mode 100644 static/images/tamagotchi/egg.gif
 create mode 100644 static/images/tamagotchi/happy.gif
 create mode 100644 static/images/tamagotchi/meh.gif
 create mode 100644 static/images/tamagotchi/sad.gif

diff --git a/static/app/icons/tamagotchi/tamagotchi.tsx b/static/app/icons/tamagotchi/tamagotchi.tsx
new file mode 100644
index 0000000000000..f002ac81cfa8a
--- /dev/null
+++ b/static/app/icons/tamagotchi/tamagotchi.tsx
@@ -0,0 +1,130 @@
+import {useEffect, useMemo, useState} from 'react';
+import styled from '@emotion/styled';
+
+import tamagotchiEgg from 'sentry-images/tamagotchi/egg.gif';
+import tamagotchiHappy from 'sentry-images/tamagotchi/happy.gif';
+import tamagotchiMeh from 'sentry-images/tamagotchi/meh.gif';
+import tamagotchiSad from 'sentry-images/tamagotchi/sad.gif';
+
+import {t} from 'sentry/locale';
+
+function Tamagotchi() {
+  const [currentScore, setCurrentScore] = useState(0);
+  const [currentStage, setCurrentStage] = useState(tamagotchiEgg);
+  const [currentStageName, setCurrentStageName] = useState('Hatching Your Tamagatchi');
+
+  const tamagotchiStages = useMemo(() => {
+    const stages = {
+      0: {
+        stage: tamagotchiEgg,
+        stageName: 'Egg',
+      },
+      1: {
+        stage: tamagotchiSad,
+        stageName: 'Sad',
+      },
+      2: {
+        stage: tamagotchiMeh,
+        stageName: 'Meh',
+      },
+      3: {
+        stage: tamagotchiHappy,
+        stageName: 'Happy',
+      },
+    };
+    return stages;
+  }, []);
+
+  useEffect(() => {
+    // Currently allowing 3 seconds for egg to hatch and then set the initial data to the Sad stage
+    setTimeout(() => {
+      setCurrentScore(1);
+      setCurrentStage(tamagotchiStages[1].stage);
+      setCurrentStageName(tamagotchiStages[1].stageName);
+    }, 3000);
+  }, [tamagotchiStages]);
+
+  // These handle clicks are placeholders to allow the buttons to cycle through the stages
+  const handleIncreaseClick = () => {
+    setCurrentScore(currentScore + 1);
+    setCurrentStage(tamagotchiStages[currentScore].stage);
+    setCurrentStageName(tamagotchiStages[currentScore].stageName);
+  };
+
+  const handleDecreaseClick = () => {
+    setCurrentScore(currentScore - 1);
+    setCurrentStage(tamagotchiStages[currentScore].stage);
+    setCurrentStageName(tamagotchiStages[currentScore].stageName);
+  };
+
+  return (
+    <TamagotchiWrapper>
+      <h3>{t('Tamagotchi Status: ')}</h3>
+      <h4>{currentStageName}</h4>
+      <img height={200} alt="tamagotchi" src={currentStage} />
+      <Wrapper>
+        <FirstTitle>{t('This is where we can give some message')}</FirstTitle>
+        <ButtonWrapper>
+          <Button onClick={handleIncreaseClick}>{t('Yes')}</Button>
+          <Button onClick={handleDecreaseClick}>{t('Nope 💩')}</Button>
+        </ButtonWrapper>
+      </Wrapper>
+    </TamagotchiWrapper>
+  );
+}
+
+export default Tamagotchi;
+
+const TamagotchiWrapper = styled('div')`
+  font-family: monospace;
+`;
+
+const FirstTitle = styled('h4')`
+  font-weight: 600;
+  font-size: 16px;
+  padding: 0px 8px 8px;
+  margin: 0;
+`;
+
+const Wrapper = styled('div')`
+  width: 400px;
+  max-height: 500px;
+  height: fit-content;
+  background-color: #fbf1c7;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  padding: 16px 12px;
+  font-weight: 600;
+  font-size: 14px;
+  position: relative;
+  white-space: pre-wrap;
+  word-break: break-word;
+
+  :before {
+    content: '';
+    width: 0px;
+    height: 0px;
+    position: absolute;
+    border-left: 14px solid transparent;
+    border-right: 15px solid #fbf1c7;
+    border-top: 18px solid transparent;
+    border-bottom: 18px solid #fbf1c7;
+    top: -36px;
+  }
+`;
+
+const Button = styled('button')`
+  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  width: 100px;
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
+const ButtonWrapper = styled('div')`
+  display: flex;
+  justify-content: space-between;
+  padding: 6px 0 0 0;
+`;
diff --git a/static/app/views/projectDetail/projectDetail.tsx b/static/app/views/projectDetail/projectDetail.tsx
index d71af6dc78dd5..edf0814a9eefe 100644
--- a/static/app/views/projectDetail/projectDetail.tsx
+++ b/static/app/views/projectDetail/projectDetail.tsx
@@ -21,6 +21,7 @@ import PageFiltersContainer from 'sentry/components/organizations/pageFilters/co
 import MissingProjectMembership from 'sentry/components/projects/missingProjectMembership';
 import {DEFAULT_RELATIVE_PERIODS} from 'sentry/constants';
 import {IconSettings} from 'sentry/icons';
+import Tamagotchi from 'sentry/icons/tamagotchi/tamagotchi';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import {Organization, PageFilters, Project} from 'sentry/types';
@@ -319,6 +320,7 @@ class ProjectDetail extends DeprecatedAsyncView<Props, State> {
                 )}
               </Layout.Main>
               <Layout.Side>
+                <Tamagotchi />
                 <ProjectTeamAccess organization={organization} project={project} />
                 <Feature features={['incidents']} organization={organization}>
                   <ProjectLatestAlerts
diff --git a/static/images/tamagotchi/egg.gif b/static/images/tamagotchi/egg.gif
new file mode 100644
index 0000000000000000000000000000000000000000..a97771ee6c2587136c7aaff022bd0018246b21cb
GIT binary patch
literal 4058
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

literal 0
HcmV?d00001

diff --git a/static/images/tamagotchi/happy.gif b/static/images/tamagotchi/happy.gif
new file mode 100644
index 0000000000000000000000000000000000000000..5402a70930c8b71202c3489ee30963ab3582edbf
GIT binary patch
literal 1136
zcmZ?wbhEHbtYAoC_`m=KivPL&TtkAL9RpmA^bD98fx<u`&)mfHRNut(%;apo^u*lU
zL|X$r6H^dmQ2fclDZ;?WpaU`hWE2C_|DOJpr{6LxF4=Ocd$ZZ5X5O|(KPm(}mu02S
zd(FLESLFIPqk7-E?<)Ie|7=rGIPBrGspa6bPo9oiO9E2W%hn2Q)?c^nd1&kYt%j$3
z-uWfG*s>xvZuk99xwZQmli&a7nRoVj`N!qYly;=Na9bg<V(W}=FNA-ZRt86wN>11K
zG2`aV4o)l8s7;Yx&EGSvJh~?A++KA>OS;=QJKTC!^{V8LRb|o+M_;-0%vzEqWaLxb
z^IGQU6!l&XUCA>sZyP^a?|tp{R{Y%WD`$ViX4I~TmD_XfAz#nGx&%Ete|?$vYyT-{
z&1X=ssJZj+Z8Ceuf{k(8M1EOGoK-xO#&gs`W%>qro6diNrk5U`&~86aB|f_%Mr~8X
zt}Y|5ARo?4D&Cdq-3RVWD_pjJhJOB`RVV$^_f<QX_Slq!$e&;6Ir&@Wt4W$iW;?a(
zompnG^r~QpbKmVKfo0)S6MBD5>D;PwYrV?!Rk0l(-)@cZd&*|=;#%IFHrKC<mPlV+
ze`aq}xR73sU_smwX4`9`Jj=Bo&r2!IoO>qxNkr-l-R!vNoyFJAPqFOItG0ac@>uBq
zZ(F%bKkmA*{^_N>*dO1ruIvbXFZXxz_V~N|JKvk_llqzYbkWT6vc8`mk6n4bf`6h7
z`)}h*S9iwS&zAl3ZA;jZ;zeC{dq32?y4`*DtzBKl?N6`S)spT1{}Ny&JHhZTo&!oS
z_xAkeZ+ql1?OErtSEshU<39e$=eknE^Id1nfAPQI6h3hGL&O=`i6<X?x>{ni=)BO?
z>uV;hyS(Pxv$tyd9~fTqx%TJOjxDLOO}o`U`PcI8EdTPO*gEgZ_5<mn8Xh}RZ?sz+
z`tg)wg-QkkXVA^!&PkG+GcR#2Jt1lJWu``C=q(Gc$un>5diAL)O7Zt`uGJ5^ytnKQ
z(ssRFJ>eAFp9R*{IyqUh#l?D_&8hj+9pke7P2k+K(razr&OFOntLs>^kyp;}-`zDQ
zeYy4*)~!C5)8p>nXTRM4q5i3R`!zl-+4;I`0<&WbH)~P?i-6<dmcwdd#R40XoO_;%
zDF-eI*&yrKCvE%b@(;tqM<y#wPR-eA^wil^AhS(Ha`IBI*-Y>E@JzU@Xf;o>_TCra
z&x>5zTuRUJtP)vzZvNy1Kieo#O~2)l?ca{vG8GSAn8;rDHSC(ggtZ}CH#qMw(>2@T
z{qmG(Fkk+i-C1i3=YH9oYdbTJlbKC>+8f0q1wXxdPnjD$uIM@|6&F+a?y2i!d26;?
zH(#Y+n0dDKnc~hZv#-qlJXg%7`D^@{wZ5zUl&eeLo!>2cSZ(ixV_ss1vqi!SZOYuA
ooSr&8<=>skf>VyG_rFcI-5q=9*6#Ug?`&(XeR$+6!oXk+0M8aFMgRZ+

literal 0
HcmV?d00001

diff --git a/static/images/tamagotchi/meh.gif b/static/images/tamagotchi/meh.gif
new file mode 100644
index 0000000000000000000000000000000000000000..3a39d0317a84c4bdc05cf4e2a72a5a9972ad028e
GIT binary patch
literal 1056
zcmZ?wbhEHbtYAoC_`m=KivPL&TtkAL9RpmA^bD98fx<u`&)mfHRNut(%;apo^u*lU
zL|X$r6H^dmQ2fclDZ;?WpaU`hWE2C_|DOJpr{6LxF4=Ocd$ZZ5X5O|(KPm(}mu02S
zd(FLESLFIPqk7-E?<)Ie|7=rGIPBrGspa6bPo9oiO9E2W%hn2Q)?c^nd1&kYt%j$3
z-uWfG*s>xvZuk99xwZQmli&a7nRoVj`N!qYly;=Na9bg<V(W}=FNA-ZRt86wN>109
z@$(Ajj>?J;ksiucS372&+WG2cm%G&@%imQYyPc%1D!Nx?pPW4*dlq|5m`&B0i82DO
zx9hBNev^IKCv2~EZP#X*qPHhvS?r$oTC9nc^VQuq_c2SB-nM(U-))?JS6ALAKZ##|
za({yS{_>ZP?sBUOC~RuJ^k;5%#0UAq?W$^4n>{AZJuH8Vi+^JBwTYr`Inu^aKYncF
zKQ%$id0ETTNvdZia=)B;Wc&I>XJ-qnWDz;BSzS2VvN`UKr^w2SlO1MHiOKr#(tE|J
zO}<OHo@-rMW3;kq%PrB@T5G*`Ui#u?^yvKNjEgTrZckIbv8d2=TlMSB@4}aUe)sC_
z?Co0j_gDW_Gxdouc(l0S^}3YoPaiLDn<RaF?VO6YDJ`@2CY@WeV}9x>L&fwzJW{1;
zS34tx%l?XQi(AVXeQ9g4bkJp$t?7Jhn`Z~+c^)j~|325CGXMOk+2Z=IZK@v3zO<S@
zCC~PEh6pR!iGhFd98hAox92y1+ar%@&pMaAI<@T`_wi3Y*OeNc?>cM#i~j|u@PWG@
zBF@N8Jo(_$)e@sc=Y_6bUo&al<u%`)y;a-)!0?*SwLhnJY)O@E+O7V{zm{)j`IjHX
z)_GU9A4nI~@Ys=hqut`rkEa|fR5BPigKidgPLkZ5d5LrB2}!FjGc_VZZ&`RvK6Odz
zXZx;KpH>BBo1ZRzy|MaI^+c&TuRlmD)<hM`%wD83)#lCfHJrNJd@jE6vR$#ZVQ-Mn
z>AmWHUi%pDHTmWAot(Gu-&;R*dD+%F|M=Yg{xh@p@8#!^&V2k!l;_9#XeT9ZK?M<x
zZUy#=HBxd5ESl$U_1wu|?ziQ}xd-kOWn`Op8UowgI#u=O`Dk`6nKjugY+Fy;!-u}L
zF;=&3zudh1P=iDJyJ+_<D^4!4IjrH@DX{YR^6Nzh=Nx{qYW5lv%c7~CS7%&ZH+i2Q
zueR8lYbI%ti_RL0y@{Ulb&l56Nb$45dwjp%>z%coBWj=HTQSv`&~?|Rrx+WB#eDmC
zbDG)VWiB$GGi;XiS^9sT^YeMySy9JorkGhJC)(FUPS4?$HokUaOY5VRz0n^Y-Pv=u
JN`ryH8UP$e{j>l8

literal 0
HcmV?d00001

diff --git a/static/images/tamagotchi/sad.gif b/static/images/tamagotchi/sad.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1b726ccb6cd5278476881ec93afec51ea2d4bf5b
GIT binary patch
literal 1123
zcmZ?wbhEHbtYAoC_`m=KivPL&TtkAL9RpmA^bD98fx<u`&)mfHRNut(%;apo^u*lU
zL|X$r6H^dmQ2fclDZ;?WpaU`hWE2C_|DOJpr{6LxF4=Ocd$ZZ5X5O|(KPm(}mu02S
zd(FLESLFIPqk7-E?<)Ie|7=rGIPBrGspa6bPo9oiO9E2W%hn2Q)?c^nd1&kYt%j$3
z-uWfG*s>xvZuk99xwZQmli&a7nRoVj`N!qYly;=Na9bg<V(W}=FNA-ZRt86wN>109
z@$(Ajj>?J;ksiucS372&+WG2cm%A0y^vRyPrCyh3XV2Qcy7)`fukOdvkF0y7xR&kC
zj=6Ird%4Z8JGXgybtG%NY;&8v+3a?ll~u?qT=#0NWNh3fJ?Fl{IeB{aeDN;x^Y6-?
zU!N#{Acpz*U1xQJ+cTRx{^*MASgv5#Za*V%%25NaW99F}-+H?I*tqae*Xvg^?{xG&
z_UKVG-4?<r9O9m?f49(qbIr1|ldbN4oRfK3^+KI?bJvp0(;7ihS}QeJXNt_eyxeJ~
zSE|$12V3U^ZuZ-9YU_&Y^|G&fT@ARO-<*+ny>7F{wYNdrio%z?jWj=acVXq$X`#2b
z-;UqYXv_C5>c_LNq;6sP>@L%di5q$Zt=EOk{Pgr#-Q#tCU;fm|IN9VZ{KUG<<mE}h
z!0J$6sck7YXUEpZo{d`e@_NJ9Z+5P`3qBk;{Ck#bw`5RJ?i@|s_-l7A7JFa58ktsi
zx3a{IbGN(STiZSCJ0G1EzLsZa^YhE2S`o4n2>;?apagPn&u{*=M;_CjbuN2#YTG;R
z<DY!4D>Xddb=LeB{|ipx19v|}oROV)^1-L8B}R+R3thdwX41OLYrZ{utG54v;WeLY
ze@^Y#k}BJ@Tm6%NE#J=aFF%T{^R8?^kS?m>u_N_HyTzd&PdQeoWH4|B-7M~$B)K{B
z66ewrl2%`4YD9+KvhbRG>XOvY_Fb<&tqRIEKVAHKWA&x#gA!A<=KPix^pT04xMoel
zobWR}2X#zmoDO@d!@EcK+8gP)Hg|JtXHEJk(@@7d`|X5%dFxKrG5Gseo}Zns|9{^8
z?eFKeRNTMSJK6p1IfKUI5|5l`2qf)q<dfH#A~Dg!weAJ0bdt}C!bQjXvdpx)etc9o
z$s;~{VM%6Ciswu*|9w0=FUk8(eWy{kq;2zakA=p?zfOJ=%Jf;BKTXS3a*Fyk&kJQm
zo2@#P16T3S)LZ?7<4xc?tG!vm?$>5-*pz*Fn)0z}-O(%#{io*M-n#bI?uyr|j&e^(
zvs!mz1JgRqh&PF)56|e;?JhOAdZ<s{T{ipYE3cE0()nk5D)VO?u2cLxH~N>(o#QK;
z=at=_rDu6yV|&!Ks%XO}ciJ=y<~7dVns;P%<XN`%YZaf0k0)L+3zez(>~uQSX8Sx7
b>sijXcJqrry=(pO!z1;{@9P#ZFjxZs<gO(c

literal 0
HcmV?d00001