Skip to content

Commit 0f9c773

Browse files
RomiRandRomiRand
committed
[ADD] canvas selection
1 parent f2534b5 commit 0f9c773

File tree

5 files changed

+124
-83
lines changed

5 files changed

+124
-83
lines changed

‎README.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ __This tool is still in an early version. It was hacked together in a very short
1111
Feel free to report issues and/or help developing.__
1212

1313
## Installation
14-
At the moment this is hardcoded for the ongoing weekly sandbox canvas. For now you'll need to use a terminal, I'll
15-
try to explain everything in detail.
14+
For now you'll need to use a terminal, I'll try to explain everything in detail.
1615
### Prerequisites
1716
- Open a terminal:
1817
- Linux: hit `CTRL + SHFT + T`

‎canvas.html

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<link rel="stylesheet" type="text/css" href="./styles.css">
4+
<head>
5+
</head>
6+
<body>
7+
<div id="can" class="canvas">
8+
<canvas id="baseCanvas"></canvas>
9+
<canvas id="drawCanvas"></canvas>
10+
</div>
11+
<div class="metamaskConnect">
12+
<button class = "mmBtn" id="connectButton">Connect</button>
13+
<button class = "mmBtn" id="hideBtn"></button>
14+
<button class = "mmBtn" id="drawModeBtn">random</button>
15+
</div>
16+
<div class="btns">
17+
<div class="afterImport">
18+
<button class="btn" type="button" id="exportBtn">Export (paste image from url)</button>
19+
<div id="progressbar">
20+
<span>0% drawn</span>
21+
<div></div>
22+
</div>
23+
</div>
24+
<div class = "beforeImport">
25+
<input type="text" id="configImport" placeholder="Import image config...">
26+
<button class="btn" type="button" id="importBtn">Import</button>
27+
</div>
28+
</div>
29+
<div>
30+
<div id="FriendlyArtists">
31+
<table id="FriendlyTable">
32+
<tr>
33+
<th colspan="2">You are drawing with</th>
34+
</tr>
35+
<tr>
36+
<th>Address</th>
37+
<th>Count</th>
38+
</tr>
39+
<tbody id="friendlyTableBody"></tbody>
40+
</table>
41+
</div>
42+
<div id="EnemyArtists">
43+
<table id="EnemyTable">
44+
<tr>
45+
<th colspan="2">You are drawing against</th>
46+
</tr>
47+
<tr>
48+
<th>Address</th>
49+
<th>Count</th>
50+
</tr>
51+
<tbody id="enemyTableBody"></tbody>
52+
</table>
53+
</div>
54+
</div>
55+
<script src="https://unpkg.com/@metamask/detect-provider/dist/detect-provider.min.js"></script>
56+
<script type="text/javascript" src="ethjs-ens.js"></script>
57+
<script type="text/javascript" src="index.js"></script>
58+
<script type="text/javascript" src="ethjs-util.js"></script>
59+
</body>
60+
</html>

‎index.html

Lines changed: 10 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,16 @@
11
<!DOCTYPE html>
22
<html>
3-
<link rel="stylesheet" type="text/css" href="./styles.css">
3+
<link rel="stylesheet" type="text/css" href="./styles.css">
44
<head>
55
</head>
66
<body>
7-
<div id="can" class="canvas">
8-
<canvas id="baseCanvas"></canvas>
9-
<canvas id="drawCanvas"></canvas>
10-
</div>
11-
<div class="metamaskConnect">
12-
<button class = "mmBtn" id="connectButton">Connect</button>
13-
<button class = "mmBtn" id="hideBtn"></button>
14-
<button class = "mmBtn" id="drawModeBtn">random</button>
15-
</div>
16-
<div class="btns">
17-
<div class="afterImport">
18-
<button class="btn" type="button" id="exportBtn">Export (paste image from url)</button>
19-
<div id="progressbar">
20-
<span>0% drawn</span>
21-
<div></div>
22-
</div>
23-
</div>
24-
<div class = "beforeImport">
25-
<input type="text" id="configImport" placeholder="Import image config...">
26-
<button class="btn" type="button" id="importBtn">Import</button>
27-
</div>
28-
</div>
29-
<div>
30-
<div id="FriendlyArtists">
31-
<table id="FriendlyTable">
32-
<tr>
33-
<th colspan="2">You are drawing with</th>
34-
</tr>
35-
<tr>
36-
<th>Address</th>
37-
<th>Count</th>
38-
</tr>
39-
<tbody id="friendlyTableBody"></tbody>
40-
</table>
41-
</div>
42-
<div id="EnemyArtists">
43-
<table id="EnemyTable">
44-
<tr>
45-
<th colspan="2">You are drawing against</th>
46-
</tr>
47-
<tr>
48-
<th>Address</th>
49-
<th>Count</th>
50-
</tr>
51-
<tbody id="enemyTableBody"></tbody>
52-
</table>
53-
</div>
54-
</div>
55-
<script src="https://unpkg.com/@metamask/detect-provider/dist/detect-provider.min.js"></script>
56-
<script type="text/javascript" src="ethjs-ens.js"></script>
57-
<script type="text/javascript" src="index.js"></script>
58-
<script type="text/javascript" src="ethjs-util.js"></script>
7+
<p><b>CANVAS SELECT SCREEN</b></p>
8+
<p><b>Closed</b></p>
9+
<div id="Closed"></div>
10+
<p><b>Open</b></p>
11+
<div id="Open"></div>
12+
<p><b>Soon</b></p>
13+
<div id="Soon"></div>
14+
<script type="text/javascript" src="selectCanvas.js"></script>
5915
</body>
60-
</html>
16+
</html>

‎index.js

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,12 @@ const baseCanvas = document.getElementById('baseCanvas');
66
const drawCanvas = document.getElementById('drawCanvas');
77
const drawModeButton = document.getElementById('drawModeBtn');
88

9-
let canvasId = "week-21"
9+
const queryString = window.location.search
10+
const urlParams = new URLSearchParams(queryString)
11+
const canvasId = urlParams.get('canvasId')
12+
1013
let bearer = ""
1114
let baseUrl = "https://api-sandbox.poap.art/canvas/"
12-
let chunkSize = 0
13-
let rows = 0
14-
let cols = 0
1515
let idx_array
1616
let addr
1717

@@ -118,14 +118,20 @@ async function onMessage (event) {
118118
console.log(msg[0]);
119119
}
120120

121-
function setupCanvas(id)
121+
function setupCanvas()
122122
{
123-
if (id === "")
123+
if (canvasId === "")
124124
return;
125125
let url = baseUrl + canvasId
126126
fetch(url)
127-
.then(response => response.json())
128-
.then(function(data) {
127+
.then(response =>
128+
{
129+
if (!response.ok) {
130+
throw new Error("check canvas id")
131+
}
132+
return response.json();
133+
})
134+
.then(data => {
129135
baseCanvas.width = data["rows"] * data["chunkSize"]
130136
baseCanvas.height = data["cols"] * data["chunkSize"]
131137
drawCanvas.width = data["rows"] * data["chunkSize"]
@@ -137,10 +143,13 @@ function setupCanvas(id)
137143
drawChunk(r, c, data["chunkSize"]);
138144
}
139145
}
146+
})
147+
.catch((error) => {
148+
alert(error);
140149
});
141150
}
142151

143-
setupCanvas("nKOjzq");
152+
setupCanvas();
144153

145154
let baseCtx = baseCanvas.getContext("2d");
146155
let drawCtx = drawCanvas.getContext("2d");
@@ -222,28 +231,10 @@ document.addEventListener('mousemove', mouseMove);
222231
document.addEventListener('mousedown', mouseDown);
223232
document.addEventListener('mouseup', resetCursor);
224233
document.addEventListener('mouseenter', setPosition);
225-
drawCanvas.addEventListener('wheel', zoom);
226234

227235
let scale = 1;
228-
let baseW = 4096
229-
let baseH = 4096
230236
var tempCanvas=document.createElement("canvas");
231237
var tctx=tempCanvas.getContext("2d");
232-
function zoom(event) {
233-
/*event.preventDefault();
234-
235-
scale += event.deltaY * -0.001;
236-
scale = Math.min(Math.max(0.5, scale), 128);
237-
var el = document.getElementById("can")
238-
drawCanvas.style.transform = `scale(${scale})`;
239-
baseCanvas.style.transform = `scale(${scale})`;
240-
//el.style.transform = `scale(${scale})`;
241-
242-
baseCanvas.width = baseW * scale;
243-
baseCanvas.height = baseH * scale;
244-
drawCanvas.width = baseW * scale;
245-
drawCanvas.height = baseH * scale;*/
246-
}
247238

248239
function resetCursor(event)
249240
{

‎selectCanvas.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
function loadAllCanvas() {
2+
let url = "https://api-sandbox.poap.art/canvas"
3+
fetch(url)
4+
.then(response => response.json())
5+
.then(function(data) {
6+
for (let canvas of data["results"])
7+
{
8+
let btn = document.createElement("BUTTON");
9+
btn.innerHTML = canvas["title"]
10+
if (canvas["status"] === "OPEN")
11+
{
12+
document.getElementById("Open").appendChild(btn)
13+
}
14+
else if (canvas["status"] === "CLOSED")
15+
{
16+
document.getElementById("Closed").appendChild(btn)
17+
}
18+
else
19+
{
20+
document.getElementById("Soon").appendChild(btn)
21+
}
22+
if (canvas["status"] !== "OPEN")
23+
{
24+
btn.disabled = true
25+
continue
26+
}
27+
btn.addEventListener("click", function ()
28+
{
29+
window.location.href = './canvas.html?canvasId=' + canvas["canvasId"];
30+
});
31+
}
32+
})
33+
}
34+
35+
loadAllCanvas()

0 commit comments

Comments
 (0)