Skip to content

PUZLLE-MEMORY #69

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

Closed
tokoanang2depanbanksumsel-dotcom wants to merge 1 commit into from
Closed

PUZLLE-MEMORY #69

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
240 changes: 181 additions & 59 deletions docs/getting-started/intro.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,181 @@
---
lang: en-US
title: Acode Plugins
---
# Acode Plugins

> Welcome to the world of Acode plugins! 🚀


### What are Acode Plugins?

**Acode** plugins serve as powerful tools to enhance and extend the functionality of your **Acode editor**. Whether you're looking to introduce new features or tweak existing ones, plugins provide a flexible and customizable way to tailor Acode to your specific needs.

### Language Flexibility

Acode plugins are primarily written in JavaScript, offering a familiar and widely-used language for developers. Additionally, for those who prefer TypeScript, **good news 🥳** — Acode supports `TypeScript` for plugin development, providing the benefits of static typing and improved developer experience.

## Installing Acode Plugins

Discovering and integrating plugins into your Acode editor is a simple and customizable process. There are multiple methods to install plugins, ensuring flexibility and convenience for developers. Before you proceed, it's essential to exercise caution when installing plugins from unknown sources, as they may potentially contain malicious code.

### Installation Methods:

1. **Local Installation:**
- Download the plugin file(`.zip`) to your device.
- Open Acode and navigate to **Settings**.
- Click on **Plugins** and then the `'+'` icon.
- Select **LOCAL** and choose the downloaded plugin file.

2. **Remote Installation:**
- If you have a plugin file URL (e.g., a plugin file hosted on GitHub):
- Open Acode and go to **Settings**.
- Navigate to **Plugins** and click on the `'+'` icon.
- Choose **REMOTE** and enter the plugin file URL.

3. **Acode Plugins Manager:**
- Access the Acode **Settings** and click on **Plugins**.
- Explore the available plugins and select the one you want.
- Click on **Install** to seamlessly integrate the chosen plugin into your Acode editor.

4. **Acode SideBar:**
- Click on three horizontal slashes from top left corner
- Select plugin icon and Explore the plugins


:::info

**Source Persistence:**
Once installed, plugins remember their source. If you choose to uninstall and reinstall, the plugin will be sourced from the same location, ensuring consistency in your development environment.
:::

:::danger

**Exercise Caution:**
It's crucial to exercise caution when installing plugins, especially from unfamiliar sources. Plugins have the potential to contain malicious code, so be discerning and opt for reputable and well-known plugins whenever possible.
:::

<br />
Your Acode journey has just begun. Dive in, experiment, and let your coding adventure flourish in this realm of endless possibilities! 🚀✨
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Game - Puzzle Sederhana</title>
<style>
/* --- BAGIAN CSS --- */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #282c34;
color: white;
}

.game-container {
text-align: center;
}

.grid {
display: grid;
grid-template-columns: repeat(4, 80px); /* 4 kolom */
gap: 10px;
margin: 20px auto;
perspective: 1000px;
}

.card {
width: 80px;
height: 80px;
background-color: #444b5a;
color: transparent;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
cursor: pointer;
border-radius: 10px;
user-select: none;
transition: transform 0.4s, background-color 0.3s;
}

/* Efek saat kartu terbuka */
.card.flipped {
background-color: #ffffff;
color: #000;
transform: rotateY(180deg);
}

/* Efek saat kartu sudah cocok */
.card.matched {
background-color: #4caf50;
color: white;
cursor: default;
}

button {
padding: 10px 25px;
font-size: 1rem;
cursor: pointer;
background-color: #61dafb;
color: #282c34;
border: none;
border-radius: 5px;
font-weight: bold;
transition: 0.3s;
}

button:hover {
background-color: #4fa8c7;
}

/* Responsif untuk layar kecil */
@media (max-width: 400px) {
.grid {
grid-template-columns: repeat(4, 60px);
}
.card {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
</style>
</head>
<body>

<div class="game-container">
<h1>Memory Game</h1>
<p>Cari pasangan emoji yang sama!</p>
<div id="game-board" class="grid"></div>
<button onclick="resetGame()">Ulang Permainan</button>
</div>

<script>
/* --- BAGIAN JAVASCRIPT --- */
const board = document.getElementById('game-board');
const symbols = ['🐱', '🐱', '🐶', '🐶', '🦊', '🦊', '🐸', '🐸', '🐯', '🐯', '🐵', '🐵', '🐨', '🐨', '🐷', '🐷'];
let flippedCards = [];
let matchedCount = 0;
let isProcessing = false; // Mencegah klik berlebihan saat pengecekan

// Fungsi untuk mengacak urutan kartu
function shuffle(array) {
return array.sort(() => Math.random() - 0.5);
}

// Fungsi untuk membuat papan permainan
function createBoard() {
const shuffledSymbols = shuffle([...symbols]);
board.innerHTML = '';
shuffledSymbols.forEach((symbol) => {
const card = document.createElement('div');
card.classList.add('card');
card.dataset.symbol = symbol;
card.innerText = symbol;
card.addEventListener('click', flipCard);
board.appendChild(card);
});
}

function flipCard() {
// Validasi: kartu tidak bisa diklik jika sudah terbuka, sudah cocok, atau sedang mengecek 2 kartu
if (isProcessing || this.classList.contains('flipped') || this.classList.contains('matched')) {
return;
}

this.classList.add('flipped');
flippedCards.push(this);

if (flippedCards.length === 2) {
checkMatch();
}
}

function checkMatch() {
isProcessing = true; // Kunci input sebentar
const [card1, card2] = flippedCards;

if (card1.dataset.symbol === card2.dataset.symbol) {
// Jika cocok
card1.classList.add('matched');
card2.classList.add('matched');
matchedCount += 2;
flippedCards = [];
isProcessing = false;

// Cek apakah semua sudah ketemu
if (matchedCount === symbols.length) {
setTimeout(() => {
alert('Hebat! Kamu berhasil menyelesaikan puzzle ini!');
}, 500);
}
} else {
// Jika tidak cocok, tutup kembali setelah 1 detik
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
isProcessing = false;
}, 1000);
}
}

function resetGame() {
matchedCount = 0;
flippedCards = [];
isProcessing = false;
createBoard();
}

// Jalankan game saat halaman dimuat
createBoard();
</script>

</body>
</html>
Comment on lines +1 to +181
Copy link
Copy Markdown

@greptile-apps greptile-apps bot Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P0 Entire documentation page replaced with an unrelated game

This change completely deletes the Acode plugin introduction documentation and replaces it with a standalone HTML memory/puzzle game written in Indonesian. The file docs/getting-started/intro.md is the entry-point documentation page for all Acode plugin developers — removing it breaks the doc site's getting-started section entirely. The replacement is raw HTML with <!DOCTYPE html> inside a .md file, which is incompatible with the VitePress/Markdown documentation pipeline used by this repo. The original content (plugin overview, language support, installation methods) must be restored.