Category: javascript

I have an SVG filter file in /filters/filter.svg that contains a SVG filter with ID filter-id.

I apply this filter in an HTML5 canvas by using context.filter = “url(/filters/filter.svg#filter-id)”; and it works.

However, the filter gets loaded every time it is used, which happens a lot since I have to constantly animate many individually filtered images in the canvas.

What is the best way, using Javascript only, to cache the filter file once, then retrieve the filter from cache every time it is used, instead of having it loaded again?

It would be preferable that the filter not be embedded or even declared in the HTML file that loads the canvas, since there are actually many filters stored in the filters folder and used simultaneously, to keep the whole process cleaner and more dynamic.

Some basic sample code showing how to cache and retrieve would be highly appreciated.

I have a website displaying live data using uplot, because of its low resource usage even with many points per second being added. The issue is that I want the newest datapoint to have a big red point on it so it ‘traces’ the line. My opts section for the u plot looks like this:

const opts = {
    title: "Live-Data",
    width: window.innerWidth * 0.65,
    height: window.innerHeight * 0.8,
    cursor: {
        drag: { setScale: false },
        sync: { key: 'shift' },
    },
    scales: {
        x: { time: true },
        y: { auto: true}  
    },
    series: [
        {},  
        {
            label: "Sensor 1 (mm)",
            stroke: "blue",
            value: (u, v) => v == null ? null : v.toFixed(2) + " mm"
        },
        {
            label: "Sensor 2 (mm)",
            stroke: "red",
            value: (u, v) => v == null ? null : v.toFixed(2) + " mm"
        }
    ],
    axes: [
        {
            scale: "x",
            grid: { show: true },
            values: (u, vals) => vals.map(v => new Date(v).toLocaleTimeString())
        },
        {
            scale: 'y',
            values: (u, vals, space) => vals.map(v => v.toFixed(2) + " mm"),
            grid: { show: true }
        }
    ]
};

But I haven’t found a way to add a point that also disappears (I guess that is the logical for a tracing point) when a new data point is added.

Thanks for any help

I am trying to create a blackjack game. This is the shuffling and dealing part of the game. The deck array contains all the 52 cards of the deck (suits for the cards will be added).
This array is passed into the shuffle function which uses the Fisher Yates shuffle algorithm.

let deck = [{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1},{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1},{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1},{face:'2',value:2},{face:'3',value:3},{face:'4',value:4},{face:'5',value:5},{face:'6',value:6},{face:'7',value:7},{face:'8',value:8},{face:'9',value:9},{face:'10',value:10},{face:'J',value:10},{face:'Q',value:10},{face:'K',value:10},{face:'A',value:10,value2:11,value3:1}]
let userHand = []
let dealerHand = []
function shuffle(array) {
    let currentIndex = array.length;
  
    // While there remain elements to shuffle...
    while (currentIndex != 0) {
  
      // Pick a remaining element...
      let randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex--;
  
      // And swap it with the current element.
      [array[currentIndex], array[randomIndex]] = [
        array[randomIndex], array[currentIndex]];
    }
  }
  
shuffle(deck)
console.log(deck)

function deal(){
    userHand.push(deck.shift()); // Removes and gives first card
    dealerHand.push(deck.shift()); // Removes and gives second card
    userHand.push(deck.shift()); // Removes and gives third card
    dealerHand.push(deck.shift()); // Removes and gives fourth card
    console.log(userHand, dealerHand)
    console.log(deck)
}
deal()

The deal function is where I’m having problems. The goal is for the card at index[0] of the shuffled deck to be taken out and added to the userHand array. Then the next card at index [0] to be added to dealerHand array, until user and dealer have 2 cards each.

Instead, this is not happening. Instead of deck.shift() removing the index[0] obj from the deck, it removes an object at a random index and adds it to the userHand/dealerHand arrays.

I have this math application that’s supposed to help me improve in my understanding of functions and their graphs but unfortunately I know but too little programming skills to help me get the job done.

I can pretty much get the screen and the grid with X and Y axis to display but when I touch my phone through Expo Go (I’m on VS Code) nothing shows (not a single point or curve).

I’ve tried ChatGPT, Copilot and bolt.new but nothing worked so far.

import React, { useState, useRef, useEffect } from 'react';
import { View, Text, StyleSheet, Dimensions, PanResponder, Alert } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import Svg, { Line, Circle } from 'react-native-svg';
import Animated, { useAnimatedStyle, withSpring, useSharedValue } from 'react-native-reanimated';
import { GestureHandlerRootView } from 'react-native-gesture-handler';

// Liste des fonctions mathématiques disponibles
const FUNCTIONS = [
  { name: 'f(x) = x', formula: (x: number) => x },
  { name: 'f(x) = -x', formula: (x: number) => -x },
  { name: 'f(x) = x²', formula: (x: number) => x * x },
  { name: 'f(x) = x³', formula: (x: number) => x * x * x },
  { name: 'f(x) = exp(x)', formula: (x: number) => Math.exp(x) },
  { name: 'f(x) = 1/x', formula: (x: number) => (x !== 0 ? 1 / x : NaN) }, // Avoid division by zero
  { name: 'f(x) = ln(x)', formula: (x: number) => (x > 0 ? Math.log(x) : NaN) }, // Avoid log of non-positive numbers
];

// Dimensions de l'écran
const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');

// Paramètres pour le quadrillage
const GRID_SIZE = 20; // Nombre de lignes/colonnes dans le quadrillage
const SCALE = 40; // Échelle pour convertir les coordonnées

export default function PracticeScreen() {
  // État pour les fonctions mélangées
  const [shuffledFunctions, setShuffledFunctions] = useState(FUNCTIONS);

  // Index de la fonction mathématique actuellement sélectionnée
  const [currentFunction, setCurrentFunction] = useState(0);

  // Points tracés par l'utilisateur
  const [points, setPoints] = useState<{ x: number; y: number }[]>([]);

  // Indique si l'utilisateur est en train de dessiner
  const [drawing, setDrawing] = useState(false);

  // Temps restant pour le round (en secondes)
  const [timeLeft, setTimeLeft] = useState(120); // 2 minutes

  // Score de l'utilisateur (utilise Reanimated pour les animations)
  const score = useSharedValue(0);

  const [showCorrectCurve, setShowCorrectCurve] = useState(false);

  // Timer pour gérer les rounds
  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          clearInterval(interval); // Arrête le timer quand le temps est écoulé
          endRound(); // Termine le round
          return 0;
        }
        return prev - 1; // Diminue le temps restant
      });
    }, 1000); // Décrémente toutes les secondes

    return () => clearInterval(interval); // Nettoie le timer quand le composant est démonté
  }, []);

  // Fonction pour terminer un round
  const endRound = () => {
    setShowCorrectCurve(true); // Affiche la courbe correcte
    Alert.alert('Round terminé', `Votre score : ${Math.round(score.value)}`);
    setPoints([]); // Réinitialise les points
    setCurrentFunction((prev) => (prev + 1) % shuffledFunctions.length); // Passe à la fonction suivante
    setTimeLeft(120); // Réinitialise le timer
  };

  // Style animé pour le score (agrandit le texte si le score est élevé)
  const scoreStyle = useAnimatedStyle(() => {
    return {
      transform: [{ scale: withSpring(score.value > 80 ? 1.2 : 1) }],
    };
  });

  // Gestion des interactions tactiles (PanResponder)
  const panResponder = useRef(
    PanResponder.create({
      onStartShouldSetPanResponder: () => true, // Active le PanResponder au début du toucher
      onPanResponderGrant: () => {
        setDrawing(true); // Commence le dessin
        setPoints([]); // Réinitialise les points pour un nouveau tracé
        setShowCorrectCurve(false); // Cache la courbe correcte
      },
      onPanResponderMove: (_, gestureState) => {
        if (drawing) {
          const { moveX, moveY } = gestureState;
          const canvasX = moveX - SCREEN_WIDTH / 2; // Décalage pour centrer sur l'axe X
          const canvasY = SCREEN_HEIGHT / 2 - moveY; // Décalage pour centrer sur l'axe Y

          const newPoint = { x: canvasX / SCALE, y: canvasY / SCALE }; // Convertit en coordonnées du graphe
          setPoints((prev) => [...prev, newPoint]);
        }
      },
      onPanResponderRelease: () => {
        setDrawing(false); // Arrête le dessin
        if (points.length >= 5) {
          setShowCorrectCurve(true); // Affiche la courbe correcte
          calculateScore(); // Calcule le score après le tracé
        }
      },
    })
  ).current;

  // Fonction pour calculer le score
  const calculateScore = () => {
    if (points.length === 0) {
      score.value = 0; // No points, score is 0
      return;
    }
  
    const actualPoints = points.map((p) => ({
      x: p.x,
      y: shuffledFunctions[currentFunction].formula(p.x),
    }));
  
    const distances = points.map((p, i) => {
      const actualY = actualPoints[i]?.y; // Ensure the point exists
      if (actualY === undefined || isNaN(actualY)) return Infinity; // Avoid errors
      return Math.abs(p.y - actualY);
    });
  
    const avgDistance = distances.reduce((a, b) => a + b, 0) / distances.length;
    const newScore = Math.max(0, 100 - avgDistance * 20);
    score.value = newScore;
  };

  // Fonction pour dessiner le quadrillage
  const renderGrid = () => {
    const lines = [];

    // Lignes verticales
    for (let x = -GRID_SIZE; x <= GRID_SIZE; x++) {
      lines.push(
        <Line
          key={`v-${x}`}
          x1={x * SCALE + SCREEN_WIDTH / 2}
          y1={0}
          x2={x * SCALE + SCREEN_WIDTH / 2}
          y2={SCREEN_HEIGHT}
          stroke="#e0e0e0"
          strokeWidth="1"
        />
      );
    }

    // Lignes horizontales
    for (let y = -GRID_SIZE; y <= GRID_SIZE; y++) {
      lines.push(
        <Line
          key={`h-${y}`}
          x1={0}
          y1={y * SCALE + SCREEN_HEIGHT / 2}
          x2={SCREEN_WIDTH}
          y2={y * SCALE + SCREEN_HEIGHT / 2}
          stroke="#e0e0e0"
          strokeWidth="1"
        />
      );
    }

    // Axe X
    lines.push(
      <Line
        key="x-axis"
        x1={0}
        y1={SCREEN_HEIGHT / 2}
        x2={SCREEN_WIDTH}
        y2={SCREEN_HEIGHT / 2}
        stroke="#ff0000"
        strokeWidth="2"
      />
    );

    // Axe Y
    lines.push(
      <Line
        key="y-axis"
        x1={SCREEN_WIDTH / 2}
        y1={0}
        x2={SCREEN_WIDTH / 2}
        y2={SCREEN_HEIGHT}
        stroke="#ff0000"
        strokeWidth="2"
      />
    );

    return lines;
  };

  // Fonction pour afficher les points tracés par l'utilisateur
  const renderPoints = () => {
    return points.map((point, index) => (
      <Circle
        key={index}
        cx={point.x * SCALE + SCREEN_WIDTH / 2} // Convert to screen coordinates
        cy={SCREEN_HEIGHT / 2 - point.y * SCALE} // Convert to screen coordinates
        r="4" // Point size
        fill="#6366f1" // Point color
      />
    ));
  };

  const renderFunctionCurve = () => {
    const step = 0.1; // Step size for precision
    const path: { x: number; y: number }[] = [];
  
    for (let x = -GRID_SIZE; x <= GRID_SIZE; x += step) {
      const canvasX = x * SCALE + SCREEN_WIDTH / 2;
      const canvasY = SCREEN_HEIGHT / 2 - shuffledFunctions[currentFunction].formula(x) * SCALE;
  
      path.push({ x: canvasX, y: canvasY });
    }
  
    return path.map((point, index) => {
      if (index === 0) return null; // Skip the first point
      const prevPoint = path[index - 1];
      return (
        <Line
          key={`curve-${index}`}
          x1={prevPoint.x}
          y1={prevPoint.y}
          x2={point.x}
          y2={point.y}
          stroke="#10b981" // Curve color
          strokeWidth="2"
        />
      );
    });
  };

  console.log('Points:', points);

  return (
    <GestureHandlerRootView style={styles.container}>
      <SafeAreaView style={styles.container}>
        {/* En-tête avec le nom de la fonction, le score et le timer */}
        <View style={styles.header}>
          <Text style={styles.functionText}>
            {shuffledFunctions[currentFunction]?.name || ''}
          </Text>
          <Animated.Text style={[styles.score, scoreStyle]}>
            Score: {Math.round(score.value)}
          </Animated.Text>
          <Text style={styles.timer}>Temps restant : {timeLeft}s</Text>
        </View>

        {/* Zone de dessin */}
        <View style={styles.canvas} {...panResponder.panHandlers}>
          <Svg height="100%" width="100%">
            {renderGrid()} {/* Quadrillage */}
            {renderPoints()} {/* Points tracés par l'utilisateur */}
            {showCorrectCurve && renderFunctionCurve()} {/* Courbe correcte */}
          </Svg>
        </View>
      </SafeAreaView>
    </GestureHandlerRootView>
  );
}

// Styles pour les composants
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff',
  },
  header: {
    padding: 20,
    alignItems: 'center',
  },
  functionText: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#000',
    marginBottom: 10,
  },
  score: {
    fontSize: 20,
    color: '#6366f1',
    fontWeight: 'bold',
  },
  timer: {
    fontSize: 18,
    color: '#ff0000',
    marginTop: 10,
  },
  canvas: {
    flex: 1,
    backgroundColor: '#ffffff',
    borderRadius: 20,
    margin: 20,
    overflow: 'hidden',
  },
});

Using a piece of code from this OL example:

map.on('singleclick', function (evt) {
  document.getElementById('info').innerHTML = '';
  const viewResolution = /** @type {number} */ (view.getResolution());
  const url = wmsSource.getFeatureInfoUrl(
    evt.coordinate,
    viewResolution,
    'EPSG:3857',
    {'INFO_FORMAT': 'text/html'},
  );
  if (url) {
    fetch(url)
      .then((response) => response.text())
      .then((html) => {
        document.getElementById('info').innerHTML = html;
      });
  }
});

map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  const data = wmsLayer.getData(evt.pixel);
  const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
  map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

I am trying to get info from a single WMS layer (also multiple layers) on hover instead of using ‘singleclick’. Here it is the current code for this:

let layers;
let pixel;

map.on('pointermove', function (evt) {
  if (evt.dragging) {
    return;
  }
  //const data = ?????.getData(evt.pixel);
  //const hit = data && data[3] > 0; // transparent pixels have zero for data[3]
  //map.getTargetElement().style.cursor = hit ? 'pointer' : '';

  let pgPattern = "_pg";
  const layers = map.getAllLayers().filter(function (layer) {
    return layer.get('name');
  });
  const viewResolution = (view.getResolution());
  let url;
  let mygeojson;
  layers.forEach(function (layer, i, layers) {
    if (layer.getVisible() && layer.get('name').match(pgPattern)) {
      url = layer.getSource().getFeatureInfoUrl(
        evt.coordinate,
        viewResolution,
        'EPSG:4326',
        {'INFO_FORMAT': 'geojson'},
      );
    }
    if (url) {
      fetch(url)
      .then((response) => response.json())
      .then((mygeojson) => {
        if (mygeojson && mygeojson.features.length > 0) {
          const pixel = map.getEventPixel(evt.originalEvent);
          info.style.left = pixel[0] + 'px';
          info.style.top = pixel[1] + 'px';
          info.style.visibility = 'visible';
          info.innerText =
            "id_estacion: "+mygeojson.features[0].properties.id_estacion +"n"+
            "muestreo: "+mygeojson.features[0].properties.muestreo +"n"+
            "descripcion_abordo: "+mygeojson.features[0].properties.descripcion_abordo;
        }
      })
    }
  })
});

map.getTargetElement().addEventListener('pointerleave', function () {
  info.style.visibility = 'hidden';
});

I am stuck about how to solve the erratic behavior of the pointer after info is retrieved from the WMS layer (ie. hover on features of WMS layer).

How could I adapt the code to solve this? Here an image of the problem:

I’m currently developing a project utilizing React Router v7 framework where I need to implement protected routes. While I’ve successfully implemented the protection mechanism, I’m encountering an issue where the protected page’s layout briefly flashes before the redirect occurs. I want to prevent this behavior by ensuring the redirect happens before any page rendering takes place. Below are my route.jsx and protected.jsx implementations:

import { Outlet, useNavigate } from "react-router";
import { useDispatch } from "react-redux";
import { getTokenFromCookie } from "./tokenServices";
import { setOpenAuthModal } from "../redux/slices/authSlice";

const ProtectedRoute = () => {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const token = getTokenFromCookie();

  useEffect(() => {
    if (!token) {
      dispatch(setOpenAuthModal());
      navigate("/");
    }
  }, [token, dispatch, navigate]);

  return token ? <Outlet /> : null;
};

export default ProtectedRoute;

import { index, layout, prefix, route } from "@react-router/dev/routes";

export default [
  layout("./layouts/AppLayout.jsx", [
    index("routes/home/route.jsx"),
    route("/support", "routes/support/route.jsx"),
    route("/rooms/:villaId", "routes/room/route.jsx"),
    route("/archive/:cityName", "routes/archive-city/route.jsx"),

    layout("./services/auth/ProtectedRoute.jsx", [
      route("/profile", "routes/profile/dashboard/route.jsx"),
      route("/wallet", "routes/wallet/route.jsx"),
      route("/invite-friends", "routes/invite-friends/route.jsx"),
      route("/trips", "routes/trips/route.jsx"),
      ...prefix("/comments", [
        index("routes/comments/route.jsx"),
        route("/register/:vilaId", "routes/profile/registerComment/route.jsx"),
      ]),

      ...prefix("/host", [
        route("/profile", "routes/host/dashboard/route.jsx"),
        ...prefix("/comments", [
          index("routes/host/comments/route.jsx"),
          route(
            "/:commentId",
            "routes/host/comments/residenceHostComments/route.jsx",
          ),
        ]),
        route("/list-of-resisdence", "routes/host/listOfResisdence/route.jsx"),
        route("/statistics", "routes/host/statistics/route.jsx"),

        // layout("./services/auth/ProtectedReservationHost.jsx", [
        layout("./layouts/hostRegistration/HostRegistrationLayout.jsx", [
          ...prefix("/residence-registration", [
            route(
              "/specifications",
              "routes/host/residence-registration/specifications/create/route.jsx",
            ),
            route(
              "edit/specifications/:registrationId",
              "routes/host/residence-registration/specifications/edit/route.jsx",
            ),
            route(
              "edit/rooms/:registrationId",
              "routes/host/residence-registration/rooms/route.jsx",
            ),
            route(
              "edit/images/:registrationId",
              "routes/host/residence-registration/images/route.jsx",
            ),
            route(
              "edit/facilities/:registrationId",
              "routes/host/residence-registration/facilities/route.jsx",
            ),
            route(
              "edit/neighborhood/:registrationId",
              "routes/host/residence-registration/neighborhood/route.jsx",
            ),
            route(
              "edit/rules/:registrationId",
              "routes/host/residence-registration/rules/route.jsx",
            ),
            route(
              "edit/prices/:registrationId",
              "routes/host/residence-registration/prices/route.jsx",
            ),
            route(
              "edit/documents/:registrationId",
              "routes/host/residence-registration/documents/route.jsx",
            ),
          ]),
        ]),
        // ]),
      ]),

      layout("routes/reservation/route.jsx", [
        route(
          "reservation/checkout/:reserveId",
          "routes/reservation/check/route.jsx",
        ),
        route(
          "reservation/payment/:reserveId",
          "routes/reservation/payment/route.jsx",
        ),
        route(
          "reservation/delivery/:reserveId",
          "routes/reservation/delivery/route.jsx",
        ),
      ]),
    ]),
  ]),
  // layout("./services/auth/ProtectedRoute.jsx", [
  //   route("/invoice/reserve/:reserveId", "routes/invoice-reserve/route.jsx"), // ✅ Invoice route here
  // ]),
];

I have a txt file that is on my PC, that txt file gets updated every time a new song plays in my media player. I need a way to sync this txt file somewhere where I can access it over the internet from a website using javascript, but it needs to remain synced to the one on my PC.

Is there any service that can allow me to sync the txt file and have a url that can publicly read the raw text from the file?

I’d like to take the synced text, convert it to a string, and update that every 30 seconds or so on my own website.

I have a large number of SVG files that represent frames of a bar chart race animation. I’ve uploaded a sample of these files here:
https://easyupload.io/69jzns

I want to merge them into a single animated SVG file and set a specific FPS (frames per second) for the animation. Each SVG file should act as one frame in the final animated SVG.

I’ve tried the following tools but couldn’t achieve the desired result:

• https://github.com/astraw/svg_stack
• https://github.com/btel/svg_utils
• https://github.com/DannyBen/victor
• http://www.imagemagick.org/Usage/montage/

What tool or method can accomplish this? Any help would be appreciated!

I’m trying to add a some code that will show the correct answer if the incorrect one have been selected, is this possible if so can someone please show / guide me on how to do this.

as you can see from the attached photo when a incorrect answer is selected you are not able to view the correct one you just move on, how could i change this to either automatically show the correct answer or add a “check answer button”

my code is;

const questions = [
    {
        question: "What is a checkout score for 156?",
        answers: [
            {text: "T19, T19, D20", correct: false},
            {text: "T20, T20, D20", correct: false},
            {text: "T20, T14, D16", correct: false},
            {text: "T20, T20, D18", correct: true}
        ]
    },
    {
        question: "How many world titles does Michael van Gerwen have?",
        answers: [
            { text: "5", correct: false },
            { text: "1", correct: false },
            { text: "0", correct: false },
            { text: "3", correct: true }
        ]
    },
    {
        question: "What is the highest possible checkout in darts?",
        answers: [
            { text: "180", correct: false },
            { text: "170", correct: true },
            { text: "160", correct: false },
            { text: "150", correct: false }
        ]
    },
    {
        question: "Who won the PDC World Championship on their debut appearance in 2018?",
        answers: [
            { text: "Nathan Aspinall", correct: false },
            { text: "Glen Durrant", correct: false },
            { text: "Rob Cross", correct: true },
            { text: "Dimitri Van Den Bergh", correct: false }
        ]
    },
    {
        question: "Which player is nicknamed Bully Boy?",
        answers: [
            { text: "Nathan Aspinall", correct: false },
            { text: "Joe Cullen", correct: false },
            { text: "Jonny Clayton", correct: false },
            { text: "Michael Smith", correct: true }
        ]
    },
    {
        question: "Which player is known for his intense stare at the dartboard and aggressive celebrations?",
        answers: [
            { text: "Adrian Lewis", correct: false },
            { text: "Gerwyn Price", correct: true },
            { text: "Jonny Clayton", correct: false },
            { text: "Danny Noppert", correct: false }
        ]
    },
    {
    question: "What is the standard height from the floor to the bullseye in professional darts?",
    answers: [
        { text: "5 feet 4 inches", correct: false },
        { text: "6 feet", correct: false },
        { text: "4 feet 10 inches", correct: false },
        { text: "5 feet 8 inches", correct: true }
    ]
},
{
question: "In professional darts, what is the “Madhouse”?",
answers: [
    { text: "Missing three darts at double 1", correct: false },
    { text: "Needing double 1 to win", correct: true },
    { text: "Scoring three consecutive busts", correct: false },
    { text: "Hitting only single 5s in a turn", correct: false }
    ]
},
{
    question: "What is the minimum number of darts needed to win a game of 501?",
    answers: [
        { text: "12", correct: false },
        { text: "6", correct: false },
        { text: "15", correct: false },
        { text: "9", correct: true }
        ]
    },
    {
        question: "Phil Taylor won a record 16 World Championships. In which year did he win his first title?",
        answers: [
            { text: "1990", correct: true },
            { text: "1995", correct: false },
            { text: "1992", correct: false },
            { text: "1998", correct: false }
            ]
        },

]

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");

let currentQuestionIndex = 0;
let score = 0;


/**
 * Resets the quiz by setting the question index and score to their original values (0). 
 * Hides the "Next" button and prepares it for the next question, and then displays the first question. 
 * This function ensures the quiz starts fresh and is ready for the user.
 */

function startQuiz() {
    currentQuestionIndex = 0; // Resets the question index to start from the first question.
    score = 0; // Resets the score to 0 for a new quiz session.
    nextButton.innerHTML = "Next"; // Sets the button text to "Next".
    nextButton.style.display = "none"; // Hides the button until an answer is selected.
    nextButton.onclick = nextQuestion; // Sets the button to call the nextQuestion function when clicked.
    showQuestion(); // Calls the showQuestion function to display the first question.
}

/**
 * Displays the current question and its answers, setting up the UI for user interaction.
 * 1. Clears previous question and answers using `resetState()`.
 * 2. Retrieves and displays the current question with its number.
 * 3. Loops through each answer, creating a button for each:
    - Sets button text, adds styling, and appends it to the container.
 * 4. If the answer is correct, adds a `data.correct` attribute.
 * 5. Adds a click event listener to each button to trigger `selectAnswer`.
 */

function showQuestion() {
    resetState(); // Clears the previous question and answers
    let currentQuestion = questions[currentQuestionIndex]; // Gets the current question
    let questionNo = currentQuestionIndex + 1; // Sets the question number
    questionElement.innerHTML = questionNo + ". " + currentQuestion.question; // Displays the current question number and text
    
    currentQuestion.answers.forEach(answer => { // Loops through answers and creates a button
        const button = document.createElement("button"); // Creates a new button element
        button.innerHTML = answer.text; // Sets the button text to the answer text
        button.classList.add("btn"); // Adds the "btn" class to the button for styling
        answerButtons.appendChild(button); // Appends button to the answer container
 
        if (answer.correct) { // If the answer is correct, set a data attribute
            button.dataset.correct = answer.correct;
        }

        button.addEventListener("click", selectAnswer); // Adds an event listener to the button to call selectAnswer when clicked
    });
}

/**
 * Resets the screen by hiding the "Next" button and clearing the answer buttons.
 * 1. Hides the "Next" button so it’s not visible.
 * 2. Removes all the answer buttons from the screen.
 */

function resetState() {
    nextButton.style.display = "none"; // Hides the "Next" button
    while (answerButtons.firstChild) {
        answerButtons.removeChild(answerButtons.firstChild); // Removes all child elements from the answer container
    }
}

/**
 * Runs when the user picks an answer.
 * 1. Checks if the answer is right.
 * 2. Adds a "correct" or "incorrect" class to the button.
 * 3. Updates the score if the answer is right.
 * 4. Shows the "Next" button to move to the next question.
 */

function selectAnswer(e) { 
    const selectedBtn = e.target;
    const isCorrect = selectedBtn.dataset.correct === "true"; // Checks if the selected answer is correct

    if (isCorrect) {
        selectedBtn.classList.add("correct"); // Adds "correct" class to the button for styling
        score++; // Increases the score if the answer is correct
    } else {
        selectedBtn.classList.add("incorrect"); // Adds "incorrect" class to the button for styling
    }
    
         // Disable all buttons after an answer is selected
    const allButtons = answerButtons.querySelectorAll("button");
    allButtons.forEach(button => button.disabled = true);



    nextButton.style.display = "block"; // Display "Next" button once an answer is selected
}

/**
 * Goes to the next question or wraps up the quiz if you're out of questions.
 * - If there are more questions, it shows the next one.  
 * - If you're done, it displays your final score and a "Restart" button.  
 * - Clicking "Restart" reloads the page so you can play again.  
 */

function nextQuestion() {
    currentQuestionIndex++; // Move to the next question

    if (currentQuestionIndex < questions.length) { // If there are more questions
        showQuestion(); // Show the next question
    } else {
        questionElement.innerHTML = `Quiz Finished! Your score: ${score}/${questions.length}`; // Displays the final score
        answerButtons.innerHTML = ""; // Clears any remaining answer buttons
        nextButton.innerHTML = "Restart"; // Sets the button text to "Restart"
        nextButton.style.display = "block"; // Shows the "Restart" button
        nextButton.addEventListener("click", () => { // Adds an event listener to restart the quiz
            window.location.reload(); // Reloads the page to restart the quiz
        } );
    }
}

nextButton.onclick = startQuiz; // Starts the quiz when the page loads

startQuiz();

is anyone able to help or point me in the right direction please?

I’m building a Next.js application using the App Router and I’m having trouble accessing route parameters from parent components that are higher in the routing hierarchy.
My route structure:

app/page.tsx (Root page)

app/layout.tsx (Root layout)

app/[category]/page.js (Category-specific layout)

I need to access the [category] dynamic parameter from either app/page.tsx or app/layout.tsx`, which are strictly server components.

For example, if the user navigates to /products/electronics, I want to be able to access the value electronics in my root layout or page, but I’m not sure how to do this with server components since these parameters only exist when that segment of the URL is accessed.

I am creating a browser extension using WXT
I have set up the basic styles for popup.html and now i was trying to create a element from the dom using the extension. In order to do that i have written up a very basic js code which creates a video element (This is to test if it actually works and to my surprise i got an error saying “document is not defined”). So after debugging for a while i found out that we cannot access dom or storage related stuffs from background worker. In order to get access to these we would have to do so by using content script.

So, then i started digging into implementing an approach where i can create an element using content script of the extension but i cant seem to wrap my head around it.

For you guys:

# popup.html
      const [tab] = await browser.tabs.query({ active: true, currentWindow: true })
      if (!tab?.id) throw new Error("No tab found!")
      console.log("tab ", tab)


      const resp = await browser.tabs.sendMessage(tab.id, "to_content_script")
      console.log("resp ", resp)

# background.ts
import { browser } from "wxt/browser";

export default defineBackground(() => {
console.log("background worker initialized")
}

# content.ts
export default defineContentScript({
  matches: ["*://*/*"],

  async main() {
    console.log("content script initialized")
  },
}); 

CURRENT PROBLEM: the content script never actually initialized, no matter what i do.
I tried sending an message from popup.html to content.ts file where i was listening for the message.
I also tried sending a message from popup.html to background.ts(This worked), then from background.ts to content.ts file, where this didnt worked.

# wxt.config.ts
import { defineConfig } from 'wxt';

// See https://wxt.dev/api/config.html
export default defineConfig({
  extensionApi: 'chrome',
  srcDir: 'src',
  modules: ['@wxt-dev/module-react'],
  runner: {
    startUrls: ["https://wxt.dev"],
  },
  manifest: {
    version: "0.0.1",
    permissions: ["activeTab", "tabCapture", "tabs", "webRequest", "scripting"],
    host_permissions: ["<all_urls>"],
    background: {
      service_worker: "background.ts",
      type: "module"
    },
    content_scripts: [
      {
        "matches": ["<all_urls>"],
        "js": ["content-scripts/content.js"]
      }
    ],
    content_security_policy: {
      extension_pages: "script-src 'self'; object-src 'self';",
    },
    web_accessible_resources: [
      {
        resources: ["*"],
        matches: ["<all_urls>"],
      },
    ],
  }
});

TL/DR: How to display each glyph from a font file using some parsing method that shows all of the characters.

I am trying to build a glyph viewer for one of several fonts I want to show on a page.

Currently I have this codesandbox (this is cramped so there is a full page version here)

Here is my JS:

import opentype from "opentype.js";
const htmlElem = document.querySelector("html");

const fontPath = "/src/resources";

const fontMap = (fontName) => {
  const url = `${fontPath}/${fontName}`;
  const buffer = fetch(url).then((res) => res.arrayBuffer());

  buffer.then((data) => {
    const wrapper = htmlElem.querySelector(".characters ul");
    const font = opentype.parse(data);
    const glyphs = font.glyphs.glyphs;
    for (const [key, value] of Object.entries(glyphs)) {
      if (value.name !== null) {
        const template = `<li>${value.name}</li>`;
        wrapper.insertAdjacentHTML("beforeend", template);
        console.log(value);
      }
    }
  });
};

fontMap("Calluna-Regular.otf");

When I log each glyph I get quite a lot of data about the element, however I want to know how to access it on the page using the correct property.

Currently trying to access item.name which works fine for ‘A’, ‘B’, ‘C’ etc, but numbers are named in full ‘one’, ‘two’, etc. And punctuation marks, I guess name makes sense.

I tried adding a prefix to output as html entities, like <li>&${value.name};</li> but of course that will prefix the standard ‘A’ with an ‘&’.

Is there a universal way to parse each character and use some encoding to display each item on the page? Hex maybe but not transform the simple characters. The other thing I wondered is whether certain glyphs have particular properties that distinguish them. I think the unicode property is the only one I can access that will help me.

Also in this font the letter ‘A’ has unicode: 64 in the mapping but the universal unicode character for ‘A’ is U+0041 (or is that already converted using some system), I don’t know if this is some peculiarity of the font file.

Any help greatly appreciated.

In CSS, if you want to target a specific element that immediately follows another specific element, you would use the next-sibling combinator:

<style>
/* any 'p' that immediately follows 'div' will be red */
div + p { color: red; }
</style>

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

But how to make it in JavaScript? I tried closest, but I’m not surprised it doesn’t work. If I understand its description on MDN, it is intended to work differently.

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      document.querySelector(input.closest('body > .output')).innerHTML = 'input.innerHTML';
    }
  }
</script>

How to make it work?

Preface:
I have an app where I want to allow users to enter mostly mathematical code to create a simulation. It currently uses mathjs to evaluate code snippets, but without control statements it’s a bit inflexible. Even allowing a user to import arbitrary code and inject it into mathjs is somewhat obtuse. What I’d like is something that is relatively robust against accidental mistakes by non-malicious users.

Both mathjs and scraggy do this by walking parsed syntax trees with optional contexts passed in to provide free variable scopes. That seems to incur a large runtime overhead though, so I’ve worked out an alpha alternative based on with statements and a Proxy’d Map-like object, and I’m hoping to get some constructive criticism about performance and relative safety.

Here was my intent:

1. prevent any writes to the globalThis, but allow access to global objects.
2. allow ‘scoped’ contexts (I only need 3 deep). implementation below is derived from mathjs
3. if a free variable is not found in any scope, create it in the current scope, otherwise update it in the scope its in.

Some lingering uncertainties:

• I’m currently not parsing the content of the code snippets at all to remove bad stuff, but I’m also thinking that may not be required.
• I don’t think I understand whether the [Symbol.unscopables] symbol would help protect me or help me shoot myself. I’d like to prevent someone from accidentally overwriting my Proxy’d object properties – is that the way to do that? Do I do that in the Proxy or the object?
• I haven’t yet done performance tests, but the Proxy certainly involves some overhead.

Here’s the underlying Map-like class:

class MapScope  {
  constructor (parent=null) {
    this.localMap = new Map()
    this.parentScope = parent;
  }

  has (key) {
    return this.localMap.has(key) ? true : this.parentScope?.has(key) ?? false;
  }

  get (key) {
    return this.localMap.get(key) ?? this.parentScope?.get(key)
  }

  set (key, value) {
    const iGetIt = ! this.parentScope?.has(key) || this.localMap.has(key);
    return iGetIt ? this.localMap.set(key, value) : this.parentScope.set(key, value);
  }

  keys () {
    if (this.parentScope) {
      return new Set([...this.localMap.keys(), ...this.parentScope.keys()])
    } else {
      return this.localMap.keys()
    }
  }
  
  size() { return this.localMap.size();}

  forEach(cb, thisArg=this.localMap) {
    this.localMap.forEach(cb, thisArg);
  }
  
  delete (key) {
   // return false;
    return this.localMap.delete(key)
  }

  deleteProperty (p) {
    //return false;
    return this.localMap.delete(p)
 m }

  clear () {
    return this.localMap.clear()
  }

  toString () {
    return this.localMap.toString()
  }
}

Here’s the traps object for the Proxy:

var mapTraps = {
  // This says that variables in the local scope shadow the global ones
  // and that any new variables will be in the local scope
  has(target, key) {
    console.log(`called: has(..., ${key})`);
    if (key in globalThis && ! target.has(key)) {
      return false;
    }
    return true;
  },

  get(target,key,receiver) {
    if (!target.has(key)) {
      if (key in globalThis) {
        console.log(`get ${key.toString()} from globalThis`);
        return globalThis[key];
      } else {
        return undefined;
      }
    }
    console.log(`get ${key.toString()} from target`);
    return target.get(key);
  },

  // 
  set(target, key, val){
    console.log(`called: set(..., ${key.toString()})`);
    return target.set(key,val);
  }
}

Here’s how you put these two together – vars because noodling in Node:

var mscope = new MapScope()
var nscope = new MapScope(mscope)
var rscope = new MapScope(nscope)
var mproxy = new Proxy(mscope, mapTraps)
var nproxy = new Proxy(nscope, mapTraps)
var rproxy = new Proxy(rscope, mapTraps)

So mscope is the toplevel scope, nscope is between it and rscope.

Testing looks like this:

with (mproxy) {t = 0}
--> 0
with (mproxy) {t += 2 * Math.random()}
--> 1.75....
with(rproxy) {t<5}
--> true
with(nproxy) {t<5}
--> true

The intended use though is to use these functions to create runtime functions to run user code in the appropriate scope. See: Changing function’s scope for a similar solution or the MDN write-ups on the with statement and Proxy.

function compileSnippet(exp) {
  return new Function ("fscope", `
    with(fscope) {
     return ${exp} ;
    }
  `);
}

var startFn = compileSnippet(startExpr);
var startEachFn = compileSnippet(startEachExpr);

// evaluate in scope - typically for side-effect

startFn(nproxy)
...
startEachFn(nproxy)
...
// endEachFn and endFn also