diff --git a/src/app/pages/Houses/Houses.jsx b/src/app/pages/Houses/Houses.jsx
index 72231936..aff8129a 100644
--- a/src/app/pages/Houses/Houses.jsx
+++ b/src/app/pages/Houses/Houses.jsx
@@ -4,6 +4,7 @@ import Helmet from "react-helmet";
import { Icon, Section } from "app/Symbols";
import { Text } from "app/components";
import clsx from "clsx";
+
import Symbol1 from "./assets/1.png";
import Symbol2 from "./assets/2.png";
import Symbol3 from "./assets/3.png";
@@ -21,11 +22,14 @@ import House2 from "./assets/Group2.png";
import House3 from "./assets/Group3.png";
import House4 from "./assets/Group4.png";
import FAQ_QUESTIONS from "./assets/FAQ.json";
+import useHousePoints from "./useHousePoints";
const PUBLIC_POINTS_SPREADSHEET =
"https://docs.google.com/spreadsheets/d/e/2PACX-1vQ6BbuyZ3vqmItkfe48YYgeqdiK8cN8OogbcKvQrc3W4Y5705HWqGNEEseWb-V5rZC3-Rmd21lCaVVJ/pubhtml";
const Houses = () => {
+ const housePoints = useHousePoints();
+
const HOUSES = [
{
name: "Water Tribe",
@@ -157,11 +161,16 @@ const Houses = () => {
{HOUSES.map(({ name, icon, description }) => (
-
{name}
-
- {description}
-
-
+
+ {name}
+ {description}
+
+
+
+ {housePoints[name] ?? "-"}
+
+ points
+
))}
diff --git a/src/app/pages/Houses/Houses.module.scss b/src/app/pages/Houses/Houses.module.scss
index b6df2e6a..35affa49 100644
--- a/src/app/pages/Houses/Houses.module.scss
+++ b/src/app/pages/Houses/Houses.module.scss
@@ -62,7 +62,7 @@
}
}
- & > .houses {
+ .houses {
text-align: center;
margin: 0 auto;
max-width: 1300px;
@@ -71,17 +71,13 @@
font-weight: bold;
}
- & .list {
+ .list {
display: grid;
- grid-template-columns: 1fr 1fr;
+ grid-template-columns: 1fr;
gap: 20px;
- @media screen and (max-width: 900px) {
- grid-template-columns: 1fr;
- }
-
- & .house {
+ .house {
text-align: left;
border: 2px solid var(--silver);
border-radius: 20px;
@@ -101,10 +97,30 @@
}
& img {
- height: 120px;
+ height: 90px;
grid-row: 1 / 3;
grid-column: 1 / 2;
}
+
+ .housePoints {
+ display: flex;
+ text-align: end;
+ column-gap: 0.35rem;
+ flex-direction: row;
+ align-items: center;
+ }
+ }
+
+ @media screen and (min-width: 900px) {
+ grid-template-columns: 1fr 1fr;
+
+ .house {
+ grid-template-columns: auto 1fr auto;
+ .housePoints {
+ text-align: end;
+ flex-direction: column;
+ }
+ }
}
}
}
diff --git a/src/app/pages/Houses/useHousePoints.js b/src/app/pages/Houses/useHousePoints.js
new file mode 100644
index 00000000..dee12d25
--- /dev/null
+++ b/src/app/pages/Houses/useHousePoints.js
@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+const FEED_URL = "https://docs.google.com/spreadsheets/d/";
+const SPREADSHEET_KEY = "1AV98P5Fs3INBtbwT69oJvfN0eAgj9daVw6o_6XIGEiI";
+const MODE = "pub";
+const SHEET_GID = "1705286477";
+
+const EMPTY_HOUSE_POINTS = {};
+
+function useHousePoints() {
+ const [housePoints, setHousePoints] = useState(EMPTY_HOUSE_POINTS);
+
+ useEffect(() => {
+ const dataURL = new URL(`${FEED_URL}${SPREADSHEET_KEY}/${MODE}`);
+ dataURL.searchParams.set("gid", SHEET_GID);
+ dataURL.searchParams.set("single", "true");
+ dataURL.searchParams.set("output", "tsv");
+
+ const getHousePoints = async () => {
+ try {
+ const response = await fetch(dataURL);
+ const text = await response.text();
+
+ const data = {};
+ // Parse each tab-separated line
+ for (const line of text.split("\n")) {
+ const [key, value] = line.split("\t");
+ data[key] = value;
+ }
+
+ setHousePoints(data);
+ } catch (err) {
+ console.error("Error occurred while fetching sheets data:", err);
+ }
+ };
+
+ getHousePoints();
+ }, []);
+
+ return housePoints;
+}
+
+export default useHousePoints;