nickarocho · SakuOrdrTab · May 15, 2025 · May 15, 2025 · May 15, 2025 · May 15, 2025
diff --git a/css/main-darkmode.css b/css/main-darkmode.css
@@ -0,0 +1,211 @@
+@font-face {
+    font-family: "Digital Dismay";
+    src: url("./digital-dismay.otf") format("truetype");
+}
+
+@font-face {
+    font-family: "Press Start";
+    src: url("./prstart.ttf");
+}
+
+@font-face {
+    font-family: "MS Sans Serif";
+    src: url("./micross.ttf");
+}
+
+* {
+    -o-user-select: none;
+    user-select: none;
+}
+
+body {
+    background-color: #101010;
+}
+
+#board {
+    background-color: rgb(50, 50, 50);
+}
+
+button {
+    font-family: 'MS Sans Serif';
+    text-align: left;
+    font-size: 14px;
+    height: 30px;
+    width: 100px;
+    background-color: rgb(50, 50, 50);
+    color: rgb(190, 190, 190);
+    border-bottom: 2px solid #0B0B0B;
+    border-left: 2px solid #7f7f7f;
+    border-top: 2px solid #7f7f7f;
+    border-right: 2px solid #0B0B0B;
+}
+
+button:hover {
+    background-color: lightgray;
+    color: slategray;
+    cursor: pointer;
+}
+
+#clock {
+    font-family: 'MS Sans Serif';
+    font-size: 14px;
+    display: inline;
+    float: right;
+    color: rgb(190, 190, 190);
+    border-top: 1.5px solid #808080;
+    border-left: 1.5px solid #808080;
+    border-right: 1.5px solid #FAFAFA;
+    border-bottom: 1.5px solid #FAFAFA;
+    /* height: 28px; */
+    width: 200px;
+    height: 22px;
+    margin: 2px;
+    padding: 5px;
+}
+
+
+.flex-container {
+    display: flex;
+    justify-content: center;
+    margin: 80px 10px;
+}
+
+#folder1 {
+    display: inline;
+    padding-right: 10px;
+}
+
+#folder2 {
+    display: inline;
+    padding-right: 10px;
+}
+
+#folder-bar {
+    background-color: rgb(50, 50, 50);
+    border: none;
+    text-align: left;
+    padding: 2px 8px;
+}
+
+#footer {
+    text-align: center;
+    position: fixed;
+    height: 36px;
+    background-color: rgb(50, 50, 50);
+    bottom: 0px;
+    left: 0px;
+    right: 0px;
+    margin-bottom: 0px;
+}
+
+.menu a {
+    font-family: 'MS Sans Serif';
+    color: rgb(190, 190, 190);
+    text-decoration: none;
+    font-size: 14px;
+    letter-spacing: 0;
+}
+
+#reset {
+    text-align: center;
+    width: 35px;
+    height: 35px;
+    border-top: 2px solid #ffffff;
+    border-right: 2px solid #7B7B7B;
+    border-bottom: 2px solid #7B7B7B;
+    border-left: 2px solid #ffffff;
+}
+
+.revealed {
+    font-family: "Press Start";
+    background-color: rgb(20, 20, 20);
+    font-size: 80%;
+    text-align: center;
+    border: none;
+}
+
+#reset:hover {
+    text-align: center;
+
+    cursor: pointer;
+
+}
+
+.sidebar {
+    vertical-align: top;
+    max-width: 300px;
+    margin: 0 30px;
+}
+
+#size-btns {
+    float: left;
+    display: inline;
+    margin: 2px;
+}
+
+#dark-mode-button {
+    float: left;
+    display: inline;
+    margin: 2px;
+}
+
+#start {
+    float: left;
+}
+
+#status-bar  {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 2px;
+    margin: 6px;
+    border-top: 2px solid #7B7B7B;
+    border-right: 2px solid #ffffff;
+    border-bottom: 2px solid #ffffff;
+    border-left: 2px solid #7B7B7B;
+}
+
+td {
+    height: 20px;
+    width: 20px;
+    background-color: rgb(50, 50, 50);
+    border: 1.5px solid;
+    border-top-color: rgb(190, 190, 190);
+    border-right-color: rgb(0, 0, 0);
+    border-bottom-color: rgb(0, 0, 0);
+    border-left-color: rgb(190, 190, 190);
+    text-align: center;
+    vertical-align: middle;
+}
+
+#timer, #bomb-counter {
+    font-family: 'Digital Dismay';
+    font-size: 35px;
+    letter-spacing: 1px;
+    color: red;
+    background-color: black;
+    text-align: center;
+    padding: 4px 4px 0 7px;
+    line-height: 1em;
+}
+
+#window-controls {
+    float: right;
+    cursor: pointer;
+}
+
+#window-title {
+    font-family: 'MS Sans Serif';
+    letter-spacing: .5px;
+    float: left;
+    color: #D5DEF3;
+    font-size: 16px;
+}
+
+#window-title-bar {
+    background: -moz-linear-gradient(left, rgba(33,41,89,1) 0%, rgba(33,41,89,1) 11%, rgba(80,114,161,1) 56%, rgba(117,172,219,0.7) 92%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(left, rgba(33,41,89,1) 0%,rgba(33,41,89,1) 11%,rgba(80,114,161,1) 56%,rgba(117,172,219,0.7) 92%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to right, rgba(33,41,89,1) 0%,rgba(33,41,89,1) 11%,rgba(80,114,161,1) 56%,rgba(117,172,219,0.7) 92%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212959', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
+}
+
diff --git a/css/main.css b/css/main.css
@@ -62,6 +62,7 @@ button:hover {
     padding: 5px;
 }
 
+
 .flex-container {
     display: flex;
     justify-content: center;
@@ -124,7 +125,9 @@ button:hover {
 
 #reset:hover {
     text-align: center;
+
     cursor: pointer;
+
 }
 
 .sidebar {
@@ -139,6 +142,20 @@ button:hover {
     margin: 2px;
 }
 
+#dark-mode-button {
+    float: left;
+    width:auto;
+    display: inline;
+    margin: 2px;
+}
+
+#dark-mode-button img {
+    display: block; 
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
 #start {
     float: left;
 }
@@ -197,4 +214,5 @@ td {
     background: -webkit-linear-gradient(left, rgba(33,41,89,1) 0%,rgba(33,41,89,1) 11%,rgba(80,114,161,1) 56%,rgba(117,172,219,0.7) 92%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
     background: linear-gradient(to right, rgba(33,41,89,1) 0%,rgba(33,41,89,1) 11%,rgba(80,114,161,1) 56%,rgba(117,172,219,0.7) 92%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#212959', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 */
-}
+}
+
diff --git a/images/darkmode-icon.png b/images/darkmode-icon.png
diff --git a/index.html b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Minesweeper</title>
-    <link rel="stylesheet" href="css/main.css">
+    <link id="main-stylesheet" rel="stylesheet" href="css/main.css">
     <script
     src="https://code.jquery.com/jquery-3.2.1.min.js"
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
@@ -26,6 +26,9 @@
                 <div id="size-btns"><button id="size-30"><img src="images/hard.png"> Hard</button></div>
             </div>
             <div id="clock"><em>"Shift + Click"</em></strong> to toggle <img src="images/flag.png"></div>
+            <div id="toggle-dark-mode">
+                <button id="dark-mode-button"><img src="images/darkmode-icon.png" alt="dark mode button"></button>
+            </div>
         </section>
     <script src="js/cell.js"></script>
     <script src="js/main.js"></script>

diff --git a/js/main.js b/js/main.js
@@ -232,5 +232,30 @@ function runCodeForAllCells(cb) {
   });
 }
 
-init();
-render();
+// dark mode functionality
+function setupDarkModeToggle() {
+  const darkModeBtn = $('#dark-mode-button');
+  const mainStylesheet = $('#main-stylesheet');
+  const darkModeStylesheet = $(
+    '<link id="dark-mode-stylesheet" rel="stylesheet" href="css/main-darkmode.css" disabled>'
+  );
+
+  mainStylesheet.after(darkModeStylesheet);
+
+  // if user has previously opted in, enable it now
+  if (localStorage.getItem('darkMode') === 'enabled') {
+    darkModeStylesheet.prop('disabled', false);
+  }
+
+  darkModeBtn.on('click', () => {
+    const isDisabled = darkModeStylesheet.prop('disabled');
+    darkModeStylesheet.prop('disabled', !isDisabled);
+    localStorage.setItem('darkMode', isDisabled ? 'enabled' : 'disabled');
+  });
+}
+
+$(document).ready(function () {
+  setupDarkModeToggle();
+  init();
+  render();
+});