feat() update rules

immortal-tofu · Dec 5, 2023 · 99a51c1 · 99a51c1
1 parent 5bd6383
commit 99a51c1
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 11 deletions.
diff --git a/src/abi/cipherbomb.json b/src/abi/cipherbomb.json
diff --git a/src/modules/common-ui/components/Connect/Connect.tsx b/src/modules/common-ui/components/Connect/Connect.tsx
@@ -31,8 +31,8 @@ export const Connect: React.FC<{
 
   const refreshNetwork = useCallback(async () => {
     if (await hasValidNetwork()) {
-      await createFhevmInstance(account);
       setValidNetwork(true);
+      await createFhevmInstance(account);
     } else {
       setValidNetwork(false);
     }

diff --git a/src/modules/home/components/Home/Home.css b/src/modules/home/components/Home/Home.css
@@ -1,3 +1,11 @@
+.Home {
+  background: url('./assets/home.png') no-repeat;
+  background-size: contain;
+  background-position: center right;
+  max-width: 80vw;
+  min-height: 80vh;
+}
+
 .Home__account {
   text-overflow: ellipsis;
   max-width: 80vw;

diff --git a/src/modules/home/components/Home/assets/home.png b/src/modules/home/components/Home/assets/home.png
diff --git a/src/modules/home/components/Rules/Rules.css b/src/modules/home/components/Rules/Rules.css
@@ -5,3 +5,17 @@
   margin-left: 0;
   margin-bottom: 15px;
 }
+
+.Rules__item {
+  display: flex;
+  align-items: center;
+}
+
+.Rules__item h3 {
+  margin: 0;
+}
+
+.Rules__card {
+  margin-right: 30px;
+  margin-bottom: 15px;
+}
diff --git a/src/modules/home/components/Rules/Rules.tsx b/src/modules/home/components/Rules/Rules.tsx
@@ -1,4 +1,7 @@
 import { Back, Subtitle, Title } from '../../../common-ui';
+import bomb from '../../../game/assets/bomb.jpg';
+import neutral from '../../../game/assets/neutral.jpg';
+import wire from '../../../game/assets/wire.jpg';
 
 import './Rules.css';
 
@@ -41,14 +44,39 @@ export const Rules = () => {
         <dd>2 members of the Red Cipher</dd>
       </dl>
       <Subtitle>Cards</Subtitle>
-      <dl className="Rules__list">
-        <dt>Safe code</dt>
-        <dd>Nothing happens.</dd>
-        <dt>Vulnerability</dt>
-        <dd>Founding a vulnerability brings you close to victory if you are part of the Decryptors.</dd>
-        <dt>Bomb</dt>
-        <dd>Triggering the bomb encrypts the digital world and hands victory to the Red Cipher.</dd>
-      </dl>
+      <div className="Rules__list">
+        <div className="Rules__item">
+          <div className="Rules__card">
+            <img src={neutral} width="80" alt="Safe Code" />
+          </div>
+          <div>
+            <h3>Safe code</h3>
+            <div className="Rules__cardText">Nothing happens.</div>
+          </div>
+        </div>
+        <div className="Rules__item">
+          <div className="Rules__card">
+            <img src={wire} alt="Wire" width="80" />
+          </div>
+          <div>
+            <h3>Vulnerability</h3>
+            <div className="Rules__cardText">
+              Founding a vulnerability brings you close to victory if you are part of the Decryptors.
+            </div>
+          </div>
+        </div>
+        <div className="Rules__item">
+          <div className="Rules__card">
+            <img src={bomb} alt="Bomb" width="80" />
+          </div>
+          <div>
+            <h3>Bomb</h3>
+            <div className="Rules__cardText">
+              Triggering the bomb encrypts the digital world and hands victory to the Red Cipher.
+            </div>
+          </div>
+        </div>
+      </div>
       <Subtitle>How to play</Subtitle>
       <p>
         The game is played over a maximum of <strong>4 rounds</strong> during which you attempt to identify