Commit 6b75fb80 authored by Kai Brandes's avatar Kai Brandes

nicer styles for solutions

parent 797f31d5
This diff is collapsed.
......@@ -14,12 +14,15 @@
],
"author": "Kai Brandes <kai.brandes@codecentric.de>",
"dependencies": {
"@blueprintjs/core": "^3.8.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"materialize-css": "^1.0.0-rc.2",
"node-sass": "^4.10.0",
"normalize.css": "^8.0.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-hot-loader": "^4.3.11",
"sass-loader": "^7.1.0",
"wasm-loader": "^1.3.0"
},
"scripts": {
......@@ -33,14 +36,15 @@
"not op_mini all"
],
"devDependencies": {
"copy-webpack-plugin": "^4.5.2",
"@babel/cli": "^7.1.0",
"@babel/core": "^7.1.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"style-loader": "^0.23.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
......
import React from "react";
import * as wasm from "adventofcode_2017";
import {Intent, Tab, Tabs, TextArea} from "@blueprintjs/core";
export class SolutionComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
a: null,
b: null
b: null,
activeTab: 'a'
};
this.resultA = this.resultA.bind(this);
this.resultB = this.resultB.bind(this);
this.setActiveTabState = this.setActiveTabState.bind(this);
}
resultA(event) {
this.setState({a: wasm['calc_day_'+this.props.day+'_a'](event.target.value)});
this.setState({a: wasm['calc_day_' + this.props.day + '_a'](event.target.value)});
}
resultB(event) {
this.setState({b: wasm['calc_day_'+this.props.day+'_b'](event.target.value)});
this.setState({b: wasm['calc_day_' + this.props.day + '_b'](event.target.value)});
}
renderInput(resultTriggerFn, defaultVal) {
if (this.props.cols && this.props.rows) {
return <textarea cols={this.props.cols} rows={this.props.rows} onInput={resultTriggerFn} defaultValue={defaultVal}/>;
return <TextArea
className={"bp3-fill bp3-large"}
large={true}
intent={Intent.PRIMARY}
onChange={resultTriggerFn}
defaultValue={defaultVal}
rows={this.props.rows}
/>;
}
return <input type="text" onInput={resultTriggerFn} defaultValue={defaultVal}/>;
return <input className={"bp3-input"} type="text" onInput={resultTriggerFn} defaultValue={defaultVal}/>;
}
resultRow(aOrB) {
const resultFn = aOrB === 'a' ? this.resultA : this.resultB;
const defaultInput = aOrB === 'a' ? this.props.default_a : this.props.default_b;
const result = aOrB === 'a' ? this.state.a : this.state.b;
return (<div className={'result-row'}>
{this.renderInput(resultFn, defaultInput)}
<div className={'result'}>{result}</div>
</div>)
}
setActiveTabState(newVal) {
this.setState({activeTab: newVal})
}
render() {
return (
<div>
<h1><a href="https://adventofcode.com/2017/day/{this.props.day}" target="_blank">Day {this.props.day}</a></h1>
<div>
<h2>a</h2>
{this.renderInput(this.resultA, this.props.default_a)}
Result: {this.state.a}
</div>
<div>
<h2>b</h2>
{this.renderInput(this.resultB, this.props.default_b)}
Result: {this.state.b}
</div>
<h1><a href={"https://adventofcode.com/2017/day/" + this.props.day}
target="_blank">Day {this.props.day}: {this.props.headline}</a></h1>
<p>{this.state.activeTab === 'a' ? this.props.description_a : this.state.activeTab === 'b' ? this.props.description_b : ''}</p>
<Tabs id="TabsExample" onChange={this.setActiveTabState} animate={false} defaultSelectedTabId={this.state.activeTab}>
<Tab id="a" title="Part A" panel={this.resultRow('a')}/>
<Tab id="b" title="Part B" panel={this.resultRow('b')}/>
</Tabs>
</div>
);
......
$blue0: #BBE0DE;
$blue1: #5799AF;
$blue2: #1F4B99;
$red0: #F9D3B9;
$red1: #D4804B;
$red2: #9E2B0E;
@media (max-width: 900px) {
.main-content {
margin-left: 0;
margin-right: 0;
}
}
@media (min-width: 901px) and (max-width: 1200px) {
.main-content {
margin-left: 100px;
margin-right: 100px;
}
}
@media (min-width: 1201px) {
.main-content {
max-width: 1000px;
}
}
.main-content {
background-color: $blue0;
padding: 40px;
width: 100%;
margin-top: 10px;
margin-bottom: 10px;
}
.center-content {
display: flex;
justify-content: center;
}
.result-row {
display: grid;
grid-template-columns: 80% 20%;
.result {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
background-color: $blue1;
color: white;
font-size: 150%;
}
}
......@@ -4,7 +4,13 @@
<title>Advent of Code (WASM)</title>
</head>
<body>
<h1>Advent of Code (WASM)</h1>
<div id="solutions"></div>
<div class="center-content">
<div class="main-content">
<div>
<h1 class="bp3-heading">Advent of Code (WASM)</h1>
</div>
<div id="solutions"></div>
</div>
</div>
</body>
</html>
import("./loader.js")
.then(module => module.render())
.then(() => import('./styles.js'))
.catch(e => console.error("Error importing `loader.js`:", e));
......@@ -7,6 +7,9 @@ const TEXTAREA_ROWS = 10;
function day1() {
return <SolutionComponent day={1}
headline={"Inverse Captcha"}
description_a={"Find sum of all digits that match the next digit in the list"}
description_b={"Find sum of all digits that match the digit halfway around in the list"}
default_a={'91212129'}
default_b={'123425'}
/>;
......@@ -14,6 +17,9 @@ function day1() {
function day2() {
return <SolutionComponent day={2}
headline={"Corruption Checksum"}
description_a={"For each row, determine the difference between the largest value and the smallest value. Waht is the sum of all of these differences?"}
description_b={"Find the only two numbers in each row where one evenly divides the other, divide them, and add up each line's result."}
default_a={'91212129'}
default_b={'123425'}
cols={TEXTAREA_COLS}
......@@ -23,6 +29,9 @@ function day2() {
function day3() {
return <SolutionComponent day={3}
headline={"Spiral Memory"}
description_a={"How many steps are required to carry the data from the square identified in your puzzle input all the way to the access port?"}
description_b={"What is the first value written that is larger than your puzzle input?"}
default_a={'312051'}
default_b={'312051'}
/>;
......@@ -31,6 +40,9 @@ function day3() {
function day4() {
return <SolutionComponent day={4}
headline={"High-Entropy Passphrases"}
description_a={"A valid passphrase must contain no duplicate words. How many passphrases are valid?"}
description_b={"A valid passphrase must contain no two words that are anagrams of each other. How many passphrases are valid?"}
default_a={'aa bb cc dd aa\naa bb cc dd aaa\n'}
default_b={'bqs bqs dbutvgf mmzb izpyud rap izpyud xlzeb mnj hjncs\ncirkjq nmjuu xtgejv gtexvj vjcmtqq unjmu\nofbh bdrsk rdrjj elaxvk jrjdr\n'}
cols={TEXTAREA_COLS}
......@@ -49,6 +61,9 @@ function day5() {
"-4\n" +
"-6";
return <SolutionComponent day={5}
headline={"A Maze of Twisty Trampolines, All Alike"}
description_a={"How many steps does it take to reach the exit?"}
description_b={"How many steps does it take to reach the exit?"}
default_a={'0\n3\n0\n1\n-3'}
default_b={inputFor5B}
cols={TEXTAREA_COLS}
......@@ -58,6 +73,9 @@ function day5() {
function day6() {
return <SolutionComponent day={6}
headline={"Memory Reallocation"}
description_a={"How many redistribution cycles must be completed before a configuration is produced that has been seen before?"}
description_b={"How many cycles are in the infinite loop that arises from the configuration in your puzzle input?"}
default_a={'0 2 7 0'}
default_b={'0 2 7 0'}
/>;
......@@ -66,6 +84,9 @@ function day6() {
function day7() {
const day7input = "pbga (66)\nxhth (57)\nebii (61)\nhavc (66)\nktlj (57)\nfwft (72) -> ktlj, cntj, xhth\nqoyq (66)\npadx (45) -> pbga, havc, qoyq\ntknk (41) -> ugml, padx, fwft\njptl (61)\nugml (68) -> gyxo, ebii, jptl\ngyxo (61)\ncntj (57)";
return <SolutionComponent day={7}
headline={"Recursive Circus"}
description_a={"What is the name of the bottom program?"}
description_b={"Given that exactly one program is the wrong weight, what would its weight need to be to balance the entire tower?"}
default_a={day7input}
default_b={day7input}
cols={TEXTAREA_COLS}
......
import "normalize.css/normalize.css";
import "@blueprintjs/core/lib/css/blueprint.css";
import "@blueprintjs/icons/lib/css/blueprint-icons.css";
import "./css/main.scss";
\ No newline at end of file
......@@ -13,8 +13,18 @@ module.exports = {
options: {presets: ["@babel/env"]}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
test: /\.(css|scss)$/,
use: ["style-loader", "css-loader", "sass-loader"]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}]
}
]
},
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment