r/place frontend added

static/app.js

@@ -52,6 +52,7 @@ var economicFeatures = document.querySelectorAll("#economic-list li");
 var jokesFeatures = document.querySelectorAll("#jokes-list li");
 var marketFeatures = document.querySelectorAll("#market-list li");
 var sectorFeatures = document.querySelectorAll("#sector-list li");
+var placeFeatures = document.querySelectorAll("#place-list li");
 
 var allFeaturesList = [
   stocksFeatures,
@@ -75,6 +76,7 @@ var allFeaturesList = [
   jokesFeatures,
   marketFeatures,
   sectorFeatures,
+  placeFeatures,
 ];
 
 // features remove buttons
@@ -105,6 +107,7 @@ var economicRemoveBtn = document.getElementById("economic-remove-btn");
 var jokesRemoveBtn = document.getElementById("jokes-remove-btn");
 var marketRemoveBtn = document.getElementById("market-remove-btn");
 var sectorRemoveBtn = document.getElementById("sector-remove-btn");
+var placeRemoveBtn = document.getElementById("place-remove-btn");
 
 var allFeaturesRemoveBtns = [
   stocksRemoveBtn,
@@ -128,6 +131,7 @@ var allFeaturesRemoveBtns = [
   jokesRemoveBtn,
   marketRemoveBtn,
   sectorRemoveBtn,
+  placeRemoveBtn,
 ];
 // features increase buttons
 var stocksincreaseBtn = document.getElementById("stocks-increase-btn");
@@ -157,6 +161,7 @@ var economicincreaseBtn = document.getElementById("economic-increase-btn");
 var jokesincreaseBtn = document.getElementById("jokes-increase-btn");
 var marketincreaseBtn = document.getElementById("market-increase-btn");
 var sectorincreaseBtn = document.getElementById("sector-increase-btn");
+var placeincreaseBtn = document.getElementById("place-increase-btn");
 
 var allFeaturesIncreaseBtns = [
   stocksincreaseBtn,
@@ -180,6 +185,7 @@ var allFeaturesIncreaseBtns = [
   jokesincreaseBtn,
   marketincreaseBtn,
   sectorincreaseBtn,
+  placeincreaseBtn,
 ];
 
 // features decrease buttons
@@ -210,6 +216,7 @@ var economicDecreaseBtn = document.getElementById("economic-decrease-btn");
 var jokesDecreaseBtn = document.getElementById("jokes-decrease-btn");
 var marketDecreaseBtn = document.getElementById("market-decrease-btn");
 var sectorDecreaseBtn = document.getElementById("sector-decrease-btn");
+var placeDecreaseBtn = document.getElementById("place-decrease-btn");
 
 var allFeaturesDecreaseBtns = [
   stocksDecreaseBtn,
@@ -233,6 +240,7 @@ var allFeaturesDecreaseBtns = [
   jokesDecreaseBtn,
   marketDecreaseBtn,
   sectorDecreaseBtn,
+  placeDecreaseBtn,
 ];
 
 const changeVarValue = () => {
@@ -263,6 +271,7 @@ const changeVarValue = () => {
   jokesFeatures = document.querySelectorAll("#jokes-list li");
   marketFeatures = document.querySelectorAll("#market-list li");
   sectorFeatures = document.querySelectorAll("#sector-list li");
+  placeFeatures = document.querySelectorAll("#place-list li");
   
   allFeaturesList = [
     stocksFeatures,
@@ -286,6 +295,7 @@ const changeVarValue = () => {
     jokesFeatures,
     marketFeatures,
     sectorFeatures,
+    placeFeatures,
   ];
 };
 
@@ -667,6 +677,7 @@ var economics = document.getElementById("economic-list");
 var jokes = document.getElementById("jokes-list");
 var market = document.getElementById("market-list");
 var sector = document.getElementById("sector-list");
+var place = document.getElementById("place-list");
 
 var allFeatures = [
   stocks,
@@ -690,6 +701,7 @@ var allFeatures = [
   jokes,
   market,
   sector,
+  place,
 ];
 
 // features select box
@@ -703,6 +715,7 @@ var economicSelect = document.getElementById("inputTransition2222");
 var jokesSelect = document.getElementById("jokes-categories");
 var marketSelect = document.getElementById("market-categories");
 var sectorSelect = document.getElementById("sector-categories");
+var placeSelect = document.getElementById("place-categories");
 var allFeaturesSelectBox = [
   null,
   null,
@@ -725,6 +738,7 @@ var allFeaturesSelectBox = [
   jokesSelect,
   marketSelect,
   sectorSelect,
+  placeSelect,
 ];
 
 // features select add buttons
@@ -737,6 +751,7 @@ var economicAddBtn = document.getElementById("economic-countries-btn");
 var jokesAddBtn = document.getElementById("jokes-categories-btn");
 var marketAddBtn = document.getElementById("market-categories-btn");
 var sectorAddBtn = document.getElementById("sector-categories-btn");
+var placeAddBtn = document.getElementById("place-categories-btn");
 
 var allFeaturesSelectAddBtn = [
   null,
@@ -760,6 +775,7 @@ var allFeaturesSelectAddBtn = [
   jokesAddBtn,
   marketAddBtn,
   sectorAddBtn,
+  placeAddBtn,
 ];
 
 allFeaturesSelectAddBtn.map((value, index) => {
@@ -801,6 +817,7 @@ var allFeaturesFile = [
   null,
   null,
   null,
+  null,
 ];
 // features file add button
 var imagesFileAddBtn = document.getElementById("inputTextBtn11");
@@ -828,6 +845,7 @@ var allFeaturesFileAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 // features input text
@@ -862,6 +880,7 @@ var allFeaturesText = [
   null,
   null,
   null,
+  null,
 ];
 
 // features text add button
@@ -896,6 +915,7 @@ var allFeaturesTextAddBtn = [
   null,
   null,
   null,
+  null,
 ];
 
 
@@ -921,6 +941,7 @@ var allFeaturesLimit = [
   null,
   null,
   null,
+  null,
 ];
 
 
@@ -1197,6 +1218,7 @@ function getFeatureSettings() {
     "Jokes",
     "Gainers, Losers, Active",
     "Sector Performance",
+    "r/place (Reddit)",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1271,6 +1293,9 @@ function getFeatureSettings() {
     case 21:
       s = getSectorSettings(page);
       break;
+    case 22:
+      s = getPlaceSettings(page);
+      break;
   }
   
   settings = { ...settings, ...s }; // merge both sets of settings
@@ -1470,6 +1495,7 @@ function saveMovieAPIKey(){
     "Jokes",
     "Gainers, Losers, Active",
     "Sector Performance",
+    "r/place (Reddit)",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1515,6 +1541,7 @@ function saveIpoAPIKey(){
     "Jokes",
     "Gainers, Losers, Active",
     "Sector Performance",
+    "r/place (Reddit)",
   ];
   let pageNum = features.indexOf(feature) + 1;
   let pageSelector = "Page" + pageNum.toString();
@@ -1990,7 +2017,7 @@ inputAnimationBtn.addEventListener("click", () => {
 // scroll speed row two
 let inputScrollSpeedRow = [];
 
-for (let i = 1; i <= 21; i++) {
+for (let i = 1; i <= 22; i++) {
   inputScrollSpeedRow.push(
     document.getElementById(
       i === 1 ? "inputScrollSpeedRow" : `inputScrollSpeedRow${i}`
@@ -3358,7 +3385,7 @@ function featureSavePrompt() {
 
 
 const pageIDs = ['Page1', 'Page2', 'Page3', 'Page4', 'Page5', 'Page6', 'Page7', 'Page8', 'Page9', 'Page10', 'Page11', 'Page12', 'Page13',
-  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21'];
+  'Page14', 'Page15', 'Page16', 'Page17', 'Page18', 'Page19', 'Page20', 'Page21', 'Page22'];
 
 for (const pageID of pageIDs) {
   // Select the parent div
@@ -3366,7 +3393,7 @@ for (const pageID of pageIDs) {
   // Add event listeners to select menus
   const excludedIds = ['base-select', 'quote-select', 'commodities-items', 'indices-items', 'inputTransition73', 
     'inputTransition83', 'inputTransition93', 'inputTransition103', 'inputTransition2222', 'jokes-categories', 'golf-ranking-number', 
-    'inputScrollSpeed16', 'inputScrollSpeed17', 'inputScrollSpeed19BG', 'market-categories', 'sector-categories'];
+    'inputScrollSpeed16', 'inputScrollSpeed17', 'inputScrollSpeed19BG', 'market-categories', 'sector-categories', 'place-categories'];
  
   const selectMenus = parentDiv.querySelectorAll('select');
   selectMenus.forEach(selectMenu => {
@@ -3377,6 +3404,22 @@ for (const pageID of pageIDs) {
       });
     }
   });
+  // Add event listeners for input text fields specifically for page22 (r/place)
+  if (pageID === 'Page22') {
+    const inputForms = parentDiv.querySelectorAll('input[type="text"]');
+    inputForms.forEach(inputForm => {
+      inputForm.addEventListener('input', function(event) {
+        displaySavePrompt2();
+      });
+    });
+  }
+  // Add event listeners for sliders specifically for page22 (r/place)
+  if (pageID === 'Page22') {
+    const slider = parentDiv.querySelector('#myRange');
+    slider.addEventListener('input', function(event) {
+      displaySavePrompt2();
+    });
+  }
   // Add event listeners to input checkboxes
   const inputForms = parentDiv.querySelectorAll('input[type="checkbox"]');
   inputForms.forEach(inputForm => {
@@ -3489,3 +3532,16 @@ function uploadCryptoLogo() {
   }
 }
 
+
+
+// TO GET SLIDER VALUE FOR IMAGE WIDTH IN R/PLACE
+var slider = document.getElementById("myRange");
+var output = document.getElementById("slider-value");
+output.innerHTML = slider.value; // Display the default slider value
+
+// Update the current slider value (each time you drag the slider handle)
+slider.oninput = function() {
+  output.innerHTML = this.value;
+}
+
+