Cp-s05box Wiki
Register
Advertisement

<?xml version="1.0" standalone="yes"?> <svg width="640" height="480" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="fishing-f-0"> <feColorMatrix type="hueRotate" values="-120" /> </filter> <radialGradient id="fishing-g-0" cx="0" cy="0" fx="-3" fy="-3" r="5" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#f66" /> <stop offset="100%" stop-color="#c00" /> </radialGradient> <radialGradient id="fishing-g-1" cx="50%" cy="50%" r="50%"> <stop offset="0%" stop-color="rgba(128, 255, 128, 0)" /> <stop offset="100%" stop-color="rgb(0, 255, 0)" /> </radialGradient> <pattern width="32" height="32" patternUnits="userSpaceOnUse" id="fishing-p-0"> <image xlink:href="data:image/gif;base64,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" width="32px" height="32px" /> <rect width="32" height="32" fill="#deaa87" opacity="0.2" /> </pattern> <pattern width="64" height="64" patternUnits="userSpaceOnUse" id="fishing-p-1"> <image xlink:href="data:image/gif;base64,R0lGODdhIAAgAKUvADutpT2upj6vp0mspUqtpjeyrz+xqEuup0SwrkGyqUyvqDq0sUaxr0Kzqk2wqUeysEO0q06xqj22s0izsUW1rD63tEm0slCzq0a2rT+4tUq1s1G0rEe3rkG5tky2tFK1rUi4sEK6t023tVO2r0q5sU64tlS3sEu6slW4sUy7s1e5sk28tFi6s1O8u0++tf///////////////////////////////////////////////////////////////////ywAAAAAIAAgAAAG/kCKEAKhYDhIzjFZ6pySz6QQQ4E0rg3jUUKFqprP0ykV6jilDYw6KVG6Uy6WKklv05WYk1Osj3LGKSl+YoF/d0gSbR8fHIlIa3dwLpMuhXcSIouMGhJDRFpGdBsbiVNqRypfJYxUWY+PGB8WFxsftXSnH6klq2wcixijFxcPDg60Gx4iJSLNv4xwLS58h4vED7O1Hhq/HNwcEEuPjId3H82LExsXEMMNAglFFLSLKEmn5b8WVMYKCf8AERBbRGfKgiJqFllQt86BPwABAvxrcIyWGiEUlEiwYETWwgkXHA4YGUAAvAQN5J1aSYXWgwkTLDwopiDAyJEJFFz5VAVL/pFhQEdZGDoBwr+bDjCyxICwFrB7RzTYsuIAgYNHRjCaOjWBSig7dmA9o0OwJVB2Wk9J0CAOCTILo6ytu2CrFtMpXNRiLOIAyz8IxoYRaYByp6kqQwj/MwnwJMAEjh0UuePpSuOTluHBI9zgQsZDGBZcKfB4IhbFCSpq+vDtzoLS8cKtkaBQqiYPizKF5VDFypWhGoJr8ODhmSYUuUVwKM4b60UIDBhcecDg5YYHw1Z/6HmQZ2/f7RowMFZxwkwLSDwNTsmTCpH3RYgMYzCMQpvvvrPET5zlCIZOECxgiiONpCcgYvBZ8ZkbVLTVCIHp2bcXfEMsmM9uoHl1RRVHC1BATj7lJFJKgkEAADs=" width="64px" height="64px" /> <rect width="64" height="64" fill="#1543b7" opacity="0.1" /> </pattern> <pattern width="10" height="10" patternUnits="userSpaceOnUse" id="fishing-p-2"> <image xlink:href="data:image/gif;base64,R0lGODdhCgAKAMIFABFng0SJn1eOoHG81YTB1f///////////ywAAAAACgAKAAADJAgQQDOBqRUEEEzYuGudVBRNEUEwlQU8oAdq2JhqAatIC9FGCQA7" width="10px" height="10px" /> <rect width="10" height="10" fill="#27f" opacity="0.5" /> </pattern> <pattern width="24" height="24" patternUnits="objectBoundingBox" id="fishing-p-3"> <rect width="24" height="24" fill="#0e779a" opacity="0.65" /> <use xlink:href="#fishing-r-bubbles" class="bubbles" /> <use xlink:href="#fishing-r-bubbles" y="24" class="bubbles" /> </pattern> <g id="fishing-r-pond"> <circle r="160" fill="url(#fishing-p-2)" /> <circle r="150" class="water" /> <circle r="138" fill="#de6" opacity="0.0" /> <path d="M 0 0 v -1000 v 2000 z h -1000 h 2000 z l 1000 1000 l -1000 -1000" fill="none" stroke="purple" /> </g> <g id="fishing-r-platform"> <rect width="44" height="64" x="14" y="0" class="wood" /> <circle cx="8" cy="12" r="6" class="wood" /> <circle cx="64" cy="12" r="6" class="wood" /> <circle cx="36" cy="22" r="10" fill="rgba(0, 255, 0, 0.4)" /> <text x="-80" y="-8" transform="rotate(-35 0 0) translate(-30 40)" fill="#4e6" stroke="green">drag me! ----></text> </g> <g id="fishing-r-fish"> <circle r="12" fill="rgba(0, 24, 255, 0.35)" /> </g> <g id="fishing-r-bubbles" opacity="0.45"> <circle cx="0" cy="0" r="3" fill="#c8dcff" /> <circle cx="16" cy="1" r="3" fill="#c8dcff" /> <circle cx="7" cy="2" r="3" fill="#c8dcff" /> <circle cx="20" cy="3" r="3" fill="#c8dcff" /> <circle cx="14" cy="5" r="3" fill="#c8dcff" /> <circle cx="2" cy="8" r="3" fill="#c8dcff" /> <circle cx="10" cy="13" r="3" fill="#c8dcff" /> <circle cx="4" cy="12" r="3" fill="#c8dcff" /> <circle cx="22" cy="18" r="3" fill="#c8dcff" /> <circle cx="12" cy="20" r="3" fill="#c8dcff" /> </g> </defs>


<g id="fishing"> <use xlink:href="#fishing-r-pond" x="320" y="240" /> <g id="fish-container"> <desc>Fish nodes will be appended to this parent</desc> </g> <use xlink:href="#fishing-r-platform" x="284" y="368" /> <g id="rod" transform="translate(320 390)"> <circle r="30" cy="30" id="rod-zone"> <desc>this circle marks the area at which the rod can be dragged. the position would then be inversed and translated to a position in the pond</desc> </circle> <g> <desc>drag here to cancel cast</desc> <text font-family="arial" font-size="8" font-weight="bold" transform="translate(42 27)">drag here<tspan x="0" dy="10">to cancel</tspan></text> <circle cx="60" cy="30" r="20" fill="rgba(255, 0, 0, 0.4)" /> </g> <path d="M 0 0 q -20 -10 -100 -100" fill="none" stroke="#fff" id="rod-rope" /> <circle cx="-100" cy="-100" r="3" fill="rebeccapurple" id="rod-bait" /> <circle r="5" fill="url(#fishing-g-0)" id="rod-btn" /> </g> <g id="bucket"> <rect width="180" height="260" x="10" y="15" rx="10" ry="10" fill="peachpuff" stroke="purple" opacity="0" /> <circle cx="190" cy="55" r="40" fill="peachpuff" opacity="0" /> <path d="M 10 25 a 10 10 0 0 1 10 -10 h 170 a 40 40 0 1 1 0 80 v 51.726209469111836 a 160 160 0 0 0 -26.124949959959963 128.3 h -143.87505004004004 a 10 10 0 0 1 -10 -10 z" fill="#9cd1f5" stroke="#3c96d3" /> <path d="M 190 55 v -30 z" stroke="#e93" fill="#b50" stroke-width="5" stroke-linecap="round" /> <path d="M 190 55 l 24 29 h -10 l -14 -18 l -14 18 h -10 l 24 -29 z" stroke="#b50" fill="#e93" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> <circle cx="190" cy="55" r="26" fill="#e93" stroke="#b50" stroke-width="2" /> <circle cx="190" cy="55" r="19" fill="#fff" stroke="#3560a6" stroke-width="2" /> <circle cx="190" cy="55" r="31.5" fill="none" stroke="#cce933" stroke-width="7" stroke-dasharray="20, 35, 20, 1000, 20" transform="rotate(-158.209261325098 190 55)" /> <text font-family="Arial" font-size="25" font-weight="bold" x="30" y="55"> Fishing </text> <text font-family="Arial" font-size="12" font-weight="bold" x="30" y="75"> (<tspan id="fishing-bucket-capacity">0</tspan>/20 in bucket) </text> <text font-family="Arial" font-size="20" font-weight="bold" x="171" y="62.5" id="fishing-bucket-timer" transform="translate(7.8828125)">00</text> <rect width="130" height="110" x="20" y="95" rx="3" ry="3" fill="#ffffbe" stroke="#cc3" /> <g id="fishing-bucket-prize" opacity="0"> <image xlink:href="" width="88px" height="88px" x="41" y="106" id="fishing-bucket-image" /> <text font-family="Arial" font-size="14" font-weight="bold" x="20" y="225" id="fishing-bucket-title">??? Fish</text> <image xlink:href="88px-Jellybean_Jar.png" width="16px" height="16px" x="20" y="232" /> <text font-family="Arial" font-size="14" x="40" y="245"><tspan id="fishing-bucket-beans">5</tspan> Jellybeans</text> </g> <g transform="scale(0.9) translate(256 6)"> <desc>money jar</desc> <image xlink:href="88px-Jellybean_Jar.png" width="88px" height="88px" /> <image xlink:href="data:image/png;base64,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" width="55px" height="40px" x="16.5" y="30" /> <text font-family="Arial" font-size="24" font-weight="bold" x="44" y="60" fill="orange" id="fishing-money-val">0</text> </g> </g> </g>


<defs> <style type="text/css"> <![CDATA[ @keyframes bubbles { from { transform: translateY(0); } to { transform: translateY(-24px); } } svg { border: 1px solid red; } .wood { fill: url(#fishing-p-0); stroke: #843; } .water { fill: url(#fishing-p-1); } .fishing-fish { r: 12px; fill: url(#fishing-p-3); stroke: #3a96ff; transition: 3s; transition-timing-function: cubic-bezier(0.6, 0, 0.1, 1); } .bubbles { animation-name: bubbles; animation-duration: 2000ms; animation-timing-function: linear; animation-iteration-count: infinite; } #rod-btn { cursor: pointer; } #rod-zone { fill: url(#fishing-g-1); opacity: 0; transition: 150ms; } #rod-zone[data-active="true"] { opacity: 0.4; } #rod-zone[data-inrange="false"] { filter: url(#fishing-f-0); transition: 3s; } /*#rod-bait { transition: 400ms linear; }*/ ]]> </style> <script type="application/javascript"> <![CDATA[

var fsh = {fn: {}};

/* data */ fsh.data = { state: { timer: { interval: null, t: null }, castTimeout: null, baitState: false }, pond: { x: 320, y: 240, r: 150 }, fishChecker: { int: null, delay: 100 }, timer: { t: 42000 }, bucket: { fish: [] // fish in bucket }, rod: { btn: { x: 320, y: 390, r: 5 }, bait: { r: 3 }, reflectionRadius: 30, type: 0, // rod type state: false // activated or not ## move to 'fsh.data.state.baitState' (?) }, beans: { val: 100, min: 50 }, fish: { fishList: [], // list of fish <circle /> nodes move: { dur: 3000, wait: { min: 3000, max: 6000 } }, r: 12, maxRange: 16 }, species: { rate: { beans: 0.04, boot: 0.15 }, all: { "1000": { name: "Balloon Fish", image: null, species: { "1001": { name: "Balloon Fish", type: 1000, id: 1001, rod: 0, rarity: 1, val: [2, 7] }, "1002": { name: "Hot Air Balloon Fish", type: 1000, id: 1002, rod: 0, rarity: 1, val: [12, 12] }, "1003": { name: "Weather Balloon Fish", type: 1000, id: 1003, rod: 0, rarity: 4, val: [17, 19] }, "1004": { name: "Water Balloon Fish", type: 1000, id: 1004, rod: 0, rarity: 4, val: [9, 11] }, "1005": { name: "Red Balloon Fish", type: 1000, id: 1005, rod: 0, rarity: 2, val: [5, 7] } } }, "2000": { name: "Peanut Butter \x26 Jellyfish", image: null, species: { "2001": { name: "Peanut Butter \x26 Jellyfish", type: 2000, id: 2001, rod: 0, rarity: 1, val: [5, 8] }, "2002": { name: "Grape PB\x26J Fish", type: 2000, id: 2002, rod: 0, rarity: 2, val: [8, 11] }, "2003": { name: "Crunchy PB\x26J Fish", type: 2000, id: 2003, rod: 0, rarity: 3, val: [12, 14] }, "2004": { name: "Strawberry PB\x26J Fish", type: 2000, id: 2004, rod: 0, rarity: 4, val: [16, 19] }, "2005": { name: "Strawberry PB\x26J Fish", type: 2000, id: 2005, rod: 0, rarity: 6, val: [44, 46] } } } }, rarity: { "1": 100, "2": 80, "3": 50, "4": 20, "5": 10, "6": 2, }, parsedSpecies: [], rods: { "0": { name: "Twig Rod", cost: 0, cast: 1, beans: 10, owned: true }, "1": { name: "Bamboo Rod", cost: 480, cast: 2, beans: 20, owned: false }, "2": { name: "Hardwood Rod", cost: 800, cast: 3, beans: 40, owned: false }, "3": { name: "Steel Rod", cost: 1200, cast: 4, beans: 100, owned: false }, "4": { name: "Gold Rod", cost: 2000, cast: 5, beans: 150, owned: false } } } };

/* functions */

// get random position within a circle (***constructor***) fsh.fn.randomCircCoords = function() { var yRange; this.x = Math.random(); yRange = Math.sqrt(1 - Math.pow(2 * this.x - 1, 2)); // height of vertical line in the circle whose x position is 'this.x' this.y = (1 - yRange) / 2 + yRange * Math.random(); } // move fish fsh.fn.posFish = function(fishNode, moves) { if (moves === false) { // do nothing } else if (!new Number(moves) instanceof Number) { // moves is not an integer moves = 0; } else if (moves < 0 || moves != Math.round(moves)) { // moves is not a positive integer moves = 0; } console.log("Moving fish #" + fishNode.id); var coor = new fsh.fn.randomCircCoords(), pondX = fsh.data.pond.x, pondY = fsh.data.pond.y, pondR = fsh.data.pond.r, fishR = fsh.data.fish.r, moveDelay, cx = pondX - pondR + fishR + coor.x * 2 * (pondR - fishR), cy = pondY - pondR + fishR + coor.y * 2 * (pondR - fishR); fishNode.setAttributeNS(null, "cx", Math.round(cx)); fishNode.setAttributeNS(null, "cy", Math.round(cy)); fishNode.setAttributeNS(null, "data-move", moves); if (moves !== false) { moveDelay = fsh.data.fish.move.dur + fsh.data.fish.move.wait.min + (fsh.data.fish.move.wait.max - fsh.data.fish.move.wait.min) * Math.random() - (moves === 0 ? fsh.data.fish.move.dur : 0); setTimeout(function() { fsh.fn.posFish(fishNode, moves + 1); }, moveDelay); } } // add new fish fsh.fn.addFish = function() { var fishNode = document.createElementNS("http://www.w3.org/2000/svg", "circle"); fishNode.id = "fish-" + (fsh.data.fish.fishList.length + 1); fishNode.setAttributeNS(null, "class", "fishing-fish"); // insert fish document.querySelector("#fish-container").appendChild(fishNode); // add fish to list of fish fsh.data.fish.fishList.push(fishNode); fsh.fn.posFish(fishNode); } // fish intersection fsh.fn.hasCaughtFish = function() { var hasCaught = false, rod = document.querySelector("#rod-bait"), fish; if (fsh.data.state.baitState) { // only if fish state is enabled (while the timer is ticking) try { // use a 'try', just in case of an unexpected transform rod = {x: fsh.data.rod.btn.x + Number(rod.getAttributeNS(null, "cx")), y: fsh.data.rod.btn.y + Number(rod.getAttributeNS(null, "cy"))}; for (var i in fsh.data.fish.fishList) { fish = fsh.data.fish.fishList[i].getBoundingClientRect(); fish = {x: fish.left + 11, y: fish.top + 11}; /*console.info({ rod: rod, fish: fish });*/ if (Math.sqrt(Math.pow(rod.x - fish.x, 2) + Math.pow(rod.y - fish.y, 2)) <= fsh.data.fish.maxRange + fsh.data.rod.bait.r) { hasCaught = true; break; } } } catch(err) {} if (hasCaught) { fsh.fn.onCatch(); } } } // on catch fsh.fn.onCatch = function() { console.log("You've caught something with your rod!"); fsh.fn.stopTimer(); var type = Math.random(); if (type <= fsh.data.species.rate.beans + fsh.data.species.rate.boot) { // item caught if (type <= fsh.data.species.rate.boot) { // caught boot fsh.fn.onCatchBoot(); } else { // caught beans fsh.fn.onCatchBeans(); } } else { fsh.fn.onCatchFish(); } } // on catch (boot) fsh.fn.onCatchBoot = function() { console.log("Caught boot!"); fsh.fn.updateBucketWindow("88px-Boot.png", "Old Boot", 0); } // on catch (beans) fsh.fn.onCatchBeans = function() { console.log("Caught jellybeans jar!"); fsh.fn.updateBucketWindow("88px-Jellybean_Jar.png", "Jellybean Jar", fsh.data.species.rods[fsh.data.rod.type].beans); } // on catch (fish) fsh.fn.onCatchFish = function() { console.log("Caught fish!"); var all = fsh.data.species.parsedSpecies, rnd = fsh.data.species.parsedSpecies[Math.floor(Math.random() * fsh.data.species.parsedSpecies.length)], fish = fsh.fn.getFishData(rnd), prize = Math.round(fish.val[0] + (fish.val[1] - fish.val[0]) * Math.random()); console.info(rnd, fish); fsh.fn.updateBucketWindow(fsh.data.species.all[fish.type].image, fish.name, prize); } // get fish data fsh.fn.getFishData = function(id) { id = String(id); var familyId = id.replace(/\d{3}$/, "000"); return fsh.data.species.all[familyId].species[id]; } // update bucket window fsh.fn.updateBucketWindow = function(url, title, beans) { var titleNode = document.querySelector("#fishing-bucket-title"); titleNode.textContent = title; titleNode.setAttributeNS(null, "font-size", title.length > 18 ? 11.5 : 14); document.querySelector("#fishing-bucket-beans").textContent = beans; document.querySelector("#fishing-bucket-image").setAttributeNS("http://www.w3.org/1999/xlink", "href", url || ""); document.querySelector("#fishing-bucket-prize").setAttributeNS(null, "opacity", 1); fsh.fn.addBeans(beans); } // add fish to bucket fsh.fn.addToBucket = function(obj) { fsh.data.bucket.fish.push(obj); } // add fish to bucket fsh.fn.sellFromBucket = function() { var bucket = fsh.data.bucket.fish; for (var i in bucket) {

} } // add beans fsh.fn.addBeans = function(amt) { if (fsh.data.beans.val + amt >= fsh.data.beans.min) { // new value is not lower than min value fsh.data.beans.val += amt; // wouldn't it be funny if the beans were NaN? var money = document.querySelector("#fishing-money-val"), rect; money.textContent = fsh.data.beans.val; if (fsh.data.beans.val > 999) { // make text smaller at high amounts money.setAttributeNS(null, "font-size", fsh.data.beans.val > 9999 ? 16 : 20); } rect = money.getBoundingClientRect(); money.setAttributeNS(null, "x", 44 - (rect.width / 0.9) / 2); // width divided by 0.9 to cancel out transform scale of jar container } } // aim rod fsh.fn.aimRod = function() { document.querySelector("#rod-btn").setAttributeNS(null, "data-active", "true"); document.querySelector("#rod-zone").setAttributeNS(null, "data-active", "true"); document.querySelector("#fishing-bucket-prize").setAttributeNS(null, "opacity", 0); } // return rod fsh.fn.returnRod = function() { var btn = document.querySelector("#rod-btn"); btn.setAttributeNS(null, "data-active", "false"); btn.setAttributeNS(null, "cx", 0); btn.setAttributeNS(null, "cy", 0); document.querySelector("#rod-zone").setAttributeNS(null, "data-active", "false"); } // cast rod fsh.fn.castRod = function(x, y) { fsh.fn.addBeans(- fsh.data.species.rods[fsh.data.rod.type].cast); var bait = document.querySelector("#rod-bait"), rope = document.querySelector("#rod-rope"), trans = {}; trans.x = -x * (fsh.data.pond.r) / fsh.data.rod.reflectionRadius; trans.y = -y * (fsh.data.pond.r) / fsh.data.rod.reflectionRadius; //bait.setAttributeNS(null, "transform", "translate(" + trans.x + " " + trans.y + ")"); bait.setAttributeNS(null, "cx", trans.x); bait.setAttributeNS(null, "cy", trans.y); rope.setAttributeNS(null, "d", "M 0 0 q " + trans.x * 0.3 + " " + trans.y * 0.22 + " " + trans.x + " " + trans.y); } // set clock seconds fsh.fn.setClockSeconds = function(seconds) { var clockTime = document.querySelector("#fishing-bucket-timer"); clockTime.textContent = seconds; clockTime.setAttributeNS(null, "transform", "translate(" + ((38 - clockTime.getBoundingClientRect().width) / 2) + ")"); } // start timer fsh.fn.startTimer = function() { fsh.fn.stopTimer(); // in case called multiple times without stopping first fsh.data.state.baitState = true; fsh.data.state.timer.t = fsh.data.timer.t; fsh.fn.setClockSeconds(fsh.data.state.timer.t / 1000); fsh.data.state.timer.interval = setInterval(function() { fsh.data.state.timer.t -= 1000; fsh.fn.setClockSeconds(fsh.data.state.timer.t / 1000); if (fsh.data.state.timer.t <= 0) { // stop timer fsh.fn.stopTimer(); } }, 1000);

} // stop timer fsh.fn.stopTimer = function() { clearInterval(fsh.data.state.timer.interval); fsh.data.state.baitState = false; fsh.fn.setClockSeconds("00"); } // init fsh.fn.init = function() { fsh.fn.addFish(); fsh.fn.addFish(); fsh.fn.addBeans(0); fsh.data.fishChecker.int = setInterval(function() { fsh.fn.hasCaughtFish(); }, fsh.data.fishChecker.delay); // prepare rarity array var all = fsh.data.species.all, family, fish, rarity; for (var speciesId in all) { family = all[speciesId]; for (var fishId in family.species) { fish = family.species[fishId]; rarity = fsh.data.species.rarity[fish.rarity]; fsh.data.species.parsedSpecies = fsh.data.species.parsedSpecies.concat(new Array(rarity + 1).join("|" + fishId).substr(1).split("|")); } } }

/* triggers */ // rod drag document.querySelector("#rod-btn").addEventListener("mousedown", function() { console.log("|_|_mousedown"); fsh.fn.aimRod(); }); document.querySelector("#rod-btn").addEventListener("mouseup", function(e) { console.log("|_|_mouseup"); fsh.fn.castRod(Number(this.getAttributeNS(null, "cx")), Number(this.getAttributeNS(null, "cy"))); fsh.fn.returnRod(); fsh.fn.startTimer(); }); document.addEventListener("mousemove", function(e) { var btn = document.querySelector("#rod-btn"); if (btn.getAttributeNS(null, "data-active") == "true") { // if moving is active var cx = e.clientX - fsh.data.rod.btn.x, cy = e.clientY - fsh.data.rod.btn.y, zone = document.querySelector("#rod-zone"); // drag button btn.setAttributeNS(null, "cx", cx); btn.setAttributeNS(null, "cy", cy); if (Math.sqrt(cx * cx + Math.pow(cy - fsh.data.rod.reflectionRadius, 2)) <= fsh.data.rod.reflectionRadius) { // in range zone.setAttributeNS(null, "data-inrange", "true"); } else { // out of range /* // drag to cancel area fsh.fn.returnRod(); */ zone.setAttributeNS(null, "data-inrange", "false"); if (Math.sqrt(Math.pow(cx - 60, 2) + Math.pow(cy - 30, 2)) <= 20 + fsh.data.rod.btn.r) { // cancel area fsh.fn.returnRod(); } } } });

/* init */ fsh.fn.init(); ]]> </script> </defs>







</svg>

Advertisement