Skip to content

Commit

Permalink
Legacy upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@PhiMarHal
PhiMarHal authored Oct 14, 2024
1 parent 75bed8d commit 7c05e0c
Show file tree
Hide file tree
Showing 4 changed files with 338 additions and 80 deletions.
189 changes: 172 additions & 17 deletions legacy/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,116 @@ const HIGHLIGHT_WIDTH = 64; // Number of runes to highlight at once
let isAnimating = false;
let animationFrame = null;

function toggleDarkMode() {
document.body.classList.toggle('dark-mode');
const isDarkMode = document.body.classList.contains('dark-mode');
localStorage.setItem('darkMode', isDarkMode);

const moonIcon = document.querySelector('#darkModeToggle .moon-icon');
const sunIcon = document.querySelector('#darkModeToggle .sun-icon');

if (isDarkMode) {
moonIcon.style.display = 'none';
sunIcon.style.display = 'inline';
} else {
moonIcon.style.display = 'inline';
sunIcon.style.display = 'none';
}

//updateSVGColors();
}

function applyDarkMode() {
const isDarkMode = localStorage.getItem('darkMode') === 'true';
if (isDarkMode) {
document.body.classList.add('dark-mode');
document.querySelector('#darkModeToggle .moon-icon').style.display = 'none';
document.querySelector('#darkModeToggle .sun-icon').style.display = 'inline';
} else {
document.querySelector('#darkModeToggle .moon-icon').style.display = 'inline';
document.querySelector('#darkModeToggle .sun-icon').style.display = 'none';
}
//updateSVGColors();
}

async function loadNewsContent() {
try {
const response = await fetch('news.json');
const data = await response.json();
return data.news;
} catch (error) {
console.error('Error loading news:', error);
return [];
}
}

async function displayNewsContent() {
const newsContent = await loadNewsContent();
const storyContent = document.getElementById('storyContent');

if (newsContent.length === 0) {
storyContent.innerHTML = '<p>No news available at this time.</p>';
return;
}

let newsHtml = '<h2 style="text-align:center;">NEWS</h2>';
newsContent.forEach(item => {
newsHtml += `
<div class="news-item">
<h3>${item.title}</h3>
<p class="news-date">${item.date}</p>
<p>${item.content}</p>
</div>
`;
});

storyContent.innerHTML = newsHtml;
storyContent.classList.add('news-content');
}

function toggleNewsContent(e) {
e.preventDefault();
const storyContent = document.getElementById('storyContent');

if (storyContent.classList.contains('news-content')) {
// Restore the original content
storyContent.textContent = cachedPages[currentPage] + ' ' + '\u00A0'.repeat(512);
storyContent.classList.remove('news-content');
} else {
// Show news content
displayNewsContent();
}
}

async function addScrollNetwork() {
if (typeof window.ethereum !== 'undefined') {
try {
await window.ethereum.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: '0x82750', // 534352 in decimal
chainName: 'Scroll',
nativeCurrency: {
name: 'Ethereum',
symbol: 'ETH',
decimals: 18
},
rpcUrls: ['https://rpc.scroll.io'],
blockExplorerUrls: ['https://scrollscan.com/']
}]
});
console.log('Scroll network has been added to the wallet!');
return true;
} catch (error) {
console.error('Failed to add Scroll network:', error);
return false;
}
} else {
console.error('MetaMask is not installed');
return false;
}
}

function startLoadingAnimation() {
if (isAnimating) return; // Don't start a new animation if one is already running

Expand Down Expand Up @@ -181,6 +291,16 @@ function cleanup() {
}
}

function filterText(text) {
const filters = {
'cock': 'chicken',
'badword2': 'goodword2',
// Add more word pairs as needed
};

return text.replace(/\b(?:cock|badword2)\b/gi, matched => filters[matched.toLowerCase()]);
}

async function updatePage(pageNumber) {
startLoadingAnimation();
try {
Expand All @@ -189,13 +309,24 @@ async function updatePage(pageNumber) {
let pageContent = cachedPages[pageNumber];
if (!pageContent) {
pageContent = await readOnlyContract.pageScript(pageNumber);
pageContent = filterText(pageContent);
cachedPages[pageNumber] = pageContent;
}

// Add 512 blank spaces to the end of the content
pageContent = pageContent + ' ' + '\u00A0'.repeat(512);
const storyContent = document.getElementById('storyContent');

let displayedContent = ' ' + '\u00A0'.repeat(192) + pageContent;

if (pageContent.trim() === '') {
// If the page is empty, display the placeholder text
storyContent.innerHTML = displayedContent + '<span style="color: #808080;">A new page unrolls. Be the first to contribute!</span>';
} else {
// If there's content, display it as before
// Add 512 blank spaces to the end of the content
displayedContent = displayedContent + ' ' + '\u00A0'.repeat(384);
storyContent.textContent = displayedContent;
}

document.getElementById('storyContent').textContent = pageContent;
currentPage = pageNumber;
document.getElementById('pageNumber').textContent = `PAGE ${pageNumber}`;

Expand Down Expand Up @@ -251,6 +382,10 @@ async function initializeApp() {
console.log("No web3 wallet detected. Read-only mode activated.");
}

applyDarkMode();
document.getElementById('darkModeToggle').addEventListener('click', toggleDarkMode);
document.getElementById('newsIcon').addEventListener('click', toggleNewsContent);

updateWalletStatus();
await fetchCurrentPage();
checkContributionCost();
Expand Down Expand Up @@ -325,7 +460,8 @@ function setupEventListener() {
async function updatePageContent(pageNumber) {
try {
startLoadingAnimation();
const newPageContent = await readOnlyContract.pageScript(pageNumber);
newPageContent = await readOnlyContract.pageScript(pageNumber);
newPageContent = filterText(newPageContent);
cachedPages[pageNumber] = newPageContent;

const newTotalPages = await readOnlyContract.currentPage();
Expand Down Expand Up @@ -383,6 +519,13 @@ async function connectWallet() {
try {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
userAddress = accounts[0];

// Check and switch to the correct network if necessary
if (!await checkAndSwitchNetwork()) {
// If the user didn't switch to the correct network, don't proceed
return false;
}

const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = web3Provider.getSigner();
contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, signer);
Expand Down Expand Up @@ -486,24 +629,36 @@ async function checkAndSwitchNetwork() {
method: 'wallet_switchEthereumChain',
params: [{ chainId: `0x${rpcNetworkId.toString(16)}` }],
});

// Wait for the network to finish switching
await new Promise(resolve => setTimeout(resolve, 1000));

// Reinitialize the contract with the new network
const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = web3Provider.getSigner();
contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, signer);

return true;
} catch (switchError) {
if (switchError.code === 4902) {
showCustomAlert("This network is not available in your MetaMask, please add it manually.");
showCustomAlert("Scroll Mainnet missing. Attempting to add it to your wallet...");
// This error code indicates that the chain has not been added to MetaMask
const added = await addScrollNetwork();
if (added) {
// Try switching again after adding the network
await window.ethereum.request({
method: 'wallet_switchEthereumChain',
params: [{ chainId: `0x${rpcNetworkId.toString(16)}` }],
});
} else {
showCustomAlert("Failed to add Scroll network. Please add it manually.");
return false;
}
} else {
handleError("switch networks", error);
handleError("switch networks", switchError);
return false;
}
return false;
}

// Wait for the network to finish switching
await new Promise(resolve => setTimeout(resolve, 1000));

// Reinitialize the contract with the new network
const web3Provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = web3Provider.getSigner();
contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, signer);

return true;
}
return true;
}
Expand Down
53 changes: 42 additions & 11 deletions legacy/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Contributors - Collaborative Story</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>

<body>
Expand Down Expand Up @@ -40,8 +41,24 @@
<path
d="M23.643 4.937c-.835.37-1.732.62-2.675.733a4.67 4.67 0 0 0 2.048-2.578a9.3 9.3 0 0 1-2.958 1.13a4.66 4.66 0 0 0-7.938 4.25a13.229 13.229 0 0 1-9.602-4.868c-.4.69-.63 1.49-.63 2.342A4.66 4.66 0 0 0 3.96 9.824a4.647 4.647 0 0 1-2.11-.583v.06a4.66 4.66 0 0 0 3.737 4.568a4.692 4.692 0 0 1-2.104.08a4.661 4.661 0 0 0 4.352 3.234a9.348 9.348 0 0 1-5.786 1.995a9.5 9.5 0 0 1-1.112-.065a13.175 13.175 0 0 0 7.14 2.093c8.57 0 13.255-7.098 13.255-13.254c0-.2-.005-.402-.014-.602a9.47 9.47 0 0 0 2.323-2.41z" />
</symbol>

<!-- Light Mode icons -->
<symbol id="moonIconSymbol" viewBox="0 0 24 24">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
</symbol>
<symbol id="sunIconSymbol" viewBox="0 0 24 24">
<path
d="M12 16.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0 1.5a6 6 0 1 0 0-12 6 6 0 0 0 0 12zM12 0a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 12 0zm0 19.5a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3a.75.75 0 0 1 .75-.75zM24 12a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1 0-1.5h3a.75.75 0 0 1 .75.75zM4.5 12a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1 0-1.5h3a.75.75 0 0 1 .75.75zM20.485 3.515a.75.75 0 0 1 0 1.06l-2.12 2.122a.75.75 0 0 1-1.061-1.06l2.12-2.122a.75.75 0 0 1 1.061 0zM6.696 17.304a.75.75 0 0 1 0 1.06l-2.12 2.122a.75.75 0 0 1-1.061-1.06l2.12-2.122a.75.75 0 0 1 1.061 0zM20.485 20.485a.75.75 0 0 1-1.061 0l-2.12-2.12a.75.75 0 0 1 1.061-1.061l2.12 2.12a.75.75 0 0 1 0 1.061zM6.696 6.696a.75.75 0 0 1-1.061 0l-2.12-2.12a.75.75 0 0 1 1.061-1.061l2.12 2.12a.75.75 0 0 1 0 1.061z" />
</symbol>

<!-- Announcement icon -->
<symbol id="newsIconSymbol" viewBox="0 0 24 24">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M3.9 2.7H20.1C21.1 2.7 21.9 3.5 21.9 4.5V16.5C21.9 17.5 21.1 18.3 20.1 18.3H5.7L2.1 21.9V4.5C2.1 3.5 2.9 2.7 3.9 2.7ZM11.4 5.4H13.2V12.6H11.4V5.4ZM13.2 14.4H11.4V16.2H13.2V14.4Z" />
</symbol>

</defs>
<rect width="100%" height="100%" fill="#ffffff" />
<rect width="100%" height="100%" fill="var(--background-color, #ffffff)" />
<rect class="scroll-body" x="50" y="58.5" width="500" height="783" />
<g id="runesContainer">
<text class="runes" id="leftRunes">
Expand All @@ -56,7 +73,7 @@
</text>
</g>
<g clip-path="url(#scroll-clip)">
<foreignObject x="68" y="60" width="452" height="781.5">
<foreignObject x="78" y="60" width="448" height="781.5">
<div xmlns="http://www.w3.org/1999/xhtml" id="storyContent"></div>
</foreignObject>
</g>
Expand All @@ -67,35 +84,49 @@

<!-- Left icons -->
<a href="#" id="helpIcon" class="icon-link">
<rect x="65" y="0" width="60" height="60" fill="transparent" />
<g class="icon" transform="translate(80, 15)">
<rect x="35" y="0" width="50" height="60" fill="transparent" />
<g class="icon" transform="translate(50, 15)">
<use href="#helpIconSymbol" width="30" height="30"></use>
</g>
</a>
<a href="https://scrollscan.com/address/0xb253a1A8741A0637C55F0D7BFaBDa1A0B5cAE4bA" target="_blank"
rel="noopener noreferrer" class="icon-link">
<rect x="125" y="0" width="60" height="60" fill="transparent" />
<g class="icon" transform="translate(140, 15)">
<rect x="85" y="0" width="50" height="60" fill="transparent" />
<g class="icon" transform="translate(100, 15)">
<use href="#contractIconSymbol" width="30" height="30"></use>
</g>
</a>
<a href="#" id="darkModeToggle" class="icon-link">
<rect x="135" y="0" width="50" height="60" fill="transparent"></rect>
<g class="icon" transform="translate(150, 15)">
<use href="#moonIconSymbol" width="30" height="30" class="moon-icon"></use>
<use href="#sunIconSymbol" width="30" height="30" class="sun-icon" style="display: none;"></use>
</g>
</a>

<!-- Title -->
<text class="title" x="300" y="38">CONTRIBUTORS</text>

<!-- Right icons -->
<a href="https://discord.gg/2KMZCv2YNa" target="_blank" rel="noopener noreferrer" class="icon-link">
<rect x="415" y="0" width="60" height="60" fill="transparent" />
<g class="icon" transform="translate(430, 15)">
<rect x="405" y="0" width="50" height="60" fill="transparent" />
<g class="icon" transform="translate(420, 15)">
<use href="#discordIconSymbol" width="30" height="30"></use>
</g>
</a>
<a href="https://twitter.com/_LOIYAA" target="_blank" rel="noopener noreferrer" class="icon-link">
<rect x="475" y="0" width="60" height="60" fill="transparent" />
<g class="icon" transform="translate(490, 15)">
<rect x="455" y="0" width="50" height="60" fill="transparent" />
<g class="icon" transform="translate(470, 15)">
<use href="#twitterIconSymbol" width="30" height="30"></use>
</g>
</a>
<a href="#" id="newsIcon" class="icon-link">
<rect x="505" y="0" width="50" height="60" fill="transparent" />
<g class="icon" transform="translate(520, 15)">
<use href="#newsIconSymbol" width="30" height="30"></use>
</g>
</a>

</g>
<g class="cylinder-container" transform="translate(0, 840)">
<rect class="handle" x="1.5" y="11.5" width="37" height="37" rx="8.5" ry="8.5" />
Expand All @@ -116,7 +147,7 @@
</g>
</g>
<g id="contributeButton" class="button" style="cursor: pointer;">
<rect x="220" y="770" width="160" height="50" rx="25" ry="25" fill="#D2691E"></rect>
<rect x="220" y="770" width="160" height="50" rx="25" ry="25" fill="var(--button-color)"></rect>
<text x="300" y="803" fill="white" text-anchor="middle" font-size="22">CONTRIBUTE</text>
</g>
</svg>
Expand Down
19 changes: 19 additions & 0 deletions legacy/news.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"news": [
{
"date": "2024-10-12",
"title": "Chicken Mystery",
"content": "Alignment now enhanced through word transformations. Unabridged text always available in the smart contract and NFTs."
},
{
"date": "2024-10-05",
"title": "Darkness Falls",
"content": "Toggle between the powers of the sun and the moon. Many thanks to <a href='https://www.reddit.com/user/CosmicCollusion/' target='_blank'>CosmicCollusion</a>."
},
{
"date": "2024-10-03",
"title": "Scroll Unrolls",
"content": "Deep within a cave, explorers find a floating parchment, adorned with runes. Contributors deployed to Scroll mainnet."
}
]
}
Loading

0 comments on commit 7c05e0c

Please sign in to comment.