Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add-feature-dark #567

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+756 −419
Open

add-feature-dark #567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
209 changes: 125 additions & 84 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,99 +1,140 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2048</title>
<head>
<meta charset="utf-8" />
<title>2048</title>

<link href="style/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="style/main.css" rel="stylesheet" type="text/css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<script src="js/dark-mode-toggle.js"></script>

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div class="container">
<div class="heading">
<h1 class="title">2048</h1>
<div class="scores-container">
<div class="score-container">0</div>
<div class="best-container">0</div>
</div>
</div>

<div class="above-game">
<p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
<a class="restart-button">New Game</a>
</div>
<link rel="shortcut icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png" />
<link
rel="apple-touch-startup-image"
href="meta/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"
/>
<!-- iPhone 5+ -->
<link
rel="apple-touch-startup-image"
href="meta/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"
/>
<!-- iPhone, retina -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<div class="game-container">
<div class="game-message">
<p></p>
<div class="lower">
<a class="keep-playing-button">Keep going</a>
<a class="retry-button">Try again</a>
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta
name="viewport"
content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui"
/>
</head>
<body>
<div class="container">
<div class="heading">
<h1 class="title">2048</h1>
<div class="scores-container">
<div class="score-container">0</div>
<div class="best-container">0</div>
</div>
</div>
<!-- Add the Dark Mode Toggle Button Here -->
<button id="dark-mode-toggle">
<i id="dark-mode-icon" class="fas fa-moon"></i>
<span id="dark-mode-text">Dark Mode</span>
</button>
<div class="above-game">
<p class="game-intro">
Join the numbers and get to the <strong>2048 tile!</strong>
</p>
<a class="restart-button">New Game</a>
</div>

<div class="grid-container">
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="game-container">
<div class="game-message">
<p></p>
<div class="lower">
<a class="keep-playing-button">Keep going</a>
<a class="retry-button">Try again</a>
</div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>

<div class="tile-container">
<div class="grid-container">
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
<div class="grid-row">
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
<div class="grid-cell"></div>
</div>
</div>

<div class="tile-container"></div>
</div>
</div>

<p class="game-explanation">
<strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
</p>
<hr>
<p>
<strong class="important">Note:</strong> This site is the official version of 2048. You can play it on your phone via <a href="http://git.io/2048">http://git.io/2048.</a> All other apps or sites are derivatives or fakes, and should be used with caution.
</p>
<hr>
<p>
Created by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
</p>
</div>
<p class="game-explanation">
<strong class="important">How to play:</strong> Use your
<strong>arrow keys</strong> to move the tiles. When two tiles with the
same number touch, they <strong>merge into one!</strong>
</p>
<hr />
<p>
<strong class="important">Note:</strong> This site is the official
version of 2048. You can play it on your phone via
<a href="http://git.io/2048">http://git.io/2048.</a> All other apps or
sites are derivatives or fakes, and should be used with caution.
</p>
<hr />
<p>
Created by
<a href="http://gabrielecirulli.com" target="_blank"
>Gabriele Cirulli.</a
>
Based on
<a
href="https://itunes.apple.com/us/app/1024!/id823499224"
target="_blank"
>1024 by Veewo Studio</a
>
and conceptually similar to
<a href="http://asherv.com/threes/" target="_blank"
>Threes by Asher Vollmer.</a
>
</p>
</div>

<script src="js/bind_polyfill.js"></script>
<script src="js/classlist_polyfill.js"></script>
<script src="js/animframe_polyfill.js"></script>
<script src="js/keyboard_input_manager.js"></script>
<script src="js/html_actuator.js"></script>
<script src="js/grid.js"></script>
<script src="js/tile.js"></script>
<script src="js/local_storage_manager.js"></script>
<script src="js/game_manager.js"></script>
<script src="js/application.js"></script>
</body>
<script src="js/bind_polyfill.js"></script>
<script src="js/classlist_polyfill.js"></script>
<script src="js/animframe_polyfill.js"></script>
<script src="js/keyboard_input_manager.js"></script>
<script src="js/html_actuator.js"></script>
<script src="js/grid.js"></script>
<script src="js/tile.js"></script>
<script src="js/local_storage_manager.js"></script>
<script src="js/game_manager.js"></script>
<script src="js/application.js"></script>
</body>
</html>
39 changes: 39 additions & 0 deletions js/dark-mode-toggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
// Add dark mode toggle functionality to the page
document.addEventListener("DOMContentLoaded", function () {
const darkModeToggle = document.getElementById("dark-mode-toggle");
const darkModeIcon = document.getElementById("dark-mode-icon");
const darkModeText = document.getElementById("dark-mode-text");

// Function to apply dark mode
function applyDarkMode() {
document.documentElement.classList.add("dark-mode");
document.body.classList.add("dark-mode");
darkModeIcon.classList.replace("fa-moon", "fa-sun");
darkModeText.textContent = "Light Mode";
}

// Function to apply light mode
function applyLightMode() {
document.documentElement.classList.remove("dark-mode");
document.body.classList.remove("dark-mode");
darkModeIcon.classList.replace("fa-sun", "fa-moon");
darkModeText.textContent = "Dark Mode";
}

// Check and apply the current mode from localStorage
const currentMode = localStorage.getItem("darkMode");
if (currentMode === "enabled") {
applyDarkMode();
}

// Toggle dark mode on button click
darkModeToggle.addEventListener("click", function () {
if (document.documentElement.classList.contains("dark-mode")) {
applyLightMode();
localStorage.setItem("darkMode", "disabled");
} else {
applyDarkMode();
localStorage.setItem("darkMode", "enabled");
}
});
});
Loading