init
This commit is contained in:
Tommy Parnell
5
.gitignore
vendored
Normal file
5
.gitignore
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
node_modules
|
||||
dist
|
||||
.vscode
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
14
index.html
Normal file
14
index.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Monitorama Countdown!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="main"></div>
|
||||
<!-- Main -->
|
||||
<script src="/dist/bundle.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
30
package.json
Normal file
30
package.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "countdown",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"serve": "webpack-dev-server --output-public-path=dist --history-api-fallback",
|
||||
"build": "npm run lint && webpack --mode production",
|
||||
"compile": "npm run build",
|
||||
"lint": "tslint --project ./tsconfig.json src/**/*.ts src/**/*.tsx"
|
||||
},
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"@types/moment": "^2.13.0",
|
||||
"@types/react": "^16.0.41",
|
||||
"@types/react-dom": "^16.0.4",
|
||||
"awesome-typescript-loader": "^4.0.1",
|
||||
"css-loader": "^0.28.11",
|
||||
"moment": "^2.21.0",
|
||||
"react": "^16.2.0",
|
||||
"react-dom": "^16.2.0",
|
||||
"source-map-loader": "^0.2.3",
|
||||
"tslint": "^5.9.1",
|
||||
"typescript": "^2.7.2",
|
||||
"webpack": "^4.2.0",
|
||||
"webpack-cli": "^2.0.13"
|
||||
}
|
||||
}
|
||||
39
src/App.tsx
Normal file
39
src/App.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import * as moment from "moment";
|
||||
import React = require("react");
|
||||
|
||||
const monitorama = moment("20180604", "YYYYMMDD");
|
||||
export class App extends React.Component<any, {remaining: string}> {
|
||||
private runningInterval?: number;
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
this.state = {remaining: this.CalulateTime()};
|
||||
this.runningInterval = setInterval(() => {
|
||||
this.Update();
|
||||
}, 1000);
|
||||
}
|
||||
public componentWillUnmount() {
|
||||
if (this.runningInterval) {
|
||||
clearInterval(this.runningInterval);
|
||||
}
|
||||
}
|
||||
public Update() {
|
||||
this.setState({remaining: this.CalulateTime()});
|
||||
}
|
||||
public CalulateTime() {
|
||||
const now = moment();
|
||||
if (now > monitorama) {
|
||||
return "VICTORYYYYYYYYYYYYY";
|
||||
} else {
|
||||
const duration = moment.duration(monitorama.diff(now));
|
||||
return `${duration.days()} days ${duration.hours()} hours ${duration.minutes()} minutes ${duration.seconds()} seconds`;
|
||||
}
|
||||
}
|
||||
public render() {
|
||||
return(
|
||||
<div>
|
||||
<h4 style={{textAlign: "center", marginTop: "30vh", fontFamily: "Arial, sans-serif", fontWeight: "bold", fontSize: "80px"}}>{this.state.remaining}</h4>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
9
src/index.tsx
Normal file
9
src/index.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import * as React from "react";
|
||||
import * as ReactDOM from "react-dom";
|
||||
import {App} from "./App";
|
||||
|
||||
ReactDOM.render(
|
||||
<App />
|
||||
,
|
||||
document.getElementById("main"),
|
||||
);
|
||||
14
tsconfig.json
Normal file
14
tsconfig.json
Normal file
@@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/",
|
||||
"sourceMap": true,
|
||||
"noImplicitAny": true,
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"jsx": "react",
|
||||
"noResolve": false
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*"
|
||||
]
|
||||
}
|
||||
20
tslint.json
Normal file
20
tslint.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"defaultSeverity": "error",
|
||||
"extends": ["tslint:recommended"],
|
||||
"jsRules": {},
|
||||
"rules": {
|
||||
"no-console": false,
|
||||
"jsdoc-format": false,
|
||||
"no-reference": false,
|
||||
"no-reference-import": false,
|
||||
"interface-name": false,
|
||||
"newline-before-return": false,
|
||||
"max-line-length": [true, 400],
|
||||
"comment-format": false,
|
||||
"class-name": false,
|
||||
"object-literal-sort-keys": false,
|
||||
"indent": false,
|
||||
"eofline": false
|
||||
},
|
||||
"rulesDirectory": []
|
||||
}
|
||||
30
webpack.config.js
Normal file
30
webpack.config.js
Normal file
@@ -0,0 +1,30 @@
|
||||
var webpack = require('webpack');
|
||||
module.exports = {
|
||||
entry: "./src/index.tsx",
|
||||
output: {
|
||||
filename: "bundle.js",
|
||||
path: __dirname + "/dist",
|
||||
|
||||
},
|
||||
|
||||
// Enable sourcemaps for debugging webpack's output.
|
||||
devtool: "source-map",
|
||||
resolve: {
|
||||
// Add '.ts' and '.tsx' as resolvable extensions.
|
||||
extensions: [".ts", ".tsx", ".js", ".json"]
|
||||
},
|
||||
plugins: [],
|
||||
module: {
|
||||
rules: [
|
||||
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
|
||||
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
|
||||
|
||||
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
|
||||
{ enforce: "pre", test: /\.js$/, loader: "source-map-loader" },
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: ['style-loader', 'css-loader' ]
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user