#14 adding a first geochat attempt, added FAQ, added suggestion peopl…

…e can post questions in Antarctica

src/index.html

@@ -38,12 +38,18 @@
  <div class="sidepanel-inner-wrapper">
  <div class="sidepanel-content-wrapper">
  <div class="sidepanel-content">
+ <div id="geochat">
+ <h2>geochat</h2>
+ <ul id="geochat-notes"></ul>
+ </div>
+ <hr />
  <div id="loggedOut">
  <h2>Register</h2>
  <p><button id="signup">Create an account</button></p>
  </div>
 
  <div id="loggedIn">
+ <!-- trustroots username: should be here, roughly -->
  <h2>Your keys</h2>
  <p>
  <code id="npubPublicKey" />
@@ -83,8 +89,18 @@ <h3>Where can I get help?</h3>
  target="_blank"
  rel="noreferrer"
  >reddit</a
- >.
+ >
+ or simply leave a note here in the Antarctica area. 
  </p>
+ <h3>How does this help in Trustroots?</h3>
+
+ <p>Thanks for asking.</p>
+
+ <p>Soon(tm): We hope we can quickly build something like a geochat which is better and more used than what the old meet functionality had to offer, and which adds some interactivity to circles.</p>
+
+ <p>Mid-term: We want this app and Trustroots users to be able to interact with other applications, such as e.g. hitchmap.com build new applications e.g. for ridesharing or finding out where the cool events and parties are.</p>
+
+ <p>Long-term: We strive to make the centralized Trustroots server and database and thus the official organization irrelevant.</p>
  </details>
 
  <h2>Relays</h2>

src/map.ts

@@ -58,7 +58,6 @@ export const hackSidePanelClosed = () => {
 };
 
 map.on("contextmenu", async (event) => {
- console.log("#bG7CWu Right clicked or long pressed");
  const isLoggedIn = await hasPrivateKey();
 
  if (!isLoggedIn) {
@@ -123,7 +122,6 @@ function generateDatetimeFromNote(note: Note): string {
  // Format the date and time strings
  const datetime = `${hours}:${minutes} ${day}-${month}`;
 
- console.log("createdAt", datetime);
  return datetime;
 }
 
@@ -132,24 +130,24 @@ function generateLinkFromNote(note: Note): string {
  note;
  if (authorTrustrootsUsername.length > 3) {
  if (authorName.length > 1) {
- return ` by <a href="https://www.trustroots.org/profile/${authorTrustrootsUsername}" target="_blank">${authorName}</a>`;
+ return ` <a href="https://www.trustroots.org/profile/${authorTrustrootsUsername}" target="_blank">${authorName}</a>`;
  }
- return ` by <a href="https://www.trustroots.org/profile/${authorTrustrootsUsername}" target="_blank">${authorTrustrootsUsername}</a>`;
+ return ` <a href="https://www.trustroots.org/profile/${authorTrustrootsUsername}" target="_blank">${authorTrustrootsUsername}</a>`;
  }
 
  if (authorTripHoppingUserId.length > 3) {
  if (authorName.length > 1) {
- return ` by <a href="https://www.triphopping.com/profile/${authorTripHoppingUserId}" target="_blank">${authorName}</a>`;
+ return ` <a href="https://www.triphopping.com/profile/${authorTripHoppingUserId}" target="_blank">${authorName}</a>`;
  }
- return ` by <a href="https://www.triphopping.com/profile/${authorTripHoppingUserId}" target="_blank">${authorTripHoppingUserId.slice(
+ return ` <a href="https://www.triphopping.com/profile/${authorTripHoppingUserId}" target="_blank">${authorTripHoppingUserId.slice(
  0,
  5
  )}</a>`;
  }
  return "";
 }
 
-function generateContentFromNotes(notes: Note[]) {
+function generateMapContentFromNotes(notes: Note[]) {
  const lines = notes.reduce((existingLines, note) => {
  const link = generateLinkFromNote(note);
  const datetime = generateDatetimeFromNote(note);
@@ -160,6 +158,19 @@ function generateContentFromNotes(notes: Note[]) {
  return content;
 }
 
+// todo: needs to be DRYed up
+function generateChatContentFromNotes(notes: Note[]) {
+ const lines = notes.reduce((existingLines, note) => {
+ const link = generateLinkFromNote(note);
+ const datetime = generateDatetimeFromNote(note);
+ const noteContent = `${datetime}, ${link}: ${note.content}`;
+ return existingLines.concat(noteContent);
+ }, [] as string[]);
+ const content = lines.join("<br />");
+ return content;
+}
+
+
 function addNoteToMap(note: Note) {
  let existing = plusCodesWithPopupsAndNotes[note.plusCode];
 
@@ -174,7 +185,7 @@ function addNoteToMap(note: Note) {
  }
 
  const notes = [...existing.notes, note];
- popup.setContent(generateContentFromNotes(notes));
+ popup.setContent(generateMapContentFromNotes(notes));
  } else {
  const decodedCoords = decode(note.plusCode);
  const {
@@ -185,8 +196,17 @@ function addNoteToMap(note: Note) {
  const marker = L.circleMarker([cLat, cLong], circleMarker); // Create marker with decoded coordinates
  marker.addTo(map);
 
- const content = generateContentFromNotes([note]);
- const popup = L.popup().setContent(content);
+ const contentMap = generateMapContentFromNotes([note]);
+ const contentChat = generateChatContentFromNotes([note]);
+
+ //todo: rename addNoteToMap and other map 
+ console.log(note);
+ const geochatNotes = document.getElementById("geochat-notes");
+ const li = document.createElement("li");
+ li.innerHTML = contentChat;
+ geochatNotes.appendChild(li);
+
+ const popup = L.popup().setContent(contentMap);
  marker.bindPopup(popup);
  marker.on("click", () => marker.openPopup());
  plusCodesWithPopupsAndNotes[note.plusCode] = {

src/nostr/subscribe.ts

@@ -86,7 +86,7 @@ export const subscribe = async ({
  onNoteReceived,
  limit = 200,
 }: SubscribeParams) => {
- console.log("#qnvvsm nostr/subscribe", publicKey);
+ // console.log("#qnvvsm nostr/subscribe", publicKey);
  let gotNotesEose = false;
  let gotPromiseEose = false;
  const profiles: { [publicKey: string]: Profile } = {};
@@ -110,7 +110,7 @@ export const subscribe = async ({
  const noteEventsQueue: NostrEvent[] = [];
 
  const onNoteEvent = (event: NostrEvent) => {
- if (isDev()) console.log("#gITVd2 gotNoteEvent", event);
+ // if (isDev()) console.log("#gITVd2 gotNoteEvent", event);
 
  if (
  !doesStringPassSanitisation(event.content) ||
@@ -154,7 +154,7 @@ export const subscribe = async ({
  };
 
  const onProfileEvent = (event: NostrEvent) => {
- if (isDev()) console.log("#zD1Iau got profile event", event);
+ // if (isDev()) console.log("#zD1Iau got profile event", event);
 
  const profile = getProfileFromEvent({ event });
  const publicKey = getPublicKeyFromEvent({ event });

src/style.css

@@ -81,3 +81,8 @@ body,
  color: white;
  border: none;
 }
+#geochat-notes {
+ list-style-type: none;
+ padding-left: 0;
+ margin-left: 0;
+}