feat: Add Support for Coil Subscription and limit hat selection to subscribets

Author: johnedvard

src/index.html

@@ -19,6 +19,14 @@
         <button id="bonusBtn">Bonus Content</button>
       </div>
       <div id="bonus" class="overlay hide">
+        <div id="coil-subscriber" class="hide">
+          Thanks for being a Coil subscriber
+        </div>
+
+        <a id="coilBtn" href="https://coil.com/" class="btn">
+          Subscribe to Coil for more bonus hats
+        </a>
+
         <img class="close-icon" width="40px" />
         <div id="bonus-grid"></div>
       </div>

src/menu.js

@@ -4,19 +4,21 @@ import skull from 'data-url:./assets/img/skull.png';
 import { emit, on } from 'kontra';
 import {
   LEVEL_COMPLETE,
+  MONETIZATION_PROGRESS,
   NEAR_TOKENS_ADDED,
   NFT_MINT,
   RESTART_LEVEL,
   START_LEVEL,
   START_NEXT_LEVEL,
 } from './gameEvents';
 import { fetchArcadianHeads } from './arcadianApi';
-import { nftTokensBySeries, setSelectedArcadian } from './store';
+import { isSubscriber, nftTokensBySeries, setSelectedArcadian } from './store';
 import { IPFS_BASE_PATH } from './near/nearConnection';
 import { doesOwnNft, getNearLevelId } from './utils';
 
 const overlayIds = ['main', 'bonus', 'levels', 'level-dialog', 'near-levels'];
 const levels = 20;
+let hasRemovedDisableOnBonusEls = false;
 export const initMenu = () => {
   addButtonListeners();
   listenForGameEvents();
@@ -94,6 +96,9 @@ const pouplateBonusGrid = (bonusGridEl) => {
       bonusEl.setAttribute('width', img.width * 4);
       bonusEl.classList.add('bonus-item');
       bonusEl.setAttribute('arcadian', res[i].value.id);
+      if (i > 5 && !isSubscriber) {
+        bonusEl.classList.add('disabled');
+      }
       const ctx = bonusEl.getContext('2d');
       ctx.imageSmoothingEnabled = false;
       ctx.scale(8, 8);
@@ -108,8 +113,12 @@ const pouplateBonusGrid = (bonusGridEl) => {
 const listenForBonusGridEvents = (bonusGridEl) => {
   bonusGridEl.addEventListener('click', (e) => {
     if (e.target.classList.contains('bonus-item')) {
-      setSelectedArcadian(e.target.getAttribute('arcadian'));
-      showOverlay('main');
+      if (!e.target.classList.contains('disabled')) {
+        setSelectedArcadian(e.target.getAttribute('arcadian'));
+        showOverlay('main');
+      } else {
+        // TODO (johnedvard) tell player to become a subscriber
+      }
     }
   });
 };
@@ -195,6 +204,7 @@ const showOverlay = (id) => {
 const listenForGameEvents = () => {
   on(LEVEL_COMPLETE, onLevelComplete);
   on(NEAR_TOKENS_ADDED, onNearTokensAdded);
+  on(MONETIZATION_PROGRESS, onMonetizationProgress);
 };
 const onLevelComplete = () => {
   showOverlay('level-dialog');
@@ -207,3 +217,18 @@ const onNearTokensAdded = ({
 }) => {
   initNearLevels({ nftTokensBySeries, nftTokensForOwner, nftCollections });
 };
+
+const onMonetizationProgress = () => {
+  if (hasRemovedDisableOnBonusEls) return;
+  const coilSubEl = document.getElementById('coil-subscriber');
+  const coilBtnEl = document.getElementById('coilBtn');
+  if (coilBtnEl) coilBtnEl.remove();
+  if (coilSubEl) coilSubEl.classList.remove('hide');
+  const bonusItemEls = document.getElementsByClassName('bonus-item');
+  for (item of bonusItemEls) {
+    item.classList.remove('disabled');
+  }
+  if (bonusItemEls && bonusItemEls.length) {
+    hasRemovedDisableOnBonusEls = true;
+  }
+};

src/monetization.js

@@ -1,13 +1,19 @@
+import { emit } from 'kontra';
 import { MONETIZATION_PROGRESS } from './gameEvents';
+import { setIsSubscriber } from './store';
 
 export const initMonetization = () => {
   if (document && document.monetization) {
     document.monetization.addEventListener('monetizationprogress', (evt) =>
-      emit(MONETIZATION_PROGRESS, evt)
+      handleSubscription(evt)
     );
   } else {
     window.addEventListener('monetizationprogress', (evt) =>
-      emit(MONETIZATION_PROGRESS, evt)
+      handleSubscription(evt)
     );
   }
 };
+const handleSubscription = (evt) => {
+  setIsSubscriber();
+  emit(MONETIZATION_PROGRESS, evt);
+};

src/store.js

@@ -8,6 +8,7 @@ let selectedArcadian = {};
 export let nftTokensBySeries = [];
 export let nftTokensForOwner = [];
 export let nftCollections = [];
+export let isSubscriber = false;
 
 export const setGameWidth = (width) => {
   gameWidth = width;
@@ -40,3 +41,7 @@ export const setNftTokens = (tokensForOwner, tokensBySeries, collections) => {
     nftCollections,
   });
 };
+
+export const setIsSubscriber = () => {
+  // isSubscriber = true;
+};

src/styles.css

@@ -10,6 +10,8 @@ body {
   height: 100vh;
   margin: 0;
   padding: 0;
+  color: var(--fgc2);
+  font-family: sans-serif;
 }
 #container {
   position: relative;
@@ -57,7 +59,8 @@ canvas {
   filter: drop-shadow(0 0 12px var(--acc));
 }
 
-button {
+button,
+.btn {
   width: 240px;
   height: 50px;
   margin: 20px 0px 0px 0px;
@@ -67,6 +70,12 @@ button {
   border-radius: 4px;
   font-size: large;
   font-weight: bolder;
+  cursor: pointer;
+}
+button:hover,
+.btn:hover {
+  background-color: var(--bgc2);
+  color: var(--fgc2);
 }
 button:disabled {
   background-color: lightgray;
@@ -79,6 +88,17 @@ button:disabled img {
 button:hover img {
   filter: none;
 }
+#coil-subscriber {
+  height: 50px;
+}
+#coilBtn {
+  width: 400px;
+  height: 50px;
+  text-decoration: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .overlay {
   position: absolute;
   width: 100%;
@@ -110,10 +130,6 @@ button:hover img {
   border-radius: 4px;
   background-color: var(--fgc2);
 }
-.level-item:hover {
-  background-color: var(--bgc2);
-  color: var(--fgc2);
-}
 .level-item img {
   width: 100%;
   height: auto;
@@ -147,9 +163,7 @@ button:hover img {
 #bonus-grid {
   row-gap: 0px;
 }
-#bonus-grid > canvas {
-  margin-bottom: -60px;
-}
+
 #level-dialog {
   width: 50%;
   height: 50%;
@@ -161,10 +175,16 @@ button:hover img {
   cursor: pointer;
   background: none;
   border-radius: 4px;
+  margin-bottom: -60px;
 }
-.bonus-item:hover {
+.bonus-item:hover:not(.disabled) {
   transform: scale(1.1);
 }
+.bonus-item.disabled {
+  background-color: black;
+  filter: contrast(0.5);
+  cursor: not-allowed;
+}
 
 #bonus-grid > canvas {
   width: 200px;