diff --git a/index1b.html b/index1b.html new file mode 100644 index 0000000..5fade4c --- /dev/null +++ b/index1b.html @@ -0,0 +1,862 @@ + + + + T-SHIRT (PRODUCT-DB) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+ +
+
+ +
+

Default welcome msg!

+ +
+ + +
+
+
+
+
+
+ +
+ +
+
+
+
+ +
+ + +
+ +
+
+

SKIN-TIGHT BIKE SHIRT (PRODUCT-DB)

+
+ + + +

Be + the first to review this product

+ +

Availability: In stock

+ + +
+ + €10.00 + +
+ + +
+

Quick Overview

+
T-shirt with Product DB
+
+ + +
+ +
+
+
+
+ +
+
+
+ + + + + +

* Required Fields

+
+ +
+ + +
+ + €10.00 + +
+ +
+ + + +
+ + + +
+ +
+ +
+

+ T-SHIRT (PRODUCT-DB)

+

Double click on above image to view full + picture

+
+ Zoom Out +
+
+
+ Zoom In +
+ +
+

More Views

+
    +
  • + +
  • +
+
+
+ +
+
+ +
+ +
+
+

Details

+
+ Just a simple shirt with measurements from the SizeMe Product Database +
+
+
+

Product Tags

+
+
+ +
+ +
+ +
+
+

Use spaces to separate tags. Use single quotes (') for phrases.

+ +
+
+
+ + + + + +
+ +
+
+ + + +
+
+ + + + + + + \ No newline at end of file diff --git a/src/api/ProductModel.js b/src/api/ProductModel.js index c0d35a5..98dd470 100644 --- a/src/api/ProductModel.js +++ b/src/api/ProductModel.js @@ -1137,12 +1137,14 @@ const getResult = (measurement, value, matchItem) => { }; const DEFAULT_OPTIMAL_FIT = 1070; +const DEFAULT_OPTIMAL_STRETCH = 5; export { humanMeasurementMap, fitRanges, getResult, - DEFAULT_OPTIMAL_FIT + DEFAULT_OPTIMAL_FIT, + DEFAULT_OPTIMAL_STRETCH, }; diff --git a/src/api/sizeme-api.js b/src/api/sizeme-api.js index 914bd23..1215d7f 100644 --- a/src/api/sizeme-api.js +++ b/src/api/sizeme-api.js @@ -7,7 +7,7 @@ import { createStore, applyMiddleware } from "redux"; import thunkMiddleware from "redux-thunk"; import { createLogger } from "redux-logger"; import rootReducer from "./reducers"; -import SizeGuideModel, { DEFAULT_OPTIMAL_FIT } from "./ProductModel"; +import SizeGuideModel, { DEFAULT_OPTIMAL_FIT, DEFAULT_OPTIMAL_STRETCH } from "./ProductModel"; import Optional from "optional-js"; import SizeSelector from "./SizeSelector"; import uiOptions from "./uiOptions"; @@ -367,17 +367,34 @@ function doMatch (fitRequest, token, useProfile) { function getRecommendedFit (fitResults, optimalFit) { const optFit = optimalFit ? optimalFit : DEFAULT_OPTIMAL_FIT; const maxDist = uiOptions.maxRecommendationDistance || 9999; - const [bestMatch] = fitResults - .filter(([, res]) => res.totalFit >= 1000 && res.accuracy > 0) - .reduce(([accSize, fit], [size, res]) => { - const newFit = Math.abs(res.totalFit - optFit); - if (newFit <= maxDist && (!accSize || newFit < fit)) { - return [size, newFit]; - } else { - return [accSize, fit]; - } - }, [null, 0]); - return bestMatch; + if (optFit === 1000) { + const optStretch = DEFAULT_OPTIMAL_STRETCH; + const [bestMatch] = fitResults + .filter(([, res]) => res.totalFit >= 1000 && res.accuracy > 0) + .reduce(([accSize, fit], [size, res]) => { + let matchArr = Object.values(res.matchMap); + let maxStretch = Math.max.apply(null, matchArr.map(o => o.componentStretch)); + const newFit = (Math.abs(res.totalFit - optFit) * 100) + Math.abs(maxStretch - optStretch); + if (newFit <= (maxDist * 100) && (!accSize || newFit < fit)) { + return [size, newFit]; + } else { + return [accSize, fit]; + } + }, [null, 0]); + return bestMatch; + } else { + const [bestMatch] = fitResults + .filter(([, res]) => res.totalFit >= 1000 && res.accuracy > 0) + .reduce(([accSize, fit], [size, res]) => { + const newFit = Math.abs(res.totalFit - optFit); + if (newFit <= maxDist && (!accSize || newFit < fit)) { + return [size, newFit]; + } else { + return [accSize, fit]; + } + }, [null, 0]); + return bestMatch; + } } function match (doSelectBestFit = true) { diff --git a/src/common/SizingBar.jsx b/src/common/SizingBar.jsx index 57905c9..9d8a948 100644 --- a/src/common/SizingBar.jsx +++ b/src/common/SizingBar.jsx @@ -3,7 +3,7 @@ import PropTypes from "prop-types"; import { connect } from "react-redux"; import { withTranslation } from "react-i18next"; import "./SizingBar.scss"; -import ProductModel, { DEFAULT_OPTIMAL_FIT, fitRanges } from "../api/ProductModel"; +import ProductModel, { DEFAULT_OPTIMAL_FIT, DEFAULT_OPTIMAL_STRETCH, fitRanges } from "../api/ProductModel"; import ReactTooltip from "react-tooltip"; import SizeSelector from "../api/SizeSelector"; @@ -121,9 +121,27 @@ class SizingBar extends React.Component { } } - getFitPosition (value) { - return Math.max(0, - (Math.min(value, this.sliderPosXMax) - this.sliderPosXMin) * this.sliderScale); + getFitPosition (value,matchMap) { + let { fitRecommendation } = this.props; + if (fitRecommendation === 1000) { + let maxStretch = DEFAULT_OPTIMAL_STRETCH; + let newPos = 50; + if (matchMap) { + let matchArr = Object.values(matchMap); + maxStretch = Math.max.apply(null, matchArr.map(o => o.componentStretch)); + if (value > 1000) { + newPos = Math.min(100, 60 + ((value - 1000) / 55 * 40)); + } else if (value === 1000) { + const stretchBreakpoint = 2 * DEFAULT_OPTIMAL_STRETCH; + newPos = (maxStretch > stretchBreakpoint) ? Math.max(20, 40 - ((maxStretch - stretchBreakpoint) / (100 - stretchBreakpoint) * 20)) : Math.max(40, 60 - (maxStretch / stretchBreakpoint * 20)); + } else if (value < 1000) { + newPos = Math.max(0, 20 - ((1000 - value) / 55 * 20)); + } + } + return newPos; + } else { + return Math.max(0, (Math.min(value, this.sliderPosXMax) - this.sliderPosXMin) * this.sliderScale); + } } getFitRange () { @@ -157,9 +175,9 @@ class SizingBar extends React.Component { {t(`sizingBarRangeLabel.${fit.label}`)} ))} - {doShowFit && fitRecommendation > 1000 && = 1000 && } - {doShowFit && } ); diff --git a/webpack.config.js b/webpack.config.js index 67b393a..6d4b003 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -71,6 +71,7 @@ const developmentConfig = () => merge([ parts.page({ template: "index.html" }), parts.page({ template: "local.html", filename: "local.html" }), parts.page({ template: "index1.html", filename: "index1.html" }), + parts.page({ template: "index1b.html", filename: "index1b.html" }), parts.page({ template: "index2.html", filename: "index2.html" }), parts.page({ template: "index2r.html", filename: "index2r.html" }), parts.page({ template: "index3.html", filename: "index3.html" }),