-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
118 lines (109 loc) · 4.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Brick 1100 Apps</title>
<link rel="icon" href="https://brick1100.visnalize.com/favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<style>
.frame {
position: relative;
width: calc(200px);
}
.frame img {
position: relative;
pointer-events: none;
}
.frame iframe {
position: absolute;
inset: 0;
width: 82%;
height: 90%;
margin: auto;
}
</style>
</head>
<body>
<div class="container is-max-desktop">
<section class="hero">
<div class="hero-body">
<h1 class="title is-size-1 has-text-centered mb-4">Brick 1100 Apps</h1>
<p class="subtitle is-size-4 has-text-centered">A collection of apps built for
<a class="has-text-weight-bold" href="https://visnalize.com/brick1100/about">Brick 1100</a>
</p>
<div class="grid is-col-min-12">
<div class="cell">
<a class="button is-primary is-large is-fullwidth"
href="https://visnalize.com/brick1100/builders/building-app" target="_blank">How to build an
app</a>
</div>
<div class="cell">
<a class="button is-primary is-outlined is-large is-fullwidth"
href="https://github.com/Visnalize/brick-1100-apps" target="_blank">Source code</a>
</div>
</div>
</div>
</section>
<section class="section" id="list"></section>
</div>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
const list = document.getElementById("list");
const GIT_URL = "https://github.com/Visnalize/brick-1100-apps/tree/main";
const GAME_URL = "https://brick1100-apps.visnalize.com";
const PREVIEW_URL = "https://brick1100.visnalize.com/#/online/previewer";
const PHONE_FRAME = "https://visnalize.com/assets/phone-v.BPnO5XMp.webp";
const CACHE_KEY = "brick1100-apps";
function render(data) {
const items = data
.filter((item) => item.type === "dir")
.map((item) => {
const name = item.name
.split("-")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ");
const iframe = m("iframe", {
src: `${PREVIEW_URL}?url=${GAME_URL}/${item.name}`,
frameborder: "0",
});
return m("div.mb-6", [
m("div.frame.mx-auto", [iframe, m(`img[src='${PHONE_FRAME}']`)]),
m("a.button.is-text.is-block", {
href: `${GIT_URL}/${item.name}`,
target: "_blank",
}, m("h2.is-size-4.is-size-3-desktop", name)),
]);
});
m.render(list, m('div.grid.is-col-min-10.is-gap-4', items));
}
function fetchData() {
fetch("https://api.github.com/repos/Visnalize/brick-1100-apps/contents")
.then((response) => {
if (response.ok && response.status === 200) {
return response.json();
}
m.render(list, m("div.cell.has-text-centered", [
m("h2.is-size-3", "Failed to fetch data"),
m("p", "Please try again later"),
]));
})
.then((data) => {
localStorage.setItem(CACHE_KEY, JSON.stringify({ data, timestamp: Date.now() }));
render(data);
})
}
if (localStorage.getItem(CACHE_KEY)) {
const { data, timestamp } = JSON.parse(localStorage.getItem(CACHE_KEY));
const oneDay = 86400000;
if (Date.now() - timestamp < oneDay) {
render(data);
} else {
fetchData();
}
} else {
fetchData();
}
</script>
</body>
</html>