Final version, barring the critique and the peer review.
This commit concludes most of the desired functionality: search, full-card, and a much better layout engine (mostly because someone else wrote it). Also included is a Dockerfile.
This commit is contained in:
parent
73e310ea14
commit
add49d071d
|
|
@ -0,0 +1,6 @@
|
|||
FROM node:current-alpine
|
||||
WORKDIR /code
|
||||
ADD . /code
|
||||
RUN yarn && yarn build
|
||||
CMD [ "yarn", "run", "http-server", "build/" ]
|
||||
EXPOSE 8080
|
||||
|
|
@ -0,0 +1,355 @@
|
|||
Mozilla Public License Version 2.0
|
||||
==================================
|
||||
|
||||
### 1. Definitions
|
||||
|
||||
**1.1. “Contributor”**
|
||||
means each individual or legal entity that creates, contributes to
|
||||
the creation of, or owns Covered Software.
|
||||
|
||||
**1.2. “Contributor Version”**
|
||||
means the combination of the Contributions of others (if any) used
|
||||
by a Contributor and that particular Contributor's Contribution.
|
||||
|
||||
**1.3. “Contribution”**
|
||||
means Covered Software of a particular Contributor.
|
||||
|
||||
**1.4. “Covered Software”**
|
||||
means Source Code Form to which the initial Contributor has attached
|
||||
the notice in Exhibit A, the Executable Form of such Source Code
|
||||
Form, and Modifications of such Source Code Form, in each case
|
||||
including portions thereof.
|
||||
|
||||
**1.5. “Incompatible With Secondary Licenses”**
|
||||
means
|
||||
|
||||
* **(a)** that the initial Contributor has attached the notice described
|
||||
in Exhibit B to the Covered Software; or
|
||||
* **(b)** that the Covered Software was made available under the terms of
|
||||
version 1.1 or earlier of the License, but not also under the
|
||||
terms of a Secondary License.
|
||||
|
||||
**1.6. “Executable Form”**
|
||||
means any form of the work other than Source Code Form.
|
||||
|
||||
**1.7. “Larger Work”**
|
||||
means a work that combines Covered Software with other material, in
|
||||
a separate file or files, that is not Covered Software.
|
||||
|
||||
**1.8. “License”**
|
||||
means this document.
|
||||
|
||||
**1.9. “Licensable”**
|
||||
means having the right to grant, to the maximum extent possible,
|
||||
whether at the time of the initial grant or subsequently, any and
|
||||
all of the rights conveyed by this License.
|
||||
|
||||
**1.10. “Modifications”**
|
||||
means any of the following:
|
||||
|
||||
* **(a)** any file in Source Code Form that results from an addition to,
|
||||
deletion from, or modification of the contents of Covered
|
||||
Software; or
|
||||
* **(b)** any new file in Source Code Form that contains any Covered
|
||||
Software.
|
||||
|
||||
**1.11. “Patent Claims” of a Contributor**
|
||||
means any patent claim(s), including without limitation, method,
|
||||
process, and apparatus claims, in any patent Licensable by such
|
||||
Contributor that would be infringed, but for the grant of the
|
||||
License, by the making, using, selling, offering for sale, having
|
||||
made, import, or transfer of either its Contributions or its
|
||||
Contributor Version.
|
||||
|
||||
**1.12. “Secondary License”**
|
||||
means either the GNU General Public License, Version 2.0, the GNU
|
||||
Lesser General Public License, Version 2.1, the GNU Affero General
|
||||
Public License, Version 3.0, or any later versions of those
|
||||
licenses.
|
||||
|
||||
**1.13. “Source Code Form”**
|
||||
means the form of the work preferred for making modifications.
|
||||
|
||||
**1.14. “You” (or “Your”)**
|
||||
means an individual or a legal entity exercising rights under this
|
||||
License. For legal entities, “You” includes any entity that
|
||||
controls, is controlled by, or is under common control with You. For
|
||||
purposes of this definition, “control” means **(a)** the power, direct
|
||||
or indirect, to cause the direction or management of such entity,
|
||||
whether by contract or otherwise, or **(b)** ownership of more than
|
||||
fifty percent (50%) of the outstanding shares or beneficial
|
||||
ownership of such entity.
|
||||
|
||||
|
||||
### 2. License Grants and Conditions
|
||||
|
||||
#### 2.1. Grants
|
||||
|
||||
Each Contributor hereby grants You a world-wide, royalty-free,
|
||||
non-exclusive license:
|
||||
|
||||
* **(a)** under intellectual property rights (other than patent or trademark)
|
||||
Licensable by such Contributor to use, reproduce, make available,
|
||||
modify, display, perform, distribute, and otherwise exploit its
|
||||
Contributions, either on an unmodified basis, with Modifications, or
|
||||
as part of a Larger Work; and
|
||||
* **(b)** under Patent Claims of such Contributor to make, use, sell, offer
|
||||
for sale, have made, import, and otherwise transfer either its
|
||||
Contributions or its Contributor Version.
|
||||
|
||||
#### 2.2. Effective Date
|
||||
|
||||
The licenses granted in Section 2.1 with respect to any Contribution
|
||||
become effective for each Contribution on the date the Contributor first
|
||||
distributes such Contribution.
|
||||
|
||||
#### 2.3. Limitations on Grant Scope
|
||||
|
||||
The licenses granted in this Section 2 are the only rights granted under
|
||||
this License. No additional rights or licenses will be implied from the
|
||||
distribution or licensing of Covered Software under this License.
|
||||
Notwithstanding Section 2.1(b) above, no patent license is granted by a
|
||||
Contributor:
|
||||
|
||||
* **(a)** for any code that a Contributor has removed from Covered Software;
|
||||
or
|
||||
* **(b)** for infringements caused by: **(i)** Your and any other third party's
|
||||
modifications of Covered Software, or **(ii)** the combination of its
|
||||
Contributions with other software (except as part of its Contributor
|
||||
Version); or
|
||||
* **(c)** under Patent Claims infringed by Covered Software in the absence of
|
||||
its Contributions.
|
||||
|
||||
This License does not grant any rights in the trademarks, service marks,
|
||||
or logos of any Contributor (except as may be necessary to comply with
|
||||
the notice requirements in Section 3.4).
|
||||
|
||||
#### 2.4. Subsequent Licenses
|
||||
|
||||
No Contributor makes additional grants as a result of Your choice to
|
||||
distribute the Covered Software under a subsequent version of this
|
||||
License (see Section 10.2) or under the terms of a Secondary License (if
|
||||
permitted under the terms of Section 3.3).
|
||||
|
||||
#### 2.5. Representation
|
||||
|
||||
Each Contributor represents that the Contributor believes its
|
||||
Contributions are its original creation(s) or it has sufficient rights
|
||||
to grant the rights to its Contributions conveyed by this License.
|
||||
|
||||
#### 2.6. Fair Use
|
||||
|
||||
This License is not intended to limit any rights You have under
|
||||
applicable copyright doctrines of fair use, fair dealing, or other
|
||||
equivalents.
|
||||
|
||||
#### 2.7. Conditions
|
||||
|
||||
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
|
||||
in Section 2.1.
|
||||
|
||||
|
||||
### 3. Responsibilities
|
||||
|
||||
#### 3.1. Distribution of Source Form
|
||||
|
||||
All distribution of Covered Software in Source Code Form, including any
|
||||
Modifications that You create or to which You contribute, must be under
|
||||
the terms of this License. You must inform recipients that the Source
|
||||
Code Form of the Covered Software is governed by the terms of this
|
||||
License, and how they can obtain a copy of this License. You may not
|
||||
attempt to alter or restrict the recipients' rights in the Source Code
|
||||
Form.
|
||||
|
||||
#### 3.2. Distribution of Executable Form
|
||||
|
||||
If You distribute Covered Software in Executable Form then:
|
||||
|
||||
* **(a)** such Covered Software must also be made available in Source Code
|
||||
Form, as described in Section 3.1, and You must inform recipients of
|
||||
the Executable Form how they can obtain a copy of such Source Code
|
||||
Form by reasonable means in a timely manner, at a charge no more
|
||||
than the cost of distribution to the recipient; and
|
||||
|
||||
* **(b)** You may distribute such Executable Form under the terms of this
|
||||
License, or sublicense it under different terms, provided that the
|
||||
license for the Executable Form does not attempt to limit or alter
|
||||
the recipients' rights in the Source Code Form under this License.
|
||||
|
||||
#### 3.3. Distribution of a Larger Work
|
||||
|
||||
You may create and distribute a Larger Work under terms of Your choice,
|
||||
provided that You also comply with the requirements of this License for
|
||||
the Covered Software. If the Larger Work is a combination of Covered
|
||||
Software with a work governed by one or more Secondary Licenses, and the
|
||||
Covered Software is not Incompatible With Secondary Licenses, this
|
||||
License permits You to additionally distribute such Covered Software
|
||||
under the terms of such Secondary License(s), so that the recipient of
|
||||
the Larger Work may, at their option, further distribute the Covered
|
||||
Software under the terms of either this License or such Secondary
|
||||
License(s).
|
||||
|
||||
#### 3.4. Notices
|
||||
|
||||
You may not remove or alter the substance of any license notices
|
||||
(including copyright notices, patent notices, disclaimers of warranty,
|
||||
or limitations of liability) contained within the Source Code Form of
|
||||
the Covered Software, except that You may alter any license notices to
|
||||
the extent required to remedy known factual inaccuracies.
|
||||
|
||||
#### 3.5. Application of Additional Terms
|
||||
|
||||
You may choose to offer, and to charge a fee for, warranty, support,
|
||||
indemnity or liability obligations to one or more recipients of Covered
|
||||
Software. However, You may do so only on Your own behalf, and not on
|
||||
behalf of any Contributor. You must make it absolutely clear that any
|
||||
such warranty, support, indemnity, or liability obligation is offered by
|
||||
You alone, and You hereby agree to indemnify every Contributor for any
|
||||
liability incurred by such Contributor as a result of warranty, support,
|
||||
indemnity or liability terms You offer. You may include additional
|
||||
disclaimers of warranty and limitations of liability specific to any
|
||||
jurisdiction.
|
||||
|
||||
|
||||
### 4. Inability to Comply Due to Statute or Regulation
|
||||
|
||||
If it is impossible for You to comply with any of the terms of this
|
||||
License with respect to some or all of the Covered Software due to
|
||||
statute, judicial order, or regulation then You must: **(a)** comply with
|
||||
the terms of this License to the maximum extent possible; and **(b)**
|
||||
describe the limitations and the code they affect. Such description must
|
||||
be placed in a text file included with all distributions of the Covered
|
||||
Software under this License. Except to the extent prohibited by statute
|
||||
or regulation, such description must be sufficiently detailed for a
|
||||
recipient of ordinary skill to be able to understand it.
|
||||
|
||||
|
||||
### 5. Termination
|
||||
|
||||
**5.1.** The rights granted under this License will terminate automatically
|
||||
if You fail to comply with any of its terms. However, if You become
|
||||
compliant, then the rights granted under this License from a particular
|
||||
Contributor are reinstated **(a)** provisionally, unless and until such
|
||||
Contributor explicitly and finally terminates Your grants, and **(b)** on an
|
||||
ongoing basis, if such Contributor fails to notify You of the
|
||||
non-compliance by some reasonable means prior to 60 days after You have
|
||||
come back into compliance. Moreover, Your grants from a particular
|
||||
Contributor are reinstated on an ongoing basis if such Contributor
|
||||
notifies You of the non-compliance by some reasonable means, this is the
|
||||
first time You have received notice of non-compliance with this License
|
||||
from such Contributor, and You become compliant prior to 30 days after
|
||||
Your receipt of the notice.
|
||||
|
||||
**5.2.** If You initiate litigation against any entity by asserting a patent
|
||||
infringement claim (excluding declaratory judgment actions,
|
||||
counter-claims, and cross-claims) alleging that a Contributor Version
|
||||
directly or indirectly infringes any patent, then the rights granted to
|
||||
You by any and all Contributors for the Covered Software under Section
|
||||
2.1 of this License shall terminate.
|
||||
|
||||
**5.3.** In the event of termination under Sections 5.1 or 5.2 above, all
|
||||
end user license agreements (excluding distributors and resellers) which
|
||||
have been validly granted by You or Your distributors under this License
|
||||
prior to termination shall survive termination.
|
||||
|
||||
|
||||
### 6. Disclaimer of Warranty
|
||||
|
||||
> Covered Software is provided under this License on an “as is”
|
||||
> basis, without warranty of any kind, either expressed, implied, or
|
||||
> statutory, including, without limitation, warranties that the
|
||||
> Covered Software is free of defects, merchantable, fit for a
|
||||
> particular purpose or non-infringing. The entire risk as to the
|
||||
> quality and performance of the Covered Software is with You.
|
||||
> Should any Covered Software prove defective in any respect, You
|
||||
> (not any Contributor) assume the cost of any necessary servicing,
|
||||
> repair, or correction. This disclaimer of warranty constitutes an
|
||||
> essential part of this License. No use of any Covered Software is
|
||||
> authorized under this License except under this disclaimer.
|
||||
|
||||
### 7. Limitation of Liability
|
||||
|
||||
> Under no circumstances and under no legal theory, whether tort
|
||||
> (including negligence), contract, or otherwise, shall any
|
||||
> Contributor, or anyone who distributes Covered Software as
|
||||
> permitted above, be liable to You for any direct, indirect,
|
||||
> special, incidental, or consequential damages of any character
|
||||
> including, without limitation, damages for lost profits, loss of
|
||||
> goodwill, work stoppage, computer failure or malfunction, or any
|
||||
> and all other commercial damages or losses, even if such party
|
||||
> shall have been informed of the possibility of such damages. This
|
||||
> limitation of liability shall not apply to liability for death or
|
||||
> personal injury resulting from such party's negligence to the
|
||||
> extent applicable law prohibits such limitation. Some
|
||||
> jurisdictions do not allow the exclusion or limitation of
|
||||
> incidental or consequential damages, so this exclusion and
|
||||
> limitation may not apply to You.
|
||||
|
||||
|
||||
### 8. Litigation
|
||||
|
||||
Any litigation relating to this License may be brought only in the
|
||||
courts of a jurisdiction where the defendant maintains its principal
|
||||
place of business and such litigation shall be governed by laws of that
|
||||
jurisdiction, without reference to its conflict-of-law provisions.
|
||||
Nothing in this Section shall prevent a party's ability to bring
|
||||
cross-claims or counter-claims.
|
||||
|
||||
|
||||
### 9. Miscellaneous
|
||||
|
||||
This License represents the complete agreement concerning the subject
|
||||
matter hereof. If any provision of this License is held to be
|
||||
unenforceable, such provision shall be reformed only to the extent
|
||||
necessary to make it enforceable. Any law or regulation which provides
|
||||
that the language of a contract shall be construed against the drafter
|
||||
shall not be used to construe this License against a Contributor.
|
||||
|
||||
|
||||
### 10. Versions of the License
|
||||
|
||||
#### 10.1. New Versions
|
||||
|
||||
Mozilla Foundation is the license steward. Except as provided in Section
|
||||
10.3, no one other than the license steward has the right to modify or
|
||||
publish new versions of this License. Each version will be given a
|
||||
distinguishing version number.
|
||||
|
||||
#### 10.2. Effect of New Versions
|
||||
|
||||
You may distribute the Covered Software under the terms of the version
|
||||
of the License under which You originally received the Covered Software,
|
||||
or under the terms of any subsequent version published by the license
|
||||
steward.
|
||||
|
||||
#### 10.3. Modified Versions
|
||||
|
||||
If you create software not governed by this License, and you want to
|
||||
create a new license for such software, you may create and use a
|
||||
modified version of this License if you rename the license and remove
|
||||
any references to the name of the license steward (except to note that
|
||||
such modified license differs from this License).
|
||||
|
||||
#### 10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses
|
||||
|
||||
If You choose to distribute Source Code Form that is Incompatible With
|
||||
Secondary Licenses under the terms of this version of the License, the
|
||||
notice described in Exhibit B of this License must be attached.
|
||||
|
||||
## Exhibit A - Source Code Form License Notice
|
||||
|
||||
This Source Code Form is subject to the terms of the Mozilla Public
|
||||
License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
If it is not possible or desirable to put the notice in a particular
|
||||
file, then You may include the notice in a location (such as a LICENSE
|
||||
file in a relevant directory) where a recipient would be likely to look
|
||||
for such a notice.
|
||||
|
||||
You may add additional accurate notices of copyright ownership.
|
||||
|
||||
## Exhibit B - “Incompatible With Secondary Licenses” Notice
|
||||
|
||||
This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
defined by the Mozilla Public License, v. 2.0.
|
||||
7
Makefile
7
Makefile
|
|
@ -21,9 +21,14 @@ install: ./node_modules/.yarn-integrity ## Install any yarn packages necessary
|
|||
build: ./build/asset-manifest.json ## Build the package if it is out of date
|
||||
|
||||
.PHONY: serve
|
||||
serve: build/asset-manifest.json ## Do everything necessary to get up and running
|
||||
serve: build/asset-manifest.json ## Do everything necessary to run an optimized build
|
||||
yarn run http-server build/
|
||||
|
||||
.PHONY: dev
|
||||
dev: ./node_modules/.yarn-integrity ## Run the server in "dev" mode, with hot reload
|
||||
yarn start
|
||||
|
||||
.PHONY: dockerize
|
||||
dockerize: ## Generate a docker image with an optimized build and a simple fileserver
|
||||
docker build --tag elderscrolling:1.0 .
|
||||
|
||||
|
|
|
|||
146
README.md
146
README.md
|
|
@ -1,4 +1,6 @@
|
|||
# Elder Scroll Display
|
||||
# Elder Scroll: Legends Coding Challenge
|
||||
|
||||
Don't you love homework?
|
||||
|
||||
## Synopsis
|
||||
|
||||
|
|
@ -17,10 +19,10 @@ set out in the Code Challenge are:
|
|||
- ✓ As the user scrolls down the page, load and append additional cards using "infinite scroll."
|
||||
- ✓ Retrieve additional pages of results as-needed but do not load more than 20 cards with
|
||||
each request.
|
||||
- Allow the user to search for cards by Name.
|
||||
- ✓ Allow the user to search for cards by Name.
|
||||
- ✓ Use modern open-source web technologies to implement your solution (React, Backbone,
|
||||
Angular, Vue, Underscore, etc.).
|
||||
- Provide instructions for prerequisites, installation, and application setup and build in a
|
||||
- ✓ Provide instructions for prerequisites, installation, and application setup and build in a
|
||||
README file.
|
||||
|
||||
### Evaluation Criteria
|
||||
|
|
@ -40,10 +42,12 @@ set out in the Code Challenge are:
|
|||
- Documentation: https://docs.elderscrollslegends.io/,
|
||||
https://docs.elderscrollslegends.io/#api_v1cards_list
|
||||
|
||||
NOTE: The Elder Scrolls Legends API is a free, third-party service built
|
||||
by an independent developer; it is not affiliated with Highspot, or with
|
||||
the intellectual property owners of Elder Scrolls Legends. Please help
|
||||
us use it responsibly.
|
||||
The API includes this note:
|
||||
|
||||
> NOTE: The Elder Scrolls Legends API is a free, third-party service
|
||||
> built by an independent developer; it is not affiliated with Highspot,
|
||||
> or with the intellectual property owners of Elder Scrolls
|
||||
> Legends. Please help us use it responsibly.
|
||||
|
||||
## Initial impressions
|
||||
|
||||
|
|
@ -69,35 +73,113 @@ theme: white on black, with a paper texture from my design library
|
|||
desaturated, darkened, and rendered a seamless tile, using the Google
|
||||
'Marcellus' font, which kinda sorta looks Tolkeinesque.
|
||||
|
||||
## Progress
|
||||
## Requirements
|
||||
|
||||
It looks pretty.
|
||||
The following are all you need to have installed in order to get
|
||||
started:
|
||||
|
||||
|
||||
- NodeJS >= 10.0
|
||||
- Yarn >= 1.18
|
||||
- Git >= 2.0
|
||||
|
||||
Criticism: "Cards" is doing too much, and not enough. It would make
|
||||
more sense to have a moving window, showing no more than what it would
|
||||
take to show the user what is expected at that moment, with the ability
|
||||
to load high and low, keeping only what the user is _looking at_ in the
|
||||
DOM tree.
|
||||
Fetch the latest version from the git repository (this repository uses
|
||||
the new "not master" terminology, so it may not be immediately visible
|
||||
until you checkout the 'canon' branch), then install any prerequisites.
|
||||
|
||||
Proposal: Cards needs a CardCollection proxy object, which the Cards view
|
||||
object (personal convention: TSX files are named for what they show,
|
||||
semantically; TS files may be suffixed with "Model" or "Collection",
|
||||
a'la Backbone, to seperate them from the views, if needed; "Model"
|
||||
objects are very rarely needed) taps it as the user moves up and down;
|
||||
the IntersectionObserver tool would be pretty good for this; and if the
|
||||
proxy actually _cached_ the fields it had already seen, it wouldn't be
|
||||
slow at all.
|
||||
Assuming you have GNU Make installed:
|
||||
|
||||
The proxy object could also support the search feature by keeping two
|
||||
collections: one of the "whole" set, and one of the "last search" set;
|
||||
the proxy could swap between them as needed.
|
||||
``` shellsession
|
||||
$ git clone https://git.elfsternberg.com/elf/elder_scrolling
|
||||
$ cd elder_scrolling
|
||||
$ git checkout canon
|
||||
$ make serve
|
||||
```
|
||||
|
||||
If you do NOT have GNU Make installed:
|
||||
|
||||
``` shellsession
|
||||
$ git clone https://git.elfsternberg.com/elf/elder_scrolling
|
||||
$ cd elder_scrolling
|
||||
$ git checkout canon
|
||||
$ yarn
|
||||
$ yarn build
|
||||
$ yarn run http-server build/
|
||||
```
|
||||
|
||||
In both of the above, the server will be available on port 8080.
|
||||
|
||||
To run in dev mode:
|
||||
|
||||
``` shellsession
|
||||
$ git clone https://git.elfsternberg.com/elf/elder_scrolling
|
||||
$ cd elder_scrolling
|
||||
$ git checkout canon
|
||||
$ yarn
|
||||
$ yarn server
|
||||
```
|
||||
|
||||
The server will be available on port 3000.
|
||||
|
||||
If you have docker installed, you may run the app this way:
|
||||
|
||||
``` shellsession
|
||||
$ git clone https://git.elfsternberg.com/elf/elder_scrolling
|
||||
$ cd elder_scrolling
|
||||
$ git checkout canon
|
||||
$ docker build --tag elderscrolling:1.0 .
|
||||
$ docker run --publish 8080:8080 --name elderscrolling --detach elderscrolling:1.0
|
||||
```
|
||||
|
||||
The server will be available on port 8080. To stop the docker session,
|
||||
remove it from the server, and clean up your disk space afterward:
|
||||
|
||||
``` shellsession
|
||||
$ docker kill elderscrolling
|
||||
$ docker rm elderscrolling
|
||||
$ docker rmi elderscrolling:1.0
|
||||
```
|
||||
|
||||
Note that this will not remove the node-alpine image on top of which
|
||||
elderscrolling is build.
|
||||
|
||||
## Observations
|
||||
|
||||
This was a lot of fun. I don't know how "cheating" it was to use the
|
||||
react-grid-layout library, or react-modal, but I'm always glad to let
|
||||
the professionals do the work. Working "around" the way hooks really,
|
||||
really want to avoid expensive paints, in order to get the search
|
||||
feature working, was a lesson I know I've had before, but it always
|
||||
frustrates me when I come across it.
|
||||
|
||||
There are lot of other things that could be done with the app, but this
|
||||
is "good enough" for now without throwing something like Semantic or
|
||||
Material at it. It's possible to search on fields other than `name`,
|
||||
for example, and it would be nifty to be able to, say, see all the
|
||||
Unique cards, or all the Creature cards, and so forth. That wasn't in
|
||||
the requirements, and I've given you folks 8 hours already.
|
||||
|
||||
That may seem like a lot for such a minor project, but it's been awhile
|
||||
since I last worked with React at this level, and it's also been awhile
|
||||
since I got Emacs up and running with a proper JSX back-end. The LSP
|
||||
server is pretty good, but there are still some rough edges. Using
|
||||
`prettier` a lot, and setting the code into `strict` as much as
|
||||
possible, was as helpful as always.
|
||||
|
||||
I think I'm going to take apart the scrolling library I used. It's a
|
||||
native JS application with a React wrapper, rather than a full-on React
|
||||
app "written in React," and I feel that there are lessons inside it I
|
||||
could use.
|
||||
|
||||
## LICENSE
|
||||
|
||||
The Elder Scrolls, The Elder Scrolls: Legends, ZeniMax, Bethesda,
|
||||
Bethesda Softworks and related logos are registered trademarks or
|
||||
trademarks of ZeniMax Media Inc. This product is not produced, endorsed,
|
||||
supported, or affiliated with ZeniMax Media Inc.
|
||||
|
||||
The original software contained in this repository is copyright [Kenneth
|
||||
M. "Elf" Sternberg](https://elfsternberg.com) (c) 2020 as is licensed
|
||||
with the Mozilla Public License vers. 2.0. A copy of the license file is
|
||||
included in the root folder.
|
||||
|
||||
Enhancement: Well, it could use a "zoom" feature with a nice overlay.
|
||||
It might even be lovely to have a second page with all the things I
|
||||
haven't shown, like attributes, subtype, rarity (not, not the pony),
|
||||
or keywords.
|
||||
|
||||
Enhancement: It is possible to search based on set, attributes, and so
|
||||
forth, so a sidebar with those as filters would also be kinda cool.
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
27
src/App.scss
27
src/App.scss
|
|
@ -15,15 +15,20 @@ body {
|
|||
|
||||
}
|
||||
|
||||
.fullcard tr td {
|
||||
.fullcard tr > td {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.fullcard tr td:nth-child(3) {
|
||||
padding-left: 8rem;
|
||||
.fullcard .content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> div {
|
||||
width: 32%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
body * {
|
||||
font-family: "Marcellus";
|
||||
}
|
||||
|
|
@ -41,6 +46,7 @@ header {
|
|||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
width: 100%;
|
||||
min-height: 64px;
|
||||
|
||||
|
|
@ -54,6 +60,7 @@ header {
|
|||
margin-left: 15px;
|
||||
|
||||
h1 {
|
||||
font-family: "Metamorphous";
|
||||
text-shadow: 0 0 2px rgba(252, 252, 252, 0.8);
|
||||
font-weight: 400;
|
||||
font-size: 4.6rem;
|
||||
|
|
@ -97,6 +104,18 @@ header {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.searchform {
|
||||
label, input {
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
margin-right: 1.0rem;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#page-bottom {
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
|
|
|||
26
src/App.tsx
26
src/App.tsx
|
|
@ -1,22 +1,40 @@
|
|||
import React from "react";
|
||||
import * as React from "react";
|
||||
import "./App.scss";
|
||||
import { Cards } from "./cards/Cards";
|
||||
import { SearchBox } from "./cards/Search";
|
||||
|
||||
const { useState } = React;
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
const firstUrl = "https://api.elderscrollslegends.io/v1/cards";
|
||||
|
||||
const buildUrl = (searchTerm: string) => {
|
||||
const querySize = `pageSize=${PAGE_SIZE}`;
|
||||
if (searchTerm === "") {
|
||||
return firstUrl + "?" + querySize;
|
||||
}
|
||||
|
||||
const codedSearchTerm = searchTerm.trim().replace(/\s+/g, "%20");
|
||||
return firstUrl + `?name=${codedSearchTerm}&${querySize}`;
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
return (
|
||||
<div className="elder-scrolling">
|
||||
<div className="container">
|
||||
<header>
|
||||
<div className="left">
|
||||
<h1>The Elder Scrolls</h1>
|
||||
<h1>Elder Scroll Legends</h1>
|
||||
</div>
|
||||
<div className="right">
|
||||
<h2>Search goes here</h2>
|
||||
<SearchBox initialValue={searchTerm} onSearch={setSearchTerm} />
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
<section>
|
||||
<Cards />
|
||||
<Cards rootUrl={buildUrl(searchTerm)} />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
import * as React from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { Loading } from "./Loading";
|
||||
import { Card } from "./Card";
|
||||
import { JustifiedLayout, GridLayout } from "@egjs/react-infinitegrid";
|
||||
import { GridLayout } from "@egjs/react-infinitegrid";
|
||||
import ReactModal from "react-modal";
|
||||
import { FullCard, fullcardStyles } from "./FullCard";
|
||||
import {
|
||||
|
|
@ -12,41 +11,49 @@ import {
|
|||
CardStateHandler
|
||||
} from "./types";
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
const { useState, useCallback, useEffect } = React;
|
||||
|
||||
const firstUrl = `https://api.elderscrollslegends.io/v1/cards?pageSize=${PAGE_SIZE}&page=1`;
|
||||
export const Cards = ({ rootUrl }: { rootUrl: string }) => {
|
||||
const emptyCards: CardState = {
|
||||
cards: [],
|
||||
first: rootUrl,
|
||||
next: rootUrl,
|
||||
maxCards: -1
|
||||
};
|
||||
|
||||
const emptyCards: CardState = {
|
||||
cards: [],
|
||||
next: firstUrl,
|
||||
maxCards: -1
|
||||
};
|
||||
|
||||
export const Cards = () => {
|
||||
const [cards, setCards]: CardStateHandler = useState(emptyCards);
|
||||
const [loading, setLoading]: [boolean, Function] = useState(false);
|
||||
const [currentCard, setCurrentCard]: [CardProps | null, Function] = useState(
|
||||
null
|
||||
);
|
||||
|
||||
const loadItems = () => {
|
||||
// Good GRIEF, the things we have to do convince React to actually
|
||||
// draw sometimes.
|
||||
useEffect(() => {
|
||||
if (cards.first !== rootUrl) {
|
||||
setCards(emptyCards);
|
||||
}
|
||||
}, [cards.first, rootUrl, emptyCards]);
|
||||
|
||||
// Debounce that annoying loopback.
|
||||
const loadItems = useCallback(() => {
|
||||
if (cards.next === null || cards.cards.length === cards.maxCards) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
const request = new Request(cards.next);
|
||||
fetch(request)
|
||||
.then(response => response.json())
|
||||
.then((data: CardRequestProps) => {
|
||||
setCards({
|
||||
...cards,
|
||||
cards: [...cards.cards, ...data.cards],
|
||||
next: data._links && data._links.next ? data._links.next : null,
|
||||
maxcards: data._totalCount
|
||||
});
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
}, [cards]);
|
||||
|
||||
const loadMoreCards = (options: any) => {
|
||||
if (options.startLoading !== null) {
|
||||
|
|
|
|||
|
|
@ -15,97 +15,103 @@ export const FullCard = ({ card }: { card: CardProps | null }) => {
|
|||
|
||||
return (
|
||||
<div className="fullcard">
|
||||
<img src={card.imageUrl} alt={card.name} />
|
||||
<div className="content">
|
||||
<h4>{card.name}</h4>
|
||||
<p className="card-text">{card.text}</p>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Type</strong>
|
||||
</td>
|
||||
<td>{card.type}</td>
|
||||
<td>
|
||||
<strong>Cost</strong>
|
||||
</td>
|
||||
<td>{card.cost}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Subtypes</strong>
|
||||
</td>
|
||||
<td>{card.subtypes.join(", ")}</td>
|
||||
<td>
|
||||
<strong>Power</strong>
|
||||
</td>
|
||||
<td>{card.power}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Rarity</strong>
|
||||
</td>
|
||||
<td>{card.rarity}</td>
|
||||
<td>
|
||||
<strong>Health</strong>
|
||||
</td>
|
||||
<td>{card.health}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Set</strong>
|
||||
</td>
|
||||
<td>{card.set.name}</td>
|
||||
<td>
|
||||
<strong>Soul Summon</strong>
|
||||
</td>
|
||||
<td>{card.soulSummon}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Attributes</strong>
|
||||
</td>
|
||||
<td>{card.attributes.join(", ")}</td>
|
||||
<td>
|
||||
<strong>Soul Trap</strong>
|
||||
</td>
|
||||
<td>{card.soulTrap}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Keywords</strong>
|
||||
</td>
|
||||
<td>{card.keywords}</td>
|
||||
<td />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Set Name:</strong>
|
||||
</td>
|
||||
<td>{card.set.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Type:</strong>
|
||||
</td>
|
||||
<td>{card.type}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{card.collectible ? <p>This card is considered collectible.</p> : ""}
|
||||
{card.unique ? (
|
||||
<p>
|
||||
This card is unique. Unique cards may only be used once per deck.
|
||||
</p>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
<div>
|
||||
<img src={card.imageUrl} alt={card.name} />
|
||||
<h4>{card.name}</h4>
|
||||
<p className="card-text">{card.text}</p>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Type</strong>
|
||||
</td>
|
||||
<td>{card.type}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Subtypes</strong>
|
||||
</td>
|
||||
<td>{card.subtypes ? card.subtypes.join(", ") : ""}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Set Name:</strong>
|
||||
</td>
|
||||
<td>{card.set.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Rarity</strong>
|
||||
</td>
|
||||
<td>{card.rarity}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Set</strong>
|
||||
</td>
|
||||
<td>{card.set.name}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Attributes</strong>
|
||||
</td>
|
||||
<td>{card.attributes.join(", ")}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Keywords</strong>
|
||||
</td>
|
||||
<td>{card.keywords}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Cost</strong>
|
||||
</td>
|
||||
<td>{card.cost}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Power</strong>
|
||||
</td>
|
||||
<td>{card.power}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Health</strong>
|
||||
</td>
|
||||
<td>{card.health}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Soul Summon</strong>
|
||||
</td>
|
||||
<td>{card.soulSummon}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Soul Trap</strong>
|
||||
</td>
|
||||
<td>{card.soulTrap}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{card.collectible ? <p>This card is considered collectible.</p> : ""}
|
||||
{card.unique ? (
|
||||
<p>This card is unique. Unique cards may only be used once per deck.</p>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
import * as React from "react";
|
||||
|
||||
const { useState } = React;
|
||||
|
||||
interface SearchBoxProps {
|
||||
initialValue: string;
|
||||
onSearch: Function;
|
||||
}
|
||||
|
||||
type ChangeEvent = React.ChangeEvent<HTMLInputElement>;
|
||||
type ClickEvent = React.MouseEvent<HTMLInputElement>;
|
||||
|
||||
export const SearchBox = ({
|
||||
initialValue,
|
||||
onSearch
|
||||
}: SearchBoxProps): JSX.Element => {
|
||||
const [value, setValue] = useState(initialValue || "");
|
||||
|
||||
const onChange = (event: ChangeEvent) => {
|
||||
setValue(event.target.value);
|
||||
};
|
||||
|
||||
const onClick = (_event: ClickEvent) => {
|
||||
onSearch(value);
|
||||
};
|
||||
|
||||
const onClear = (_event: ClickEvent) => {
|
||||
setValue("");
|
||||
onSearch("");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="searchform">
|
||||
<label htmlFor="search">Search: </label>
|
||||
<input type="text" name="search" value={value} onChange={onChange} />
|
||||
<input type="button" name="send" value="Search" onClick={onClick} />
|
||||
<input type="button" name="clear" value="clear" onClick={onClear} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -38,6 +38,7 @@ export interface CardRequestProps {
|
|||
|
||||
export interface CardState {
|
||||
cards: CardProps[];
|
||||
first: string | null;
|
||||
next: string | null;
|
||||
maxCards: number;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,3 +9,13 @@ $unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U
|
|||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'Metamorphous';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url("/fonts/Metamorphous-Regular.woff2") format("woff"),
|
||||
url("/fonts/Metamorphous-Regular.ttf") format("truetype");
|
||||
unicode-range: $unicode-range;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue