diff --git a/src/Common.css b/src/Common.css
index 23a0400..c4e7f5b 100644
--- a/src/Common.css
+++ b/src/Common.css
@@ -41,8 +41,6 @@
left: 0;
width: 100%;
height: 100%;
- background: transparent center center;
- background-size: cover;
}
.black-outline {
diff --git a/src/Config.css b/src/Config.css
new file mode 100644
index 0000000..03c1601
--- /dev/null
+++ b/src/Config.css
@@ -0,0 +1,14 @@
+.config-ui-header {
+ text-align: center;
+ top: 0;
+ position: sticky;
+}
+
+.bg-preview {
+ height: 18em;
+ width: 32em;
+ max-height: 60vh;
+ max-width: 100%;
+ margin: .5em auto 1em;
+ box-shadow: 0 1px 5px rgba(0,0,0,.4);
+}
\ No newline at end of file
diff --git a/src/Config.js b/src/Config.js
new file mode 100644
index 0000000..5e1ea7f
--- /dev/null
+++ b/src/Config.js
@@ -0,0 +1,218 @@
+import React, {Component, PureComponent} from 'react';
+
+import './Config.css';
+
+const BUILTIN_IMGS={
+ 'static/bg/eriri.jpg': '平成著名画师（默认）',
+ 'static/bg/yurucamp.jpg': '露营天下第一',
+ 'static/bg/minecraft.jpg': '麦恩·库拉夫特',
+ 'static/bg/sif.jpg': '梦开始的地方',
+};
+
+const DEFAULT_CONFIG={
+ background_img: 'static/bg/eriri.jpg',
+ background_color: '#112244',
+ pressure: true,
+ quote: true,
+ horizontal_scroll: true,
+ color_picker: true,
+ easter_egg: true,
+};
+
+export function load_config() {
+ let config_txt=localStorage['hole_config']||'{}';
+ let config;
+ try {
+ config=JSON.parse(config_txt);
+ } catch(e) {
+ alert('设置加载失败，将重置为默认设置！\n'+e);
+ delete localStorage['hole_config'];
+ config={};
+ }
+
+ Object.keys(DEFAULT_CONFIG).forEach((key)=>{
+ if(config[key]===undefined)
+ config[key]=DEFAULT_CONFIG[key];
+ });
+
+ console.log('config loaded',config);
+ window.config=config;
+}
+export function save_config() {
+ localStorage['hole_config']=JSON.stringify(window.config);
+ load_config();
+}
+
+export function bgimg_style(img,color) {
+ if(img===undefined) img=window.config.background_img;
+ if(color===undefined) color=window.config.background_color;
+ return {
+ background: 'transparent center center',
+ backgroundImage: img===null ? 'unset' : 'url('+encodeURI(img)+')',
+ backgroundColor: color,
+ backgroundSize: 'cover',
+ };
+}
+
+class ConfigBackground extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state={
+ img: window.config.background_img,
+ color: window.config.background_color,
+ };
+ }
+
+ save_changes() {
+ this.props.callback({
+ background_img: this.state.img,
+ background_color: this.state.color,
+ });
+ }
+
+ on_select(e) {
+ let value=e.target.value;
+ this.setState({
+ img: value==='##other' ? '' :
+ value==='##color' ? null : value,
+ },this.save_changes.bind(this));
+ }
+ on_change_img(e) {
+ this.setState({
+ img: e.target.value,
+ },this.save_changes.bind(this));
+ }
+ on_change_color(e) {
+ this.setState({
+ color: e.target.value,
+ },this.save_changes.bind(this));
+ }
+
+ render() {
+ let img_select= this.state.img===null ? '##color' :
+ Object.keys(BUILTIN_IMGS).indexOf(this.state.img)===-1 ? '##other' : this.state.img;
+ return (
+
+ );
+ }
+}
+
+class ConfigSwitch extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.state={
+ switch: window.config[this.props.id],
+ };
+ }
+
+ on_change(e) {
+ let val=e.target.checked;
+ this.setState({
+ switch: val,
+ },()=>{
+ this.props.callback({
+ [this.props.id]: val,
+ });
+ });
+ }
+
+ render() {
+ return (
+
+
+
+ {this.props.name}
+ #{this.props.id}
+
+
+
+ {this.props.description}
+
+
+ );
+ }
+}
+
+export class ConfigUI extends PureComponent {
+ constructor(props) {
+ super(props);
+ this.save_changes_bound=this.save_changes.bind(this);
+ }
+
+ save_changes(chg) {
+ console.log(chg);
+ Object.keys(chg).forEach((key)=>{
+ window.config[key]=chg[key];
+ });
+ save_config();
+ }
+
+ reset_settings() {
+ if(window.confirm('重置所有设置？')) {
+ window.config={};
+ save_config();
+ window.location.reload();
+ }
+ }
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 新功能建议或问题反馈请在
+ GitHub
+ 提出。
+
+
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/Flows.css b/src/Flows.css
index 2d8b297..10f0ee1 100644
--- a/src/Flows.css
+++ b/src/Flows.css
@@ -3,7 +3,7 @@
border-radius: 5px;
margin: 1em 0;
padding: .5em;
- box-shadow: 0 5px 10px rgba(0,0,0,.4);
+ box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
.box-tip {
@@ -30,6 +30,9 @@
padding-left: 18px;
overflow-x: auto;
}
+.flow-reply-row.config-no-scroll {
+ overflow-x: hidden !important;
+}
.flow-reply-row::-webkit-scrollbar {
display: none;
@@ -177,7 +180,7 @@
.flow-item-row-quote {
opacity: .8;
- filter: brightness(90%);
+ filter: brightness(95%);
}
.flow-item-quote>.box {
diff --git a/src/Flows.js b/src/Flows.js
index 627a51f..6aa5667 100644
--- a/src/Flows.js
+++ b/src/Flows.js
@@ -438,7 +438,7 @@ class FlowItemRow extends PureComponent {
let parts=split_text(this.state.info.text,hl_rules);
let quote_id=null;
- if(!this.props.is_quote && localStorage['DISABLE_QUOTE']!=='on')
+ if(!this.props.is_quote && window.config.quote)
for(let [mode,content] of parts)
if(mode==='pid' && QUOTE_BLACKLIST.indexOf(content)===-1 && parseInt(content)
+
{this.state.reply_status==='loading' &&
加载中
}
{this.state.reply_status==='failed' &&
diff --git a/src/PressureHelper.js b/src/PressureHelper.js
index 0f57291..92aedcb 100644
--- a/src/PressureHelper.js
+++ b/src/PressureHelper.js
@@ -37,7 +37,7 @@ export class PressureHelper extends Component {
}
componentDidMount() {
- if(localStorage['DISABLE_PRESSURE']!=='on') {
+ if(window.config.pressure) {
Pressure.set(document.body, {
change: (force)=>{
if(!this.state.fired) {
diff --git a/src/Title.js b/src/Title.js
index d0ffb58..44c911a 100644
--- a/src/Title.js
+++ b/src/Title.js
@@ -2,34 +2,29 @@ import React, {Component, PureComponent} from 'react';
import {LoginForm, PostForm} from './UserAction';
import {TokenCtx} from './UserAction';
import {PromotionBar} from './Common';
+import {ConfigUI} from './Config';
import './Title.css';
const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
const HELP_TEXT=(
-
-
-
-
树洞网页版 by @xmcp
-
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU General Public License as published by
- the Free Software Foundation, either version 3 of the License, or
- (at your option) any later version.
-
-
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU General Public License for more details.
-
-
+
+
树洞网页版 by @xmcp
+
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ GNU General Public License for more details.
+
);
@@ -122,6 +117,16 @@ class ControlBar extends PureComponent {
)
@@ -149,7 +154,7 @@ class ControlBar extends PureComponent {
export function Title(props) {
let date=new Date();
- let eriri_easteregg=(1+date.getMonth())===3 && date.getDate()===20 && !localStorage['REPLACE_ERIRI_WITH_URL'];
+ let final_exam_egg=(1+date.getMonth())===6 && date.getDate()>=8 && date.getDate()<=21;
return (
@@ -159,8 +164,8 @@ export function Title(props) {
P大树洞
- { eriri_easteregg ?
- 3月20日是看板娘英梨梨 的生日 :
+ { final_exam_egg && window.config.easter_egg ?
+ 期末加油 :
"官方网页版"
}
diff --git a/src/color_picker.js b/src/color_picker.js
index 90f5a15..4900cea 100644
--- a/src/color_picker.js
+++ b/src/color_picker.js
@@ -12,10 +12,13 @@ export class ColorPicker {
name=name.toLowerCase();
if(name==='洞主')
return 'hsl(0,0%,97%)';
+ if(!window.config.color_picker)
+ return 'hsl(0,0%,85%)';
+
if(!this.names[name]) {
this.current_h+=golden_ratio_conjugate;
this.current_h%=1;
- this.names[name]=`hsl(${this.current_h*360}, 40%, 85%)`;
+ this.names[name]=`hsl(${this.current_h*360}, 40%, 87%)`;
}
return this.names[name];
}