tutorial

xxmichaellong · Dec 25, 2023 · fb05f2f · fb05f2f
1 parent d63f8d3
commit fb05f2f
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     <script type="module" src="resources/js/front-end/front-end.js"></script>
 </head>
 <body>
-    <div id="tutorialLayer"></div>
+    <div id="videoContainer"></div>
     <iframe id="selfContainers" class="self" src="./iframe-containers/self-containers.html"></iframe>
     <iframe id="oppContainers" class="opp" src="./iframe-containers/opp-containers.html"></iframe>
     <div id="stadium_html" class="base"></div>
@@ -39,7 +39,7 @@
             <br><br>
             Drag or use keybinds (hold <span class="shift-font">shift</span>) to move cards. Happy testing! 🥳
             <br><br>
-            <button id="tutorial">Tutorial</button>
+            <button id="tutorialButton">Watch Tutorial</button>
             <div id="line"></div>
         </div>
         <div id="chatboxButtonContainer" class="chat-button-container">
@@ -131,7 +131,15 @@
         <div id="keybindReminder">
           Hold (<span class="shift-font">shift</span>) to view keybinds
         </div>
-      </div>
+        <div>
+            <a href="https://twitter.com/xxmichaellong" target="blank" rel="noopener noreferrer">
+                <div id="twitterHandle">
+                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Logo_of_Twitter.svg/512px-Logo_of_Twitter.svg.png">
+                    <span id="username">@xxmichaellong</span>
+                </div>
+            </a>
+        </div>
+    </div>
 
     <div id="cardContextMenu" class="contextMenu">
         <ul>
@@ -232,7 +240,7 @@ <h1>Hand</h1>
                 <div class="column">
                     <h1>Board</h1>
                     <ul>
-                        <li>Clear board <code>[enter]</code></li>
+                        <li>Clear playboard <code>[enter]</code></li>
                     </ul>
                 </div>
                 <div class="column">

diff --git a/resources/css/index.css b/resources/css/index.css
@@ -108,6 +108,7 @@ ul, li {
   left: 0;
   box-shadow: 0 2px 4px rgba(0, 0, 0, .5); /* Adjust the values for your desired shadow effect */
   border-radius: 0.375rem;
+  cursor: pointer;
 }
 .base {
   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Lighter shadow */
@@ -228,7 +229,7 @@ ul, li {
   display: block;
   border-radius: 10px 10px 0 0; /* Apply border-radius to bottom corners only */
 }
-#tutorial {
+#tutorialButton {
   margin-left: 50%;
   transform: translateX(-50%);
   border-radius: 10px;
@@ -237,9 +238,27 @@ ul, li {
   color: white;
   background: #a89850;
 }
-#tutorial:hover {
+#tutorialButton:hover {
   background: #8c7e46; /* Change this color to the hover color you want */
 }
+#videoContainer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5); /* Semi-transparent grey background */
+  z-index: 1000;
+}
+#videoContainer iframe {
+  position: absolute;
+  left: 10%;
+  width: 55.5%; /* Adjust the width as needed */
+  height: 60%; /* Adjust the height as needed */
+  bottom: 50%;
+  transform: translateY(50%);
+}
 #line {
   background: rgb(230, 230, 230);
   width: 100%;
@@ -600,6 +619,25 @@ ul, li {
   width: 100%;
   color: grey;
 }
+#twitterHandle {
+  position: absolute;
+  bottom: 2%;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+}
+#twitterHandle img {
+  margin-right: .5vw;
+  height: 2vh;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
 /*contextMenu styling*/
 .contextMenu button {
   display: block;

diff --git a/resources/css/opp-containers.css b/resources/css/opp-containers.css
@@ -479,6 +479,7 @@ body, input, textarea, button {
 #prizes_html img {
   box-shadow: 0 2px 4px rgba(0, 0, 0, .3); /* Adjust the values for your desired shadow effect */
   border-radius: 0.3rem;
+  cursor: pointer;
 }
 #hand_html,
 #bench_html,

diff --git a/resources/css/self-containers.css b/resources/css/self-containers.css
@@ -482,6 +482,7 @@ body, input, textarea, button {
 {
   box-shadow: 0 2px 4px rgba(0, 0, 0, .3); /* Adjust the values for your desired shadow effect */
   border-radius: 0.275rem;
+  cursor: pointer;
 }
 #hand_html,
 #bench_html,

diff --git a/resources/js/front-end/event-listeners/sidebox/p1/index.js b/resources/js/front-end/event-listeners/sidebox/p1/index.js
@@ -1,2 +1,3 @@
 export * from './chat-buttons.js'
-export * from './setup-buttons.js'
+export * from './setup-buttons.js'
+export * from './tutorial.js'
diff --git a/resources/js/front-end/event-listeners/sidebox/p1/tutorial.js b/resources/js/front-end/event-listeners/sidebox/p1/tutorial.js
@@ -0,0 +1,20 @@
+import { videoContainer } from "../../../front-end.js";
+
+document.getElementById('tutorialButton').addEventListener('click', () => {
+  videoContainer.style.display = 'flex';
+  videoContainer.innerHTML = `
+    <iframe
+      width="560"
+      height="315"
+      src="https://www.youtube.com/embed/RxhuO0WwRHg"
+      frameborder="0"
+      allowfullscreen
+    ></iframe>
+  `;
+  videoContainer.addEventListener('click', (event) => {
+    if (event.target === videoContainer) {
+      videoContainer.style.display = 'none';
+      videoContainer.innerHTML = '';
+    }
+  });
+});
diff --git a/resources/js/front-end/initialization/html-elements/sidebox.js b/resources/js/front-end/initialization/html-elements/sidebox.js
@@ -3,6 +3,10 @@ export const p2Box = document.getElementById('p2Box');
 export const deckImport = document.getElementById('deckImport');
 export const settings = document.getElementById('settings');
 
+//home page
+export const videoContainer = document.getElementById('videoContainer');
+export const tutorialButton = document.getElementById('tutorialButton');
+
 //settings
 export const darkModeCheckbox = document.getElementById('darkModeCheckbox');
 export const showContainersCheckbox = document.getElementById('showContainersCheckbox');