Skip to content

Commit f094042

Browse files
gregzaitsevgregzaitsev
committed
Pre-release fixes
1 parent c44b7ae commit f094042

9 files changed

Lines changed: 84 additions & 80 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Project Description
44
This is a Substrate based remake of CryptoPunks game, a classic game that inspired ERC-721 Ethereum standard.
55

6-
10,000 unique character images were generated from a brand new set of face parts and put on IPFS network (can be accessed by this link at UseTech IPFS Gateway: [SubstraPunks - IPFS](https://ipfs-gateway.usetech.com/ipfs/QmRVBEk1o1Tyoc925FtRMQDJhubsKJjoayRRL5Dww2RTJZ/)) to prove that games and other applications that use our [NFT Chain](https://github.com/usetech-llc/nft_parachain) can be fully decentralized.
6+
10,000 unique character images were generated from a brand new set of face parts and put on IPFS network (can be accessed by this link at UseTech IPFS Gateway: [SubstraPunks - IPFS](https://ipfs-gateway.usetech.com/ipfs/QmVfXUHTmt85c1Mq2DKmyKYnhbZYw6W1dUnEQc45yo6TEf/)) to prove that games and other applications that use our [NFT Chain](https://github.com/usetech-llc/nft_parachain) can be fully decentralized.
77

88
Each character has its set of features that is programmed into the NFT TestNet Blockchain. NFT Pallet stores details about each Punk whether it has Brown Beard, Orange Hair or smokes a Pipe, and the IPFS hosted web page retrieves these details from NFT Chain, so the game becomes completely 100% serverless.
99

‎public/css/cryptopunk.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@
3232
margin-top: 10px;
3333
text-align: left;
3434
transition: all .5s;
35+
max-width:100px;
36+
text-align: center;
3537
}
3638

3739
.btn-nominwidth {

‎public/css/styles.css‎

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -247,20 +247,8 @@ blockquote:before {
247247
border: 2px solid #f5f5f5;
248248
}
249249
.category_btn {
250-
background-color: #ff04b4;
251-
-webkit-border-radius: 2em;
252-
border-radius: 2em;
253-
color: #fff;
254-
display: inline-block;
255-
font-size: 11px;
256-
letter-spacing: 1px;
257-
line-height: 2.2em;
258-
padding: 0 1.5em;
259-
text-transform: uppercase;
260-
}
261-
.category_btn:hover {
262-
background-color: #272727;
263-
color: #fff;
250+
max-width: 200px;
251+
cursor: pointer;
264252
}
265253
.btn_small {
266254
margin-left: 1.4em;
@@ -277,6 +265,7 @@ blockquote:before {
277265

278266
.btn-default {
279267
text-shadow: none;
268+
border: 0px;
280269
}
281270

282271
.form-control {

‎public/details.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<meta http-equiv=X-UA-Compatible content="IE=11">
66
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
7-
<title>CryptoPunks</title>
7+
<title>SubstraPunks</title>
88
<meta name="description" content="10,000 unique collectible characters with proof of ownership stored on the NFT Substrate blockchain." />
99
<link rel="stylesheet" href="css/bootstrap.min.css">
1010
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
@@ -33,7 +33,7 @@
3333
<div id="punkDetails" class='container text_block'>
3434
<div class='row'>
3535
<div class="col-md-10 col-md-offset-1 col-xs-12" style='margin-top: 20px;'>
36-
<h1 id="title" style="margin-top: 0px; margin-bottom: 5px;">CryptoPunk #</h1>
36+
<h1 id="title" style="margin-top: 0px; margin-bottom: 5px;">SubstraPunk #</h1>
3737
<h4 style="margin-top: 0px;"><b><span id='gender'>???</span></b> punk</h4>
3838
<br>
3939
</div>
@@ -46,15 +46,17 @@ <h3>Accessories</h3>
4646
</div>
4747
<div class='col-md-10 col-md-offset-1'>
4848
<h3>Ownership</h3>
49+
<div id='error'>
50+
</div>
4951
<div id='ownership'>
5052
</div>
5153
</div>
5254
<div class='col-md-10 col-md-offset-1' id='claim' style='display:none;'>
5355
<p>What is your Polkadot-NFT address?</p>
54-
<select id='newowner'></select>
56+
<select id='newowner' class='btn' style='background-color: white; color: #ff04b4; max-width: 600px; border: 1px solid; border-radius: 3px;'></select>
5557
<br/>
5658
<br/>
57-
<button onclick='claimtx();'>Claim</button>
59+
<button onclick='claimtx();' class="btn">Claim</button>
5860
</div>
5961
<div class='col-md-10 col-md-offset-1' id='claimprogress' style='display:none;'>
6062
<p>Mining claim transaction...</p>

‎public/images/logo.png‎

18.4 KB
Loading

‎public/index.html‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<meta http-equiv=X-UA-Compatible content="IE=11">
66
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
7-
<title>CryptoPunks</title>
7+
<title>SubstraPunks</title>
88
<meta name="description" content="10,000 unique collectible characters with proof of ownership stored on the NFT Substrate blockchain." />
99
<link rel="stylesheet" href="css/bootstrap.min.css">
1010
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
@@ -28,25 +28,14 @@
2828
<div class="col-md-10 col-xs-12">
2929
<p></p>
3030
<!-- CMS category -->
31-
<a href="https://usetech.com/blockchain" class="category_btn">UseTech Blockchain</a>
31+
<a href="https://usetech.com/blockchain"><img src="/images/logo.png" class="category_btn"></img></a>
3232
<!-- CMS title -->
3333
<h1>SubstraPunks</h1>
3434
<!-- CMS excerpt -->
3535
<p>
36-
10,000 unique collectible characters with proof of ownership stored on the NFT Substrate blockchain,
37-
remake of CryptoPunks. Original project is inspired the modern CryptoArt movement. Featured
38-
in <a href="https://mashable.com/2017/06/16/cryptopunks-ethereum-art-collectibles/">Mashable</a>,
39-
<a href="https://www.ft.com/content/f9c1422a-47c9-11e8-8c77-ff51caedcde6">The Financial Times</a>,
40-
<a href="https://www.theparisreview.org/blog/2018/01/23/much-pepe-scenes-first-rare-digital-art-auction/">The Paris Review</a>,
41-
<a href="https://www.salon.com/2018/01/07/the-world-of-cryptocollectibles-like-cryptokitties-looks-like-the-internets-early-days/">Salon</a>,
42-
<a href="https://theoutline.com/post/5055/puttin-art-on-the-dang-blockchain">The Outline</a>,
43-
<a href="https://breakermag.com/how-cryptopunks-creators-charmed-the-art-world-and-paved-the-way-for-blockchain-art/">BreakerMag</a>,
44-
<a href='https://christies.com/exhibitions/2018/art-and-tech-summit-exploring-blockchain'>Christie's of London</a>,
45-
<a href="https://www.artbasel.com/events/detail/7953/Conversations-Art-Market-Talk-Which-Art-Problems-can-Blockchain-Solve">Art|Basel</a>,
46-
<a href="https://www.pbs.org/newshour/show/how-blockchain-technology-could-revolutionize-the-art-market">The PBS NewsHour</a> and
47-
<a href="https://www.nytimes.com/2018/01/13/arts/cryptocurrency-art-market.html">The New York Times</a>.
48-
The first "Non-Fungible Token," and inspiration for the Ethereum <a href="https://eips.ethereum.org/EIPS/eip-721">ERC-721 standard</a>
49-
that powers most digital art and collectibles.
36+
10,000 unique collectible characters with proof of ownership stored on the NFT Substrate blockchain Unique Network,
37+
is a remake and a tribute to CryptoPunks, the first "Non-Fungible Token," and inspiration for the Ethereum
38+
<a href="https://eips.ethereum.org/EIPS/eip-721">ERC-721 standard</a> that powers most digital art and collectibles.
5039
</p>
5140
</div>
5241

@@ -58,25 +47,26 @@ <h3 class="m-t-50">Random Punks</h3>
5847
</div>
5948
</div>
6049
</div>
61-
</div>
62-
63-
<div class="container">
6450
<div class="row">
6551
<div class="col-md-12 text_block">
6652
<p>
67-
The CryptoPunks are 10,000 uniquely generated characters.
68-
No two are exactly alike, and each one of them can be officially owned by a single person on
69-
the <a href="https://uniqueapps.usetech.com">Polkadot NFT</a> blockchain.
70-
Originally, they could be claimed for free by anybody with an NFT wallet.
71-
The zoomable image above is connected to the Polkadot NFT network and has been colored to
72-
show you the status of every Punk in the market.
73-
Punks with a <span style="background-color: #adc9d6; padding-left: 2px; padding-right: 2px;">blue background</span> have been claimed.
74-
Punks with a <span style="background-color: #d6adad; padding-left: 2px; padding-right: 2px;">red background</span> are available for sale by their owner.
75-
You can click to zoom in on a Punk and reveal its details.
53+
The CryptoPunks are 10,000 uniquely generated characters. No two are exactly the same, and each one of them
54+
can be officially owned by a single person on the Unique Network blockchain. Initially they can be claimed
55+
for free by anybody with an NFT wallet. The zoomable image above is connected to the Polkadot NFT network and
56+
has been colored to show you the status of each Punk in the market. Punks with a
57+
<span style="background-color: #adc9d6; padding-left: 2px; padding-right: 2px;">blue background</span>
58+
have been claimed. Punks with a
59+
<span style="background-color: #d6adad; padding-left: 2px; padding-right: 2px;">red background</span>
60+
are available for claiming. You can click to zoom in on a Punk and reveal its details and claim the free
61+
ones. Please contact us if you have any questions:
62+
</p>
63+
<p>
64+
<a href="https://t.me/joinchat/DPVt1RwN50Uic_Q9lFcg9A">https://t.me/joinchat/DPVt1RwN50Uic_Q9lFcg9A</a>
7665
</p>
7766
</div>
7867
</div>
7968
</div>
69+
8070

8171
</div>
8272

‎public/js/details.js‎

Lines changed: 46 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,41 @@ async function getPunkInfo(punkId) {
66
const punk = await new nft().loadPunkFromChain(punkId);
77
console.log(punk);
88

9-
let gender = document.getElementById('gender');
10-
gender.innerHTML = punk.sex;
11-
12-
let accHtml = '';
13-
for (let i=0; i<punk.attributes.length; i++) {
14-
accHtml += `<div class='col-md-4'><p>${punk.attributes[i]}</p></div>`;
15-
}
16-
document.getElementById('accessories').innerHTML = accHtml;
17-
18-
let ownershipHtml = '';
19-
if (punk.isOwned) {
20-
let isYou = false;
21-
for(let i=0; i<addrList.length; i++)
22-
{
23-
let addr = addrList[i].address;
24-
if (addr == punk.owner)
25-
isYou = true;
9+
if (!isNaN(punk.originalId)) {
10+
let gender = document.getElementById('gender');
11+
gender.innerHTML = punk.sex;
12+
13+
let accHtml = '';
14+
for (let i=0; i<punk.attributes.length; i++) {
15+
accHtml += `<div class='col-md-4'><p>${punk.attributes[i]}</p></div>`;
2616
}
27-
28-
if (isYou)
29-
ownershipHtml += `<h4>Owner - You own it! (address ${punk.owner})</h4>`;
30-
else
31-
ownershipHtml += `<h4>Owner - someone else: ${punk.owner}</h4>`;
32-
} else {
33-
ownershipHtml += `<h4>This punk is Free, claim ${(punk.sex == "Female") ? "her":"him"}!</h4>`;
34-
ownershipHtml += `<button onclick='claim();'>Claim</button>`;
17+
document.getElementById('accessories').innerHTML = accHtml;
18+
19+
let ownershipHtml = '';
20+
if (punk.isOwned) {
21+
let isYou = false;
22+
for(let i=0; i<addrList.length; i++)
23+
{
24+
let addr = addrList[i].address;
25+
if (addr == punk.owner)
26+
isYou = true;
27+
}
28+
29+
if (isYou)
30+
ownershipHtml += `<h4>Owner - You own it! (address ${punk.owner})</h4>`;
31+
else
32+
ownershipHtml += `<h4>Owner - someone else: ${punk.owner}</h4>`;
33+
} else {
34+
ownershipHtml += `<h4>This punk is Free, claim ${(punk.sex == "Female") ? "her":"him"}!</h4>`;
35+
ownershipHtml += `<button onclick='claim();' class='btn'>Claim</button>`;
36+
}
37+
38+
document.getElementById('ownership').innerHTML = ownershipHtml;
39+
}
40+
else {
41+
let title = document.getElementById("title");
42+
title.innerHTML = `Punk ${punkId} does not exist :(`;
3543
}
36-
37-
document.getElementById('ownership').innerHTML = ownershipHtml;
3844
}
3945

4046
function claim() {
@@ -47,13 +53,22 @@ async function claimtx() {
4753
document.getElementById('claimprogress').style.display = "block";
4854
let newOwner = document.getElementById("newowner").value;
4955

56+
let errMsg = "";
5057
try {
51-
await new nft().claimAsync(punkId, newOwner);
52-
window.location=`details.html?id=${punkId}`;
58+
let n = new nft();
59+
if (await n.getBalance(newOwner) == "0") throw "You need some Unique token balance in order to run a transaction. Please use a Faucet or contact us at our Telegram channel in order to get some";
60+
61+
await n.claimAsync(punkId, newOwner);
5362
}
5463
catch (err) {
55-
alert('There was an error:', err);
64+
errMsg = `<p style='color:red;'>Something went wrong: ${err}. You may want to try again.</p>`;
5665
}
66+
67+
await getPunkInfo(punkId);
68+
document.getElementById('error').innerHTML = errMsg;
69+
document.getElementById('ownership').style.display = "block";
70+
document.getElementById('claim').style.display = "none";
71+
document.getElementById('claimprogress').style.display = "none";
5772
}
5873

5974
function setPunkImage() {
@@ -62,7 +77,7 @@ function setPunkImage() {
6277
}
6378
function setTitle() {
6479
let title = document.getElementById("title");
65-
title.innerHTML = `CryptoPunk #${punkId}`;
80+
title.innerHTML = `SubstraPunk #${punkId}`;
6681
}
6782
function showExtensionWarning() {
6883
document.getElementById("punkDetails").style.display = "none";

‎public/js/home.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ window.onload = async function() {
1818
}
1919

2020
let html = `
21-
<div class="col-md-2 col-sm-3 col-xs-6" style='line-height: 1.2em; margin-top: 20px; min-height: 240px'>
21+
<div class="col-md-2 col-sm-3 col-xs-6" style='line-height: 1.2em; margin-top: 20px; min-height: 200px'>
2222
<div><a title="Punk #${id}" href="details.html?id=${id}" ><img src="images/punks/image${id}.png" width="144" height="144" alt="Punk ${id}" class="pixelated" style="background: #${backgroundColor}"></a></div>
2323
<div style='margin-top: 10px;'><a href="details.html?id=${id}">#${id}</a></div>
2424
</div>

‎public/js/polkadot.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -548,12 +548,18 @@ class nft {
548548
});
549549
} catch (e) {
550550
console.log("Error: ", e);
551-
reject();
551+
reject(e);
552552
}
553553

554554
});
555555

556556
}
557+
558+
async getBalance(addr) {
559+
const api = await this.getApi();
560+
const acc = await api.query.system.account(addr);
561+
return acc.data.free.toString();
562+
}
557563
}
558564

559565
window.nft = nft;

0 commit comments

Comments
 (0)